Your SlideShare is downloading. ×
Boot strap component 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Boot strap component 2

704
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
704
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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