Bootstrap4.x （李琰恢老師）

阿新 • • 發佈：2021-10-02

Bootstrap

01.Bootstrap4.x 入門

學習要點：

簡單介紹
下載和目錄
安裝和測試

本節課我們來開始學習 Bootstrap，第一節課重點了解它的作用，下載安裝以及測試。

一．簡單介紹

Bootstrap 是一款 CSS/HTML 的框架庫，目前最新版本是 V4.3;
它集成了各種常用的前端（HTML、CSS 和 JavaScript）元件庫；
用於響應式前端佈局，移動裝置優先的 Web 專案開發；
所以，在學習 Bootstrap 之前需要有 HTML5 的學習基礎；

二．下載和目錄

從官網上下載了壓縮包：bootstrap-4.3.1-dist.zip；
解壓後，有兩個目錄：css 和 js，以下是它的目錄結構；

在上面的目錄結構中，帶 min 字樣的是編譯後的壓縮版，可以用於生產部署環境，不帶 min 的可以用於開發除錯環境；帶 map 字樣的是 CSS 地圖查詢檔案，方便查詢精確的樣式位置。
js 目錄中沒有 jquery 庫檔案，需要我們自行下載安裝

三．安裝和測試

建立一個 Bootstrap 資料夾目錄，這裡將存放以後課程中所有程式碼和例項；
建立子目錄 01，並建立.html 程式碼，生成 HTML5 基本格式；

開發工具可以是 Sublime Text、Nodepad Plus 或者 WebStorm；

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>第一個 Bootstrap</title>
    <!-- 引入 Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 移動裝置優先 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head> <body>
    <h1>開啟，Bootstrap4！</h1>
    屬性註解：
    width=device-width 表示寬度是裝置螢幕的寬度。
    initial-scale=1 表示初始的縮放比例。
    shrink-to-fit=no 自動適應手機螢幕的寬度。
    <!-- 引入 jQuery 檔案 --> <script src="js/jquery-3.3.1.js"></script> <script src="js/bootstrap.js"></script>
    </body>
</html>

02. 佈局系統【上】

一．佈局介紹

對於容器佈局，Bootstrap4.x 提供了.container 和.container-fluid 兩種；
這兩種樣式是啟用佈局柵格系統最基本的要素；
contianer 是固體自適應方式，.container-fluid 是流體 100%自適應方式；
容器佈局可以巢狀，但一般來說，不推薦且很少使用到：

自適應對應的響應式方式如下 media：

// Small devices (landscape phones, 576px and up) 
@media (min-width: 576px) { ... } 
// Medium devices (tablets, 768px and up) 
@media (min-width: 768px) { ... } 
// Large devices (desktops, 992px and up) 
@media (min-width: 992px) { ... } 
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

從響應式的 media 可以看出，Bootstrap4 是以移動端為優先的。

二．柵格系統

Bootstrap4.x 的柵格系統是一個以移動為優先的網格系統；
基於 12 列的佈局、5 種響應尺寸（面向不同螢幕裝置）；
完全使用 flexbox 流式佈局構建的，完全支援響應式標準；
具體採用 div 容器的行、列和對齊內容來構建響應式佈局；

首先，實現一個一行三列的佈局，通過火狐瀏覽器切換螢幕測試；

<div class="container">
    <div class="row">
        <div class="col-sm">第一列</div>
        <div class="col-sm">第二列</div> 		
        <div class="col-sm">第三列</div>
    </div>
</div>

為了顯示的更加清楚，可以給行列加對比鮮明的 CSS 來觀察；
row 表示一行，.col-*來表示一列，實現了智慧三列；
sm 表示螢幕型別，本節先不去詳細瞭解，下節課會探討；
如果我們採用的是.container-fluid，那麼會 100%佔用螢幕寬度；

<div class="container-fluid">
  ...
</div>

在手機頁面都是一樣的，因為手機頁面大小都是固定的。

在.col-sm-*的星號位置，還可以強制設定每列所佔有的柵格列；

<div class="container-fluid">
    <div class="row"> 
        <div class="col-sm-4">第一列</div>
        <div class="col-sm-4">第二列</div>
        <div class="col-sm-4">第三列</div>
    </div> 
</div>

所佔的柵格位正好是 12 列，超過 12 列則會換行，小於 12 列則不能 100%；

以上智慧計算和強制設定柵格位都是等寬的，我們也可以設定不對稱的；

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-8">第一列</div> 
        <div class="col-sm-4">第二列</div>
    </div>
</div>

03.佈局系統【下】

學習要點：
一．柵格等級

柵格系統中有五個柵格等級，具體如下表：

如果只使用了超小螢幕的話，無論你拉到多大都會按照超小螢幕的大小來拉伸。

如果同時是使用兩個或以上的級別，並且比例相同，則遵循移動端優先的原則；

<div class="container">
    <div class="row">
        <div class="c col-sm-4 col-lg-6 col-xl-12">第一列</div> 
        <div class="c col-sm-4 col-lg-6 col-xl-12">第二列</div> 
        <div class="c col-sm-4 col-lg-12 col-xl-12">第三列</div>
    </div>
</div>

柵格系統支援只指定其中一種或幾種，其它隨機的方式，指定數字奇偶均可；

<div class="container"> 
    <div class="row"> 
        <div class="c col-sm">第一列</div> 
        <div class="c col-sm-7">第二列</div> 
        <div class="c col-sm">第三列</div>
    </div>
</div>

可以通過兩個或以上來實現不同裝置不同比例的混合佈局；

<div class="container"> 
    <div class="row"> 
        <div class="c col-sm-8 col-xl-12">第一列</div> 
        <div class="c col-sm-4 col-xl-12">第二列</div>
    </div>
</div>

使用.w-100 可以切割柵格欄位，進行分行操作；

<div class="container">
    <div class="row"> 
        <div class="c col">第一列</div>
        <div class="c col">第二列</div> 
        <div class="w-100"></div> 
        <div class="c col">第三列</div>
        <div class="c col">第四列</div>
    </div>
</div>

如果強制設定了 col-3 數值，那切割後，將不會自動填充；

