資訊說明框

edfault 標題

css樣式為 note note-edfault內容說明文字內容說明文字內容說明文字內容說明文字內容說明文字內容說明文字內容說明文字內容說明文字內容說明文字內容說明文字

note note-default

note note-primary

note note-secondary

note note-success

note note-info

note note-warning

note note-danger

note note-light

note note-dark

note note-main

alert文字

一般

連結顏色

額外的內容

關閉

badge標籤

一般

default primary secondary success info warning danger light dark main

圓角

default primary secondary success info warning danger light dark main

連結

defaultprimarysecondarysuccessinfowarningdangerlightdarkmain

button 按鈕

按鈕
按鈕框線
使用型態 Link
<a class="btn btn-main" href="#" role="button">Link</a>
<button class="btn btn-main" type="submit">Button</button>
<input class="btn btn-main" type="button" value="Input">
<input class="btn btn-main" type="submit" value="Submit">
<input class="btn btn-main" type="reset" value="Reset">
a.btn.btn-main(href='# ', role='button ') Link
button.btn.btn-main(type='submit ') Button
input.btn.btn-main(type='button ', value='Input ')
input.btn.btn-main(type='submit ', value='Submit ')
input.btn.btn-main(type='reset ', value='Reset ')
按鈕大小 Link Large Link Small Link Large Link Small
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<a class="btn btn-main btn-lg mx-1" href="# " role="button ">Link Large </a>
<a class="btn btn-main btn-sm mx-1" href="# " role="button ">Link Small </a>
<button class="btn btn-outline-primary btn-lg" type="button ">Large button</button>
<button class="btn btn-outline-primary btn-sm" type="button ">Small button</button>
<a class="btn btn-outline-main btn-lg mx-1" href="# " role="button ">Link Large </a>
<a class="btn btn-outline-main btn-sm mx-1" href="# " role="button ">Link Small </a>
button.btn.btn-primary.btn-lg(type='button ') Large button
button.btn.btn-primary.btn-sm(type='button ') Small button
a.btn.btn-main.btn-lg.mx-1(href='# ', role='button ') Link Large 
a.btn.btn-main.btn-sm.mx-1(href='# ', role='button ') Link Small 
button.btn.btn-outline-primary.btn-lg(type='button ') Large button
button.btn.btn-outline-primary.btn-sm(type='button ') Small button
a.btn.btn-outline-main.btn-lg.mx-1(href='# ', role='button ') Link Large 
a.btn.btn-outline-main.btn-sm.mx-1(href='# ', role='button ') Link Small 
滿寬
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
button.btn.btn-primary.btn-lg.btn-block(type='button') Block level button
啟用狀態 Primary linkLink Primary linkLink
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
a.btn.btn-primary.btn-lg.active(href='#', role='button', aria-pressed='true') Primary link
a.btn.btn-secondary.btn-lg.active(href='#', role='button', aria-pressed='true') Link
button.btn.btn-lg.btn-primary(type='button', disabled='') Primary button
button.btn.btn-secondary.btn-lg(type='button', disabled='') Button
a.btn.btn-primary.btn-lg.disabled(href='#', role='button', aria-disabled='true') Primary link
a.btn.btn-secondary.btn-lg.disabled(href='#', role='button', aria-disabled='true') Link
切換狀態
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
button.btn.btn-primary(type='button', data-toggle='button', aria-pressed='false', autocomplete='off') ingle toggle

導覽 (Navs)

分頁 (Pagination)

分頁
分頁圖示
禁用
尺寸
對齊

tab切換

collapse折疊

折疊

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

多個目標

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

卡片折疊

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

彈出提示框 (Popovers)

Popovers
四個方向