響應式頁面-@media介紹, 移動端單位介紹 Bootstrap學習 Bootstrap的插件

本文轉載自查看原文 2018-08-24 18:40 728

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>

    <div class="animated fadeInLeftBig delay-2s">bounce</div>
    <button>動畫吧</button>
    
    <div id='active'>
        小明
    </div>
    <script src="../day57/jquery.js"></script>
    <script src="index.js"></script>

    </script>
    <script>
        
        $(function(){
            
            $('button').click(function(event) {
                /* Act on the event */
                $('#active').addClass('animated bounceOutLeft delay-2s');
            });

        });
    </script>
</body>
</html>

animate.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title></title>
    <style>
        
        /*最大1200px*/
        @media screen and (min-width: 1200px) {
            body{
                background-color: red;
            }
        }

        @media screen and (min-width: 800px) and (max-width: 1199px){
            body{
                background-color: green;
            }
            
        }
        @media screen and (max-width: 800px) {
            body{
                background-color: yellow;
            }
        }
    </style>
</head>
<body>

    
</body>
</html>

@media.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
        <title>移動端布局</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
            html{
               /* font-size: 20px;*/

                /*1rem=20px*/

            }
           /* html{
                width: 100%;
                height: 100%;
               
                overflow: hidden;
            }*/
            body{
                width: 100%;
                height: 100%;
                /*overflow: auto;*/
                padding-top: 80px;
            }
            .head-box{
                width: 100%;
                height: 80px;
                background-color: red;
                position: fixed;
                top: 0;
                left: 0;    
                z-index: 9999;
            }
            .list{
                
                font-size: 14px;
            }
            
            .list .item{
                float: left;
                width: 1rem;
                height: 1rem;
                border: 1px solid black;
                margin: 0.1rem;
                
            }

            /*
            移動端單位 
            相對單位和絕對單位px
            相對單位
            em:相對於當前盒子的設置的字體;
            20px = 1em

            rem:相對於html的字體大小;

            */
            
            
            
        </style>
    </head>
    <body>
        
        <header class="head-box">
            <div class="head-top"></div>
            <div class="head-bottom"></div>
        </header>
        
        <ul class="list clearfix">
            <li class="item">1111111</li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        
        <div></div>
        <div></div>
    </body>
    <script src="./resize.js"></script>
</html>

移動端單位介紹

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
   <!--  [if lt IE 9]
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    [endif] -->
  </head>
  <body>
    <div class="container-fluid">
        <h1>你好，世界！</h1>

    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> -->
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
  </body>
</html>

使用bootstrap.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
   <!--  [if lt IE 9]
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    [endif] -->
  </head>
  <body>
    <div class="container-fluid">
        <div class="row">
          
          <div class="col-lg-3 col-md-4 col-sm-6">
            使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ” .row 內。
          </div>
           <div class="col-lg-3 col-md-4 col-sm-6">
            使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ” .row 內。
          </div>
             <div class="col-lg-3 col-md-4 col-sm-6">
            使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ” .row 內。
          </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
            使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ” .row 內。
          </div>
        </div>

    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> -->
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
  </body>
</html>

