Bootstrap框架(基礎篇)之按鈕,網格,導航欄,下拉菜單

時間 2019-11-08

標籤 bootstrap 框架基礎按鈕網格導航下拉菜單欄目 Bootstarp 简体版

原文原文鏈接

一,按鈕css

注意：雖然在Bootstrap框架中使用任何標籤元素均可以實現按鈕風格，但我的並不建議這樣使用，爲了不瀏覽器兼容性問題，我的強烈建議使用button或a標籤來製做按鈕。html

框架中提供了基礎按鈕的例子:jquery

<button class="btn" type="button">基礎按鈕.btn</button>
<button class="btn btn-default" type="button">默認按鈕.btn-default</button>
<button class="btn btn-primary" type="button">主要按鈕.btn-primary</button>
<button class="btn btn-success" type="button">成功按鈕.btn-success</button>
<button class="btn btn-info" type="button">信息按鈕.btn-info</button>
<button class="btn btn-warning" type="button">警告按鈕.btn-warning</button>
<button class="btn btn-danger" type="button">危險按鈕.btn-danger</button>
<button class="btn btn-link" type="button">連接按鈕.btn-link</button>

不過這裏說一下這個button這個標籤爲啥還要加個type="button"我我的理解是就像input標籤同樣任何標籤均可成爲按鈕,換言之就是隻要你加了樣式以後不少控件也能夠掛羊頭賣狗肉 ,因此這裏指明一下type是button 固然這也只是我我的的一個想法,不少人認爲這是一個小BUG,確實我也不否定.bootstrap

另外按鈕的大小也有相應的定義瀏覽器

從上表中不難發現，在Bootstrap框架中控制按鈕的大小都是經過修改按鈕的padding、line-height、font-size和border-radius幾個屬性。框架

按鈕的焦點狀態也有這麼幾種 ,基本和input框響應效果同樣一樣是加了僞類":focus"Bootstrap按鈕的活動狀態主要包括按鈕的懸浮狀態(:hover)，點擊狀態(:active)和焦點狀態（:focus）幾種。編輯器

1.1圖像部分這點沒有特地拿出來單作一個標題內容不是特別多ide

圖像在網頁製做中也是常要用到的元素，在Bootstrap框架中對於圖像的樣式風格提供如下幾種風格：字體

一、img-responsive：響應式圖片，主要針對於響應式設計
二、img-rounded：圓角圖片
三、img-circle：圓形圖片
四、img-thumbnail：縮略圖片網站

<img  alt="140x140" src="http://placehold.it/140x140">
<img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140">

因爲樣式沒有對圖片作大小上的樣式限制，因此在實際使用的時候，須要經過其餘的方式來處理圖片大小。好比說控制圖片容器大小。（注意不能夠經過css樣式直接修改img圖片的大小，這樣操做就不響應了）

圖標問題:這裏說的圖標就是Web製做中常看到的小icon圖標，能夠說這些小icon圖標是一個優秀Web中不可缺乏的一部分，起到畫龍點睛的效果。在Bootstrap框架中也爲你們提供了近200個不一樣的icon圖片，而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。

二.網狀表格

這裏引用慕課網上的對於網狀表格的工做原理定義:

一、數據行(.row)必須包含在容器（.container）中，以便爲其賦予合適的對齊方式和內距(padding)。如：

<div class="container">
<div class="row"></div>
</div>

二、在行(.row)中能夠添加列(.column)，但列數之和不能超過平分的總列數，好比12。如：

<div class="container">
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-8"></div>

三、具體內容應當放置在列容器（column）以內，並且只有列（column）才能夠做爲行容器(.row)的直接子元素

總結:經過設置內距（padding）從而建立列與列之間的間距。而後經過爲第一列和最後一列設置負值的外距（margin）來抵消內距(padding)的影響

經過爲「列（column）」設置 padding 屬性，從而建立列與列之間的間隔（gutter）。經過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲「行（row）」所包含的「列（column）」抵消掉了padding。

列偏移:有的時候，咱們不但願相鄰的兩個列緊靠在一塊兒，但又不想使用margin或者其餘的技術手段來。這個時候就可使用列偏移（offset）功能來實現。使用列偏移也很是簡單，只須要在列元素上添加類名「col-md-offset-*」(其中星號表明要偏移的列組合數)，那麼具備這個類名的列就會向右偏移。例如，你在列元素上添加「col-md-offset-4」，表示該列向右移動4個列的寬度。

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

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

