Bootstrap4 小工具

Bootstrap4 提供了一些小工具，可以讓我們不用寫 CSS 代碼就能實現(xiàn)想要的效果。

邊框

使用 border 類可以添加或移除邊框:

實例

<
span

class
=
"
border
"
>
span
>

<
span

class
=
"
border border-0
"
>
span
>

<
span

class
=
"
border border-top-0
"
>
span
>

<
span

class
=
"
border border-right-0
"
>
span
>

<
span

class
=
"
border border-bottom-0
"
>
span
>

<
span

class
=
"
border border-left-0
"
>
span
>

嘗試一下 ?

邊框顏色

Bootstrap4 提供了一些類來設置邊框顏色:

實例

<
span

class
=
"
border border-primary
"
>
span
>

<
span

class
=
"
border border-secondary
"
>
span
>

<
span

class
=
"
border border-success
"
>
span
>

<
span

class
=
"
border border-danger
"
>
span
>

<
span

class
=
"
border border-warning
"
>
span
>

<
span

class
=
"
border border-info
"
>
span
>

<
span

class
=
"
border border-light
"
>
span
>

<
span

class
=
"
border border-dark
"
>
span
>

<
span

class
=
"
border border-white
"
>
span
>

嘗試一下 ?

邊框圓角設置

使用rounded 類可以添加圓角邊框:

實例

<
span

class
=
"
rounded
"
>
span
>

<
span

class
=
"
rounded-top
"
>
span
>

<
span

class
=
"
rounded-right
"
>
span
>

<
span

class
=
"
rounded-bottom
"
>
span
>

<
span

class
=
"
rounded-left
"
>
span
>

<
span

class
=
"
rounded-circle
"
>
span
>

<
span

class
=
"
rounded-0
"
>
span
>

嘗試一下 ?

浮動

.float-right 類用于設置元素右浮動， .float-left 設置元素左浮動, .clearfix 類用于清除浮動:

實例

<
div

class
=
"
clearfix
"
>

<
span

class
=
"
float-left
"
>
左浮動
span
>

<
span

class
=
"
float-right
"
>
右浮動
span
>

div
>

嘗試一下 ?

響應式浮動

我們看可以設置浮動 (.float-*-left|right - * 為 sm, md, lg 或 xl)的方向依賴于屏幕的大小:

實例

<
div

class
=
"
float-sm-right
"
>
在大于小屏幕尺寸上右浮動
div
>
<
br
>

<
div

class
=
"
float-md-right
"
>
在大于中等屏幕尺寸上右浮動
div
>
<
br
>

<
div

class
=
"
float-lg-right
"
>
在大于大屏幕尺寸上右浮動
div
>
<
br
>

<
div

class
=
"
float-xl-right
"
>
在大于超大屏幕尺寸上右浮動
div
>
<
br
>

<
div

class
=
"
float-none
"
>
沒有浮動
div
>

嘗試一下 ?

居中對齊

使用 .mx-auto 類來設置居中對齊:

實例

<
div

class
=
"
mx-auto bg-warning
"

style
=
"
width:150px
"
>
居中顯示
div
>

嘗試一下 ?

寬度

元素上使用 w-* 類 (.w-25, .w-50, .w-75, .w-100, .mw-100) 來設置寬度:

實例

<
div

class
=
"
w-25 bg-warning
"
>
寬度 25%
div
>

<
div

class
=
"
w-50 bg-warning
"
>
寬度 50%
div
>

<
div

class
=
"
w-75 bg-warning
"
>
寬度 75%
div
>

<
div

class
=
"
w-100 bg-warning
"
>
寬度 100%
div
>

<
div

class
=
"
mw-100 bg-warning
"
>
最大寬度 100%
div
>

嘗試一下 ?

高度

元素上使用 h-* 類 (.h-25, .h-50, .h-75, .h-100, .mh-100) 來設置高度:

實例

<
div

style
=
"
height:200px;background-color:#ddd
"
>

<
div

class
=
"
h-25 bg-warning
"
>
高度 25%
div
>

<
div