<div class="container">
    <div class="row">
        <div class="c col-3">第一列</div>
        <div class="c col-3">第二列</div>
        <div class="w-100"></div> 
        <div class="c col-3">第三列</div> 
        <div class="c col-3">第四列</div>
    </div>
</div>

04. 對齊與排列

一．柵格對齊

1. 對於柵格系統中的行，我們可以其進行垂直對齊操作，如下表；

2. 要實現垂直效果，需要給行.row 和列.c 設定高度；

.row {
    height: 100px;
    margin: 20px 0; 
    border: dashed 1px red;
} 
.c { 
    border: solid 1px blue;
    height: 30px;
}

如果我們要垂直居中，那麼直接設定: .align-items-center

<div class="row align-items-center"> 
    <div class="c col">第一列</div>
    <div class="c col">第二列</div> 
    <div class="c col">第三列</div>
</div>

對於列來說，也有三種垂直居中的方法，如下表；

使用三種列垂直方案；

<div class="row align-items-center">
    <div class="c col align-self-start">第一列</div>
    <div class="c col align-self-center">第二列</div> 
    <div class="c col align-self-end">第三列</div>
</div>

如果我們要不足 100%填充的行實現水平對齊方式，參考下表；

比如說下面這個例子
```
<divclass="row">
<divclass="ccol-3">第一列</div>
<divclass="ccol-3">第二列</div>
<divclass="ccol-3">第三列</div>
</div>
```
這裡多出來的這些是就給我們排序用的。

每個列只佔 3 個柵格列，共 3 列，然後實現間隔相等分散對齊；

間隔相等分散：

<div class="row justify-content-around"> 
    <div class="c col-3">第一列</div>
    <div class="c col-3">第二列</div>
    <div class="c col-3">第三列</div>
</div>

兩端對齊分散：

<div class="row justify-content-between">
    <div class="c col-3">第一列</div>
    <div class="c col-3">第二列</div>
    <div class="c col-3">第三列</div>
</div>

二．柵格排列

柵格的列可以排序，使用.order-N，N 最大值為 12； 2. 如果我們要給一個三列的行的第一列排到最後，可以如下設定；

如果我們要給一個三列的行的第一列排到最後，可以如下設定；

<div class="row">
    <div class="c col-3 order-3">第一列</div>
    <div class="c col-3 order-2">第二列</div> 
    <div class="c col-3 order-1">第三列</div>
</div>

使用.order-first，強行設定列為第一列，而.order-last 為最後一列；

<div class="row align-items-start">
    <div class="c col-3 order-last">第一列</div>
    <div class="c col-3">第二列</div> 
    <div class="c col-3 order-first">第三列</div>
</div>

使用.offset-N 或.offset-*-N 來設定列的偏移量，1 表示一個柵格列；

<div class="row align-items-start">
    <div class="c col-3 offset-1">第一列</div>
    <div class="c col-3">第二列</div> 
    <div class="c col-3 offset-1">第三列</div>
</div>

使用.ml-N 或.mr-N 來微調列距離，使用.ml-auto 和.mr-auto 來左右對齊；

<div class="row align-items-start"> 
    <div class="c col-3">第一列</div>
    <div class="c col-3 ml-2">第二列</div>
    <div class="c col-3 ml-auto">第三列</div>
</div>

ml-N向左邊擠出去位置，就是向右偏移

mr-N向右寄出位置，那就是向左

05.內容排版

使用<h1>~<h6>可以建立不同尺寸的標題文字；

<h1>Bootstrap</h1> 
<h2>Bootstrap</h2> 
<h3>Bootstrap</h3>
<h4>Bootstrap</h4>
<h5>Bootstrap</h5>
<h6>Bootstrap</h6>

如果是使用其它元素標籤，比如
或
，呼叫.h1~6 同樣實現大標題；
```
<p class="h1">Bootstrap</p>
<div class="h2">Bootstrap</div>
```

通過.text-muted 樣式，構建大標題的附屬小標題；使用了這個樣式的字型會變暗

<p class="h1"> 
    Bootstrap <small class="text-muted">V4.3</small>
</p> 
<div class="h2"> 
    Bootstrap <small class="text-muted">V4.3</small>
</div>

還有一種更大型，更加醒目的標題： .display-1~4

<h1 class="display-1">Bootstrap</h1>
<h1 class="display-2">Bootstrap</h1>
<h1 class="display-3">Bootstrap</h1>
<h1 class="display-4">Bootstrap</h1>

這個標題更加醒目，更加龐大！

二．文字類

想要指定一些段落中重要的內容，可以使用.lead 強調；

<p class="lead"> 這是一段測試各種文字效果的話，本身沒有意義！
</p>

比較常用的文字內聯元素，來自 HTML5；

<p>這是一段測試各種文字<mark>效果的話</mark>，本身沒有意義！</p>
<p><del>這是一段測試各種文字效果的話，本身沒有意義！</del></p>
<p><s>這是一段測試各種文字效果的話，本身沒有意義！</s></p>
<p><ins>這是一段測試各種文字效果的話，本身沒有意義！</ins></p>
<p><u>這是一段測試各種文字效果的話，本身沒有意義！</u></p>
<p><small>這是一段測試各種文字效果的話，本身沒有意義！</small></p> 
<p><strong>這是一段測試各種文字效果的話，本身沒有意義！</strong></p>
<p><em>這是一段測試各種文字效果的話，本身沒有意義！</em></p>

效果如下圖所示：

也可以使用.mark，.small 等方式實現同樣元素的效果；

<p>這是一段測試各種文字<span class="mark">效果</span>的話</p>
<p class="small">這是一段測試各種文字效果的話，本身沒有意義！</p>

使用.title 樣式和縮略語給文字做提示；
提示

使用 Blockquote 設定來源備註或引用；效果相比於不加blockquote的

<blockquote class="blockquote">
    <p>這是一段測試各種文字效果的話，本身沒有意義！</p>
</blockquote>

使用.blockquote-footer 設定底部備註來源；

<blockquote>
        <p>這是一段測試各種文字效果的話，本身沒有意義！</p>
        <footer class="blockquote-footer">--from a good people</footer>
</blockquote>

