Bootstrap <第一篇>

時間 2019-11-18

原文原文鏈接

1、使用Bootstrap要引用的文件

　　要使用Bootstrap，基本架構要引用以下文件：javascript

    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" scr="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" scr="bootstrap.min.js"></script>

　　最簡單的頁面示例代碼以下：css

<!doctype html><head>
    <meta charset="utf-8">
    <title>js</title>
    <link href="ace.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" scr="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" scr="bootstrap.min.js"></script></head><body><div>
    <h1 class="btn btn-success btn-large"><i class="icon-user icon-white"></i>Hello,World</h1></div></body></html>

　　顯示效果以下：html

2、使用前要點

　　一、DOCTYPEjava

　　Bootstrap使用了HTML5元素，因此HTML頭部要加上jquery

<!DOCTYPE html><html>....</html>

　　二、viewportbootstrap

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

Width=device-width => 表示頁面寬度是設備屏幕的寬度；確保網頁能被不一樣屏幕分辨率的設備正確呈現；瀏覽器
user-scalable=no => 是否能夠調整縮放比例(yes/no)；架構
initial-scale=1.0 => 表示初始的縮放比例，以 1:1 的比例呈現，不會有任何的縮放；minimum-scale=0.5：最小容許的縮放比例；佈局
maximum-scale=2.0：最大容許的縮放比例；網站

　　若是maximum-scale=1.0 與 user-scalable=no 一塊兒使用。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓您的網站看上去更像原生應用的感受。

　　這樣設置後，圖片或元素也設置style="width:100%"，那麼圖片看起來也是全屏的了。

　　三、img-responsive響應式圖像

　　爲圖片加上img-responsive屬性，可讓圖片對響應式佈局更加好。其樣式以下：

.img-responsive {　　display: inline-block;　　height: auto;　　max-width: 100%;
}

　　添加了此屬性的圖片會按比例縮小，但不能方法。

　　而上面的直接設置width:100%會放大，可能會出現失真的狀況。

3、Bootstrap網格系統

　　一、網格系統是什麼東西

　　Bootstrap把一個頁面分爲12列，經過指定數字就可以設置寬度。簡單的示例:

    <div class="row">
        <div class="col-xs-3">3</div>
        <div class="col-xs-6">6</div>
        <div class="col-xs-3">3</div>
    </div>

　　顯示效果以下：

　　當瀏覽器的寬度縮小時(爲下面說明響應式作鋪墊)，顯示效果以下：

　　要點：

　　一、row是容器，網格樣式要放在row容器裏面。

　　二、1個網頁是12列。

　　三、一共有4個前綴的網格class前綴，分別應用於分辨率的設備。

　　圖表以下：

　　二、響應式網格

　　示例說明：

    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
    </div>

　　顯示效果以下：

　　當瀏覽器縮小時：

　　當再進一步縮小時：

　　這就是所謂的響應式，說白了"響應式"就是根據瀏覽器的寬度來決定使用哪個class，以上效果展現了響應式佈局的原理:

當屏幕寬度u≥1200px時，bootstrap會自動選用col-lg-*這個class；
當屏幕寬度u≥992px時，bootstrap會自動選用col-sm-*這個class；
當屏幕寬度u≥768px時，bootstrap會自動選用col-md-*這個class；
當屏幕寬度u<768px時，bootstrap會自動選用col-lg-*這個class；

　　三、偏移列

　　偏移列的意思是隔開多少個列。

　　示例：

    <div class="col-xs-12 col-sm-6 col-md-3">3</div>　　//向右偏移2列了
    <div class="col-md-offset-2 col-xs-12 col-sm-6 col-md-3">3</div>

　　顯示效果以下：

　　.col-xs=* 類不支持偏移，它們能夠簡單地經過使用一個空的單元格來實現該效果。

　　這個樣式至關於設置了margin:寬度*列數。

　　四、嵌套列

　　在網格里嵌套網格

    <div class="row">
        <div class="col-xs-8">
            <div class="col-xs-2">2</div>
            <div class="col-xs-2">2</div>
            <div class="col-xs-2">2</div>
            <div class="col-xs-2">2</div>
        </div>
    </div>

　　輸出效果以下：

　　五、列排序

　　經過使用".col-md-push-*"和".col-md-pull-*"可以互換順序。其中*的範圍從1到11。

　　示例以下：

    <div style="margin-top:20px"></div>
    無排序：    <div class="row">
        <div class="col-sm-4">First</div>
        <div class="col-sm-8">Second</div>
    </div>
    有排序：    <div class="row">
        <div class="col-sm-4 col-sm-push-8">First</div>
        <div class="col-sm-8 col-sm-pull-4">Second</div>
    </div>

　　顯示效果以下：

　　以上class使用的理解爲：原本First佔據4列，Second佔據8列，若是要互換位置，則First要向右推(push)8個列，而Second要向左拉4個列。

相關標籤/搜索

每日一句

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