<div class="container">
    <div class="row">
        <div class="col-md-8">
        個人裏面嵌套了一個網格
            <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
          </div>
        </div>
    <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">
    個人裏面嵌套了一個網格
        <div class="row">
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
        </div>
    </div>
    </div>
</div>

三.下拉菜單

下拉菜單是一個獨立的組件必須引用Jquery 和Bootstrap.JS才能用或者直接引用框架裏面的dropdown.js也是能夠的,下面簡單的介紹一下,其實整體上沒啥特別變化可是有幾點須要注意一下

在使用Bootstrap框架中的下拉菜單組件時，其結構運用的正確與否很是的重要，若是結構和類名未使用正確，直接影響組件是否能正常運用。咱們來簡單的看看：

一、使用一個名爲「dropdown」的容器包裹了整個下拉菜單元素，示例中爲:

<div class="dropdown"></div>

二、使用了一個<button>按鈕作爲父菜單，而且定義類名「dropdown-toggle」和自定義「data-toggle」屬性，且值必須和最外容器類名一致，此示例爲:

data-toggle="dropdown"

三、下拉菜單項使用一個ul列表，而且定義一個類名爲「dropdown-menu」，此示例爲:

<ul class="dropdown-menu">

在Bootstrap框架中的下拉菜單還提供了下拉分隔線，假設下拉菜單有兩個組，那麼組與組之間能夠經過添加一個空的<li>，而且給這個<li>添加類名「divider」來實現添加下拉分隔線的功能。

同理既然能夠分割,那麼分割出來每一部分都是有本身獨立的頭尾的:

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

Bootstrap框架中下拉菜單默認是左對齊，若是你想讓下拉菜單相對於父容器右對齊時，能夠在「dropdown-menu」上添加一個「pull-right」或者「dropdown-menu-right」類名,二者效果相同.

並且下拉菜單也有本身的狀態下拉菜單項的默認的狀態（不用設置）有懸浮狀態（:hover）和焦點狀態（:focus）,下拉菜單項除了上面兩種狀態，還有當前狀態（.active）和禁用狀態（.disabled）。這兩種狀態使用方法只須要在對應的菜單項上添加對應的類名

按鈕組:

一、默認全部按鈕都有圓角

二、除第一個按鈕和最後一個按鈕（下拉按鈕除外），其餘的按鈕都取消圓角效果

三、第一個按鈕只留左上角和左下角是圓角

四、最後一個按鈕只留右上角和右下角是圓角

若是有按鈕組的話

你只須要將按鈕組「btn-group」按組放在一個大的容器「btn-toolbar」中

若是想讓按鈕組縱向排列:按鈕組都是水平顯示的。但在實際運用當中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。咱們只須要把水平分組的「btn-group」類名換成「btn-group-vertical」

還有移動端經常使用的等分按鈕組:

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

等分按鈕也常被稱爲是自適應分組按鈕，其實現方法也很是的簡單，只須要在按鈕組「btn-group」上追加一個「btn-group-justified」類名

按鈕下拉菜單:

按鈕下拉菜單僅從外觀上看和上一節介紹的下拉菜單效果基本上是同樣的。不一樣的是在普通的下拉菜單的基礎上封裝了按鈕（.btn）樣式效果。簡單點說就是點擊一個按鈕，會顯示隱藏的下拉菜單。

按鈕下拉菜單其實就是普通的下拉菜單，只不過把「<a>」標籤元素換成了「<button>」標籤元素。惟一不一樣的是外部容器「div.dropdown」換成了「div.btn-group」。

有些菜單是須要向上彈出的，好比說你的菜單在頁面最底部，而這個菜單正好有一個下拉菜單，爲了讓用戶有更好的體驗，不得不讓下拉菜單向上彈出。在Bootstrap框架中專門爲這種效果提代了一個類名「dropup」。使用方法正如前面所示，只須要在「btn-group」上添加這個類名（固然，若是是普通向上彈出下拉菜單，你只須要在「dropdown」類名基礎上追加「dropup」類名便可）

下拉菜單裏面的三角形:按鈕的向下三角形，咱們是經過在<button>標籤中添加一個「<span>」標籤元素，而且命名爲「caret」;

四.導航

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

標籤形導航是經過「nav-tabs」樣式來實現。在製做標籤形導航時須要在原導航「nav」上追加此類名，如：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>標籤形(tab)導航</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<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>
<br />
<ul class="nav nav-tabs">
    <li class="active"><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>