可以對內容進行居中對齊.text-center 或居右對齊.text-right；

    <blockquote>
        <p>這是一段測試各種文字效果的話，本身沒有意義！</p>
        <footer class="blockquote-footer text-center">--from a good people</footer>
    </blockquote>

預設情況下都是居左的

三．列表類

使用.list-unstyled 樣式，可以將列表初始化；

會將使用了這個類的元素前面的圓點去掉，並且靠左對齊，不留空隙。

<ul class="list-unstyled"> 
    <li>A 班</li>
    <li>B 班</li>
    <li>C 班 
        <ul>
            <li>張三</li>
            <li>李四</li> 
            <li>王五</li> 
            <li>馬六</li>
        </ul>
    </li> 
    <li>D 班</li>
</ul>

最好只在最外層的ul裡面加，如果在字列表裡面也取消前面的圓點，會導致父集列表和子集列表都去掉圓點居左對齊，層次不太分明。

使用.list-inline 和.list-inline-item 結合實現多列並排列表；

<ul class="list-inline">
    <li class="list-inline-item">A 班</li> 
    <li class="list-inline-item">B 班</li> 
    <li class="list-inline-item">C 班</li>
    <li class="list-inline-item">D 班</li>
</ul>

使用 dl、dt 和 dd 可以實現水平描述，使用.text-truncate 可以省略溢位；

<div class="container">
    <dl class="row">
        <dt class="c col-sm-3">列表標題</dt> 
        <dd class="c col-sm-9">一個關於描述列表的內容</dd>
        <dt class="c col-sm-3">列表標題</dt>
        <dd class="c col-sm-4 text-truncate">一個關於描述列表的內容， 但是這個稍微長了一點點以至於換行！</dd>
    </dl>
</div>

在這裡如果你不去掉這個c和 col的高度他會很難看，但是去掉高度之後他會自適應。

如果設定了高度，不能自適應增長的話，我們就可以設定文字的內容截斷。顯示效果他會截斷多出來的內容並且佔一行內容。

06程式碼和圖文

一．程式碼樣式

使用<code>標籤元素，可以將程式設計程式碼放入其中，但還是要手動轉義特殊符號；

會有一個自帶的樣式：<div>

<code>
    &lt;div&gt;
</code>

使用<pre>標籤元素，配合實現程式碼塊的效果；所見即所得


    	  
  	 <div> <span>這是一個程式碼塊效果！<span><div>
  	 
  
<pre class="pre-scrollable" style="width: 500px;">
	 <code> 
	 &lt;div&gt; &lt;span&gt;這是一個程式碼塊效果！&lt;span&gt;&lt;div&gt;
	</code> 
</pre>



可以在程式碼區域設定.pre-scrollable 樣式，實現固定區域滾動，預設高 350px；
<pre class="pre-scrollable" style="width: 500px;">




使用標籤元素標識變數部分；本身有一個傾斜功能！
y = m + b
 <var>y</var> = <var>m</var> + <var>b</var>



使用標籤元素標識鍵盤輸入；
ctrl+shift+c
 <kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>c</kbd>



使用<samp>標籤元素標識這是一個示例；
這是一段程式碼


 <samp>這是一段程式碼</samp>

二．圖文樣式


給圖片新增一個.img-fluid 樣式或設定 max-width:100%，height:auto；
<img src="./img/banner.png" class=" img-fluid" alt="響應式圖片">



給小圖片加上一個縮圖的樣式.img-thumbnail，會設定一個空心邊框；
<img src="img/thumb.png" class="img-thumbnail" alt="縮圖">




通過設定.float-left 和.float-right 來設定圖片的左右浮動；
<img src="img/thumb.png" class="float-left" alt="左浮動">
<img src="img/thumb.png" class="float-right" alt="有浮動">

這裡再次新增一個圖片
<img src="img/thumb.png" class="img-thumbnail float-left" alt="縮圖">
<img src="img/thumb.png" class="img-thumbnail float-right" alt="縮圖">
<img src="img/thumb.png" class="img-thumbnail " alt="縮圖">


最後新增的圖片因為之前的浮動影響了
使用老方法清除浮動
<img src="img/thumb.png" class="img-thumbnail float-left" alt="縮圖">
<img src="img/thumb.png" class="img-thumbnail float-right" alt="縮圖">
<div style="clear: both;">
    <img src="img/thumb.png" class="img-thumbnail " alt="縮圖">
</div>




通過.d-block 設定為區塊，再通過 margin 左右 auto 方式.mx-auto 實現居中；
 <img src="/img/thumb.png" class="mx-auto d-block">



因為圖片本身是內聯塊屬性，所以，直接在父層用.text-center 也可以實現居中；
<div class="text-center">
    <img src="img/thumb.png" class="img-thumbnail" alt="縮圖">
</div>



使用 HTML5 新標籤來實現響應式圖片設定；
<picture> 
    <source srcset="img/banner2.png" media="(max-width:800px)"> 
    <img src="img/banner.png" alt="大圖">
</picture>



使用 figure 和 figcaption 實現圖文組合顯示；


<figure class="figure">
    <img src="img/thumb.png" class="figure-img" alt="圖文組合"> 
    <figcaption class="figure-caption text-right"> 這是一張圖片</figcaption>
</figure>

   

這裡是外層包裹的figure要設定類為 figure，然後text-right才能居於這個figure區域的右側，否則回到整個頁面的最右側

07表格樣式
一．表格樣式


使用.table 給表格設定一個基類，這是表格的基本樣式；

<table class="table">
    <thead>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>性別</th>
            <th>總成績</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>張三</td>
            <td>男</td>
            <td>98</td>
        </tr>
        <tr>
            <td>2</td>
            <td>王五</td>
            <td>男</td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>馬六2</td>
            <td>男</td>
            <td>97</td>
        </tr>
    </tbody>
</table>



使用.table-dark 樣式，啟用顏色反轉對比效果；



在使用.thead-light 或.thead-dark 實現淺黑或深灰色調的標頭；
 <thead class="thead-light">




使用.table-striped 實現資料表的條紋狀顯示；
 <table class="table table-striped">




條紋狀顯示也適用於反轉色調上； 顯示效果就是黑、淺黑間接交替出現。
 <table class="table table-dark table-striped">




