WEB前端第四十八課——BootStrap布局container、code、table、img、flex

本文轉載自查看原文 2020-09-22 18:47 448 Web前端

1.基礎

　　BootStrap是全球最流行的前端框架，用於構建響應式、移動設備優先的WEB站點。

　　可以通過官網：https://getbootstrap.com/，下載BootStrap以獲取編譯過的CSS和JS文件。

　　然后將下載的本地化文件引入HTML中，也可以使用CDN的方式引入。

　　Bootstrap 頁面的基本模板如下（來自於Bootstrap中文網）：

<!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="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

2.容器

　　BootStrap帶有三種不同的容器：

　　　　.container，它的 max-width在每個響應斷點設置一個

　　　　.container-fluid，這是 width:100% 所有斷點

　　　　.container-{breakpoint}，width:100%直到指定的斷點為止

　　其中，.container-{breakpoint}又分為四種：

　　　　.container-sm，

　　　　.container-md，

　　　　.container-lg，

　　　　.container-xl，

　　每種容器的 max-width與屏幕斷點之間的對應關系：

　　關系表測試代碼;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="./BootStrap/bootstrap.min.css">
    <script src="./BootStrap/jquery-1.12.4.min.js"></script>
    <script src="./BootStrap/bootstrap.min.js"></script>

    <style>
        .testDiv{height: 50px;background-color: blue;}
    </style>
</head>
<body>
//修改 div類名進行逐一測試。
    <div class="container-lg testDiv"></div>

    <script>
//打印當前窗口寬度。
        console.log($(window).attr("innerWidth"));
    </script>
</body>
</html>

3.布局

　　BootStrap提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增減變化，

　　系統會自動分為最多12列。

　　BootStrap的網格系統在各種屏幕和設備上的關系約定如下表：

　　BootStrap中的網格(柵格)系統被稱為布局，它通過一系列的行（row）與列（column）的組合創建頁面布局。

　　　　網格系統的實現原理非常簡單，僅僅是通過定義容器大小，平分12等份，再調整內外邊距，

　　　　最后結合媒體查詢，就制作出了強大的響應式網格系統。

　　　　在使用的時候也可以根據實際情況重新編譯LESS/Sass源碼平分成24份或32份，但12份是最常見的，

　　　　Bootstrap框架中的網格系統就是將容器平分成12份。

