bootstrap之col-xs-*、col-sm-* 、col-md-*和.col-lg-*

Mars-xq發表於2019-01-10
boot

webstrom新建bootstrap專案，

在這裡插入圖片描述

匯入css和js 專案結構如下：
在這裡插入圖片描述

寫入程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- jQuery (Bootstrap 的 JavaScript 外掛需要引入 jQuery) -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!--bootstrap js-->
    <script src="../js/bootstrap.bundle.js"></script>
    <script src="../js/bootstrap.js"></script>
    <!--bootstrap css-->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-grid.css">
    <link rel="stylesheet" href="../css/bootstrap-reboot.css">
    <style>
        .c3 {
            background: #c69500;
        }

        .c4 {
            background: #20c997;
        }

        .c6 {
            background: #6f42c1;
        }

        .c8 {
            background: #ed969e;
        }
    </style>
</head>
<!--
1、col是column簡寫：列；
2、xs是maxsmall簡寫：超小， sm是small簡寫：小，  md是medium簡寫：中等， lg是large簡寫：大；
3、-* 表示佔列數，即佔每行row分12列柵格系統比；
4、.col-xs-* 超小螢幕如手機 （<768px）時使用；
   .col-sm-* 小螢幕如平板 （768px ≤ 寬度 ＜992px）時使用；
   .col-md-* 中等螢幕如普通顯示器 （992px ≤ 寬度 ＜ 1200px）時使用；
   .col-lg-* 大螢幕如大顯示器 （≥1200px）時使用。
當螢幕尺寸
小於 768px 的時候，用 col-xs-12 類對應的樣式；
在 768px 到 992px 之間的時候，用 col-sm-9 類對應的樣式；
在 992px 到 1200px 之間的時候，用 col-md-6 類對應的樣式；
大於 1200px 的時候，用 col-lg-3 類對應的樣式；

解釋
1、柵格系統都會自動的把每行row分為12列，
col-xs-*、col-sm-* 、col-md-*和.col-lg-* 後面跟的參數列示在當前的螢幕中的佔列數。
例如 <div class="col-xs-6 col-md-3"></div> 這個div在螢幕中佔的位置是：
 .col-xs-6 在超小螢幕中佔6列，也就是螢幕的一半（12/6列=2個div），
 .col-md-3 在中等螢幕中佔3列也就是1/4（12/3列=4個div）。

2、反推，
如果我們要在移動端並排顯示3個div(12/3個=每個佔4 列 )，則col-xs-4；
在PC端上顯示6個div(12/6個=每個佔2列 ) ，則 col-md-2。
-->
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 c4">col-md-4</div>
        <div class="col-md-4 c4">col-md-4</div>
        <div class="col-md-4 c4">col-md-4</div>
        <!-- 說明：每row行共12列，分個3div，每個div平佔4列，即3個*4列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-4 c4">col-md-4</div>
        <div class="col-md-8 c8">col-md-8</div>
        <!-- 說明：每row行共12列，分個2div，第1個div佔4列，第2個div則佔8列，即4列+8列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-3 c3">col-md-3</div>
        <div class="col-md-6 c6">col-md-6</div>
        <div class="col-md-3 c3">col-md-3</div>
        <!-- 說明：每row行共12列，分個3div，每1,3個div佔3列，第2個div則佔6列，即3列+6列+3列=12列 -->
    </div>

    <div class="col-xs-12 col-sm-9 col-md-6 col-lg-3" style="background: #1e7e34">
        col-xs-12 col-sm-9 col-md-6 col-lg-3
    </div>
    <!--
    當螢幕尺寸：
    小於 768px 的時候，用 col-xs-12 類對應的樣式；
    在 768px 到 992px 之間的時候，用 col-sm-9 類對應的樣式；
    在 992px 到 1200px 之間的時候，用 col-md-6 類對應的樣式；
    大於 1200px 的時候，用 col-lg-3 類對應的樣式；
    -->
</div>
</body>
</html>

相關文章