預設情況下，邊框是不完全的，使用.table-bordered 設定表格邊框；
 <table class="table table-bordered">




表格邊框也可以作用域反轉色調上；
 <table class="table table-bordered table-dark">



使用.table-borderless 設定無邊框；
 <table class="table table-borderless">



無邊框效果也可以作用於反轉色調上；
 <table class="table table-borderless table-dark">



使用.table-hover 實現一行懸停效果；
初始狀態下，整行表格是一個顏色，只有當你
 <table class="table table-hover">

行懸停效果也可以作用於反轉色調上；
<table class="table table-hover table-dark">



使用.table-sm 實現緊縮型表格，反轉色調依然支援；
  <table class="table table-sm">



使用.table-success 等語義化實現或、等效果，反轉色調通用；
<tr class="table-success"> <td class="table-info">男</td>

PS：.table-*中的*包含：active、primary、secondary、danger、warning、info、light、dark。


使用.table-responsive 實現溢位時出現底部滾動條；
 <table class="table table-responsive">

一般情況下是出現在手機端！





使用.table-responsive-sm 實現只有小於 768px 溢位時出現底部滾動條；
 <table class="table table-responsive-sm">



08.邊框和顏色
一．邊框樣式


使用.border 給元素增加相應的邊框，預設是淡灰色；


如果顏色太淡，可以使用.border-*設定想要的場景，比如.border-success；


.border-*，包含：primary、secondary、success、danger、warning

info、light、dark 和 white；
<img src="img/img1.png" alt="邊框" class=" border-success border">
<img src="img/img1.png" alt="邊框" class=" border-success border-right">
<img src="img/img1.png" alt="邊框" class=" border-success border-left">
<img src="img/img1.png" alt="邊框" class=" border-success border-top">
<img src="img/img1.png" alt="邊框" class=" border-success border-bottom">




使用.border-0 消減四周的邊框，或使用.border-*-0 消減某一邊的邊框；
<img src="img/img1.png" alt="邊框" class="border-success border border-0">
<img src="img/img1.png" alt="邊框" class="border-success border border-top-0">
<img src="img/img1.png" alt="邊框" class="border-success border border-bottom-0">
<img src="img/img1.png" alt="邊框" class="border-success border border border-left-0">
<img src="img/img1.png" alt="邊框" class="border-success border border border-right-0">




使用.rounded 和 .rounded-*實現各種方位圓角
<img src="img/img2.png" alt="圓角" class="rounded">
<img src="img/img2.png" alt="圓角" class="rounded-top"> 
<img src="img/img2.png" alt="圓角" class="rounded-bottom">
<img src="img/img2.png" alt="圓角" class="rounded-left"> 
<img src="img/img2.png" alt="圓角" class="rounded-right">
<img src="img/img2.png" alt="圓角" class="rounded-circle">
<img src="img/img2.png" alt="圓角" class="rounded-pill">
<img src="img/img2.png" alt="圓角" class="rounded-0">


注意這裡的rounded-pill需要給他設定寬高才能看出這個效果：
.rounded-pill {
    width: 200px;
    height: 100px;
}




使用.rounded-sm 和.rounded-lg 實現圓角半徑大小；


<img src="img/img2.png" alt="圓角" class="rounded-sm"> 
<img src="img/img2.png" alt="圓角" class="rounded-lg">

   
二．顏色樣式

使用.text-*將文字設定成指定的顏色，比如：text-success；

<span class="text-primary">Bootstrap</span>
<span class="text-secondary">Bootstrap</span> 
<span class="text-success">Bootstrap</span>
<span class="text-danger">Bootstrap</span>
<span class="text-warning">Bootstrap</span>
<span class="text-info">Bootstrap</span>
<span class="text-dark">Bootstrap</span>
<span class="text-body">Bootstrap</span> 
<span class="text-muted">Bootstrap</span>
<span class="text-light bg-dark">Bootstrap</span>
<span class="text-white bg-dark">Bootstrap</span>
<span class="text-black-50">Bootstrap</span>
<span class="text-white-50 bg-dark">Bootstrap</span>

  


使用.text-*也可以實現懸停和焦點的超連結樣式，white 和 muted 不支援；
<a href=# class="text-primary">Bootstrap</a>
<a href=# class="text-secondary">Bootstrap</a>
<a href=# class="text-success">Bootstrap</a> 
<a href=# class="text-danger">Bootstrap</a>
<a href=# class="text-warning">Bootstrap</a> 
<a href=# class="text-info">Bootstrap</a> 
<a href=# class="text-dark">Bootstrap</a>
<a href=# class="text-body">Bootstrap(no)</a> 
<a href=# class="text-muted">Bootstrap(no)</a>
<a href=# class="text-light bg-dark">Bootstrap</a>
<a href=# class="text-white bg-dark">Bootstrap(no)</a>
<a href=# class="text-black-50">Bootstrap</a>
<a href=# class="text-white-50 bg-dark">Bootstrap</a>



使用.bg-*可以實現背景色，具體如下：
<div class="p-2 mb-2 bg-primary">Bootstrap</div>
<div class="p-2 mb-2 bg-secondary">Bootstrap</div>
<div class="p-2 mb-2 bg-success">Bootstrap</div> 
<div class="p-2 mb-2 bg-danger">Bootstrap</div> 
<div class="p-2 mb-2 bg-warning">Bootstrap</div>
<div class="p-2 mb-2 bg-light">Bootstrap</div> 
<div class="p-2 mb-2 bg-dark">Bootstrap</div> 
<div class="p-2 mb-2 bg-white">Bootstrap</div>
<div class="p-2 mb-2 bg-transparent">Bootstrap</div>



p-N ,這裡的N預設是0，最大是5,6就會沒有效果了。p-2：padding：0.5rem；
mb-2：margin-bottom ：0.5rem



09. 工具類【上】

使用.close 和&times 構建一個關閉按鈕； 

 <button type="button" class="close" aria-label="關閉"> 
     <span aria-hidden="true">&times;</span>
</button>


使用.clearfix 給浮動的區域的父元素新增，實現清理浮動的功能；