　　示例代碼：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="./BootStrap/bootstrap.min.css">
    <script src="./BootStrap/jquery-1.12.4.min.js"></script>
    <script src="./BootStrap/bootstrap.min.js"></script>
    <style>
        .row>[class^=col-]{
            padding-top: .75rem;
            padding-bottom: .75rem;
            background-color: rgba(96,69,128,.25);
            border: 1px solid rgba(255,11,12,.2);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">四分之一</div>
        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">四分之一</div>
        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">四分之一</div>
        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">四分之一</div>
    </div>
</div>
<script>
    console.log($(window).attr("innerWidth"));
</script>
</body>

4.使用規則

　　① 數據行（.row）必須包含在容器（.container）中，便於設置合適的內距(padding)和對齊方式(alignment)。

　　② 在行（.row）內可以添加列（.column），但是列數之和不能超過平分的總列數，比如12。

　　③ 預定義的網格類，比如 .row、.col-sm-4，可用於快速創建網格布局，LESS混合類可用於更多語義布局。

　　④ 具體內容應當放置在列容器（column）內，而且只有列（column）才可以作為行容器（.row）的直接子元素。

　　⑤ 通過設置內距（padding）定義列間距，第一列和最后一列設置“負值”的外距（margin）抵消內距（padding）影響。

　　其他說明;

　　　　BootStrap根據設備屏幕大小，查找對應的類（參考前述布局關系表格），並使用它們的設置。

　　　　使用類名 “.col-”前綴時，表示所有屏幕都保持相同比例，即列（column）布局與屏幕大小無關。

　　　　類名不加任何后綴，僅為“.col”時表示完全等分，即行（row）內所有列寬度相同。

　　　　對於等寬列，可以通過加入“<div class="w-100"></div>”這樣一個div元素將前后分行。

　　　　類名中規定占比和類名中設置自動等分，兩種方式可以混合使用，如其中一塊內容明確占比而其他不明確的情況下。

　　　　代碼示例;

　　　　　　　　　　</div>

5.BootStrap排版

　　① text-muted，用於設置副標題（淺灰色），配合<small>標簽使用

　　　示例：<h3>

　　　　　　　　H3 heading label

　　　　　　　　<small class="text-muted"> Secondary heading info </small>

　　　　　　</h3>

　　　類似的文本情景顏色類：

　　② display-n，用於設置標題字體大小，定義比<h1>更大的字體

　　　示例：<h1 class="display-1"> text </h1>

　　③ 內聯文本元素

　　　　<mark>highlight</mark>，突出顯示標簽

　　　　<del>text</del>，刪除標簽

　　　　<u>text</u>，下划線標簽

　　　　<small>text</small>，將文本設置為父容器字體大小的85%

　　　　　　　　　　　　　　也可以通過給元素設置“.small”類，相當於small元素

　　　　<strong></strong>，加粗字體

　　　　<em></em>，斜體字

　　　　… …

　　④ 對齊方式

　　　　在 BootStrap中通過設置標簽類，實現對齊操作，如下：

　　　　<p class="text-left">左對齊</p>

　　　　<p class="text-center">居中對齊</p>

　　　　<p class="text-right">右對齊</p>

　　　　<p class="text-justify">兩端對齊</p>

　　　　<p class="text-nowrap">不換行</p>

　　⑤ 字母大小寫

　　　　<p class="text-capitalize">首字母大寫</p>

　　⑥ 其他

　　　　縮略語、地址、引用、… …

　　　　都是通過設置標簽類名來引用BootStrap樣式的。

　　⑦ 列表

　　　　無序列表，<ul> <li>...</li> </ul>

　　　　有序列表，<ol> <li>...</li> </ol>

　　　　無樣式列表，<ul class="list-unstyled"> <li>...</li> </ul>

　　　　內聯列表，<ul class="list-inline"> <li class="list-inline-item">…</li> </ul>

　　　　有描述短語列表：

　　　　水平排列描述，

6.代碼文本

　　① <code></code>，

　　　　標簽用於包括內聯樣式的代碼片段

　　　　示例：<code><section></code>

　　　　其中，“<”表示左尖號，“>”表示右尖號。

　　② <kbd></kbd>，

　　　　用於標記用戶通過鍵盤輸入的內容

　　　　示例：<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

　　　　可以多層嵌套，第一層增加背景顏色，第二層增強字體

　　③ <pre></pre>，

　　　　用於標記代碼塊

　　　　示例：<pre><p>Sample text here...</p></pre>

　　④ <var></var>，

　　　　用於標記變量

　　　　示例：<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

　　　　輸出值：y = mx + b

7.表格

　　① 設置表格基本樣式，給<table>標簽添加“.table”類。

　　　　示例：<table class="table"> ... </table>

　　② 條紋狀表格，給<table>標簽添加“.table-striped”類。

　　　　示例：<table class="table table-striped"> ... </table>

　　③ 帶邊框表格，給<table>標簽添加“.table-bordered”類。

　　　　示例：<table class="table table-bordered"> ... </table>

　　④ 懸停樣式表格，給<table>標簽添加“.table-hover”類。

　　　　示例：<table class="table table-hover"> ... </table>

　　⑤ 緊縮樣式表格，給<table>標簽添加“.table-sm”類。

　　　　示例：<table class="table table-sm"> ... </table>

　　⑥ 響應式表格，將<table>標簽包裹在類名為“.table-responsive”的<table>內，即可創建響應式表格。

　　　　示例：<table class="table-responsive"> <table class="table"> ... </table> </table>

    <table class="table table-sm table-hover table-bordered">
    <!--  定義表頭背景顏色類  -->
        <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Username</th>
        </tr>
        </thead>
        <tbody>
    <!--  定義行頭部背景顏色類  -->
        <tr class="thead-light">
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr class="thead-light">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr class="thead-light">
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>

　　補充：

　　　　① HTML表格有兩種單元格類型：

　　　　　　表頭單元格，包含頭部信息，由<th>標簽創建（元素中的文本通常呈現為粗體並且居中）

　　　　　　標准單元格，包含表體數據，由<td>標簽創建（元素中的文本通常是普通的左對齊文本）

　　　　② colspan屬性用於定義跨列（合並列）操作，語法：colspan="num"

　　　　　rowspan屬性用於定義跨行（合並行）操作，語法：rowspan="num"

　　　　③ scope屬性用於定義表頭單元格為行、列或行組、列組的頭部，

　　　　　　　　<th scope="col">，表示單元格是列的表頭

　　　　　　　　<th scope="row">，表示單元格是行的表頭

　　　　　　　　<th scope="colgroup">，表示單元格是列組的表頭

　　　　　　　　<th scope="rowgroup">，表示單元格是行組的表頭

8.圖片

　　① “.img-fluid”類，用於設置圖片支持響應式布局

　　　　示例：<img src="..." class="img-fluid" alt="">

　　② 圖片形狀類

　　　　.img-rounded，圓角圖片

　　　　.img-circle，圓形圖片

　　　　.img-thumbnail，圓角邊框圖片

　　③ 圖片對齊方式

　　　　.float-left，左對齊

　　　　.float-right，右對齊

　　　　.mx-auto，自動對齊（圖片的margin屬性設置為auto），可配合“.d-block”類設置圖片居中顯示

　　　　.d-block，將“display”屬性設置為“block”

　　　　代碼示例：

　　④ 圖文混合，通過<figure>標簽實現“圖片加文字備注”的效果，示例如下：

<figure class="figure">
    <img src="./Images/stair.jpg" class="img-fluid img-thumbnail rounded-circle" alt="...">
    <figcaption class="figure-caption text-center">A caption for the above image.</figcaption>
</figure>

　　　　<figure> 標簽通常用於規定獨立的流內容（圖像、圖表、照片、代碼等等）。

　　　　<figure> 元素的位置相對於主內容是獨立的。如果被刪除，則不應對文檔流產生影響。

　　　　<figure> 元素可以通過在其中插入 <figcaption> 元素（作為第一個或最后一個子項）用於定義標題。

　　　　 <figcaption> 元素中可以通過“.text-align”類定義標題文字對齊方式。

　　ps：“.clearfix”類，用於清除浮動樣式，相當於“{clear : both;}”的css樣式。

9.flex

　　主要彈性盒樣式：

　　⑴ .d-flex，創建彈性盒容器

　　⑵ .d-inline-flex，定義行內彈性盒容器

　　⑶ .flex-row，定義彈性子元素水平方向對齊，默認樣式

　　⑷ .flex-row-reverse，定義子元素水平右對齊倒序顯示，與 .flex-row相反

　　⑸ .flex-column、.flex-row-reverse，定義子元素垂直方向排列、垂直方向倒序排列

　　⑹ 內容水平對齊：

　　　　① .justify-content-*-start，左對齊

　　　　② .justify-content-*-end，右對齊

　　　　③ .justify-content-*-center，居中對齊

　　　　④ .justify-content-*-between，兩端對齊

　　　　⑤ .justify-content-*-around，等邊距對齊

　　⑺ 內容垂直排列：

　　　　① .align-content-*-start，頂端排列

　　　　② .align-content-*-end，底端排列

　　　　③ .align-content-*-center，居中排列

　　　　④ .align-content-*-stretch，兩端排列

　　　　⑤ .align-content-*-around，等邊距排列

　　　注意，以上樣式中“ * ”位置可以設置屏幕尺寸 sm、md、lg、xl（可選），

　　　　　　不同設備根據設置適應排列對齊樣式；

　　　　　　其他彈性盒樣式也可以添加屏幕尺寸，從而實現響應式布局。

參考資料來源：BootStrap中文網（https://v3.bootcss.com/）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Linux性能優化實戰學習筆記：第四十八講 WEB前端第四十三課——jQuery框架（一）$()函數、添加事件監聽前端布局之Flex布局 Flex布局和Bootstrap布局兩者的比較 Asp.Net Web API 2第十八課——Working with Entity Relations in OData 基於BootStrap 4.x 中的Flex 實現各種布局前端入門5-CSS彈性布局flex 第十八課 Gazebo仿真器 BSP:Bootstrap基本布局（container, row, col-xs-4） OpenCV-Python 光流 | 四十八