python 全棧開發，Day57(響應式頁面-@media介紹,jQuery補充,移動端單位介紹,Bootstrap學習)

時間 2019-11-12

標籤 python 開發 day57 day 響應頁面 media 介紹 jquery 補充移動單位 bootstrap 學習欄目 Python 简体版

原文原文鏈接

昨日內容回顧　　　　　　　　　　　　　　

ajax  

//get post 兩種方式 作 請求

get 主要是獲取數據
post 提交數據

同一個路由地址 既能夠是get請求也能夠是post請求
一個路由對應一個函數

get請求

accept

mime 

$.ajax({
	url: 直接拼接到url  http://www.baidu.com/s?wd=luffy&name=123,
	type:'get',
        //data是響應數據
	success:function(data){
		
	},
	error:function(err){
		console.log(err);
	}
})

get參數是保存在url中
post參數是保存在頁面的from data中

form data

註冊的效果
username 
pwd
file

$.ajax({
	url:'http://www.baidu.com/s',
	type:'post',
	data:{
		
	},
	success:function(data){

		
	},
	error:function(){

}
})

寫項目，先考慮數據格式。再去考慮前端和後端邏輯。

1、響應式頁面-@media介紹　　　　　　　　　　　　　

咱們爲何要寫自適應的頁面（響應式頁面）

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

通常說m站，指的就是手機頁面。css

CSS3 的 @media 查詢

定義和使用

使用 @media 查詢，你能夠針對不一樣的屏幕大小定義不一樣的樣式。 @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面，這對調試來講是一個極大的便利。html

用and比較多前端

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

媒體類型（mediaType ）類型有不少，在這裏不一一列出來了，只列出了經常使用的幾個。html5

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

media feature：jquery

1.max-width:定義輸出設備中的頁面最大可見區域寬度（小於等於指向寬度，好比960）css3

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

開始編寫響應式頁面

準備工做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最新的渲染模式。

代碼示例：

一、若是文檔寬度大於等於 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;
    }
}

三、當文檔寬度大於等於 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 也是如此。

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--設置IE渲染方式-->
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--兼容移動設備的展現效果-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> -->
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        /*最小屏幕是1170px >=*/
        @media screen and (min-width: 1170px){
            body{
                background-color: red;
            }
        }
        /*最小屏幕是992px,最大是1170px*/
        @media screen and (min-width: 992px) and (max-width:1170px){
            body{
                background-color: green;
            }
        }
        /*低於992px的屏幕*/
        @media screen and (max-width: 992px) {
            body{
                background-color: yellow;
            }
        }
    </style>
</head>
<body>

</body>
</html>

View Code

訪問網頁，慢慢縮小瀏覽器的尺寸，顏色就會有響應的變化，最後的顏色爲黃色

2、jQuery補充

jquery除了我們上面講解的經常使用知識點以外，還有jquery 插件、jqueryUI知識點

jqueryUI 官網：

https://jqueryui.com/

jqueryUI 中文網：

http://www.jqueryui.org.cn/

jquery插件內容包含

好比這個

http://www.jqueryui.org.cn/demo/5652.html

它是一個手風琴效果，用於移動端。

官網demo：

https://www.oschina.net/project/tag/273/jquery

裏面包含了jquery插件效果和實現代碼，你們能夠好好的玩一下了！

好比jquery-chart，連接地址：

https://www.oschina.net/project/tag/275/jquery-chart

效果以下：

在jquery編譯數組時，通常使用for循環。

jquery封裝了each方法，它也能夠用來遍歷數組

$.each()函數和 $(selector).each()是不同的，那個是專門用來遍歷一個jQuery對象。$.each()函數可用於迭代任何集合，不管是「名/值」對象（JavaScript對象）或數組。在迭代數組的狀況下，回調函數每次傳遞一個數組索引和相應的數組值做爲參數。（該值也能夠經過訪問this關鍵字獲得，可是JavaScript將始終將this值做爲一個Object ，即便它是一個簡單的字符串或數字值。）該方法返回其第一個參數，這是迭代的對象。

注意: $.each()函數會在內部檢索而且使用傳遞集合的 length屬性。因此，若是集合有一個名爲length的屬性 - 好比 {bar: 'foo', length: 10} - 這個函數可能沒法正常工做。

$.each([52, 97], function(index, value) {
  alert(index + ': ' + value);
});

這將產生兩個信息：

0: 52
1: 97

若是對象是做爲集合使用，回調函數每次傳遞一個鍵值對的：

