實現響應式——Bootstrap的刪格系統詳解

Bootstrap

今天和大家一起學習如今很流行的前端框架之一，Bootstrap框架。

前言

 　　今天帶大家看看Bootstrap框架，其實我呢主要還是用里面的刪格系統，單單這個刪格系統就比較強大了。其他的css樣式我個人用的比較少。但是你要做一些簡單的響應式那么Bootstrap框架是一個很不錯的選擇。　

01 Bootstrap下載方式方法

 

 

①  用於生產環境的 Bootstrap

　　編譯並壓縮后的 CSS、JavaScript 和字體文件,不包含文檔和源碼文件。

② Bootstrap 源碼

　　Less、JavaScript 和字體文件的源碼，並且帶有文檔,需要Less 編譯器和一些設置工作。

 

③ Sass

　　這是 Bootstrap 從 Less 到 Sass 的源碼移植項目，用於快速地在 Rails、Compass 或 只針對 Sass 的項目中引入。

 

下載地址：http://v3.bootcss.com/

大家可以在上面的網址進行下載Bootstrap 文件，下面就先帶大家看一下Bootstrap 的一些排版樣式。

　　<meta charset="utf-8">
         <!--讓瀏覽器使用最新的IE內核進行渲染頁面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--設置適口寬度等於設備寬度，任何其他內容都*必須*跟隨其后-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->

　　　　<!--倒入BootStrap核心css文件-->
　　　　<link href="css/bootstrap.css" rel="stylesheet"/>

　　

1、瀏覽器默認字體與BootStrap字體樣式的區別

 

          

<p style="color:red;">這是 h1~h6字體樣式</p st>
    <h1>你好，世界！</h1>
    <h2>你好，世界！</h2>
    <h3>你好，世界！</h3>
    <h4>你好，世界！</h4>
    <h5>你好，世界！</h5>
    <h6>你好，世界！</h6>

上面是原瀏覽器的下面是BootStrap主要看mark標簽對比還是很明顯的。

<h1 class="h1">這是一個加了.h1標題 <small>這是一（small就是我）個副標題</h1>
    <h1>這是一個大標題 <small>這是一（small就是我）個副標題</small></h1>
    
    <p>這是一個段落這是一個段落<ins>我是額外插入的文本（ins）</ins>一個段落這<u>這是u</u>這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落這是一個段落</p>
    
    <p class="lead">這是第二個段落<mark>這是特殊的mark</mark>這是第二個段落這是第二個段落這是第二個段落這是第二個段落<del>我是可憐的被刪除文本del，，，</del>這是第二個段落這是第二個段落這是第二個段落這是第二個段落這是第二個段落這是第二個段落<s>我是s樣式與del相同</s>這是第二個段落這是第二個段落這是第二個段落這是第二個段落</p>
    
    <p>這是第三個段落<strong>我就是strong   也可以叫我font-weight</strong>這是第三個段落這是第三個段落這是第三個段落這是第三個段落<em>、、我是一個不倒翁（em）、、</em>這是第三個段落這是第三個段落這是第三個段落這是第三個段落這是第三個段落這是第三個段落這是第三個段落這是第三個段落</p>

　　
　

2、BootStrap  組件的簡單了解                       

 

這是BootStrap中的導航條里面包括了一些表單的查詢 和下拉條，最重要的是它自帶響應式！

還有重要的是要導入jquery和bootstrap的JS文件

<nav class="navbar navbar-default" style="margin-top: 50px;">
  <div class="container-fluid">
    
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">首頁</a>
    </div>

    
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">導航 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">導航</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉導航 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">子頁</a></li>
            <li><a href="#">子頁</a></li>
            <li><a href="#">子頁</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">子頁</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">子頁子頁子頁子頁</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="查詢">
        </div>
        <button type="submit" class="btn btn-default">查詢</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">導航</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">自帶響應式 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">子頁</a></li>
            <li><a href="#">子頁</a></li>
            <li><a href="#">子頁</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">子頁</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

 

　　　　       

