Bootstrap學習--柵格系統

時間 2019-11-11

標籤 bootstrap 學習柵格系統欄目 Bootstarp 简体版

原文原文鏈接

響應式佈局頁面：即同一套頁面能夠兼容不一樣分辨率的設備。css

Bootstrap依賴於柵格系統實現響應式佈局，將一行均分爲12個格子，能夠指定元素佔幾個格子。html

實現過程jquery

　　一、定義容器，至關於以前的tablebootstrap

　　　　* 容器分類：佈局

　　　　　　1）containe：固定寬度，可能存在留白ui

　　　　　　2）container-fluid ：100%寬度，無留白spa

　　二、定義行：至關於以前的tr，樣式：row插件

　　三、定義元素，指定該元素在不一樣的設備上所佔的格子數目。樣式：col-設備代號-格子數目htm

　　　　* 設備代號blog

　　　　　　xs：超小屏幕手機（<768px） col-xs-12

　　　　　　sm：小屏幕平板（>=768px）

　　　　　　md：中等屏幕桌面顯示器（>=992px）

　　　　　　lg：大屏幕大桌面顯示器（>=1200px）

　　注意事項：

　　　　1）一行中格子數目超過12，則超出部分自動換行

　　　　2）柵格類向上兼容：柵格類適用於與屏幕寬度大於或等於分界點大小的設備，而且針對小屏幕設備覆蓋柵格類

　　　　3）若真實設備寬度小於設置柵格類屬性設備代碼最小值，則一個元素沾滿一整行。

<!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="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件-->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .inner{
            border: 1px solid blue;
        }

    </style>

</head>
<body>
    <!--定義容器-->
    <div class = "container">
        <!--定義行-->
        <div class = "row">
            <!--定義元素-->
            <div class = "col-lg-1 col-sm-2 inner">柵格1</div>
            <div class = "col-lg-1 col-sm-2 inner">柵格2</div>
            <div class = "col-lg-1 col-sm-2 inner">柵格3</div>
            <div class = "col-lg-1 col-sm-2 inner">柵格4</div>
            <div class = "col-lg-1 col-sm-2 inner">柵格5</div>
            <div class = "col-lg-1 col-sm-2 inner">柵格6</div>
            <div class = "col-lg-1 col-sm-2 inner">柵格7</div>
            <div class = "col-lg-1 col-sm-2 inner">柵格8</div>
            <div class = "col-lg-1 col-sm-2 inner">柵格9</div>
            <div class = "col-lg-1 col-sm-2 inner">柵格10</div>
            <div class = "col-lg-1 col-sm-2 inner">柵格11</div>
            <div class = "col-lg-1 col-sm-2 inner">柵格12</div>
        </div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

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