<br />
 <ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li class="disabled"><a href="##">Responsive</a></li>
 </ul>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

其實上例的效果和咱們平時看到的選項卡效果並不一致。通常狀況之下，選項卡教會有一個當前選中項。其實在Bootstrap框架也相應提供了。假設咱們想讓「Home」項爲當前選中項，只須要在其標籤上添加類名「class="active"」便可.

還有一種膠囊形態的選中樣式:膠囊形（pills）導航聽起來有點彆扭，由於其外形看起來有點像膠囊形狀。但其更像咱們平時看到的大衆形導航。當前項高亮顯示，並帶有圓角效果。其實現方法和「nav-tabs」相似，一樣的結構，只須要把類名「nav-tabs」換成「nav-pills」

除了膠囊形態的還有一種垂直型的li:在實際運用當中，除了水平導航以外，還有垂直導航，就相似前面介紹的垂直排列按鈕同樣。製做垂直堆疊導航只須要在「nav-pills」的基礎上添加一個「nav-stacked」類名便可

以前說到的相似於下拉菜單裏面的分割線在導航欄同樣可使用:你們是否還記得，在下拉菜單一節中，下拉菜單組與組之間有一個分隔線。其實在垂直堆疊導航也具備這樣的效果，只須要添加在導航項之間添加「<li class=」nav-divider」></li>」便可

自適應導航(我的感受凡是跟自適應沾邊的用處都不少):

自適應導航指的是導航佔據容器所有寬度，並且菜單項能夠像表格的單元格同樣自適應寬度。自適應導航和前面使用「btn-group-justified」製做的自適應按鈕組是同樣的。只不過在製做自適應導航時更換了另外一個類名「nav-justified」。固然他須要和「nav-tabs」或者「nav-pills」配合在一塊兒使用。

自適應,如字面意思本身適應屏幕取處理導航的寬度大小,不過在屏幕比較小的時候這個導航會從橫向排列直接轉爲縱向排列:瀏覽器視窗寬度大於768px才能按橫向排列。當你的瀏覽器視窗寬度小於768px的時候，將會按縱向排列

二級導航:

前面介紹的都是使用Bootstrap框架製做一級導航，但不少時候，在Web頁面中是離不開二級導航的效果。那麼在Bootstrap框架中製做二級導航就更容易了。只須要將li看成父容器，使用類名「dropdown」，同時在li中嵌套另外一個列表ul，使用前面介紹下拉菜單的方法就能夠,父容器li 加 class="dropdown",同時別忘記 class="dropdown-toggle" data-toggle="dropdown" <span class="caret"></span>, 子容器ul 加class="dropdown-menu"

另外還有一種麪包屑樣式的導航:使用方式就很簡單，爲ol加入breadcrumb類

基礎導航條:

在製做一個基礎導航條時，主要分如下幾步：

第一步：首先在製做導航的列表(<ul class=」nav」>)基礎上添加類名「navbar-nav」

第二步：在列表外部添加一個容器（div），而且使用類名「navbar」和「navbar-default」

示例查看右側代碼編輯（10-19行）。

「.navbar」樣式的主要功能就是設置左右padding和圓角等效果，但他和顏色相關的樣式沒有進行任何的設置。

導航標題:

在Web頁面製做中，經常在菜單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也爲你們作了這方面考慮，其經過「navbar-header」和「navbar-brand」來實現

表單能夠嵌套在導航欄中嘛?固然能夠:

在Bootstrap框架中提供了一個「navbar-form」，使用方法很簡單，在navbar容器中放置一個帶有navbar-form類名的表單，示例代碼編輯器（29-34行）。

實現導航條表單的樣式代碼源碼請查看bootstrap.css文件第3839行～第3904行，咱們也對60多行樣式代碼節選了出來放到右側bootstrap.css文件中，有興趣的同窗請查看。

在上面的示例中，你們看到了「navbar-left」讓表單左浮動，更好實現對齊。在Bootstrap框架中，還提供了「navbar-right」樣式，讓元素在導航條靠右對齊

導航欄中的鏈接,按鈕,文本:

Bootstrap框架的導航條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form以外，還可使用其餘元素。框架提供了三種其餘樣式：

一、導航條中的按鈕navbar-btn

二、導航條中的文本navbar-text

三、導航條中的普通連接navbar-link

但這三種樣式在框架中使用時受到必定的限制，須要和navbar-brand、navbar-nav配合起來使用。並且對數量也有必定的限制，通常狀況在使用一到兩個不會有問題，超過兩個就會有問題。