class
=
"
h-50 bg-warning
"
>
高度 50%
div
>

<
div

class
=
"
h-75 bg-warning
"
>
高度 75%
div
>

<
div

class
=
"
h-100 bg-warning
"
>
高度 100%
div
>

<
div

class
=
"
mh-100 bg-warning
"

style
=
"
height:500px
"
>
最大高度 100%
div
>

div
>

嘗試一下 ?

間距

間距設置語法如下:

{property}{sides}-{size}  // 適用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 適用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 

breakpoints 指的是屏幕寬度: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px)。

property 代表屬性，包含：

• m - 用來設置 margin
• p - 用來設置 padding

sides 主要指方向：

• t - 用來設置 margin-top 或 padding-top
• b - 用來設置 margin-bottom 或 padding-bottom
• l - 用來設置 margin-left 或 padding-left
• r - 用來設置 margin-right 或 padding-right
• x - 用來設置 *-left 和 *-right
• y - 用來設置 *-top 和 *-bottom
• blank - 用來設置元素在四個方向的 margin 或 padding

size 指的是邊距的大?。?/p>

• 0 - 設置 margin 或 padding 為 0
• 1 - 設置 margin 或 padding 為 $spacer * .25
• 2 - 設置 margin 或 padding 為 $spacer * .5
• 3 - 設置 margin 或 padding 為 $spacer
• 4 - 設置margin 或 padding 為 $spacer * 1.5
• 5 - 設置 margin 或 padding 為 $spacer * 3
• auto - 設置 margin 為 auto

外邊距 margin 可以設置負數(shù)，在數(shù)字前面添加字母 "n" :

• n1 - 設置 margin 為 -.25rem (如果 font-size 為 16px 則為 -4px )
• n2 - 設置 margin 為 -.5rem (如果 font-size 為 16px 則為 -8px)
• n3 - 設置 margin 為 -1rem (如果 font-size 為 16px 則為 -16px)
• n4 - 設置 margin 為 -1.5rem (如果 font-size 為 16px 則為 -24px)
• n5 - 設置 margin 為 -3rem (如果 font-size 為 16px 則為 -48px)

看下部分邊距的源碼設置：

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

實例

<
div

class
=
"
mx-auto
"

style
=
"
width: 200px;
"
>
元素設置居中
div
>

<
form

>

<
div

class
=
"
form-row
"
>

<
div

class
=
"
form-group
"
>

<
label

for
=
"
text
"

class
=
"
mt-2
"
>
設置 margin-top：
label
>

<
input

type
=
"
text
"

class
=
"
form-control
"

id
=
"
text
"

placeholder
=
"
email
"
>

<
label

for
=
"
color
"

class
=
"
mt-2
"
>
顏色：
label
>

<
input

type
=
"
color
"

id
=
"
color
"

class
=
"
form-control
"

style
=
"
width: 60px;padding: 4px;
"

autocomplete
=
"
off
"

value
=
"
#656565
"
>

div
>

div
>

form
>

嘗試一下 ?

更多實例

.m-# / m-*-#	設置所有邊的外邊距	嘗試一下
.mt-# / mt-*-#	margin top	嘗試一下
.mb-# / mb-*-#	margin bottom	嘗試一下
.ml-# / ml-*-#	margin left	嘗試一下
.mr-# / mr-*-#	margin right	嘗試一下
.mx-# / mx-*-#	margin left 與 right	嘗試一下
.my-# / my-*-#	margin top 與 bottom	嘗試一下
.p-# / p-*-#	使用邊設置 padding	嘗試一下
.pt-# / pt-*-#	padding top	嘗試一下
.pb-# / pb-*-#	padding bottom	嘗試一下
.pl-# / pl-*-#	padding left	嘗試一下
.pr-# / pr-*-#	padding right	嘗試一下
.py-# / py-*-#	padding top 與 bottom	嘗試一下
.px-# / px-*-#	padding left 與 right	嘗試一下

網(wǎng)頁題目：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4小工具
本文路徑：http://m.5511xx.com/article/ccdpjcs.html