　　　這些就是BootStrap其他的一些組件看左圖大家可以到BootStrap官網查找一下自己可以試試。還有很多表格表單啦按鈕icon圖標。可簡單的就不一一給大家介紹了。
　　　　 今天最主要的就是給大家詳解一下BootStrap中的柵格系統。也是個人比較喜歡實現響應式布局的一種。下面就開始吧。

3、BootStrap中的柵格系統             

柵格系統的簡介：

柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理

① 首先呢我們要創建一個柵格系統的容器：

<div class="container-fluid">
  <div class="row">
    <!--柵格系統的容器-->
  </div>
</div>

注釋：

為了給予柵格系統合適的排列和padding，要把每一行的“row”包含在一個容器中，而這個容器我們用class名為“container”或者“container-fluid”這兩個class是Bootstrap為我們實現設計好的

下面圖片就是container和container-fluid的區別：（是Bootstrap為我們設計好的代碼我敲出來是為了更好的理解！）

     

     ②  創建一個單一一組的.col-md- 柵格類 實現從疊堆到水平排列的響應式。

<div class="container-fluid">
            <div class="row">
                <div class="row"">
                
                    <div class="col-md-1">.col-md-1</div>
                
                    <div class="col-md-1">.col-md-1</div>
                
                    <div class="col-md-1">.col-md-1</div>
                
                    <div class="col-md-1">.col-md-1</div>
                
                    <div class="col-md-1">.col-md-1</div>
                
                    <div class="col-md-1">.col-md-1</div>
                
                    <div class="col-md-1">.col-md-1</div>
                
                    <div class="col-md-1">.col-md-1</div>
                
                    <div class="col-md-1">.col-md-1</div>
                
                    <div class="col-md-1">.col-md-1</div>
                
                    <div class="col-md-1">.col-md-1</div>
                
                    <div class="col-md-1">.col-md-1</div>
                </div>
                <div class="row">
                
                    <div class="col-md-8">.col-md-8</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-4">.col-md-4</div>
                
                    <div class="col-md-4">.col-md-4</div>
                </div>
                <div class="row" id="row3">
                
                    <div class="col-md-6">.col-md-6</div>
                
                    <div class="col-md-6">.col-md-6</div>
                </div>
            </div>
        </div>
    </body>

注釋：每一個“row”代表一行，而內部的“col-md-數字”代表一個單元格；Bootstrap把每一行分成12等份，“col-md-數字”中的“數字”從1-12中取，數字等於幾，就占幾份；

合理的選擇單元格的數字配置，再往單元格中添加我們想要的內容，這樣一個柵格系統就完成了！

③ 單元格的類的其他選擇

　　　　 .c0l-xs-　　無論屏幕寬度如何，單元格都在一行，寬度按照百分比設置；試用於手機；

　　　　 .col-sm-　　屏幕大於768px時，單元格在一行顯示；屏幕小於768px時，獨占一行；試用於平板；

　　　 　.col-md-　　屏幕大於992px時，單元格在一行顯示；屏幕小於992px時，獨占一行；試用於桌面顯示器；

　　　　 .col-lg-　　屏幕大於1200px時，單元格在一行顯示；屏幕小於1200px時，獨占一行；適用於大型桌面顯示器；

下面就帶大家了解一下他們的作用：

上面的動圖就是:(根據圖片右上角變換來理解)

　    　 屏幕大於992px時：.col-md-8 和.col-md-4 還處於 作用范圍內
　　　 屏幕在769px-992px之間時：.col-md-已失效，而.col-sm- 還處在 作用范圍內
　　　 屏幕寬度小於768px時，.col-sm-已失效 只有.col-xs- 不受屏幕寬度影響，這時候就由.col-xs-起作用

 

后序

S  N

好啦今天的Bootstrap就和大家分享到這了，還有好多功能我也沒能一一給大家做出來希望能讓你們有了簡單的了解，時間也不早了各位晚安！