div.border {
    width: 200px;
    height: 200px;
}

<div class="clearfix"> 
    <div class="float-left border border-success">left</div>
    <div class="float-right border border-success">right</div>
</div>
<div class="border border-warning">
    both
</div>


浮動元素會脫離文件流，不佔位，盒子重疊，內容不重疊；

如果想要內容都水平排列，需要所有的盒子都設定浮動

如果浮動的元素大於父元素的寬，顯示不下就會另起一行，第二行顯示

浮動不佔位的副作用只會同級之間產生，浮動的副作用都是往下影響，不會影響上邊的盒子

對其兄弟元素（非浮動）的影響

如果兄弟元素為塊級元素，該元素會忽視浮動元素的而佔據它的位置，並且元素會處在浮動元素的下層（並且無法通過z-index屬性改變他們的層疊位置），但它的內部文字和其他行內元素都會環繞浮動元素。
如果如果兄弟元素為內聯元素，則元素會環繞浮動元素排列。

<div class="float-left border border-success">left</div>
<div class="float-right border border-success">right</div>
<div class="float-none border border-success">none</div>

   
解決方法：
1.傳統的方式可以設定其不浮動:style ="clear:both"
2.bootstrap的方式：
	在外層包裹一個div 設定class 為 "clearfix"


使用.text-hide 來隱藏元素標籤內容，但本身還存在保持 SEO 優化；
<h1 class="text-hide" style="background:url('img/img1.png');"> 
    Bootstrap4.x
</h1>



使用.overflow-auto 和.overflow-hidden 來設定區域顯示方式；
 <div class="overflow-auto">...</div><div class="overflow-hidden">...</div>



使用.visible 和.invisible 來設定內容可見或不可見；
<div class="visible">Bootstrap4.x</div>
<div class="invisible">Bootstrap4.x</div>



使用.align-*來設定內容文字的對齊方式；


<span class="align-baseline">baseline 基準</span>
<span class="align-text-top">text-top 文字頂部</span> 
<span class="align-top">top 頂部</span> 
<span class="align-middle">middle 垂直居中</span>
<span class="align-bottom">bottom 底部</span>
<span class="align-text-bottom">text-bottom 文字底部</span>
<table class="table table-bordered" style="height: 200px;">
    <tbody> 
        <tr>
            <td class="align-baseline">baseline</td> 
            <td class="align-top">top</td> 
            <td class="align-middle">middle</td>
            <td class="align-bottom">bottom</td>
            <td class="align-text-top">text-top</td>
            <td class="align-text-bottom">text-bottom</td>
        </tr>
    </tbody>

</table> 


PS：垂直對齊僅影響內聯 inline、內聯塊 inline-block、內聯表 inline-table、表格單元格 table cell 元素。
10工具類中
一．公共樣式


使用.p-*來設定內邊距(padding)，範圍在 0-5 之間和 auto；
<span class="p-5">Bootstrap4.x</span>


padding: 3rem !important;



使用.m-*來設定外邊距(margin)，範圍在 0-5 之間和 auto；
 <span class="m-5">Bootstrap4.x</span>


.m-5 {
		margin: 3rem !important;
}



使用.pt-或 mt-設定邊緣的距離，這裡的 t 可以是 top；


其它的還有 b(bottom)、l(left)、r(right)等；
<span class="pt-5">Bootstrap4.x</span>
<span class="mt-5">Bootstrap4.x</span>


.pt-5, .py-5 {
padding-top: 3rem !important;
}
.mt-5, .my-5 {
margin-top: 3rem !important;
}



使用.px-*或 mx-*設定左右邊緣的距離，這裡的 x 表示(left、right);
<span class="px-5">Bootstrap4.x</span> 
<span class="mx-5">Bootstrap4.x</span>





使用.py-或 my-設定上下邊緣的距離，這裡的 y 表示(top、bottom)；
<span class="py-5">Bootstrap4.x</span> 
<span class="my-5">Bootstrap4.x</span>



使用.pt-*-5，*可以是 md、lg 等響應式的方式來設定邊緣；
就是設定在特定螢幕下面，這些螢幕的大小。


使用.w-*設定元素的長度，包括 25%、50%、75%、100%和 auto；

<div class="p-3 w-25 bg-info">25%</div> 
<div class="p-3 w-50 bg-info">50%</div>
<div class="p-3 w-75 bg-info">75%</div> 
<div class="p-3 w-100 bg-info">100%</div>
<div class="p-3 w-auto bg-info">auto</div>



使用.h-*設定元素的高度，包括 25%、50%、75%、100%和 auto；
<div class="border border-success"> 
    <div class="p-3 h-25 bg-info d-inline-block">25%</div> 
    <div class="p-3 h-50 bg-info d-inline-block">50%</div>
    <div class="p-3 h-75 bg-info d-inline-block">75%</div> 
    <div class="p-3 h-100 bg-info d-inline-block">100%</div>
    <div class="p-3 h-auto bg-info d-inline-block">auto</div>
</div>




使用.mw-和.mh-設定 max-width 和 max-height；
 <div class="p-3 mw-100 mh-100 bg-info">max-100%</div>



使用.vw-和.vh-設定相對於視窗的大小；
因為上下高度有比較多意外，所以我們可以給他設定一個父元素容器。
<div class="p-3 vw-100 vh-100 bg-info">vw,vh 單位</div>



使用.shadow-*實現元素的陰影效果；
<div class="shadow-none mb-5">Bootstrap4.x</div>
<div class="shadow-sm mb-5">Bootstrap4.x</div>
<div class="shadow mb-5">Bootstrap4.x</div>
<div class="shadow-lg mb-5">Bootstrap4.x</div>



11. 工具類【下】
一．公共樣式


使用.d-*來設定元素的 display 模式，比如 inline、block 等；


none、inline、inline-block、block、table、table-row


flex、inline-flex 這些常用的均為 display 可以設定的模式；


也可以通過.d-md-*中的 md 設定響應式的媒體查詢效果；
這裡的none代表消失啥也看不見。
 <div class="p-2 bg-info d-md-none">Bootstrap4.x</div>



使用.embed-responsive 實現嵌入響應式，比如<iframe>、<embed>等；


