bootstrap4使用及常用樣式整理

簡介

Bootstrap 是全球最受歡迎的前端元件庫，用於開發響應式佈局、移動裝置優先的 WEB 專案。Bootstrap4 目前是 Bootstrap 的最新版本，是一套用於 HTML、CSS 和 JS 開發的開源工具集。利用我們提供的 Sass 變數和大量 mixin、響應式柵格系統、可擴充套件的預製元件、基於 jQuery 的強大的外掛系統，能夠快速為你的想法開發出原型或者構建整個 app 。Bootstrap4 放棄了對 IE8 以及 iOS 6 的支援，現在僅僅支援 IE9 以上 以及 iOS 7 以上版本的瀏覽器。如果對於其中需要用到以前的瀏覽器，那麼請使用 Bootstrap3。入門詳細學習請參考

菜鳥教程.

引入方式

1. 前端專案基於jquery去構建：可以直接引入cdn庫，bootstrap4.css、jquery.js、bootstrap4.js

2. 前端專案基於react去構建：bootstrap4.css（scss,less）、react.js、react-bootstrap

3. 前端專案基於angular去構建：bootstrap4.css（scss,less）、angular4、ngx-bootstrap

目錄

1. 容器和網格系統

2. 字型顏色及背景顏色

3. 邊框

4. 內邊距（pading）外邊距（margin）

5. 清除浮動

6. display 顯示

7. 嵌入元素樣式

8. 彈性佈局

9. 浮動

10. 圖片替換文字

11. 定位

12. 尺寸（size）

13. 文字

14. 垂直對齊（Vertical alignment）

15. 顯示隱藏

16. 表格

17. 按鈕及按鈕組

18. 列表

19. 表單組

20. 資訊提示框

21. 三角

1、容器和網格系統

容器

• container 固定寬度，不同尺寸固定了不同的寬度

• container-fluid 100%寬度

柵格系統

• cal-xs//<768px

• cal-sm //>=768px

• cal-md //>=992px

• cal-lg //>=1200px

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



t - for classes that set margin-top or padding-top

b - for classes that set margin-bottom or padding-bottom

l - for classes that set margin-left or padding-left

r - for classes that set margin-right or padding-right

x - for classes that set both *-left and *-right

y - for classes that set both *-top and *-bottom

內邊距

• p-1 // padding: .25rem!important;

• p-2 // padding: .5rem!important;

• p-3 // padding: 1rem!important;

• p-4 // padding: 1.5rem!important;

• p-5 // padding: 3rem!important;

單邊

• pt-0

• pl-0

• pr-0

• pb-0

• px-2

• py-2

pading:.5rem 0; //py-2

外邊距

• m-1 // margin: .25rem!important;

• m-2 // margin: .5rem!important;

• m-3 // margin: 1rem!important;

• m-4 // margin: 1.5rem!important;

• m-5 // margin: 3rem!important;

單邊

• mt-0

• ml-0

• mr-0

• mb-0

單邊大小

• mt-1 // margin-left: ($spacer * .25) !important;

• mt-2

• mt-3

• mt-4

• mt-5

• mx-auto

margin:0 auto;

auto

• ml-auto // margin-left: auto!important;

• mr-auto // margin-right: auto!important;

• mt-auto // margin-top: auto!important;

• mb-auto // margin-bottom: auto!important;

5、清除浮動

• clearfix //清除浮動類實現方式如下

// Mixin itself

@mixin clearfix() {

&::after {

display: block;

content: "";

clear: both;

}

}



// Usage as a mixin

.element {

@include clearfix;

}

6、display 顯示

.d-{value} for all //任何尺寸使用

.d-{breakpoint}-{value} for sm, md, lg, and xl.//對應尺寸載入

• d-none

• d-inline

• d-inline-block

• d-block

• d-table

• d-table-cell

• d-table-row

• d-flex

• d-inline-flex

列印樣式 //使用較少

• d-print-none

• d-print-inline

• d-print-inline-block

• d-print-block

• d-print-table

• d-print-table-row

• d-print-table-cell

• d-print-flex

• d-print-inline-flex

7、嵌入元素樣式

包含<iframe>, <embed>, <video>, and <object>等元素樣式

• embed-responsive //外部盒子

• embed-responsive-21by9（16by9,4by3,1by1）//寬高比

• embed-responsive-item //新增在元素上的樣式

<div class="embed-responsive embed-responsive-21by9">

<`iframe class="embed-responsive-item" src="..."></iframe`>

</div>

8、彈性佈局

• d-flex //將物件作為彈性伸縮盒顯示

• d-inline-flex //將物件作為內聯塊級彈性伸縮盒顯示

• d-sm-flex //對應尺寸載入

• d-sm-inline-flex

• d-md-flex

• d-md-inline-flex

• d-lg-flex

• d-lg-inline-flex

• d-xl-flex

• d-xl-inline-flex

方向

水平

• flex-row

• flex-row-reverse //相反方向

垂直

• flex-column

• flex-column-reverse

同樣的不同尺寸適配樣式

• flex-row

• flex-row-reverse

• flex-column

• flex-column-reverse

• flex-sm-row

• flex-sm-row-reverse

• flex-sm-column

• flex-sm-column-reverse

• flex-md-row

• flex-md-row-reverse

• flex-md-column

• flex-md-column-reverse

• flex-lg-row

• flex-lg-row-reverse

• flex-lg-column

• flex-lg-column-reverse

