學習使用Bootstrap4開發網頁前端筆記

本文轉載自查看原文 2020-04-23 23:36 726

學習使用Bootstrap4開發網頁前端筆記
Bootstrap 是全球最受歡迎的前端組件庫，用於開發響應式布局、移動設備優先的 WEB 項目。Bootstrap4 目前是 Bootstrap 的最新版本，是一套用於 HTML、CSS 和 JS 開發的開源工具集。
好處：
•1.定義了很多的css樣式和js插件。我們開發人員直接可以使用這些樣式和插件得到豐富的頁面效果。
•2.響應式布局。

一、使用Bootstrap開發web前端的方法：
1、先用Notepad新建一個文件，寫入網頁通用代碼：
（其中的jquery.min.js和bootstrap.min.js的引用一般可以放到網頁后面即</body>后一行，這樣加載頁面時不卡頓）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap4</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
2、打開菜鳥教程網站Bootstrap教程網頁或Bootstrap中文網幫助網頁，根據自身需要的組件打開對應的網頁，復制代碼並進行修改，例如：需要表單，則打開表單幫助頁選擇復制。
（菜鳥教程網站：https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
Bootstrap中文網：https://v4.bootcss.com/docs/utilities/colors/
）

二、css相關知識：
(一)、script在html中的擺放位置：
一般script標簽會被放在頭部或尾部。頭部就是<head>里面，尾部一般指<body>里。但有些script的位置也不是隨便放的。首先我們需要了解的一點就是，在瀏覽器渲染頁面之前，它需要通過解析HTML標記然后構建DOM樹。在這個過程中，如果解析器遇到了一個腳本(script)，它就會停下來，並且執行這個腳本，然后才會繼續解析HTML。如果遇到了一個引用外部資源的腳本(script)，它就必須停下來等待這個腳本資源的下載，而這個行為會導致一個或者多個的網絡往返，並且會延遲頁面的首次渲染時間。因為，html文件是自上而下的執行方式，但引入的css和javascript的順序有所不同，css引入執行加載時，程序仍然往下執行，而執行到<script>腳本是則中斷線程，待該script腳本執行結束之后程序才繼續往下執行。所以，一般將script放在body之后是因為避免長時間執行script腳本而延遲阻塞。而有一些頁面的效果的實現，是需要預先動態的加載一些js腳本，所以這些腳本應該放在<body>之前。其次，不能將需要訪問dom元素的js放在body之前，因為此時還沒有開始生成dom，所以在body之前的訪問dom元素的js會出錯，或者無效，這種情況下則只能放到尾部。總結出一些加載JavaScript文件的最佳實踐:
對於必須要在DOM加載之前運行的JavaScript腳本，我們需要把這些腳本放置在頁面的head中，而不是通過外部引用的方式，因為外部的引用增加了網絡的請求次數；並且我們要確保內斂的這些JavaScript腳本是很小的，最好是壓縮過的，並且執行的速度很快，不會造成瀏覽器渲染的阻塞。
對於支持使用script標簽的async(這個屬性是HTML5給script新添加的屬性)和defer屬性的瀏覽器，我們可以使用這兩個屬性；其中需要注意的點就是，async表示的意思是異步加載JavaScript文件，它的下載過程可以在HTML的解析過程中進行，加載完成之后立即執行這個文件的代碼，執行文件代碼的過程中會阻塞HTML的解析，它不保證文件加載的順序。defer表示的意思是在HTML文檔解析之后在執行加載完成的JavaScript文件，JavaScript文件的下載過程可以在HTML的解析過程中進行，它是按照script標簽的先后順序來加載文件的。<script type="text/javascript" src="demo_async.js" async="async"></script>
（二）、css樣式寫在哪里？
CSS (Cascading Style Sheets) 用於渲染HTML元素標簽的樣式，CSS 可以通過以下三種方式添加到HTML中，分別是：內聯樣式、嵌套樣式、外聯樣式。3種方式調用css樣式時css樣式編寫的位置：
內聯樣式：在HTML元素中使用"style" 屬性。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
嵌套樣式，在HTML文檔頭部 <head> 區域使用<style> 元素來包含CSS代碼。
<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>
外聯樣式，使用外部 CSS 文件。我們在實際開發中最常用的便是第三種。
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
CSS的3種引入方式及優先級：
A.就近原則
B.理論上：行內>內嵌>鏈接
C.實際上：內嵌、鏈接在同一個文件頭部，誰離相應的代碼近，誰的優先級高
一般處理方法：
A、如果同一個css定義分布在兩個css文件中，那么樣式取后引入的css文件。
B、最好將第三方組件的css放在html靠前位置，自定義的css放到html后面位置。
（三）、CSS中的 Id 和 Class選擇器（類似於對象選擇器）：
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。如以下的樣式規則應用於元素屬性 id="para1"：
#para1
{
text-align:center;
color:red;
}
class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示，如在以下的例子中，所有擁有 center 類的 HTML 元素均為居中。
.center {text-align:center;}
你也可以指定特定的HTML元素使用class。如在以下實例中, 所有的 p 元素使用 class="center" 讓該元素的文本居中:
p.center {text-align:center;}
沒有id和 Class則是對象，如
body{
margin: 0;
padding: 0;
background-color: #eef4f6;
background-image: url("/static/index/images/bg2.jpg");
}

