初涉Bootstrap —— 柵格系統介紹極其用法

時間  2019-11-08
標籤 bootstrap 柵格 系統 介紹 極其 用法 欄目 Bootstarp 简体版
原文   原文鏈接

Bootstrap —— 柵格系統佈局

圖片描述

柵格系統簡介

響應式設計核心思想：css

  • 響應式設計：頁面的設計與開發應當根據用戶的行爲以及設備環境（系統平臺，屏幕尺寸、屏幕定向等）進行相應的響應和調整，具體的實踐方式由多方面決定，包括彈性網絡佈局、圖片使用等。html

  • 不管用戶在平板上仍是pc上應該可以自動切換分辨、圖片尺寸及相關腳本等，以適應不一樣設備。前端

  • 響應式設計是就一個網站可以兼容多個終端，而不是爲每一個終端都適配一個版本。jquery

bootstrap圍繞響應式進行設計bootstrap

圖片描述

能夠看到，bootstrap柵格系統把屏幕分爲四種（均指橫向分辨率）：

- extra small —— 超小屏幕（手機）： xs < 768px

此分隔方案下容器最大寬度：自動網絡

- small —— 小屏幕（平板）： sm ≥ 768px

此分隔方案下容器最大寬度：750pxdom

- middle —— 中等屏幕（桌面顯示器）： md ≥ 992px

此分隔方案下容器最大寬度：970px佈局

- large —— 大屏幕（大桌面顯示器） ： lg ≥ 1200px

此分隔方案下容器最大寬度：1170px網站

圖片描述

注意文檔上的字：

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

  • 系統自動把屏幕rowsegment成12份col，每份獲得的分辨率與顯示器屏幕大小有關，成正比。spa

  • 如上圖：指定Class時，尾部的數字即表示這一column佔總row的欄數

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Starter Template for Bootstrap</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <style type="text/css">
        .container div {
            border: solid 1px black;
        }
        .col-xs-4 {
            font-weight: bold;
        }
    </style>
    <body>
        <div class="test"></div>
        <div class="container">
            <div class="container">
                <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-6 col-sm-8">col-sm-6</div>
                    <div class="col-md-6 col-sm-4">col-sm-6</div>
                </div>
                <div class="row">
                    <div class="col-xs-4">col-xs-4</div>
                    <div class="col-xs-4">col-xs-4</div>
                    <div class="col-xs-4">col-xs-4</div>
                </div>
            </div>
        </div>
    </body>
</html>

第一行row設置中等分辨率.col-md-*

第二行row設置中等分辨率.col-md-*和小分辨率.col-sm-*

第三行row只設置超小分辨率.col-xs-*

而且記住這句話：

手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕上變爲水平排列

圖片描述

  • xs < 768px

  • 屏幕處於超小分辨率，第三行按照超小分辨率規則進行繪製，而其餘行未設置小於.col-md-*時col的規則。因此會堆疊起來，變爲水平排列。

圖片描述

  • sm ≥ 768px

  • 屏幕處於小分辨率，第三行不變（未設置小分辨率規則），第二行因爲設置了小分辨率.col-sm-*因此將會按照規則繪製成8/12 and 6/12

圖片描述

  • md ≥ 992px

  • 當屏幕處於中等分辨率下，則堆疊元素再也不起做用。將按照中等分辨率12等分默認規則進行繪製，第一行row的.col鋪散開，而且，第二行row設置了.col-md-*即中等分辨率繪製規則，則兩份column將按照6/12和6/12規則繪製。

  • 哪怕處於中等分辨率，或者以上，對於只設置超小分辨率規則的.col-xs-*也會起做用，因此第三行row依舊是按照3組4/12規則進行繪製 ——— 小分辨率向上兼容大分辨率

媒體查詢

  • 媒體查詢是進行響應式設計的核心要素，其功能很是強大

  • Bootstrap主要用到min-width,max-width以及and語法，用於在不一樣的分辨率下設置不一樣的css樣式 

@media (max-width: 767px) {
        /*小於 767px 這裏的樣式生效*/
    }
    @media (min-width: 768px) and (max-width: 991px) {
        /*在768px ~ 991px之間  這裏的樣式生效*/
    }
    @media (min-width: 1200px) {
        /*大於 1200px 這裏的樣式生效*/
    }

