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

Boot strap component 2

on

  • 827 views

 

Statistics

Views

Total Views
827
Views on SlideShare
826
Embed Views
1

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 1

http://www.slidesharenet.org 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Boot strap component 2 Boot strap component 2 Presentation Transcript

  • BOOTSTRAP-COMPONENTS
  • AGENDA  Navbar  Breadcrumbs  Pagination  Labels and badges  Alerts
  • 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查詢輸入框 View slide
  • font-size NAVBAR  Header的NAVBAR: 加入. navbar-fixed-top,當捲動scrollbar也依然存在,並 對body設定padding :40px;不要讓NAVBAR擋住內容  Footer的NAVBAR: 加入.navbar-fixed-bottom,當捲動scrollbar也依然存在  普通的Header:加入. Navbar-static-top View slide
  • 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 .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
  • font-size .table-striped ALERTS  提示: 對div套用.alert樣式,在div內新增button,並對button套 用.close、加入data-dismiss=“alert” 屬性  其他警告含意: .alert-info、.alert-danger、.alert-success