Boot strap component 2
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
873
On Slideshare
872
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 1

http://www.slidesharenet.org 1

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