柵格系統

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
   <!--  [if lt IE 9]
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    [endif] -->

    <style>
      .active{
        /*background-color: black;*/
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active">
            <a href="#">首頁</a>
          </li>
        <li>
          <a href="#">課程</a>
        </li>
     
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-info">注冊</button>
        <button type="submit" class="btn btn-success">登錄</button>
        <button type="submit" class="btn btn-danger">登錄</button>


      </form>
     
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">表格</h3>
            </div>
            <div class="panel-body">
              <table class="table table-striped table-bordered table-hover">
                <tr>
                  <td>#</td>
                  <td>name</td>
                  <td>age</td>
                </tr>
                 <tr>
                  <td class="success">1</td>
                  <td class="warning">張三</td>
                  <td>18</td>
                </tr>
                 <tr>
                  <td>2</td>
                  <td class="danger">李四</td>
                  <td>20</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">表單</h3>
            </div>
            <div class="panel-body">
              <form>
  <div class="form-group">
    <label for="exampleInputEmail1">用戶名</label>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="請輸入用戶名">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
 
 
  <button type="submit" class="btn btn-success">Submit</button>
</form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

全局的css樣式

01 響應式頁面-@media介紹,

我們為什么要寫自適應的頁面（響應式頁面）

眾所周知，電腦、平板、手機的屏幕是差距很大的，假如在電腦上寫好了一個頁面，在電腦上看起來不錯，但是如果放到手機上的話，那可能就會亂的一塌糊塗，這時候怎么解決呢？以前，可以再專門為手機定制一個頁面，當用戶訪問的時候，判斷設備是手機還是電腦，如果是手機就跳轉到相應的手機頁面，例如百度的就是，手機訪問www.baidu.com就會跳轉到m.baidu.com，這樣做簡直就是費力不討好的活，所以聰明的程序員開發了一種自適應寫法，即一次開發，處處顯示！這到底是一個什么樣的神器東西呢，接下來就揭曉它的神秘面紗。

CSS3 的 @media 查詢

定義和使用

使用 @media 查詢，你可以針對不同的屏幕大小定義不同的樣式。 @media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對調試來說是一個極大的便利。

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

媒體類型（mediaType ）類型有很多，在這里不一一列出來了，只列出了常用的幾個。

screen：用於電腦屏幕，平板電腦，智能手機等。（最常用） speech 應用於屏幕閱讀器等發聲設備媒體功能

media feature：

1.max-width:定義輸出設備中的頁面最大可見區域寬度

　　2.min-width:定義輸出設備中的頁面最小可見區域寬度

開始編寫響應式頁面

准備工作1：設置Meta標簽

首先我們在使用 @media 的時候需要先設置下面這段代碼，來兼容移動設備的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

這段代碼的幾個參數解釋：

width = device-width：寬度等於當前設備的寬度

initial-scale：初始的縮放比例（默認設置為1.0，即代表不縮放）

user-scalable：用戶是否可以手動縮放（默認設置為no，因為我們不希望用戶放大縮小頁面）

准備工作2：加載兼容文件JS

因為IE8既不支持HTML5也不支持CSS3 @media ，所以我們需要加載兩個JS文件，來保證我們的代碼實現兼容效果：

<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

准備工作3：設置IE渲染方式默認為最高(可選) 現在有很多人的IE瀏覽器都升級到IE9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8 為了防止這種情況，我們需要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

ps:這段代碼后面加了一個chrome=1，如果用戶的電腦里安裝了 chrome，就可以讓電腦里面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算，如果沒有安裝，就顯示IE最新的渲染模式。

代碼示例：

1、如果文檔寬度大於等於 1170px 則應用花括號內的樣式——修改body的背景顏色(background-color):

@media screen and (min-width: 1170px) {
    body {
        background-color:lightblue;
    }
}

從上面的代碼可以看出，媒體類型是屏幕（screen），使用一個 and 連接后面的媒體功能，這里寫的是 max-width:300px ，也就是說，當屏幕的最大寬度大於於等於 1170px 的時候，就應用花括號里面的樣式。

2.如果文檔寬度大於等於 992px 則應用花括號內的樣式——修改body的背景顏色(background-color):

@media screen and (min-width: 992px) {
    body {
        background-color:red;
    }
}

3、當文檔寬度大於等於 768px 並且小於等於992px （ width >=768 && width <=992）的時候顯示的樣式

@media screen and (min-width:768px) and (max-width:992px) {
    /* CSS 代碼 */
}

需要注意的是：

不要被 min-width 和 max-width 所迷惑，初學者很容易誤以為 min-width 的意思是小於xxx的時候才應用，然而這就陷入誤區了，其實它的意思是：當設置了 min-width 的時候，文檔的寬度如果小於設置的值，就不會應用這個區塊里的CSS樣式，所以 min-width 它才能實現大於等於設置的值得時候，才會應用區塊里的CSS樣式，max-width 也是如此。

02-移動端單位介紹

前言

在頁面整體布局中，頁面元素的尺寸大小（長度、寬度、內外邊距等）和頁面字體的大小也是重要的工作之一。一個合理設置，則會讓頁面看起來層次分明，重點鮮明，賞心悅目。反之，一個不友好的頁面尺寸和字體大小設置，則會增加頁面的復雜性，增加用戶對頁面理解的復雜性；甚至在當下訪問終端（iPhone、iPad、PC、Android…）層出不窮的今天，適應各式各樣的訪問終端，將成為手中的一塊“燙手的山芋”。所以在近幾年，“九宮格”式的“流式布局”再度回歸。為了提供頁面布局，及其它的可維護性、可擴展性，我們嘗試將頁面元素的大小，以及字體大小都設置為相對值，不再是孤立的固定像素點。使其能在父元素的尺寸變化的同時，子元素也能隨之適應變化。以及結合少量最新CSS3的@media查詢，來實現“響應式布局”，bootstrap這類CSS框架大勢興起。

然而在CSS中，W3C文檔把尺寸單位划為為兩類：相對長度單位和絕對長度單位

然而相對長度單位按照不同的參考元素，又可以分為字體相對單位和視窗相對單位

字體相對單位有：em、ex、ch、rem；

視窗相對單位則包含：vw、vh、vmin、vmax幾種

絕對定位則是固定尺寸，它們采用的是物理度量單位：cm、mm、in、px、pt以及pc。但在實際應用中，我們使用最廣泛的則是em、rem、px以及百分比（%）來度量頁面元素的尺寸。

px: 絕對（固定）單位
缺點：任何情況下都是固定值，會導致布局在不同尺寸下的設備錯位

%：相對定位（會有影響發生變化）相對於父級（自身）大小進行定位
缺點：能確定范圍的還是比較好計算的，對於不太好確定值得地方不好使用百分比，並且會導致變形，高度一般不好控制

em: 相對定位（會有影響發生變化） em=當前字體大小
缺點：會根據當前容器字體大小發生變化，假如每個容器字體大小不一致，那么計算會非常麻煩

rem
r==root
em=字體大小 font-size
rem 相對單位
只依賴於html字體大小

可以認為它沒啥缺點吧！反正我個人還是挺喜歡的

動態的修改根元素的font-size：

需要通過js去控制：

/*獲得頁面寬度后動態修改html上的fontsize
* 320為iphone5設計稿下的頁面寬度，如下設置后頁面的頁面在iphone5等寬屏幕上html
* 的font-size會變為20px，即 1rem = 100px    1px=0.05rem
* 所以設置元素尺寸的時候，如果測量設計稿 15px  則需設置尺寸為 (0.05*15)rem = 0.75rem   
*/


!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            console.log(width)
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

將上面的文件引入到當前項目中，

代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
        <title>移動端布局</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
            html{
                width: 100%;
                height: 100%;
                /*font-size: 30px;*/
                overflow: hidden;
            }
            body{
                width: 100%;
                height: 100%;
                overflow: auto;
            }
            .head-box{
                width: 100%;
                height: 4rem;
                background-color: red;
                position: absolute;
                top: 0;
                left: 0;    
            }
            .list{
                margin-top: 4rem;
                font-size: 1.5rem;
            }
            
            .list .item{
                float: left;
                width: 7rem;
                height: 7rem;
                border: 1px solid black;
                margin: 0.25rem;
                
            }
            
            
            
        </style>
    </head>
    <body>
        
        <header class="head-box">
            <div class="head-top"></div>
            <div class="head-bottom"></div>
        </header>
        
        <ul class="list clearfix">
            <li class="item">1111111</li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        
    </body>
    <script src="./js/resize.js"></script>
</html>

03-Bootstrap學習

一、Bootstrap的介紹

凡是使用過Bootstrap的開發者，都不在乎做這么兩件事情：復制and粘貼。哈哈~，是的使用Bootstrap非常簡單，但是在復制粘貼之前，需要先對Bootstrap的用法一一熟悉之后我們才開始干活！

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、javascript 的，它簡潔靈活，使得 Web 開發更加快捷。

它用於開發響應式布局、移動設備優先的 WEB 項目

二、Bootstrap的下載

2.1使用Bootstrap第一步，先將生成環境的Bootstrap下載下來。然后將下載，然后引入到自己建好的當前目錄中

2.2點到起步中的基本模板

將看到的整段代碼復制粘貼到建好的index.html文件中

官網明確表示：
使用此給出的這份超級簡單的HTML模板，或者修改這些實例。我們強烈建議你對這些實例按照自己的需求進行修改，而不要簡單的復制、粘貼

Bootstrap支持移動設備優先

也就是說使用Bootstrap可以在移動設備上運行。為了確保適當的繪制和觸屏縮放，需要在<head>之中添加viewport元數據標簽

<meta name="viewport" content="width=device-width, initial-scale=1">

在移動設備瀏覽器上，通過為視口（viewport）設置 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。這樣禁用縮放功能后，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感覺。注意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bootstrap重置樣式

為了增強跨瀏覽器表現的一致性，我們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。

布局容器

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。注意，由於 padding 等屬性的原因，這兩種容器類不能互相嵌套。

.container 類用於固定寬度並支持響應式布局的容器。

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

.container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

柵格系統

柵格系統的鼻祖是 https://960.gs/.

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列

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

柵格參數

使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ” .row 內。

一些常使用網站

阿里巴巴圖標庫網站：

如果想做圖表，那可以去官網：http://echarts.baidu.com/或者https://chartjs.bootcss.com/

PS:還是那句話，使用Bootstrap非常簡單，根據項目的需求適當去官網復制粘貼，然后根據需求更改自己的內容，如果想修改自己的樣式，可以添加類，按照之前咱們學習css一樣的方式，給它相應的樣式

04-Bootstrap的插件

1、下拉菜單

代碼如下：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

aria-haspopup :true表示點擊的時候會出現菜單或是浮動元素； false表示沒有pop-up效果。

aria-expanded:表示展開狀態。默認為undefined, 表示當前展開狀態未知。其它可選值：true表示元素是展開的；false表示元素不是展開的

aria-labelledby：當想要的標簽文本已在其他元素中存在時，可以使用aria-labelledby，並將其值為所有讀取的元素的id。如下：

當ul獲取到焦點時，屏幕閱讀器是會讀：“選擇您的職位”

data-toggle: 表示什么事件類型發生

2、模態框

代碼如下：

<h2>創建模態框</h2>
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">刪除</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">是否刪除</h4>
        </div>
        <div class="modal-body">你確定要刪除嗎？</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
            <button type="button" class="btn btn-danger">確定</button>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>

在模態框中需要注意兩點：

第一是.modal，用來把 <div>的內容識別為模態框。
第二是.fade class。當模態框被切換時，它會引起內容淡入淡出。
aria-labelledby="myModalLabel" ，該屬性引用模態框的標題。
屬性 aria-hidden="true" 用於保持模態窗口不可見，直到觸發器被觸發為止（比如點擊在相關的按鈕上）。
<div class="modal-header"> ，modal-header 是為模態窗口的頭部定義樣式的類。
class="close"，close 是一個 CSS class，用於為模態窗口的關閉按鈕設置樣式。
data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這里它被用於關閉模態窗口。
class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用於為模態窗口的主體設置樣式。
class="modal-footer"，是 Bootstrap CSS 的一個 CSS class，用於為模態窗口的底部設置樣式。
data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用於打開模態窗口。

通過js控制模態框彈出

代碼如下：

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <div class="panel-title">

                            </div>

                        </div>
                        <div class="panel-body">
                            <h2>創建模態框</h2>
                            <!-- 按鈕觸發模態框 -->
                            <button class="btn btn-primary btn-lg" data-toggle="modal" id="delete">刪除</button>
                            <!-- 模態框（Modal） -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="myModalLabel">是否刪除</h4>
                                        </div>
                                        <div class="modal-body">你確定要刪除嗎？</div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                                            <button type="button" class="btn btn-danger">確定</button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //通過jquery控制模態框彈出
                $('#delete').click(function(){
                    $('#myModal').modal({
                        keyboard:false
                    })
                })

            })
        </script>
    </body>