var obj = {
  "flammable": "inflammable",
  "duh": "no duh"
};
$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

再次，這將產生兩個信息：

flammable: inflammable
duh: no duh

咱們能夠在$.each()返回false來終止迭代。返回非false至關於一個循環中的continue語句，這意味着，它會當即跳出當前的迭代，轉到下一個迭代。

2、移動端單位介紹　　　　　　　　　　　　　　　　　

前言

在頁面總體佈局中，頁面元素的尺寸大小（長度、寬度、內外邊距等）和頁面字體的大小也是重要的工做之一。一個合理設置，則會讓頁面看起來井井有條，重點鮮明，賞心悅目。反之，一個不友好的頁面尺寸和字體大小設置，則會增長頁面的複雜性，增長用戶對頁面理解的複雜性；甚至在當下訪問終端（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字體大小

能夠認爲它沒啥缺點吧！反正我我的仍是挺喜歡的

頁面的單位是配合使用的，不是統一使用一種單位。

%通常用於容器
使用%，高度很差控制

em通常用來設置font-size和line-height

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        body{
            padding-top:70px;
        }
        .header{
            width: 100%;
            height: 70px;
            background-color: red;
            position: fixed;
            top: 0;
            left: 0;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
        ul li{
            float: left;
            width: 100px;
            height: 100px;
            margin: 30px;
            background-color: green;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="header-top">

    </div>
    <div class="header-bottom">

    </div>
</div>

<ul class="list clearfix">
    <li>11223</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

</body>
</html>

View Code

使用ipone5的尺寸來訪問

解決移動端固定導航欄

經過設置html和body，來固定導航欄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        html{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        body{
            /*padding-top:70px; */
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        .header{
            width: 100%;
            height: 70px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
        ul{
            margin-top: 70px;
        }
        ul li{
            float: left;
            width: 100px;
            height: 100px;
            margin: 30px;
            background-color: green;
        }
    </style>
</head>
<body>

    <div class="header">
        <div class="header-top">
            
        </div>
        <div class="header-bottom">
            
        </div>
    </div>

    <ul class="list clearfix">
        <li>11223</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
</body>
</html>

View Code

網頁效果：

動態的修改根元素的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>

View Code

運行代碼看效果吧！！

使用rem完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        html{
            width: 100%;
            height: 100%;
            overflow: hidden;
            /*font-size: 20px;*/
            /*1rem=20px  4rem=80px*/
            /*1px = 0.01rem*/
        }
        body{
            /*padding-top:70px; */
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        .header{
            width: 100%;
            height: 0.8rem;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
        ul{
            margin-top:0.8rem;
        }
        ul li{
            float: left;
            /*實際對應的是300px,由於js計算width最小單位爲100
            rem必需要結合js配置使用才行
            */
            width: 3rem;
            height: 3rem;
            margin: 1.2rem;
            background-color: green;
            font-size: 0.3rem;


        }
    </style>
</head>
<body>
<!-- rem  root -->
<div class="header">
    <div class="header-top">

    </div>
    <div class="header-bottom">

    </div>
</div>

<ul class="list clearfix">
    <li>11223</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script type="text/javascript">
    /*得到頁面寬度後動態修改html上的fontsize
    * 320爲iphone5設計稿下的頁面寬度，以下設置後頁面的頁面在iphone5等寬屏幕上html
    * 的font-size會變爲20px，即 1rem = 100px  100px=1rem    1px=0.01rem
    * 因此設置元素尺寸的時候，若是測量設計稿 15px  則需設置尺寸爲 (0.05*15)rem = 0.75rem
    */
    !(function(doc, win) {
        var docEle = doc.documentElement,
            // onorientationchange html5屏幕旋轉事件
            // resize 對瀏覽器窗口調整大小進行計數
            evt = "onorientationchange" in window ? "orientationchange" : "resize",
            fn = function() {
                var width = docEle.clientWidth;  //網頁可見區域寬
                console.log(width)
                // 這個1226是版心
                // 100是爲了好調整，由於它要作除法
                width && (docEle.style.fontSize = 100 * (width / 1160) + "px");
            };
        //addEventListener 指定元素添加事件句柄,false表示事件句柄在冒泡階段執行
        win.addEventListener(evt, fn, false);
        //dom內容加載完畢,觸發DOMContentLoaded事件
        doc.addEventListener("DOMContentLoaded", fn, false);
    }(document, window));
</script>

</body>
</html>

View Code

訪問網頁，當屏幕尺寸愈來愈小時，文字的大小也會相應的變化。

作移動端適配時，rem是咱們常常用到的單位，它的好處你們能夠自行搜索，網上已經有不少了。
可是咱們再將設計稿上的px轉換成rem時，得手動的去計算，這是一個很耗時、費力的過程，有沒有什麼辦法能夠「解放」咱們呢？

CSSREM

這是插件是flashlizi爲sublime text編寫的一個插件，用起來真的很方便！咱們能夠在GitHub上看到。

下面我介紹一下，如何配置：

2.1 咱們能夠在GitHub上下載所依賴的文件；

2.2 打開Sublime Text，進入packages目錄（Sublime Text -> Preferences -> Browse Packages）；

2.3 將cssrem-master文件夾放在上一步打開的目錄中，重啓sublime text便可生效；

咱們也能夠修改默認配置：
打開cssrem-master文件夾下的cssrem.sublime-settings文件，進行修改
{
    "px_to_rem": 40, //px轉rem的單位比例，默認爲40
    "max_rem_fraction_length": 6, //px轉rem的小數部分的最大長度。默認爲6。
    "available_file_types": [".css", ".less", ".sass",".html"]
    //啓用此插件的文件類型。默認爲：[".css", ".less", ".sass"]
}

實際測試：
新建一個.css文件：

按tab鍵，獲得以下結果：

是否是很方便，快動手去嘗試吧~

3、Bootstrap學習　　　　　　　　　　　　　　　　　　

1、Bootstrap的介紹

凡是使用過Bootstrap的開發者，都不在意作這麼兩件事情：複製and粘貼。哈哈~，是的使用Bootstrap很是簡單，可是在複製粘貼以前，須要先對Bootstrap的用法一一熟悉以後咱們纔開始幹活！

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

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

官方網址爲：

http://www.bootcss.com/

下面這些網站都是基於Bootstrap開發的。

2、bootstrap的下載

目前最新版本是4，可是此版本不夠穩定。目前大多數用的仍是v3.3.7版本。

下載連接以下：

https://v3.bootcss.com/getting-started/#download

下載生產環境的

若是使用npm安裝，使用以下命令

npm install bootstrap@3 --save

基本模板

點擊下載網頁右測的基本模板

將下載的bootstrap解壓，獲得目錄bootstrap-3.3.7-dist，只要導入css目錄下的bootstrap.min.css文件便可。

基本代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

網頁訪問，效果以下：

使用谷歌瀏覽器打開，按f12打開控制檯，查看右側的樣式

發現h1已經被bootstrap從新定義了。bootstrap內部封裝了不少樣式，直接引用就可使用了，很是方便。bootstrap的源代碼，不建議修改。

全局 CSS 樣式

設置全局 CSS 樣式；基本的 HTML 元素都可以經過 class 設置樣式並獲得加強效果；還有先進的柵格系統。

https://v3.bootcss.com/css/

佈局容器

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

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

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

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <h1>你好，世界！</h1>
</div>

</body>
</html>

View Code

訪問網頁，發現container的寬度爲970，而且div作了居中效果。

.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。

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

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <h1>你好，世界！</h1>
</div>

</body>
</html>

View Code

訪問網頁，發現container的寬度爲1078，div是靠左邊的。

若是想要調整container類的樣式，不要修改源代碼。而是在container 後面加入自定義的類，好比bootstrap官網

其中projects，就是自定義的類

柵格系統

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。

網頁尺寸的黃金比例：960 Grid System(網格設計)
960 Grid System是使用固定寬度960pixel(像素)置中對齊畫面的方式呈如今網頁上，去除左右兩邊各10pixel的空間，留下中間940pixel的區塊以20pixel做爲間隔分欄。在空間設計上，可隨意合併多欄做爲版面配置及網頁尺寸的設定，合併出來的欄寬也不會有畸零數，有利於CSS中DIV寬度的設定。

http://960.gs/

找到這個頁面，它是12列的，點擊show grid(格子)

有12列，它的寬度是同樣的，格子之間的間距也是同樣的。

這樣看起來，就是一個黃金對稱比例。網頁縮放時，不會影響佈局。

主流的網頁，都是採用12列架構的。上面的網頁只是一種表現形式，還有其餘的12列表現形式。

好比這個

簡介

柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。

柵格參數

經過下表能夠詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工做的。

	超小屏幕手機 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面顯示器 (≥992px)	大屏幕大桌面顯示器 (≥1200px)
柵格系統行爲	老是水平排列	開始是堆疊在一塊兒的，當大於這些閾值時將變爲水平排列C
`.container` 最大寬度	None （自動）	750px	970px	1170px
類前綴	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）數	12
最大列（column）寬	自動	~62px	~81px	~97px
槽（gutter）寬	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

實例：從堆疊到水平排列

使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在」 .row 內。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6">「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。</div>
        <div class="col-lg-3 col-md-4 col-sm-6">「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。</div>
        <div class="col-lg-3 col-md-4 col-sm-6">「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。</div>
    </div>
</div>

</body>
</html>

View Code

訪問網頁，

縮小屏幕，剛開始是顯示3列，慢慢的縮小屏幕，顯示2個，到最後，顯示1個。

內容部分，能夠本身寫樣式來修飾，若是樣式和bootstrap衝突了，以本身寫的樣式爲準。

col系列，設置的padding是15px

若是設計師要求是16px,那麼就不能使用bootsrtap

表單

基本實例

單獨的表單控件會被自動賦予一些全局樣式。全部設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性爲 width: 100%;。將 label 元素和前面提到的控件包裹在 .form-group 中能夠得到最好的排列。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6">
        <form>
            <div class="form-group">
                <label for="username">用戶名</label>
                <input type="text" class="form-control" id="username" placeholder="請輸入用戶名">
            </div>
            <div class="form-group">
                <label for="pwd">密碼</label>
                <input type="password" class="form-control" id="pwd" placeholder="請輸入密碼">
            </div>
            <button type="submit" class="btn btn-info">註冊</button>
        </form>
    </div>
</div>

</body>
</html>

View Code

訪問網頁，效果以下：

舉例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-md-6">

        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">用戶名</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="請輸入用戶名">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="請輸入密碼">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success">註冊</button>
                    <button type="submit" class="btn btn-danger">註冊</button>
                    <button type="submit" class="btn btn-info">註冊</button>
                    <button type="submit" class="btn btn-warning">註冊</button>
                </div>
            </div>
        </form>

    </div>
</div>

</body>
</html>

View Code

訪問網頁：

排版

標題

HTML 中的全部標題標籤，<h1> 到 <h6> 都可使用。另外，還提供了 .h1 到 .h6 類，爲的是給內聯（inline）屬性的文本賦予標題的樣式。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6">
        <h1>h1. Bootstrap heading</h1>
        <h2>h2. Bootstrap heading</h2>
        <h3>h3. Bootstrap heading</h3>
        <h4>h4. Bootstrap heading</h4>
        <h5>h5. Bootstrap heading</h5>
        <h6>h6. Bootstrap heading</h6>
    </div>
</div>

</body>
</html>

View Code

訪問網頁：

內聯文本元素

Marked text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6">
        You can use the mark tag to <mark>highlight</mark> text.
    </div>
</div>

</body>
</html>

View Code

訪問網頁：

小號文本

對於不須要強調的inline或block類型的文本，使用 <small> 標籤包裹，其內的文本將被設置爲父容器字體大小的 85%。標題元素中嵌套的 <small> 元素被設置不一樣的 font-size 。

你還能夠爲行內元素賦予 .small 類以代替任何 <small> 元素。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6">
        <p class="small">
            對於不須要強調的inline或block類型的文本，使用small標籤包裹，其內的文本將被設置爲父容器字體大小的 85%。標題元素中嵌套的small元素被設置不一樣的 font-size 。
        </p>
    </div>
</div>

</body>
</html>

View Code

訪問網頁：

對齊

經過文本對齊類，能夠簡單方便的將文字從新對齊。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6">
        <p class="text-left">Left aligned text.</p>
        <p class="text-center">Center aligned text.</p>
        <p class="text-right">Right aligned text.</p>
        <p class="text-justify">Justified text.</p>
        <p class="text-nowrap">No wrap text.</p>
    </div>
</div>

</body>
</html>

View Code

訪問網頁：

改變大小寫

經過這幾個類能夠改變文本的大小寫。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6">
        <p class="text-lowercase">Lowercased text.</p>
        <p class="text-uppercase">Uppercased text.</p>
        <p class="text-capitalize">Capitalized text.</p>
    </div>
</div>

</body>
</html>

View Code

範圍網頁：

有序列表

順序相當重要的一組元素。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6">
        
        <!--list-unstyled表示去除默認樣式-->
        <ul class="list-unstyled">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        
    </div>
</div>

</body>
</html>

View Code

訪問網頁：

代碼

內聯代碼

經過 <code> 標籤包裹內聯樣式的代碼片斷。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6">

        <p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>

    </div>
</div>

</body>
</html>

View Code

訪問網頁：

表格

基本實例

爲任意 <table> 標籤添加 .table 類能夠爲其賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線。這種方式看起來不少餘！？可是咱們以爲，表格元素使用的很普遍，若是咱們爲其賦予默認樣式可能會影響例如日曆和日期選擇之類的插件，因此咱們選擇將此樣式獨立出來。

條紋狀表格

經過 .table-striped 類能夠給 <tbody> 以內的每一行增長斑馬條紋樣式。

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6">

        <table class="table table-striped">
            <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>韓雪</td>
                <td>18</td>
            </tr>
            <tr>
                <td>唐嫣</td>
                <td>20</td>
            </tr>
            </tbody>
        </table>

    </div>
</div>

</body>
</html>

View Code

訪問網頁：

帶邊框的表格

添加 .table-bordered 類爲表格和其中的每一個單元格增長邊框。

鼠標懸停

經過添加 .table-hover 類可讓 <tbody> 中的每一行對鼠標懸停狀態做出響應。

緊縮表格

經過添加 .table-condensed 類可讓表格更加緊湊，單元格中的內補（padding）均會減半。

狀態類

經過這些狀態類能夠爲行或單元格設置顏色。

Class	描述
`.active`	鼠標懸停在行或單元格上時所設置的顏色
`.success`	標識成功或積極的動做
`.info`	標識普通的提示信息或動做
`.warning`	標識警告或須要用戶注意
`.danger`	標識危險或潛在的帶來負面影響的動做

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6">

        <table class="table table-striped table-bordered table-hover table-condensed">
            <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
            </tr>
            </thead>
            <tbody>
            <tr class="success">
                <td>韓雪</td>
                <td>18</td>
            </tr>
            <tr class="info">
                <td>唐嫣</td>
                <td>20</td>
            </tr>
            <tr class="warning">
                <td>劉詩詩</td>
                <td>20</td>
            </tr>
            </tbody>
        </table>

    </div>
</div>

</body>
</html>

View Code

網頁效果：

響應式表格

將任何 .table 元素包裹在 .table-responsive 元素內，便可建立響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。

必須在table標籤父級元素設置，好比div

舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6 table-responsive" >

        <table class="table table-striped table-bordered table-hover table-condensed">
            <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
            </tr>
            </thead>
            <tbody>
            <tr class="success">
                <td>韓雪</td>
                <td>18</td>
            </tr>
            <tr class="info">
                <td>唐嫣</td>
                <td>20</td>
            </tr>
            <tr class="warning">
                <td>劉詩詩</td>
                <td>20</td>
            </tr>
            <tr class="danger">
                <td>戚薇，1984年10月26日出生於四川省成都市武侯區，中國內地女演員、歌手，畢業於浙江傳媒學院錄音藝術專業。</td>
                <td>20</td>
            </tr>
            </tbody>
        </table>

    </div>
</div>

</body>
</html>

View Code

訪問網頁：

組件

無數可複用的組件，包括字體圖標、下拉菜單、導航、警告框、彈出框等更多功能。

實例

能夠把它們應用到按鈕、工具條中的按鈕組、導航或輸入框等地方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="col-md-6">

        <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
        </button>

    </div>
</div>

</body>
</html>

View Code

訪問網頁：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--適用於移動設備，禁止頁面縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<!--導航-->
<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="collapse navbar-collapse" id="nav">
            <ul class="nav navbar-nav">
                <li><a href="#">首頁</a></li>
                <li><a href="#">課程</a></li>
                <li><a href="#">博客</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登錄</a></li>
                <li><a href="#">註冊</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--正文-->
<div class="container">
    <div class="col-md-4">
        <!--左側內容-->
        <ul class="list-unstyled">
            <li><input type="email" class="form-control" placeholder="T"></li>
            <li><input type="email" class="form-control" placeholder="H"></li>
            <li><input type="email" class="form-control" placeholder="I"></li>
            <li><input type="email" class="form-control" placeholder="S"></li>
            <li><input type="email" class="form-control" placeholder="I"></li>
            <li><input type="email" class="form-control" placeholder="S"></li>
        </ul>
    </div>
    <!--右側圖片-->
    <div class="col-md-8">
        <a href="#">
            <img class="img-responsive center-block" src="../../day46/images/banne.jpg">
        </a>
    </div>
</div>

</body>
</html>