（四）、CSS 盒子模型：
https://www.runoob.com/css/css-boxmodel.html
所有HTML元素可以看作盒子，從上到下或從左到右依次為：
Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。
如：總寬度為450像素的元素
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
總寬度為250像素的元素:
div {
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

margin 屬性：設置外邊距：
margin:10px 5px 15px 20px;（順時針方向）
上邊距是 10px （盒子距屏幕上邊的距離）
右邊距是 5px （盒子距屏幕右邊的距離）
下邊距是 15px （盒子距屏幕下邊的距離）
左邊距是 20px （盒子距屏幕左邊的距離）
margin:10px 5px 15px;
上邊距是 10px
右邊距和左邊距是 5px
下邊距是 15px
margin:10px 5px;
上邊距和下邊距是 10px
右邊距和左邊距是 5px
margin:10px;
所有四個邊距都是 10px
（五）、css3中-moz、-ms、-webkit各什么意思：
-moz代表firefox瀏覽器私有屬性；-ms代表IE瀏覽器私有屬性；-webkit代表chrome、safari私有屬性；-o代表opera瀏覽器私有屬性

（六）媒體查詢：
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
如果文檔寬度小於 300 像素則修改背景顏色(max-width最大意思可理解為相反意思即小於多少):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}

（七）、CSS 定位和浮動：
CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。
定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。
一切皆為框：
div、h1 或 p 元素常常被稱為塊級元素。這意味着這些元素顯示為一塊內容，即“塊框”，塊元素是一個元素，占用了全部寬度，在前后都是換行符。與之相反，span 、 strong 、<a>等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”，內聯元素只需要必要的寬度，不強制換行。
您可以使用 display 屬性改變生成的框的類型。這意味着，通過將 display 屬性設置為 block，可以讓行內元素（比如 <a> 元素）表現得像塊級元素一樣，下面的示例把span元素作為塊元素：span {display:block;}。還可以通過把 display 設置為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不占用文檔中的空間。下面的示例把列表項顯示為內聯元素：li {display:inline;}
隱藏元素 - display:none或visibility:hidden：visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
display: flex是什么意思：前端布局神器display:flex，Flex布局是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。display:flex 是一種布局方式。它即可以應用於容器中，也可以應用於行內元素。任何一個容器都可以指定為Flex布局。采用Flex布局的元素，被稱為Flex容器(flex container)，簡稱“容器”。其所有子元素自動成為容器成員，成為Flex項目(Flex item)，簡稱“項目”。布局中的屬性flex-wrap: wrap表示換行，第一行在上方。

CSS 定位機制：
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
position 屬性的五個值：static、relative、fixed、absolute、sticky
static 定位：HTML 元素的默認值，即沒有定位，遵循正常的文檔流對象。
fixed 定位：元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。Fixed定位使元素的位置與文檔流無關，因此不占據空間。
relative 定位：相對定位元素的定位是相對其正常位置。移動相對定位元素，但它原本所占的空間不會改變。相對定位元素經常被用來作為絕對定位元素的容器塊。
absolute 定位：絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對於<html>。absolute 定位使元素的位置與文檔流無關，因此不占據空間。
sticky 定位：粘性定位。基於用戶的滾動位置來定位。
重疊的元素：元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素。z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）