柵格系統用法

列偏移

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Starter Template for Bootstrap</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <style type="text/css">
        div {
            border: 1px black solid ;
        }
    </style>
    <body>
        <div class="container">
            <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">
                <div class="col-xs-6">col-xs-6</div>
                <div class="col-xs-6">col-xs-6</div>
            </div>
            <div class="row">
                <div class="col-md-3 col-md-offset-3">col-md-3</div>
                <div class="col-md-2 col-md-offset-2">col-md-2</div>
            </div>
        </div>
    </body>
</html>

圖片描述

  • 在當前列的範圍內，以左爲基礎向右偏移x/12,x表示offset後綴數字

  • 第三個row中，使用了col-md-offset-*列偏移

  • 偏移基點不是基於row的，好比.col-md-2偏移2格是基於.col-md-3來移動

列嵌套

<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">4</div>
        </div>

圖片描述

繼續加入一行row，代碼能夠看到，在本來8等分容器的基礎上繼續拆分紅了2個6等分的容器，這很好理解。

列排序

<div class="row">
                <div class="col-md-3 col-md-push-5">col-md-3</div>
                <div class="col-md-2 col-md-pull-2">col-md-2</div>
            </div>

圖片描述

  • 繼續添加Test,能夠看到兩個新的功能,push and pull

  • .col-md-push-*字面意思是"推"，可理解爲向左推，天然就往右移動了。

  • .col-md-pull-*與push相反，字面意思"拉"，在原來的位置基礎上，向左"拉"，容器向左移動。

  • 兩個屬性之間互不干涉，能夠重合。

跨設備組合定義

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

  • 適配了三種不一樣的分辨率下的容器組合

清除浮動

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Starter Template for Bootstrap</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <style type="text/css">
        div {
            border: 1px black solid ;
        }
    </style>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
            </div>
        </div>
    </body>
</html>

圖片描述
圖片描述
上圖是定義容器在不一樣分辨率下的佔比示意

  • 小分辨率下，3/12排一行

  • 超小分辨率下，6/12排兩行（第一行佔滿，自動float:left）

PS：關於浮動與清除可看這位前端大神楊元博客、端友radom和z-one：

- CSS浮動(float,clear)通俗講解

- 最優浮動閉合方案（這是咱們推薦的）

- 清除浮動的幾種方案極其方案優劣比較 

<div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (1)
                    sdfsdfsdflsjfsl;dfjsdl;kj
                    sdfsdfsdflsjfsl;dfjsdl;kj
                </div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (2)</div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (3)</div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (4)</div>
            </div>
        </div>

而後咱們給每一個col容器編號，並在編號爲1的col容器裏添加內容，如圖。
圖片描述

經過檢查元素可知，全部col塊都設置了float：left，（1）中添加內容後內容後容器高度擴大到第二行位置，使得本來應該在左邊的（3）容器沒法左對齊，這時須要清除浮動。

<body>
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (1)
                    sdfsdfsdflsjfsl;dfjsdl;kj
                    sdfsdfsdflsjfsl;dfjsdl;kj
                </div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (2)</div>
                <div class="clearfix visible-xs"></div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (3)</div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (4)</div>
            </div>
        </div>
    </body>

  • 在（3）容器的標籤以前添加： <div class="clearfix visible-xs"></div>，此代碼含義爲：只在超小分辨率的狀況下（前提），清除左右的浮動元素，則（3）號容器得以另起行並向左排列。

清除浮動後如圖：

圖片描述

  • 不明白clearfix功能，能夠向其添加文本內容，並將1234容器重置回原來的內容，看看具體實現。

    <body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (1)</div>
            <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (2)</div>
            <div class="clearfix visible-xs">ss</div>
            <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (3)</div>
            <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (4)</div>
        </div>
    </div>
</body>

    圖片描述

  • 另外，若是處於小分辨率以上，則是另一種方法和方案，注意代碼適用範圍

禁止響應式佈局

  • 不使用Bootstrap定義的容器，如將.container換爲別的class。如：ID

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程