3、滾動監聽

代碼如下：

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
            <span class="sr-only">切換導航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
            <a class="navbar-brand" href="#">luffy</a>
        </div>
        <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#ios">iOS</a>
                </li>
                <li>
                    <a href="#svn">SVN</a>
                </li>
                <li class="dropdown">
                    <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
                        <li>
                            <a href="#jmeter" tabindex="-1">jmeter</a>
                        </li>
                        <li>
                            <a href="#ejb" tabindex="-1">ejb</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#spring" tabindex="-1">spring</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">iOS</h4>
    <p>iOS 是一個由蘋果公司開發和發布的手機操作系統。最初是於 2007 年首次發布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操作系統是用在蘋果電腦上，iOS 是蘋果的移動版本。
    </p>
    <h4 id="svn">SVN</h4>
    <p>Apache Subversion，通常縮寫為 SVN，是一款開源的版本控制系統軟件。Subversion 由 CollabNet 公司在 2000 年創建。但是現在它已經發展為 Apache Software Foundation 的一個項目，因此擁有豐富的開發人員和用戶社區。
    </p>
    <h4 id="jmeter">jMeter</h4>
    <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。
    </p>
    <h4 id="ejb">EJB</h4>
    <p>Enterprise Java Beans（EJB）是一個創建高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（比如 JBOSS、Web Logic 等）的 J2EE 上。
    </p>
    <h4 id="spring">Spring</h4>
    <p>Spring 框架是一個開源的 Java 平台，為快速開發功能強大的 Java 應用程序提供了完備的基礎設施支持。
    </p>
    <p>Spring 框架最初是由 Rod Johnson 編寫的，在 2003 年 6 月首次發布於 Apache 2.0 許可證下。
    </p>