CSS Float(浮動)：
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。Float（浮動），往往是用於圖像，但它在布局時一樣非常有用。元素的水平方向浮動，意味着元素只能左右移動而不能上下移動。一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。浮動元素之后的元素將圍繞它。浮動元素之前的元素將不會受到影響。
清除浮動 - 使用 clear：元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。clear 屬性指定元素兩側不能出現浮動元素。對於CSS的清除浮動(clear)，一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。（好像是換行后再浮動）

Overfolw屬性：規定當內容溢出元素框時發生的事情。 overflow：visible 默認值。內容不會被修剪，會呈現在元素框之外。 Overflow：hidden 內容會被修剪，並且其余內容是不可見的。 Overflow：scroll 內容被修剪，但瀏覽器會顯示滾動條以便查看其余的內容。 Overflow：auto 若內容被修建，則瀏覽器會顯示滾動條以便查看其余的內容。

行元素、塊元素、行內塊元素：
塊元素：dl、h1、 hr、menu（菜單列表）、ol（排序表單）、 p、table 、ul （非排序列表）、li
內聯元素：a 、b、br 、em （強調）、font、 i（斜體）、img、input、 label 、 span（常用內聯容器，定義文本內區塊）、strong（粗體強調）、textarea（多行文本輸入框）

（八）、Css樣式div的height設置成100%無效問題：
關於div層的height高設置成100%時，始終無法滿屏顯示，不起作用。這個問題相信很多都遇到這個問題，這個高需要把上兩層html和body的高都設置為100%內部的div層才能起作用。找了很多都遇到這個問題。
height： height 100% 是以父元素的高度為准的，比如父元素的高度是300px，#nav占去了50px，#content理應是250px。div的height="100%"，執行網頁時，css先執行到，而整個網頁中的內容還沒有完全載入，是獲取不到div外面的<body>等的高度的，所以height="100%"也就不能如願顯示了。加上 html,body{height:100%}就輕松解決啦，一開始就讓body以100%顯示，他的下級div自然就100%的。
（九）、HTML <label> 標簽的 for 屬性:
for 屬性規定 label 與哪個表單元素綁定。
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

（十）、頁面頂部與瀏覽器窗口的有間距的問題：
很多標簽在不同的瀏覽器下有默認的margin值和padding值，使用前可以先清除下默認值，都歸0就不會出現這種問題了
解決辦法1：
body,html,div{ padding:0; margin:0;}
解決辦法2：
直接*{padding:0; margin:0}也可以
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
因為標簽太多很多用不到的所以推薦第一種用法，只寫常用的標簽就行
如果文件里面最開始寫了*{margin:0px;padding:0px;}但還是有間距則說明是bom問題，解決方法，把網頁文件在notepad軟件中打開，然后在“編碼”菜單中選擇“utf-8無BOM格式編碼”，然后再保存就可。
（十一）、HTML注釋：


JS/jQuery注釋：
//這是單行注釋
/*
    這是多行注釋
*/
css注釋：
/*這是單行注釋*/
/*
    這是多行注釋
*/

（十二）、網頁寬度自動適應手機屏幕寬度的方法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

另：javascript中的<!-- ：
<script language="javascript" type="text/javascript">
<!-- 這行的作用是用 HTML 的注釋把 javascript 的代碼包括起來，如果瀏覽器不支持 javascript，那么會當做注釋處理，防止javascript 的代碼直接出現在頁面上

