輸入框組

添加額外元素.input-group-addon

外包元素.input-group>input-group-addon+form-control

<div class="input-group"><span class="input-group-addon">額外元素</span><input type="text" class="form-control"/> </div>

?

輸入框組尺寸

控制類.input-group-*: .input-group-lg/.input-group-sm

<div class="input-group input-group-lg"><span class="input-group-addon" id="sizing-addon1">額外元素</span><input type="text" class="form-control"> </div>

?

額外元素添加單選或多選

在額外元素中嵌套單選或多選按鈕元素

<div class="input-group"><span class="input-group-addon"><input type="radio" /></span><input type="text" class="form-control" /> </div>

?

額外元素為按鈕

額外按鈕類.input-group-btn

<div class="input-group"><span class="input-group-btn"><button class="btn btn-default">額外元素按鈕</button></span><input type="text"class="form-control" /> </div>

?

額外元素為下拉按鈕菜單

.input-group-btn包含下拉按鈕菜單元素(包括觸發(fā)器和下拉菜單)

<div class="input-group"><div class="input-group-btn"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown">button <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="">item1</a></li><li><a href="">item2</a></li></ul></div><input type="text" class="form-control" /> </div>

?

額外元素為分裂式按鈕下拉菜單

額外元素包含分裂式按鈕下拉菜單(按鈕，觸發(fā)器和下拉菜單)

<div class="input-group"><div class="input-group-btn"><button class="btn btn-default dropdown-toggle">button</button><button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu"><li><a href="">item1</a></li><li><a href="">item2</a></li></ul></div><input type="text" class="form-control" /> </div>

?

導(dǎo)航

基類.nav ?{padding-left/margin-bottom/list-style}

?

標簽頁導(dǎo)航

標簽頁類.nav-tabs ?活動選項類.active 選項添加role="presentation"

<ul class="nav nav-tabs"><li role="presentation" class="active"><a href="#home">Home</a></li><li role="presentation"><a href="#profile">Profile</a></li><li role="presentation"><a href="#messages">Messages</a></li> </ul>

?

膠囊式標簽導(dǎo)航.nav-pills

<ul class="nav nav-pills"><li role="presentation" class="active"><a href="#home">Home</a></li><li role="presentation"><a href="#profile">Profile</a></li><li role="presentation"><a href="#messages">Messages</a></li> </ul>

膠囊式標簽導(dǎo)航(堆疊狀).nav-stacked

<ul class="nav nav-pills nav-stacked"><li role="presentation" class="active"><a href="#home">Home</a></li><li role="presentation"><a href="#profile">Profile</a></li><li role="presentation"><a href="#messages">Messages</a></li> </ul>

?

禁用的鏈接

?對選項添加類.disabled

<ul class="nav nav-tabs"><li role="presentation" class="active"><a href="#">Home</a></li><li role="presentation" class="disabled"><a href="#">Profile</a></li><li role="presentation"><a href="#">Messages</a></li> </ul>

?

帶下拉菜單的標簽頁面

在某一個選項中添加下拉菜單組件

<ul class="nav nav-*"><li role="presentation" class="active"><a href="#">Home</a></li><li role="presentation"><a href="#">Profile</a></li><li role="presentation" class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">Messages <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="">item1</a><a href="">item2</a></li></ul></li> </ul>

?

下拉導(dǎo)航頁面

外包元素>{[導(dǎo)航ul(基類.nav＋樣式類.*s)>選項li(基本選項role="persentation"＋下拉選項)]＋[選項對應(yīng)內(nèi)容]}

<div><ul class="nav nav-*s" role="tablist"><li role="presentation" class="active"><a href="#item1" data-toggle="*">item1</a></li><li role="presentation"><a href="#item2" data-toggle="*">item2</a></li><li role="presentation"><a href="#item3" data-toggle="*">item3</a></li><li role="presentation" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">item4 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#item4-1" data-toggle="*">item4-1</a></li><li><a href="#item4-2" data-toggle="*">item4-2</a></li><li><a href="#item4-3" data-toggle="*">item4-3</a></li></ul></li></ul><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="item1">item1-content</div><div role="tabpanel" class="tab-pane" id="item2">item2-content</div><div role="tabpanel" class="tab-pane" id="item3">item3-content</div><div role="tabpanel" class="tab-pane" id="item4-1">item4-1-content</div><div role="tabpanel" class="tab-pane" id="item4-2">item4-2-content</div><div role="tabpanel" class="tab-pane" id="item4-3">item4-3-content</div></div> </div>

?

轉(zhuǎn)載于:https://www.cnblogs.com/bsj2016/p/5483095.html

總結(jié)

以上是生活随笔為你收集整理的[Bootstrap]组件（三）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。