SlideShare a Scribd company logo
1 of 6
BOOTSTRAP-COMPONENTS
AGENDA
 Dropdowns
 Button groups
 Button dropdowns
 Navs
font-size

DROPDOWNS

要呈現的ul li 必須包含於 dropdown 的class中 或是 定義
position:relative中
<div class="dropdown">
<ul class="dropdown-menu" style="display: block;">
<li> <a href="#">Action</a></li>
<li> <a href="#">Another action</a></li>

<li> <a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>

</div>
font-size

BUTTON GROUPS

一維按鈕組,btn-group:

多維按鈕組,btn-toolbar:

垂直按鈕組,btn-group-vertical:
font-size

BUTTON DROPDOWN MENUS

按鈕式下拉選單,將下拉選單dropdown-menu,置於btn-group
中,並設定按鈕class為dropdown-toggle、加入data-toggle屬性

按鈕分列式下拉選單,左邊是單純的按鈕,右邊是按鈕式下拉選
單
按鈕向上彈出式選單,dropup
font-size
.table-striped

NAVS

基本導航頁: 於ul 加入 .nav-tabs
pills: 相同於基本導航的結構,但加入的是 .nav-pills

堆疊式導航頁: 對於上面兩種橫向導航頁,再加入.nav-stacked

結合下拉選單: 需搭配data-toggle=“dropdown” 的 JavaScript
導航列表: 使用.nav .nav-list
灰色標頭 .nav-header
分隔線 .divider

More Related Content

More from LearningTech

More from LearningTech (20)

vim
vimvim
vim
 
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 &amp; activator
Reflection &amp; activatorReflection &amp; activator
Reflection &amp; 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
 

Bootstrap - component