三、bootstrap4框架知識摘錄
bootstrap的自適應盡量少用絕對寬度px來定義大小，這會導致縮小屏幕寬度時相沖突，多使用百分比來改變位置。
（一）、容器（Container）
網格每一行需要放在設置了 .container (固定寬度) 或 .container-fluid (全屏寬度) 類的容器中，這樣就可以自動設置一些外邊距與內邊距。
container class 用於包裹頁面上的內容，Bootstrap 網格的基本結構：
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
網格類
Bootstrap 4 網格系統有以下 5 個類:（小於后面數值時每個控件響應為一行，如小於576px）
.col- 針對所有設備
.col-sm- 平板 - 屏幕寬度等於或大於 576px
.col-md- 桌面顯示器 - 屏幕寬度等於或大於 768px)
.col-lg- 大桌面顯示器 - 屏幕寬度等於或大於 992px)
.col-xl- 超大桌面顯示器 - 屏幕寬度等於或大於 1200px)
（xs是maxsmall簡寫：超小， sm是small簡寫：小， md是medium簡寫：中等， lg是large簡寫：大；）
響應在瀏覽器中測試方法：F12運行開發者工具拉動窗口大小
容器的寬度：容器為 .container (固定寬度) 為固定寬度，即屏幕寬度是超大桌面顯示器（寬度>1200px）時容器寬度固定為1140px，屏幕寬度是大桌面顯示器（992px ≤ 寬度＜ 1200px）時容器寬度固定為960px，屏幕寬度是桌面顯示器（768px ≤ 寬度＜992px）時容器寬度固定為720px，屏幕寬度是平板（576px ≤ 寬度＜768px）時容器寬度固定為540px，屏幕寬度是移動手機（寬度<=576px）時容器寬度為屏幕寬度的100%（即隨屏幕寬度減少而減小）。.container-fluid (全屏寬度)則容器寬度一律為屏幕寬度的100%（即隨屏幕寬度減少而減小）
網格列是通過跨越指定的 12 個列來創建。不管在哪種屏幕上，柵格系統都會自動的每行row分12列，即它把將瀏覽器一行當是12份。 col-xs-*和col-sm-* 和col-md-*后面跟的參數表示在當前的屏幕中每個div所占列數。
<div class="col-*-*"></div> 第一個星號 (*) 表示響應（縮放）的設備: sm, md, lg 或 xl, 第二個星號 (*) 表示一個數字, 同一行的數字相加為 12。例如：
<div class="container"><div class="col-sm-3">sm響應</div></div> 意思當屏幕寬度大於 576px時本層寬度為容器寬度（如上面幾行說明的固定寬度：540px）的12分之3（540px的3/12），屏幕寬度小於576px時則響應為上下堆疊排版（每個控件獨占一行，即每個控件寬為576px的100%）（即這里的響應意思是屬於同一行的元素受到擠壓后，行的右邊元素自動換行顯式，表現為上下堆疊排版）；
<div class="container"><div class="col-lg-3">lg響應</div></div>意思當屏幕寬度大於992px時本層寬度為容器寬度（如上面幾行說明的固定寬度：960px）的12分之3（960px的3/12），屏幕寬度小於992px時則響應為上下堆疊排版（每個控件獨占一行，即每個控件寬為992px的100%）
<div class="container-fluid"><div class="col-sm-3">sm響應</div></div> container-fluid容器時統一響應寬度為 576px，即當屏幕寬度大於 576px時本層寬度為容器寬度（全屏寬度，數據不固定，數據隨屏幕寬度減少而減小，等於當前屏幕的寬度）的12分之3（如此時瀏覽器窗口寬度為800px，則本層寬度為800px的3/12），屏幕寬度小於576px時則響應為上下堆疊排版（每個控件獨占一行，即每個控件寬為576px的100%）
（二）、Bootstrap 4 默認設置：
Bootstrap 4 默認的 font-size 為 16px, line-height 為 1.5。
默認的 font-family 為 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

（三）、解決BOOTSTRAP使用container-fluid有間隙的問題（或者說是兩邊留白的問題）：
加上row, 但不加col-，就可以填滿了，
<div class="container-fluid">
<div class="row">
<在這里寫代碼>
</div>
</div>