響應式導航條:

這種導航條比較經常使用!!:

一、保證在窄屏時須要摺疊的內容必須包裹在帶一個div內，而且爲這個div加入collapse、navbar-collapse兩個類名。最後爲這個div添加一個class類名或者id名。

二、保證在窄屏時要顯示的圖標樣式（固定寫法）：

<button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

三、併爲button添加data-target=".類名/#id名"，究競是類名仍是id名呢？由須要摺疊的div來決定。如：

須要摺疊的div代碼段：

<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏時顯示的圖標代碼段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>

也能夠這麼寫，須要摺疊的div代碼段：

<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏時要顯示的圖標：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>響應式導航條</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
    body{padding:50px 0 0 0;}
</style>
</head>

<body>
<!--代碼-->
<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
     　<!-- .navbar-toggle樣式用於toggle收縮的內容，即nav-collapse collapse樣式所在元素 -->
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- 確保不管是寬屏仍是窄屏，navbar-brand都顯示 -->
       <a href="##" class="navbar-brand">慕課網</a>
  </div>
  <!-- 屏幕寬度小於768px時，div.navbar-responsive-collapse容器裏的內容都會隱藏，顯示icon-bar圖標，當點擊icon-bar圖標時，再展開。屏幕大於768px時，默認顯示。 -->
  <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
              <li class="active"><a href="##">網站首頁</a></li>
              <li><a href="##">系列教程</a></li>
              <li><a href="##">名師介紹</a></li>
              <li><a href="##">成功案例</a></li>
              <li><a href="##">關於咱們</a></li>
         </ul>
  </div>
</div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>
</html>

黑色導航條:

用法與普通導航條同樣只是樣式稍做修改:反色導航條實際上是Bootstrap框架爲你們提供的第二種風格的導航條，與默認的導航條相比，使用方法並沒有區別，只是將navbar-deafult類名換成navbar-inverse(原做者竟然單拿出來作一章容我作一個無奈的表情)

分頁導航:

Bootstrap框架除了提供帶頁碼的分頁導航以外還提供了翻頁導航。這種分頁導航經常在一些簡單的網站上看到，好比說我的博客，雜誌網站等。這種分頁導航是看不到具體的頁碼，只會提供一個「上一頁」和「下一頁」的按鈕。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分頁導航</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<!--代碼-->
<ul class="pagination pagination-lg">
  <li><a href="#">&laquo;第一頁</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最後一頁&raquo;</a></li>
</ul> 
  
<ul class="pagination pagination">
  <li><a href="#">&laquo;第一頁</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最後一頁&raquo;</a></li>
</ul>   
<ul class="pagination pagination-sm">
  <li><a href="#">&laquo;第一頁</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最後一頁&raquo;</a></li>
</ul>   

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>
</html>

平時不少同窗喜歡用div>a和div>span結構來製做帶頁碼的分頁導航。不過，在Bootstrap框架中使用的是ul>li>a這樣的結構，在ul標籤上加入pagination方法.

分頁導航之翻頁分頁導航:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分頁導航（翻頁分頁導航）</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<!--代碼-->
<ul class="pager">
  <li><a href="#">&laquo;上一頁</a></li>
  <li><a href="#">下一頁&raquo;</a></li>
</ul> 
<!--左右對齊-->
<ul class="pager">
  <li class="previous"><a href="#">&laquo;上一頁</a></li>
  <li class="next"><a href="#">下一頁&raquo;</a></li>
</ul> 
<!--禁止狀態-->
<ul class="pager">
  <li class="disabled"><span>&laquo;上一頁</span></li>
  <li><a href="#">下一頁&raquo;</a></li>
</ul>  
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>
</html>

五.進度條和亂七八糟部分

1.1縮略圖

縮略圖在網站中最經常使用的地方就是產品列表頁面，一行顯示幾張圖片，有的在圖片底下（左側或右側）帶有標題、描述等信息。Bootstrap框架將這一部獨立成一個模塊組件。並經過「thumbnail」樣式配合bootstrap的網格系統來實現。能夠將產品列表頁變得更好看。

Bootstrap框架中也是按這樣的方式實現的，他提供了兩個容器，外容器使用「progress」樣式，子容器使用「progress-bar」樣式。其中progress用來設置進度條的容器樣式，而progress-bar用於限制進度條的進度。使用方法很是的簡單：

<div class="progress">
       <div class="progress-bar" style="width:40%"></div>
</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。