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