再使用.embed-responsive-16by9 實現響應式比例，還可以 21:9，4:3，1:1；
 <div class="embed-responsive embed-responsive-21by9">
     <iframe src="http://www.baidu.com"></iframe>
</div>



使用.text-*設定文字的對齊方式，有 left、center、right；


也可以設定.text-md-*實現響應式的媒體查詢效果；
<div class="p-2 text-center">Bootstrap4.x</div>



使用.text-warp 和.text-nowarp 實現文字溢位時是否換行；
<div class="p-2 text-nowrap text-center" style="width: 6rem;">Bootstrap 4.x</div>



使用.text-break 對於很長的字串，且中間沒有空格實現換行；
<div class="p-2 text-break"> Bootstrap4.x...Bootstrap4.x</div>



使用.text-lowercase 設定小寫，.text-uppercase 設定大寫，以及 .text-capitalize 設定首字母大寫；


<img src="https://gitee.com/forgetc77/blog-img/raw/master/image-20211001194728969.png" alt="image-20211001194728969" style="zoom:67%;" />

```html
<div class="p-2 text-lowercase">the bootstrap4.x</div>
<div class="p-2 text-uppercase">the bootstrap4.x</div>
<div class="p-2 text-capitalize">the bootstrap4.x</div>
```



使用.font-weight-bold 加粗、.font-weight-normal 正常、 .font-weight-light 纖細、.font-weight-italic 傾斜；

<div class="p-2 font-weight-bold">Bootstrap4.x</div>
<div class="p-2 font-weight-normal">Bootstrap4.x</div> 
<div class="p-2 font-weight-light">Bootstrap4.x</div>
<div class="p-2 font-italic">Bootstrap4.x</div>



使用.text-monospace 設定等寬字型；
<div class="p-2 text-monospace">Bootstrap 4.x</div>



使用.text-reset 實現字型顏色的重置；和父元素的效果一樣。
<div class="text-muted"> Bootstrap 最新版本： 
    <a href="#" class="text-reset">V4.3</a>
</div>



使用.text-decoration-none 刪除超連結下劃線；

 <a href="#" class="text-decoration-none">V4.3</a>



12Flex彈性佈局
一．Flex 樣式


使用.d-flex 和.d-inline-flex 實現開啟 flex 佈局樣式；
<div class="d-flex">Flex 彈性佈局</div>


.d-flex {
display: flex !important;
}



這一對樣式，也支援響應式的媒體查詢：.d-*-flex； *可以是md或者是lg


.flex-row 可以呈現子元素水平方向的位置，預設居左並從左到右顯示(1,2,3)；


   
<div class="d-flex flex-row"> 
    <div class="p-2">專案 1</div>
    <div class="p-2">專案 2</div>
    <div class="p-2">專案 3</div>
</div>



.flex-row-reverse 讓子元素水平方向的位置居右並從左到右顯示(3,2,1)；

<div class="d-flex flex-row-reverse"> 
    <div class="p-2">專案 1</div> 
    <div class="p-2">專案 2</div> 
    <div class="p-2">專案 3</div>
</div>



這一對樣式，也支援響應式的媒體查詢：.flex-*-row；


.flex-column 實現子元素垂直效果，並從上往下顯示(1,2,3)；

<div class="d-flex flex-column">
    <div class="p-2">專案 1</div> 
    <div class="p-2">專案 2</div> 
    <div class="p-2">專案 3</div>
</div>



.flex-column-reverse 實現子元素垂直效果，並從上往下顯示(3,2,1)；

<div class="d-flex flex-column-reverse">
    <div class="p-2">專案 1</div>
    <div class="p-2">專案 2</div>
    <div class="p-2">專案 3</div>
</div>



這一對樣式，也支援響應式的媒體查詢：.flex-*-column；


.justify-content-start(end、center、between、around)實現內容對齊；

<div class="d-flex justify-content-start">...</div> 
<div class="d-flex justify-content-end">...</div> 
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>



這五個內容對齊樣式，也支援媒體查詢：justify-content-*-start;


.align-items-start(end、center、baseline、stretch)實現專案對齊；


這裡要給一個高度，因為裡面的元素和我們的父元素是百分之百的效果。

<div class="d-flex align-items-start" style="height:100px;">
    <div class="d-flex align-items-end" style="height:100px;"> 
        <div class="d-flex align-items-center" style="height:100px;"> 
            <div class="d-flex align-items-baseline" style="height:100px;">
                <div class="d-flex align-items-stretch" style="height:100px;">



這五個專案對齊，也支援媒體查詢：align-items-*-start；


.align-self-start(end、center、baseline、stretch)實現單專案對齊；

<div class="d-flex m-2 p-2" style="height:100px;"> 
    <div class="p-2 align-self-start">專案 1</div> 
    <div class="p-2 align-self-end">專案 2</div> 
    <div class="p-2 align-self-center">專案 3</div> 
    <div class="p-2 align-self-baseline">專案 4</div> 
    <div class="p-2 align-self-stretch">專案 5</div>
</div>



13.彈性佈局下
一．Flex 樣式


使用.flex-fill 強制讓每個元素專案佔據相等的水平寬度；
<div class="d-flex">
    <div class="p-2 flex-fill">專案 1</div>
    <div class="p-2 flex-fill">專案 2</div> 
    <div class="p-2 flex-fill">專案 3</div>
</div>



三個專案同時設定了.flex-fill，則它們等比例分割寬度，適合導航專案；


如果其中一個或兩個沒有設定.flex-fill，則沒有設定文字有多少就佔據多少；


.flex-*-fill 也可以實現響應式的媒體查詢操作；


使用.flex-grow-*，*表示 0 或 1，也能實現.flex-fill 的功能，設定 1 即可；
<div class="d-flex">
    <div class="p-2 flex-grow-1">專案 1</div>
    <div class="p-2 flex-grow-1">專案 2</div>
    <div class="p-2 flex-grow-1">專案 3</div>
</div>



通過元素生成的 CSS，我們可以看出，其實.flex-fill 就 flex 族的簡寫形式；


使用.flex-shrink-*，*表示 0 或 1，表示是否強制更換到新行中；