（四）、bootstrap4中的外邊距和內邊距樣式類（1rem = 16px）：
margin：外邊距
padding：內邊距
外邊距：
m-{0 | 1 | 2 | 3 | 4 | auto}
定義四周間距
.m-0 等價於{margin:0 !important}
.m-1 等價於{margin:0.25rem !important}
.m-2 等價於{margin:0.5rem !important}
.m-3 等價於{margin:1rem !important}
.m-4 等價於{margin:1.5rem !important}
.m-auto 等價於{margin:auto !important}
.mt-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-top設置
.mr-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-right設置
.mb-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-bottom設置
.ml-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-left設置
.mx-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-left與margin-right同時設置
.my-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-top與margin-bottom同時設置
內邊距：
.p-{0 | 1 | 2 | 3 | 4 | auto}
定義四周間距
.p-0 等價於{padding:0 !important}
.p-1 等價於{padding:0.25rem !important}
.p-2 等價於{padding:0.5rem !important}
.p-3 等價於{padding:1rem !important}
.p-4 等價於{padding:1.5rem !important}
.p-auto 等價於{padding!important}
.pt-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-top設置
.pr-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-right設置
.pb-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-bottom設置
.pl-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-left設置
.px-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-left與padding-right同時設置
.py-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-top與padding-bottom同時設置
附：CSS1 !important 語法：提升指定樣式規則的應用優先權。E6及以下瀏覽器有個比較顯式的支持問題存在，!important並不覆蓋掉在同一條樣式的后面的規則。
如
div{color:#f00!important;}
div{color:#000;}
）
在上述代碼中，IE6及以下瀏覽器中div的文本顏色表現與其它瀏覽器一致，都為#f00

（五）網頁中寬度長度常用到的單位：
A、單位pt、px、em、rem：
1.pt (point，磅)：是一個物理長度單位，指的是72分之一英寸。
2.px (pixel，像素)：相對長度單位。像素（Pixels）。像素px是相對於顯示器屏幕分辨率而言的。
3.em：相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。
4. rem：相對長度單位。相對於根元素(即html元素)font-size計算值的倍數。是CSS3新增的一個相對單位
B、單位vw、vh：
根據CSS3規范，視口單位主要包括以下4個：
1.vw：1vw等於視口寬度的1%。
2.vh：1vh等於視口高度的1%。
3.vmin：選取vw和vh中最小的那個。
4.vmax：選取vw和vh中最大的那個。
vh and vw：相對於視口的高度和寬度，而不是父元素的（CSS百分比是相對於包含它的最近的父元素的高度和寬度）。1vh 等於1/100的視口高度，1vw 等於1/100的視口寬度。
比如：瀏覽器高度950px，寬度為1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

（六）、bootstrap4中的層水平居中方法：
<div class="row justify-content-center"> abcde</div>
Bootstrap4垂直水平居中：
應用.align-items-center可以使元素垂直居中，應用. justify-content-center可以使元素水平居中：
<div class="row align-items-center justify-content-center" style="height:80vh">//1vw等於視口寬度的1%，給元素定高度，指定高度后垂直居中才有效
…
</div>
其它：
（https://blog.sbot.io/articles/37）
1、對於inline元素水平居中：
在水平排列中，對於inline元素（例如<a>, <span>, <strong>等），我們可以使用text-left，text-center及text-right來快速進行左，中，右對齊（這3個text-align屬性會將inline元素放置於直屬父級block元素的寬度左，中，右，如果我們未對父級block元素寬度未進行設置，那么此時父級<div>元素默認寬度將是container寬度扣去padding值）
<div class="container bg-primary">
<div class="text-center bg-warning">
<strong>text-center</strong>
</div>
</div>
2、要使block元素整體居中，我們需要使用row或者d-flex：
<div class="container bg-primary">
<div class="row mx-0 justify-content-center w-100">//或者<div class="d-flex justify-content-center w-100">
<div class="text-center bg-warning w-50">
<div>
<strong>text-center</strong>
</div>
</div>
</div>
</div>
如何將子元素垂直居中於父元素中間呢？需要使用align-items-center這個類：
<div class="row mx-0 justify-content-center w-100 h-100">變成 <div class="row mx-0 justify-content-center align-items-center w-100 h-100">
3、使用表格，該怎么水平居中或垂直居中呢？
水平居中：text-center就可以直接搞定，只需要給<td>或<TH>加上text-center
垂直居中：用到vertical-alignment的類，只需要給<td>或<TH>加上align-middle這個類就可以了：<td class="align-middle text-success">Python</td>
（<TH>標簽就是Table Heading，意思是表格標題。<TH>標簽在使用時，跟<TD>標簽沒有什么區別，如果非要說有點區別的話，那就是<TH>一般只用在第一個<TR>下。在瀏覽器中顯示時，<TH>標簽被顯示為加粗的字體，其它的跟普通的<TD>也沒有區別。）

（七）、Bootstrap4 折疊（隱藏與顯示，一般用於后台左側菜單）：
.collapse 類用於指定一個折疊元素（即class="collapse"這個類用於隱藏）。一般用鏈接元素<a>或按鈕元素 <button> 來控制隱藏與顯示。
控制內容的隱藏與顯示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 屬性，data-target="#id" 屬性是對應折疊的內容 (一般是個層，如<div id="demo">)。
注意: <a> 元素上你可以使用 href 屬性來代替 data-target 屬性:
（幾個英文單詞的意思：toggle切換，target目標，accordion手風琴）
例如：
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#accordion"><span class="navbar-toggler-icon"></span></button>

或
<a class="card-link" data-toggle="collapse" href="#collapseTwo">

（八）、Bootstrap 表單
（內容較多，情況較多，用時可參考：https://v4.bootcss.com/docs/components/forms/）
把標簽 <label>和控件<input>放在一個帶有類 .form-group 的 <div> 中。這是獲取最佳間距所必需的。標簽元素一般用樣式類.col-form-label，控件元素一般用樣式類.form-control。例如：
1、垂直或基本表單：
<form>
<div class="form-group">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
2、水平表單
form-group后面加上row：
<form>
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
</form>

（九）、在Bootstrap中如何使用圖標：
用第三方圖標樣式：Font Awesome圖標的使用：
（Font Awesome 中文網：http://www.fontawesome.com.cn）
可以用<i>標簽包裹起來，用到你網站的任何地方。如
<a href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>  系統設置</a>
使用：
1、復制 font-awesome 目錄到你的項目中
2、在<head>處加載font-awesome.min.css如下
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
3、通過設置CSS前綴fa和圖標的具體名稱，來把Font Awesome 圖標放在任意位置。Font Awesome 被設計為用於行內元素（我們喜歡用更簡短的<i>標簽，它的語義更加精准）。如
<i class="fa fa-camera-retro"></i>
附：HTML <i> 標簽：
在 HTML 4.01 中，<i> 標簽呈現斜體的文本。然而，在 HTML5 中沒有必要這么做，可以使用樣式表來格式化 <i> 元素中的文本。在沒有其他適當語義的元素可以使用時，可使用 <i> 元素。
有時使用 i 標簽做小圖標，這個不是H5特有的情況，只是設計師習慣性用法，用i表示ico圖標，便於他人理解。

（十）、圖片根據屏幕的大小自動適應：
響應式圖片，即當屏幕（或容器大小）小於圖片實際大小不法容得下圖片時，響應式圖片類會根據當時屏幕大小自動縮放圖片以顯示完整。
圖像有各種各樣的尺寸，我們需要根據屏幕的大小自動適應。我們可以通過在 <img> 標簽中添加 .img-fluid 類來設置響應式圖片。
.img-fluid 類設置了 max-width: 100%; 、 height: auto; :
實例： <img class="img-fluid" src="img_chania.jpg" alt="Chania">

四、bootstrap4 常用樣式類名
https://blog.csdn.net/Altaba/article/details/81324513
1、容器和網格系統
容器
container 固定寬度，不同尺寸固定了不同的寬度；container-fluid 100%寬度
2、字體顏色及背景顏色
字體
text-muted 柔和；text-primary 重要；text-success 成功；text-info 提示；text-warning 警告；text-danger 危險；text-secondary 副標題；text-dark 深灰色文字；text-light 淺灰色；text-white 白色；
背景
bg-primary；bg-secondary；bg-success；bg-danger；bg-warning；bg-info；bg-light；bg-dark；bg-white；
3、邊框
增加邊框
border //默認：1px solid #dee2e6!important
border-top；border-left；border-right；border-bottom；
刪除邊框
border-0 //去除邊框或者除去某一邊的邊框
border-top-0；border-left-0；border-right-0；border-bottom-0；
邊框顏色
border-primary；border-secondary；border-success；border-danger；border-warning；border-info；border-light；border-dark；border-white；
圓角邊框
rounded //border-radius: .25rem!important;
rounded-top //只有頂部的兩邊有圓角
rounded-right；rounded-bottom；rounded-left；rounded-circle 類可以設置橢圓形圖片；rounded-0；.img-thumbnail 類用於設置圖片縮略圖(圖片有邊框)
4 內邊距（pading）外邊距（margin）
m - for classes 代表 margin
p - for classes 代表 padding
.m-{0 | 1 | 2 | 3 | 4 | auto}
.m-0 等價於{margin:0 !important}
.m-1 等價於{margin:0.25rem !important}
.m-2 等價於{margin:0.5rem !important}
.m-3 等價於{margin:1rem !important}
.m-4 等價於{margin:1.5rem !important}
.m-auto 等價於{margin:auto !important}
.mt-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-top設置
.mr-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-right設置
.mb-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-bottom設置
.ml-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-left設置
.mx-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-left與margin-right同時設置
.my-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-top與margin-bottom同時設置
內邊距：
.p-{0 | 1 | 2 | 3 | 4 | auto}
.pt-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-top設置
.pr-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-right設置
.pb-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-bottom設置
.pl-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-left設置
.px-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-left與padding-right同時設置
.py-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-top與padding-bottom同時設置
5 尺寸（size）
w-25
//width: 25%!important; 以下值同理
w-50
w-75
w-100
6、文本
文本定位
text-left //文本居左
text-center
text-right
字體加重和斜體（Font weight and italics）
font-weight-bold //字體加重
font-weight-normal //正常字體
font-weight-light //字體變細
font-italic //斜體
7、垂直對齊（Vertical alignment）
align-baseline
align-top
align-middle
align-bottom
align-text-top
align-text-bottom
8、顯示隱藏
show
hidden or sr-only
hide //類仍然可用，但是它不能對屏幕閱讀器起作不建議使用
invisible 隱藏保留該元素的文檔位置
visible //可見
visibility: hidden!important;
9、表格
table //默認樣式
table-striped //條紋表格
table-bordered //邊框表格
table-hover //鼠標懸停
table-dark //黑色背景表格
table-condensed //緊湊的表格
table-responsive //響應式表格
表格行設置背景色
active //鼠標懸停在行或單元格上時所設置的顏色
success //標識成功或積極的動作
info //標識普通的提示信息或動作
warning //標識警告或需要用戶注意
danger //標識危險或潛在的帶來負面影響的動作
10、按鈕及按鈕組
按鈕
btn-primary //主要按鈕
btn-secondary //次要按鈕
btn-success //成功按鈕
btn-info //信息按鈕
btn-danger //危險
btn-outline-primary //按鈕邊框
btn-xs btn-sm btn-lg //小大號按鈕
btn-block //塊級按鈕
active //可用
disabled //禁用
11、列表組
list-group //列表組
list-group-item //列表li
list-unstyled //無樣式列表
list-inline //內聯列表添加在ul上
列表背景色
list-group-item-action
list-group-item-success,
list-group-item-secondary,
list-group-item-info,
list-group-item-warning,
list-group-item-danger,
list-group-item-dark
list-group-item-light:
12、表單
form-inline //form元素添加該類，可構成內聯表單
form-group //表單組 margin-bottom: 15px;
input-group-addon //配合input表單使用，可再起前后添加圖標或者后綴
form-control //該表單元素寬度變成100%
sr-only 隱藏表單
控制表單尺寸
input-lg
input-sm
多選和單選
checkbox //包裹復選框
checkbox-inline // 內聯多選
radio // 包裹單選框
radio-inline // 內聯單選
disabled //不可點擊
下拉列表（select）
form-control

免責聲明！

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

猜您在找 Bootstrap4（1）：安裝使用背景顏色 - bootStrap4常用CSS筆記【詳解】提示框（tooltip）的使用 - bootStrap4常用CSS筆記 Web前端學習筆記：Bootstrap框架 BootStrap4中使用圖標 vue-cli3使用bootstrap4 如何使用Bootstrap4顯示和隱藏元素導航、選項卡（nav） - bootStrap4常用CSS筆記如何使用TCP/IP開發網絡程序 Django學習筆記（20）——BBS+Blog項目開發（4）Django如何使用Bootstrap