BOOTSTRAP-COMPONENTS
AGENDA
 Navbar
 Breadcrumbs
 Pagination
 Labels and badges

 Alerts
font-size

NAVBAR

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

 使用. Container固定NAVBAR寬度,在...
font-size

NAVBAR

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

 Footer的...
font-size

BREADCRUMBS

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

PAGINATION

 標準分頁,對內含無序列表的div套用.pagination樣式
 分頁尺寸:
.pagination-large、.pagination-small、.pagination-mini

 分...
font-size

PAGINATION

 換頁,對ul加入.pager,套用換頁樣式,預設為置中
 對li加入.previous、.next,將換頁連結置於兩側float:left
float:right
font-size
.table-striped

LABELS AND BADGES

 套用於文字區塊
 .label
 .label.label-success
 .label.label-warning
 .label.lab...
font-size
.table-striped

ALERTS

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

 其他警告含意...
Upcoming SlideShare
Loading in …5
×

Boot strap component 2

900 views
799 views

Published on

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
900
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Boot strap component 2

  1. 1. BOOTSTRAP-COMPONENTS
  2. 2. AGENDA  Navbar  Breadcrumbs  Pagination  Labels and badges  Alerts
  3. 3. font-size 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查詢輸入框
  4. 4. font-size NAVBAR  Header的NAVBAR: 加入. navbar-fixed-top,當捲動scrollbar也依然存在,並 對body設定padding :40px;不要讓NAVBAR擋住內容  Footer的NAVBAR: 加入.navbar-fixed-bottom,當捲動scrollbar也依然存在  普通的Header:加入. Navbar-static-top
  5. 5. font-size BREADCRUMBS 對於無序列表ul套用.breadcrumb,即可擁有麵包屑的效果,對於 分隔字可以加上.divider,更換分隔字顏色、增加左右padding
  6. 6. font-size PAGINATION  標準分頁,對內含無序列表的div套用.pagination樣式  分頁尺寸: .pagination-large、.pagination-small、.pagination-mini  分頁對齊:  pagination-centered(text-align:center;)  pagination-right(text-align:right;)
  7. 7. font-size PAGINATION  換頁,對ul加入.pager,套用換頁樣式,預設為置中  對li加入.previous、.next,將換頁連結置於兩側float:left float:right
  8. 8. font-size .table-striped LABELS AND BADGES  套用於文字區塊  .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
  9. 9. font-size .table-striped ALERTS  提示: 對div套用.alert樣式,在div內新增button,並對button套 用.close、加入data-dismiss=“alert” 屬性  其他警告含意: .alert-info、.alert-danger、.alert-success

×