一、 公共樣式
1、 使用.close和×構建乙個關閉按鈕
2、 使用.clearfix給浮動的區域的父元素新增，實現清理浮動的功能。float - [sm | md | lg | xl ] – lef t、float - [ sm | md | lg |xl ]- right和float - [ sm | md | lg | xl ] – none.
3、 使用.text-hide隱藏元素標籤的內容，本身還保持seo的優化
4、 使用.overflow-auto和.overflow-hidden來設定區域顯示方式
5、 使用.visible和.invisible設定元素可見可不見,位置佔著，隱藏的位置沒有佔了
6、 使用.align-*設定對齊方式，和下面是不一樣的
7、 使用.p-*設定內邊距（padding），範圍在0-5之間和auto；
8、 使用m-*設定外邊距（margin）,範圍在0-5之間和auto.
使用.pt-*,來設定上內邊距，同時也可以使用.pt - [sm | md | lg | xl ]-來設定不同螢幕的上內邊距。
使用.pr-,來設定右內邊距，同時也可以使用.pr - [ sm | md | lg | xl ]-*來設定不同螢幕的右內邊距。
使用.pl-*來設定左內邊距，同時也可以使用.pl - [ sm | md | lg | xl ]-*來設定不同螢幕的左內邊距。
使用.pb-*來設定下內邊距，同時也可以使用.pb -[ sm | md | lg |xl ] - *來設定不同螢幕的下內邊距。
使用.px-*來設定左右內邊距，同時也可以使用.px - [ sm | md | lg | xl ]-*來設定不同螢幕的左右內邊距。
使用py-*來設定上下內邊距, 同時也可以使用py – [ sm | md | lg | xl ]-來設定不同螢幕的上下內邊距。
使用.mt-,來設定上外邊距，同時也可以使用.mt - [ sm | md | lg | xl ] - 來設定不同螢幕的上外邊距。
使用.mr-,來設定右外邊距，同時也可以使用. mr - [ sm | md | lg | xl ] - *來設定不同螢幕的右邊距。
使用ml-*來設定左外邊距，同時也可以使用ml - [ sm | md | lg | xl ]-*來設定不同螢幕的左外邊距。
使用.mb-*來設定下外邊距，同時也可以使用.mb -[ sm | md | lg | xl ]-*來設定不同螢幕的下外邊距。
使用.mx-*來設定左右外邊距，同時也可以使用.mx - [ sm | md | lg | xl ] - *來設定不同螢幕的左右外邊距。
使用.my-*來設定上下外邊距, 同時也可以使用.my - [ sm | md | lg | xl ] - *來設定不同螢幕的上下外邊距。
使用w-*設定元素長度,*固定值可以為25%、50%、75%、100%。
9、使用h-*設定元素高度，*固定值包括25%、50%、75%、100%和auto.
10、使用.mw-*和.mh-*設定max-width和max-height;
24、使用.vw-*和.vh-*設定相對於視窗的大小。.vw-100和.vh-100來設定尺寸為相對於100%
25、使用.shade-*實現元素的陰影效果，可以使用.shadow- [ sm | md | lg | xl ]設定不同螢幕的陰影效果
11、 使用.d-*來設定display模式 ，*為none、inline、block、inline-block、table、table-row等；
同時也可以使用.d – [ sm | md | lg | xl ]-*來設定不同螢幕display模式。
12、 使用.embed-responsive實現嵌入響應式，使用.embed-responsive-16py9實現響應式比例，可以為21:9,4:3,1:1；
13、使用.text-*，設定文字的對齊方式，*有left、center、right；
同時也可以使用.d – [ sm | md | lg | xl ]-*來設定不同螢幕文字對齊效果。
14、 使用.text-wrap和.text-nowrap實現溢位時是否換行；
有空格實現換行
使用.text-break對於很長的字串，且中間沒有空格的進行換行
15、 使用字母大小寫，text-lowercase全部小寫 text-uppercase全部大寫 text- capitalize首字母大寫。
16、、 設定字型樣式
18、使用.text-reset設定字型樣式與父元素一樣，使用.text-decoration-none 刪除超連結的下劃線。
Bootstrap4的網格系統
bootstrap4 網格系統 bootstrap 提供了一套響應式 移動裝置優先的流式網格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多 12 列。bootstrap 4 的網格系統是響應式的，列會根據螢幕大小自動重新排列。網格類 bootstrap 4 網格系統有以下 5...
Bootstrap4響應式布局之柵格系統
bootstrap4柵格系統 柵格系統是基於乙個12列 有5種響應尺寸 對應不同的螢幕 的布局。bootstrap4柵格系統共有五個類 col 針對所有裝置 col sm 平板 螢幕寬度等於或大於 576px col md 桌面顯示器 螢幕寬度等於或大於 768px col lg 大桌面顯示器 螢幕...
jQuery 4 樣式操作
一.操作css方法 jquery可以使用css方法來修改簡單元素樣式 也可以操作類，修改多個樣式。1.引數只寫屬性名，則是返回屬性值 i f this css color 2.引數是屬性名，屬性值，逗號分隔，是設定一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號 this css colo...