bootstrap中調整元素的內外邊距的類名

2021-09-29 20:39:52 字數 1041 閱讀 1670

影響元素之間的間距是可以通過

style

的margin

或padding

屬性來實現,但這兩個屬性本意並不相同;

margin

影響的是本元素與相鄰外界元素之間的距離,這裡簡稱外邊距;

padding

影響的元素本身與其內部子元素之間的距離,簡稱為內填充。

bootstrap4

提供了簡寫的

class

名,名稱分別以

m-開頭和

p-開頭的類。

一、影響距離大小的值有

0,1,2,3,4,5,auto

(1)、

margin

值有class

名等價的

style

m-0等價於

m-1等價於

m-2等價於

m-3等價於

m-4等價於

m-5等價於

m-auto

等價於

(2)、

padding

值有class

名等價的

style

p-0等價於

p-1等價於

p-2等價於

p-3等價於

p-4等價於

p-5等價於

p-auto

等價於

二、調整某一側的邊距

有幾個縮寫,t,b,l,r,x,y含義分別是top,bottom,left,right,left和right,top和bottom

(1)、margin例子,距離大小可以0-5與auto,這裡只用期中乙個值來說明含義

class名

等價的style

mt-2

mb-2

ml-2

mr-2

mx-2

my-2

(2)padding例子

class名

等價的style

pt-2

pb-2

pl-2

pr-2

px-2

py-2

bootstrap中的網格系統

實現原理 網格系統的實現原理非常簡單,僅僅是通過定義容器大小,平分12份 也有平分成24份或32份,但12份是最常見的 再調整內外邊距,最後結合 查詢,就製作出了強大的響應式網格系統。bootstrap框架中的網格系統就是將容器平分成12份。col md 1 col md 1 col md 1 co...

vs code中 bootstrap的使用

what is bootstrap?是乙個封裝好的庫,裡邊有很多的css樣式和script.功能非常的強大,引入bootstrap可以使我們的頁面更加的美觀,同時節省自己程式設計的時間。在vs code 中新增bootstrap 開啟vs code 使用擴充套件功能,搜尋bootstrap 3 sn...

調整陣列元素順序

輸入乙個整數陣列,實現乙個函式來調整該陣列中數字的順序,使得所有的奇數字於陣列的前半部分,所有的偶數字於位於陣列的後半部分,並保證奇數和奇數,偶數和偶數之間的相對位置不變。1,2,3,4,5,6,7 1,3,5,7,2,4,6 以下實現了兩個方法,乙個是帶返回值的,另乙個是不帶返回值的。帶返回值的可...