-
標(biāo)簽導(dǎo)航欄
標(biāo)簽形導(dǎo)航是通過(guò)“nav-tabs”樣式來(lái)實(shí)現(xiàn)。在制作標(biāo)簽形導(dǎo)航時(shí)需要在原導(dǎo)航“nav”上追加此類(lèi)名
<ul class="nav nav-tabs">
? ? <li><a href="##">Home</a></li>
? <li><a href="##">CSS3</a></li>
? <li><a href="##">Sass</a></li>
? <li><a href="##">jQuery</a></li>
? <li><a href="##">Responsive</a></li>
</ul>
查看全部 -
導(dǎo)航欄基礎(chǔ)樣式
主要通過(guò)“.nav”樣式。默認(rèn)的“.nav”樣式不提供默認(rèn)的導(dǎo)航樣式，必須附加另外一個(gè)樣式才會(huì)有效，比如“nav-tabs”、“nav-pills”之類(lèi)
<ul class="nav nav-tabs">
? ? <li><a href="##">Home</a></li>
? ? <li><a href="##">CSS3</a></li>
? <li><a href="##">Sass</a></li>
? <li><a href="##">jQuery</a></li>
? <li><a href="##">Responsive</a></li>
</ul>
查看全部 -
按鈕向上向下按鈕
向下：在<button>標(biāo)簽中添加一個(gè)“<span>”標(biāo)簽元素，并且命名為“caret”
<button?class="btn?btn-default?dropdown-toggle"?data-toggle="dropdown"?type="button">按鈕下拉菜單<span?class="caret"></span></button>
向上: 需要在“.btn-group”類(lèi)上追加“dropup”類(lèi)名(如果是普通向上彈出下拉菜單，你只需要在“dropdown”類(lèi)名基礎(chǔ)上追加“dropup”類(lèi)名即可)
查看全部 -
等分按鈕
只需要在按鈕組“btn-group”上追加一個(gè)“btn-group-justified”類(lèi)名
<div?class="btn-wrap"> <div?class="btn-group?btn-group-justified"> ??<a?class="btnbtn-default"?href="#">首頁(yè)</a> ??<a?class="btnbtn-default"?href="#">產(chǎn)品展示</a> ??<a?class="btnbtn-default"?href="#">案例分析</a> ??<a?class="btnbtn-default"?href="#">聯(lián)系我們</a> </div> </div>
查看全部 -
垂直按鈕分組
只需要把水平分組的“btn-group”類(lèi)名換成“btn-group-vertical
<div?class="btn-group-vertical"> <button?class="btnbtn-default"?type="button">首頁(yè)</button> <button?class="btnbtn-default"?type="button">產(chǎn)品展示</button> <button?class="btnbtn-default"?type="button">案例分析</button> <button?class="btnbtn-default"?type="button">聯(lián)系我們</button> <div?class="btn-group"> ???<button?class="btnbtn-default?dropdown-toggle"?data-toggle="dropdown"?type="button">關(guān)于我們<span?class="caret"></span></button> ???<ul?class="dropdown-menu"> ??????<li><a?href="##">公司簡(jiǎn)介</a></li> ??????<li><a?href="##">企業(yè)文化</a></li> ??????<li><a?href="##">組織結(jié)構(gòu)</a></li> ??????<li><a?href="##">客服服務(wù)</a></li> </ul> </div>
查看全部 -
嵌套按鈕分組(類(lèi)似導(dǎo)航菜單)
只需要把當(dāng)初制作下拉菜單的“dropdown”的容器換成“btn-group”
<div?class="btn-group"> <button?class="btnbtn-default"?type="button">首頁(yè)</button> <button?class="btnbtn-default"?type="button">產(chǎn)品展示</button> <button?class="btnbtn-default"?type="button">案例分析</button> <button?class="btnbtn-default"?type="button">聯(lián)系我們</button> <div?class="btn-group"> ???<button?class="btnbtn-default?dropdown-toggle"?data-toggle="dropdown"?type="button">關(guān)于我們<span?class="caret"></span></button>???<ul?class="dropdown-menu"> ?????????<li><a?href="##">公司簡(jiǎn)介</a></li> ?????????<li><a?href="##">企業(yè)文化</a></li> ?????????<li><a?href="##">組織結(jié)構(gòu)</a></li> ?????????<li><a?href="##">客服服務(wù)</a></li>????</ul></div> </div>
查看全部 -
按鈕組的大小調(diào)節(jié)
.btn-group-lg:
.btn-group-sm:
.btn-group-xs:
查看全部 -
按鈕工具欄
將按鈕組“btn-group”按組放在一個(gè)大的容器“btn-toolbar”中
<div?class="btn-toolbar"> ??<div?class="btn-group"> ????… ??</div> ??<div?class="btn-group"> ????… ??</div> ??<div?class="btn-group"> ????… ??</div> ??<div?class="btn-group"> ????… ??</div> </div>
查看全部 -
按鈕組，將按鈕放在一個(gè)容器中
除了可以使用<button>元素之外，還可以使用其他標(biāo)簽元素，比如<a>標(biāo)簽。唯一要保證的是：不管使用什么標(biāo)簽，“.btn-group”容器里的標(biāo)簽元素需要帶有類(lèi)名“.btn”
<div?class="btn-group"> ??<button?type="button"?class="btn?btn-default"> ?????<span?class="glyphicon?glyphicon-step-backward"></span> ??</button> ???… ??<button?type="button"?class="btn?btn-default"> ?????<span?class="glyphicon?glyphicon-step-forward"></span> ??</button> </div>
查看全部 -
下拉菜單的當(dāng)前狀態(tài)，在li的class中加active
<div?class="dropdown"> ??<button?class="btn?btn-default?dropdown-toggle"?type="button"?id="dropdownMenu1"?data-toggle="dropdown"> ??下拉菜單 ??<span?class="caret"></span> ??</button> ??<ul?class="dropdown-menu"?role="menu"?aria-labelledby="dropdownMenu1"> ????<li?role="presentation"?class="active"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li> ????…. ????<li?role="presentation"?class="disabled"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li> ??</ul> </div>
查看全部 -
下拉菜單的對(duì)齊方式
Bootstrap框架中下拉菜單默認(rèn)是左對(duì)齊，如果你想讓下拉菜單相對(duì)于父容器右對(duì)齊時(shí)，可以在“dropdown-menu”上添加一個(gè)“pull-right”或者“dropdown-menu-right”類(lèi)名
<div?class="dropdown"> ??<button?class="btn?btn-default?dropdown-toggle"?type="button"?id="dropdownMenu1"?data-toggle="dropdown"> ??下拉菜單 ??<span?class="caret"></span> ??</button> ??<ul?class="dropdown-menu?pull-right"?role="menu"?aria-labelledby="dropdownMenu1"> ???… ??</ul> </div>
查看全部 -
下拉菜單的標(biāo)題
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
? ? <li role="presentation" class="dropdown-header">第一部分菜單頭部</li>
? ? <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
? ? <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
? ? <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
? ? <li role="presentation" class="divider"></li>
? ? <li role="presentation" class="dropdown-header">第二部分菜單頭部</li>
? ? <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
? ? <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
? ? <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
? </ul>
查看全部 -
下拉菜單的分割線
，假設(shè)下拉菜單有兩個(gè)組，那么組與組之間可以通過(guò)添加一個(gè)空的<li>，并且給這個(gè)<li>添加類(lèi)名“divider”來(lái)實(shí)現(xiàn)添加下拉分隔線的功能。對(duì)應(yīng)的樣式代碼：
?<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
? ? <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
? ? <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
? ? <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
? ? <li role="presentation" class="divider"></li>
? ? <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
? </ul>
查看全部 -
bootstrap的下拉菜單
在使用Bootstrap框架中的下拉菜單組件時(shí)，其結(jié)構(gòu)運(yùn)用的正確與否非常的重要，如果結(jié)構(gòu)和類(lèi)名未使用正確，直接影響組件是否能正常運(yùn)用。我們來(lái)簡(jiǎn)單的看看：
1、使用一個(gè)名為“dropdown”的容器包裹了整個(gè)下拉菜單元素，示例中為:
<div class="dropdown"></div>2、使用了一個(gè)<button>按鈕做為父菜單，并且定義類(lèi)名“dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類(lèi)名一致，此示例為:
data-toggle="dropdown"3、下拉菜單項(xiàng)使用一個(gè)ul列表，并且定義一個(gè)類(lèi)名為“dropdown-menu”，此示例為:
<ul class="dropdown-menu"><div?class="dropdown"> <button?class="btn?btn-default?dropdown-toggle"?type="button"?id="dropdownMenu1"?data-toggle="dropdown"> 下拉菜單 <span?class="caret"></span> </button> <ul?class="dropdown-menu"?role="menu"?aria-labelledby="dropdownMenu1"> ???<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li> ???… ???<li?role="presentation"?class="divider"></li> ???<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜單項(xiàng)</a></li> </ul> </div>
查看全部 -
列嵌套
Bootstrap框架的網(wǎng)格系統(tǒng)還支持列的嵌套。你可以在一個(gè)列中添加一個(gè)或者多個(gè)行（row）容器，然后在這個(gè)行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時(shí)，就是當(dāng)前外部列的寬度
查看全部
舉報(bào)