SlideShare una empresa de Scribd logo
1 de 9
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查詢輸入框
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
.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

Más contenido relacionado

Más de LearningTech

Más de LearningTech (20)

PostCss
PostCssPostCss
PostCss
 
ReactJs
ReactJsReactJs
ReactJs
 
Docker
DockerDocker
Docker
 
Semantic ui
Semantic uiSemantic ui
Semantic ui
 
node.js errors
node.js errorsnode.js errors
node.js errors
 
Process control nodejs
Process control nodejsProcess control nodejs
Process control nodejs
 
Expression tree
Expression treeExpression tree
Expression tree
 
SQL 效能調校
SQL 效能調校SQL 效能調校
SQL 效能調校
 
flexbox report
flexbox reportflexbox report
flexbox report
 
Vic weekly learning_20160504
Vic weekly learning_20160504Vic weekly learning_20160504
Vic weekly learning_20160504
 
Reflection & activator
Reflection & activatorReflection & activator
Reflection & activator
 
Peggy markdown
Peggy markdownPeggy markdown
Peggy markdown
 
Node child process
Node child processNode child process
Node child process
 
20160415ken.lee
20160415ken.lee20160415ken.lee
20160415ken.lee
 
Peggy elasticsearch應用
Peggy elasticsearch應用Peggy elasticsearch應用
Peggy elasticsearch應用
 
Expression tree
Expression treeExpression tree
Expression tree
 
Vic weekly learning_20160325
Vic weekly learning_20160325Vic weekly learning_20160325
Vic weekly learning_20160325
 
D3js learning tips
D3js learning tipsD3js learning tips
D3js learning tips
 
git command
git commandgit command
git command
 
Asp.net MVC DI
Asp.net MVC DIAsp.net MVC DI
Asp.net MVC DI
 

Boot strap component 2