BOOTSTRAP-COMPONENTS

AGENDA

Navbar

Breadcrumbs

Pagination

Labels and badges

Alerts

NAVBAR

基本樣式的NAVBAR: 使用 ul加入 .nav，外包一層 div . Navbar-inner填入背景，再包一層 div .navbar呈現水平狀

使用 . Container固定NAVBAR寬度，在 a中加入 .brand作為標題，新增 li並加入 .divider-vertical顯示分隔線

使用 .navbar-form，在NAVBAR中對齊 form，在 .navbar後加入navbar-inverse改變背景，加入 input並設定 . search-query查詢輸入框

font-size

NAVBAR

Header的NAVBAR: 加入 . navbar-fixed-top，當捲動 scrollbar也依然存在，並對 body設定 padding :40px;不要讓NAVBAR擋住內容

Footer的NAVBAR: 加入 .navbar-fixed-bottom，當捲動scrollbar也依然存在

普通的Header:加入 . Navbar-static-top

font-size

BREADCRUMBS

對於無序列表 ul套用 .breadcrumb，即可擁有麵包屑的效果，對於分隔字可以加上 .divider，更換分隔字顏色、增加左右padding

font-size

PAGINATION

標準分頁，對內含無序列表的 div套用 .pagination樣式

分頁尺寸 :

.pagination-large、 .pagination-small、 .pagination-mini

分頁對齊 :

pagination-centered(text-align:center;)

pagination-right(text-align:right;)

font-size

PAGINATION

換頁，對 ul加入 .pager，套用換頁樣式，預設為置中

對 li加入 .previous、 .next，將換頁連結置於兩側 float:left float:right

font-size

LABELS AND BADGESfont-size .table-striped

套用於文字區塊 .label

.label.label-success

.label.label-warning

.label.label-important

.label.label-info

.label.label-inverse

.badge

.badge.badge-success

.badge.badge-warning

.badge.badge-important

.badge.badge-info

.badge.badge-inverse

ALERTSfont-size .table-striped

提示 : 對 div套用 .alert樣式，在 div內新增 button，並對button套用 .close、加入 data-dismiss=“alert” 屬性

其他警告含意 : .alert-info、 .alert-danger、 .alert-success