<div class="d-flex"> 
    <div class="p-2 w-100">專案 1</div>
    <div class="p-2 flex-shrink-0">專案 2</div>
</div>



這一對樣式，也支援響應式的媒體查詢：.flex-*-grow|shrink-*；


使用.mr-auto 等對齊方式，對 flex 元素進行浮動對

<div class="d-flex"> 
    <div class="p-2 mr-auto">專案 1</div>
    <div class="p-2">專案 2</div> 
    <div class="p-2">專案 3</div>
</div>
<div class="d-flex">
    <div class="p-2">專案 1</div> 
    <div class="p-2">專案 2</div> 
    <div class="p-2 border ml-auto">專案 3</div>
</div>



對於垂直方向，也可以使用.mb-auto 和.mt-auto 來設定物件方向；

<div class="d-flex flex-column align-items-start" style="height: 200px;">
    <div class="p-2 mb-auto">專案 1</div>
    <div class="p-2">專案 2</div>
    <div class="p-2">專案 3</div>
</div>
<div class="d-flex flex-column align-items-start" style="height: 200px;">
    <div class="p-2">專案 1</div>
    <div class="p-2">專案 2</div>
    <div class="p-2 mt-auto">專案 3</div>
</div>



使用.flex-wrap(包裹)和.flex-nowrap(不包裹，預設)來設定子元素專案；
<div class="d-flex flex-wrap" style="width: 200px;">
    <div class="p-2">專案 1</div> 
    <div class="p-2">專案 2</div>
    <div class="p-2">專案 3</div> 
    <div class="p-2">專案 4</div> 
    <div class="p-2">專案 5</div> 
    <div class="p-2">專案 6</div> 
    <div class="p-2">專案 7</div> 
    <div class="p-2">專案 8</div> 
    <div class="p-2">專案 9</div>
    <div class="p-2">專案 10</div>
</div>

不包裹的樣式如下圖所示：

包裹的樣式如下圖所示：



使用.flex-warp-reverse 進行專案排序順序的倒序；



這三個樣式，也支援響應式的媒體查詢：.flex-*-warp 等


使用.order-*，來設定子元素專案的排序順序，支援.order-*-*；

<div class="d-flex m-2 p-2 bg-secondary text-light flex-row">
    <div class="p-2 border border-light order-3">專案1</div>
    <div class="p-2 border border-light order-2 ">專案2</div>
    <div class="p-2 border border-light  order-1">專案3</div>
</div>



.align-content-start(end、center、between、around、stretch)垂直對齊；



 <div class="d-flex flex-wrap align-content-end"
style="height: 200px;">



.align-content-*-start 等支援媒體響應式查詢；


14.警告提示框
一．警告框樣式


使用.alert 設定警告框基礎樣式，並使用.alert-success 設定警告框顏色；

<div class="alert alert-success">Bootstrap4.x</div>
<div class="alert alert-primary">Bootstrap4.x</div>
<div class="alert alert-secondary">Bootstrap4.x</div>
<div class="alert alert-danger">Bootstrap4.x</div>
<div class="alert alert-warning">Bootstrap4.x</div>
<div class="alert alert-info">Bootstrap4.x</div>
<div class="alert alert-light">Bootstrap4.x</div>
<div class="alert alert-dark">Bootstrap4.x</div>



在使用了警告框的元素內部設定超連結.alert-link會顯示加粗的樣子；

<div class="alert alert-success"> Bootstrap4.x 
    <a href="#" class="alert-link">V4.3</a>
</div>



使用.alert-heading 可以設定繼承顏色，alert 本身也可以設定水平線段落等；
<div class="alert alert-success">
    <h4 class="alert-heading">Bootstrap4.x</h4>
    <hr> 
    <p>這是一個前端工具：Bootstrap4.x</p>
</div>




.alert-heading {color: inherit;}

二．警告框元件


在元件一欄，可以和瀏覽器實現互動功能，比如警告框的關閉效果；
<div class="alert alert-warning alert-dismissible fade show"> 警告：請理解更新你的系統~ <button class="close" data-dismiss="alert">&times;</button>
</div>



解釋一下手冊給的案例：data-dismiss="alert"實現父元素關閉；
.fade .show 實現了關閉後的淡出效果；
.alert-dismissible 從偵錯程式可以看到是 padding-right:4rem;
也就是說，真正實現關閉效果的只有 data-dismiss="alert"；
直接使用指令碼的方式也可以關閉：
<div class="alert alert-warning alert-dismissible fade show updatesystem">
    警告：請立即更新你的系統~ 
    <button class="close updateclose">&times;</button>
</div>

$('.updateclose').click(function () { $('.updatesystem').alert('close');
});



15.徽章和麵包屑導航
一．徽章樣式


使用.badge 設定徽章基礎樣式，並使用.badge-success 等設定徽章顏色；

<h1>Bootstrap <span class="badge badge-secondary">4.x</span></h1>
<h2>Bootstrap <span class="badge badge-success">4.x</span></h2>
<h3>Bootstrap <span class="badge badge-info">4.x</span></h3>
<h4>Bootstrap <span class="badge badge-danger">4.x</span></h4>
<h5>Bootstrap <span class="badge badge-warning">4.x</span></h5>
<h6>Bootstrap <span class="badge badge-light">4.x</span></h6>
<h6>Bootstrap <span class="badge badge-primary">4.x</span></h6>
<h6>Bootstrap <span class="badge badge-dark">4.x</span></h6>



使用.badge-pill 將徽章設定成橢圓膠囊式；
<h3>Bootstrap
    <span class="badge badge-info badge-pill">4.x</span>
</h3>



在超連結使用徽章，滑鼠懸停時會有換色效果；
<h3>Bootstrap <a href="#" class="badge badge-success badge-pill">4.x</a>
</h3>




二．麵包屑導航


使用.breadcrumb 設定一個層次導航(一行分割顯示那種)；



    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="#">home </a>
            </li>
            <li class="breadcrumb-item">
                <a href="#">library </a></li>
            <li class="active breadcrumb-item">bootstrap</li>
        </ol>
    </nav>

16. 按鈕和按鈕組
一．按鈕樣式