• flex-xl-row

• flex-xl-row-reverse

• flex-xl-column

• flex-xl-column-reverse

justify content //可匹配到不同尺寸

• justify-content-start

• justify-content-end

• justify-content-center

• justify-content-between

• justify-content-around

wrap

• flex-nowrap //支援不同尺寸匹配

• flex-rap

• flex-sm-wrap-reverse

order //子元素設定 支援不同尺寸匹配

• order-0

• order-1

• order-2

• order-3

• order-4

• order-5

• order-6

• order-7

• order-8

• order-9

• order-10

• order-11

• order-12

Align items //子元素設定 支援不同尺寸匹配

• align-items-start

• align-items-end

• align-items-center

• lign-items-baseline

• align-items-stretch

Align self//子元素設定 支援不同尺寸匹配

• align-self-start

• align-self-end

• align-self-center

• align-self-baseline

• align-self-stretch

Align content//子元素設定 支援不同尺寸匹配ß

• align-content-start

• align-content-end

• align-content-center

• align-content-around

• align-content-stretch

9、浮動 可適配：float-(sm,md lg xl)-xxx

• float-left

• float-right

• float-none

10、圖片替換文字

• text-hide //使用.text-hide類來幫助用背景影象替換元素的文字內容。

<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>

11、定位

• position-static

• position-relative

• position-absolute

• position-fixed

• position-sticky

固定定位

• fixed-top

• fixed-bottom

.fixed-top {

position: fixed;

top: 0;

right: 0;

left: 0;

z-index: 1030;

}

• sticky-top //使用較少，相容性一般

position: sticky; //粘性佈局 這是一個結合了 position:relative 和 position:fixed 兩種定位功能於一體的特殊定位，適用於一些特殊場景。

生效規則

position:sticky 的生效是有一定的限制的，總結如下：

須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

並且 top 和 bottom 同時設定時，top 生效的優先順序高，left 和 right 同時設定時，left 的優先順序高。

設定為 position:sticky 元素的任意父節點的 overflow 屬性必須是 visible，否則 position:sticky 不會生效。這裡需要解釋一下：

如果 position:sticky 元素的任意父節點定位設定為 overflow:hidden，則父容器無法進行滾動，所以 position:sticky 元素也不會有滾動然後固定的情況。

如果 position:sticky 元素的任意父節點定位設定為 position:relative | absolute | fixed，則元素相對父元素進行定位，而不會相對 viewprot 定位。

達到設定的閥值。這個還算好理解，也就是設定了 position:sticky 的元素表現為 relative 還是 fixed 是根據元素是否達到設定了的閾值決定的。

12 尺寸（size）

• w-25

//width: 25%!important; 以下值同理

• w-50

• w-75

• w-100

區間

• mw-100

• mh-100

13、文字

文字定位

• text-left //文字居左

• text-center

• text-right

• text-sm-left

• text-md-left

• text-lg-left

• text-xl-left

文字 轉換（Text transform） //所有瀏覽器都支援該屬性

• text-lowercase //字母文字小寫

• text-uppercase //字母文字大寫

• text-capitalize //文字中的每個單詞以大寫字母開頭。

字型 加重和斜體（Font weight and italics）

• font-weight-bold //字型加重

• font-weight-normal //正常字型

• font-weight-light //字型變細

• font-italic //斜體

14、 垂直對齊（Vertical alignment）

• align-baseline

• align-top

• align-middle

• align-bottom

• align-text-top

• align-text-bottom

vertical-align: text-bottom!important; //.align-text-bottom

15、顯示隱藏

• show

• hidden or sr-only

• hide //類仍然可用，但是它不能對螢幕閱讀器起作 不建議使用

• invisible 隱藏保留該元素的文件位置

• visible //可見

visibility: hidden!important;

16、表格

• table //預設樣式

• table-striped //條紋表格

• table-bordered //邊框表格

• table-hover //滑鼠懸停

• table-dark //黑色背景表格

• table-condensed //緊湊的表格

• table-responsive //響應式表格

表格行設定背景色

• active //滑鼠懸停在行或單元格上時所設定的顏色

• success //標識成功或積極的動作

• info //標識普通的提示資訊或動作

• warning //標識警告或需要使用者注意

• danger //標識危險或潛在的帶來負面影響的動作

17、按鈕及按鈕組

按鈕

• btn-primary //主要按鈕

• btn-secondary //次要按鈕

• btn-success //成功按鈕

• btn-info //資訊按鈕

• btn-danger //危險

• btn-outline-primary //按鈕邊框

• btn-xs btn-sm btn-lg //小大號按鈕

• btn-block //塊級按鈕

• active //可用

• disabled //禁用

按鈕組

• btn-group //按鈕組

• btn-group-lg|sm|xs 控制按鈕組大小

• btn-group-vertical 垂直按鈕組

18、列表組

• 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:

19、表單

• form-inline //form元素新增該類，可構成內聯表單

• form-horizontal //可以將 label 標籤和控制元件組水平並排佈局

• 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

校驗狀態

• has-success //可配合.form-group使用

• has-warning //可配合.form-group使用

• has-error //可配合.form-group使用

20 資訊提示框

• alert 類

背景色 追加以下類名

• alert-success,

• alert-info,

• alert-warning,

• alert-danger,

• alert-primary,

• alert-secondary,

• alert-light

• alert-dark 類來實現暗黑提示框

21、三角符號

• caret //css實現向下小三角