亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

導航（膠囊形(pills)導航）

膠囊形（pills）導航聽起來有點別扭，因為其外形看起來有點像膠囊形狀。但其更像我們平時看到的大眾形導航。當前項高亮顯示，并帶有圓角效果。其實現方法和“nav-tabs”類似，同樣的結構，只需要把類名“nav-tabs”換成“nav-pills”即可

導航（標簽形tab導航）

標簽形導航，也稱為選項卡導航。特別是在很多內容分塊顯示的時，使用這種選項卡來分組十分適合。

標簽形導航是通過“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>

運行的效果如下所示：

導航基礎樣式

Bootstrap框架中制作導航條主要通過“.nav”樣式。默認的“.nav”樣式不提供默認的導航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類。比如右側代碼編輯器中就有一個tab導航條的例子，他的實現方法就是為ul標簽加入.nav和nav-tabs兩個類樣式。

有的時候我們的下拉菜單會向上彈起（接下來一個小節會介紹），這個時候我們的三角方向需要朝上顯示，實現方法：需要在“.btn-group”類上追加“dropup”類名（這也是做向上彈起下拉菜單要用的類名）。

特別聲明：在制作等分按鈕組時，請盡量使用<a>標簽元素來制作按鈕，因為使用<button>標簽元素時，使用display:table在部分瀏覽器下支持并不友好

等分按鈕的效果在移動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組里面的每個按鈕平分整個容器寬度。例如，如果你按鈕組里面有五個按鈕，那么每個按鈕是20%的寬度，如果有四個按鈕，那么每個按鈕是25%寬度，以此類推。

等分按鈕也常被稱為是自適應分組按鈕，其實現方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名，

在介紹按鈕一節中，我們知道按鈕是通過btn-lg、btn-sm和btn-xs三個類名來調整padding、font-size、line-height和border-radius屬性值來改變按鈕大小。那么按鈕組的大小，我們也可以通過類似的方法：

???? .btn-group-lg:大按鈕組

???? .btn-group-sm:小按鈕組

???? .btn-group-xs:超小按鈕組

<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="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"><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>
????<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>
</div>

<li?role="presentation"?class="dropdown-header">第一部分菜單頭部</li>

列排序其實就是改變列的方向，就是改變左右浮動，并且設置浮動的距離。在Bootstrap框架的網格系統中是通過添加類名“col-md-push-*”和“col-md-pull-*” (其中星號代表移動的列組合數)。

使用列偏移也非常簡單，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數)，那么具有這個類名的列就會向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示該列向右移動4個列的寬度。

Bootstrap框架的網格系統還支持列的嵌套。你可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時，就是當前外部列的寬度。來看一個簡單示例：

任務

我來試試：完成下面任務

在HTML編輯器輸入正確代碼，

1、創建一個8-4列網格。（備注：以中屏md（970px）為例）。

2、在第一個8列網格中插入8-4列網格。

3、在第二個4列網格中插入9-3列網格。

效果：

• ?不會了怎么辦

• 參考代碼：

  ??<div?class="row">
  ????<div?class="col-md-8">
  ??????我的里面嵌套了一個網格
  ??????<div?class="row">
  ????????<div?class="col-md-8">col-md-8</div>
  ????????<div?class="col-md-4">col-md-4</div>
  ??????</div>
  ????</div>
  ????<div?class="col-md-4">
  ??????我的里面嵌套了一個網格
  ??????<div?class="row">
  ????????<div?class="col-md-9">col-md-9</div>
  ????????<div?class="col-md-3">col-md-3</div>
  ??????</div></div>
  ??</div>

“col-md-4”居左，“col-md-8”居右，如果要互換位置，需要將“col-md-4”向右移動８個列的距離，也就是8個offset ,也就是在“<div class=“col-md-4”>”添加類名“col-md-push-8”，調用其樣式。

也要將“col-md-8”向左移動４個列的距離，也就是4個offset，在“<div class=”col-md-8”>”上添加類名“col-md-pull-4”：

200個icon：

這里說的圖標就是Web制作中?？吹降男con圖標，可以說這些小icon圖標是一個優秀Web中不可缺少的一部分，起到畫龍點睛的效果。在Bootstrap框架中也為大家提供了近200個不同的icon圖片，而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。

圖像在網頁制作中也是常要用到的元素，在Bootstrap框架中對于圖像的樣式風格提供以下幾種風格：

1、img-responsive：響應式圖片，主要針對于響應式設計
2、img-rounded：圓角圖片
3、img-circle：圓形圖片
4、img-thumbnail：縮略圖片

使用方法：

使用方法非常簡單，只需要在<img>標簽上添加對應的類名