使用.btn 和.btn-*實現按鈕的預設樣式；

	
<button type="button" class="btn btn-secondary">Bootstrap4.x</button> 
<button type="button" class="btn btn-success">Bootstrap4.x</button> 
<button type="button" class="btn btn-danger">Bootstrap4.x</button>   
<button type="button" class="btn btn-warning">Bootstrap4.x</button>
<button type="button" class="btn btn-info">Bootstrap4.x</button> 
<button type="button" class="btn btn-light">Bootstrap4.x</button>
<button type="button" class="btn btn-dark">Bootstrap4.x</button>
<button type="button" class="btn btn-link">Bootstrap4.x</button>



.btn 不單單在<button>元素下使用，也可以在<a>、<input>下使用；
<a href="#" class="btn btn-success">Bootstrap4.x</a>
<input type="submit" class="btn btn-danger" value="Bootstrap4.x">



使用.btn .btn-outline-*可以實現按鈕的輪廓效果；

<button type="button" class="btn btn-outline-danger">Bootstrap4.x</button>
<button type="button" class="btn btn-outline-warning">Bootstrap4.x</button>



使用.btn-lg .btn-sm 可以實現按鈕尺寸的大和小；

<button type="button" class="btn btn-lg btn-success">Bootstrap4.x</button>
<button type="button" class="btn btn-sm btn-danger">Bootstrap4.x</button>



使用.btn-block 將按鈕進行 block 區塊設定；整個一行都被佔有了
<button type="button" class="btn btn-success btn-block">Bootstrap4.x</button>
<button type="button" class="btn btn-danger btn-block">Bootstrap4.x</button>




使用.active 啟用按鈕(預設)，使用.disabled 禁用按鈕，特別注意的禁用；


<button type="button" class="btn btn-success active">Bootstrap4.x</button>
<button type="button" class="btn btn-success" disabled>Bootstrap4.x</button>
<a href="#" class="btn btn-success disabled">Bootstrap4.x</a> //寫在 class 裡
<input type="submit" class="btn btn-danger" disabled value="Bootstrap4.x">


disabled 屬性只有a寫在class裡面，其他寫在class外面



新增 data-toggle="button"實現按鈕切換效果，使用.active 可以預設按下；


<button type="button" class="..." data-toggle="button">Bootstrap4.x</button>

二．按鈕組樣式


使用.btn-group 實現傳統方案的複選框和單選框樣式；

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="checkbox" checked> PHP
    </label>
    <label class="btn btn-secondary"> <input type="checkbox"> Python
    </label>
    <label class="btn btn-secondary"> <input type="checkbox"> GO
    </label> </div>
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="radio" name="options" checked> PHP
    </label>
    <label class="btn btn-secondary"> <input type="radio" name="options"> Python
    </label>
    <label class="btn btn-secondary"> <input type="radio" name="options"> GO
    </label>
</div>



使用.btn-group .btn-group-toggle 實現全新方案的複選框和單選框；

<div class="btn-group btn-group-toggle" data-toggle="buttons">


.btn-group-toggle 實現了選中後背景顏色加深



使用.btn-group 構建普通的按鈕組；
<div class="btn-group">
    <button type="button" class="btn btn-secondary">左</button>
    <button type="button" class="btn btn-secondary">中</button>
    <button type="button" class="btn btn-secondary">右</button>
</div>



使用.btn-toolbar 構建分頁工具類；
就是把他們整體管理起來。

<div class="btn-toolbar"> 
    <div class="btn-group mr-2"> 
        <button type="button" class="btn btn-secondary">1</button> 
        <button type="button" class="btn btn-secondary">2</button> 
        <button type="button" class="btn btn-secondary">3</button> 
        <button type="button" class="btn btn-secondary">4</button>
        <button type="button" class="btn btn-secondary">5</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary">7</button> 
        <button type="button" class="btn btn-secondary">8</button>
        <button type="button" class="btn btn-secondary">9</button>
    </div>
</div>



使用.btn-group-lg 和.btn-group-sm 實現大尺寸和小尺寸；
<div class="btn-group btn-group-lg"> 
<div class="btn-group btn-group-sm">



使用.btn-group-vertical 設定垂直按鈕組；

Bootstrap4.x （李琰恢老師）

Bootstrap 01.Bootstrap4.x 入門學習要點：簡單介紹下載和目錄安裝和測試本節課我們來開始學習 Bootstrap，第一節課重點了解它的作用，下載安裝以及測試。

使用reactnavigation5.x（RN0.6以上版本）

1.安裝 #安裝核心庫npm install @react-navigation/nativeoryarn add @react-navigation/native #依賴庫npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-saf

Codeforces 1175G - Yet Another Partiton Problem（李超線段樹）

李超線段樹優化 dp+可撤銷李超線段樹+李超線段樹的合併，李超線段樹的綜合應用，李超線段樹的毒瘤題，勢能分析複雜度

【IT之家評測室】機械師 F117-X（未來戰艦 3 代）評測：超頻水冷，炫光側透

對於大部分 DIY 發燒友來說，裝個電腦自然不在話下，但對於絕大多數沒有任何裝機經驗的小白來說，購買品牌整機顯然是一個合適的選擇。尤其是在今年這樣混亂的市場環境下，能提供上門服務的品牌整機往往能帶來更穩定的

關於mc skyblock（李芒果空島）的安裝建議

要說mc最肝的空島是什麼，那李芒果空島絕對是數一數二的想要順利開局也不是那麼容易，所以今天就分享一下我幾經磨難得到的經驗

計算機網路詳解（基礎篇）1-3章（韓立剛老師）

1.lnternet發展網路：讓部分電腦實現短距通訊（較小範圍：如實驗室）網際網路：路由器連線多個網路形成網際網路，實現遠距通訊。（任意部門或單位或個體都可接入）通訊介質可以是光纖或無線訊號。

linux下編譯GDAL3.x（整合Proj和Geos等）

目錄1、準備工作2、生成 Makefile1、報錯 \"checking for sqlite3_open in -lsqlite3 ... no\"2、 checking for proj_create_from_wkt in -lproj 未通過3、checking for H5Fopen in -lhdf5... no4、configure 完成，