</div>

通過javascript 調用滾動監聽，選取要監聽的元素，然后調用.scrollspy()函數

$('.navbar-header').scrollspy('.bs-js-navbar-scrollspy')

像后面還介紹了：

　　 0.手風琴效果
data-toggle="collapse" 添加到您想要展開或折疊的組件的鏈接上。

　　href 或 data-target 屬性添加到父組件，它的值是子組件的 id。

data-parent 屬性把折疊面板（accordion）的 id 添加到要展開或折疊的組件的鏈接2

彈出框
警告框
輪播

通過 data 屬性：使用 data 屬性可以很容易控制輪播（Carousel）的位置。
屬性data-slide接受關鍵字prev或next，用來改變幻燈片相對於當前位置的位置
使用data-slide-to來向輪播傳遞一個原始滑動索引，data-slide-to="2" 將把滑塊移動到一個特定的索引，索引從 0 開始計數。
data-ride="carousel"屬性用於標記輪播在頁面加載時就開始動畫播放

上面是常用Bootstrap插件，相關代碼都在Bootstrap的官網上。大家自行copy一定要演示

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端之移動端響應式: 響應式介紹移動端位以及 Bootstrap相關內容使用CSS3的@media來編寫響應式的頁面使用Bootstrap設計響應式頁面學習一：Bootstrap（簡單的開發模板）---響應式開發，移動設備優先學習之響應式Web設計：Media Queries和Viewports 移動端--用PX為單位+JS框架實現頁面布局 pc端頁面添加響應式布局移動端和pc端，響應式設計布局移動端常用單位——rem 關於Layui 響應式移動端輪播圖的問題

響應式頁面-@media介紹, 移動端單位介紹 Bootstrap學習 Bootstrap的插件

01 響應式頁面-@media介紹,

我們為什么要寫自適應的頁面（響應式頁面）

CSS3 的 @media 查詢

定義和使用

開始編寫響應式頁面

02-移動端單位介紹

前言

03-Bootstrap學習

一、Bootstrap的介紹

二、Bootstrap的下載

Bootstrap支持移動設備優先

Bootstrap重置樣式

布局容器

柵格系統

柵格參數

04-Bootstrap的插件

1、下拉菜單

2、模態框

通過js控制模態框彈出

3、滾動監聽

免責聲明！

Bootstrap支持移動設備優先