建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap5 小工具
Bootstrap 5 提供了很多有用的類來幫組我們快速實現(xiàn)效果，不需要重復(fù)寫一些 CSS 代碼。
專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)威寧免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
背景顏色
設(shè)置不同元素的背景顏色時，需要通過 .text-* 類來設(shè)置匹配的文本顏色：
實例
<
div
class
=
"
p-3 mb-2 bg-primary text-white
"
>
.bg-primary
div
>
<
div
class
=
"
p-3 mb-2 bg-secondary text-white
"
>
.bg-secondary
div
>
<
div
class
=
"
p-3 mb-2 bg-success text-white
"
>
.bg-success
div
>
<
div
class
=
"
p-3 mb-2 bg-danger text-white
"
>
.bg-danger
div
>
<
div
class
=
"
p-3 mb-2 bg-warning text-dark
"
>
.bg-warning
div
>
<
div
class
=
"
p-3 mb-2 bg-info text-dark
"
>
.bg-info
div
>
<
div
class
=
"
p-3 mb-2 bg-light text-dark
"
>
.bg-light
div
>
<
div
class
=
"
p-3 mb-2 bg-dark text-white
"
>
.bg-dark
div
>
<
div
class
=
"
p-3 mb-2 bg-body text-dark
"
>
.bg-body
div
>
<
div
class
=
"
p-3 mb-2 bg-white text-dark
"
>
.bg-white
div
>
<
div
class
=
"
p-3 mb-2 bg-transparent text-dark
"
>
.bg-transparent
div
>
嘗試一下 ?
.bg-gradient 類可以設(shè)置背景顏色漸變的效果：
實例
<
div
class
=
"
p-3 mb-2 bg-primary bg-gradient text-white
"
>
.bg-primary
div
>
<
div
class
=
"
p-3 mb-2 bg-secondary bg-gradient text-white
"
>
.bg-secondary
div
>
<
div
class
=
"
p-3 mb-2 bg-success bg-gradient text-white
"
>
.bg-success
div
>
<
div
class
=
"
p-3 mb-2 bg-danger bg-gradient text-white
"
>
.bg-danger
div
>
<
div
class
=
"
p-3 mb-2 bg-warning bg-gradient text-dark
"
>
.bg-warning
div
>
<
div
class
=
"
p-3 mb-2 bg-info bg-gradient text-dark
"
>
.bg-info
div
>
<
div
class
=
"
p-3 mb-2 bg-light bg-gradient text-dark
"
>
.bg-light
div
>
<
div
class
=
"
p-3 mb-2 bg-dark bg-gradient text-white
"
>
.bg-dark
div
>
<
div
class
=
"
p-3 mb-2 bg-body bg-gradient text-dark
"
>
.bg-body
div
>
<
div
class
=
"
p-3 mb-2 bg-white bg-gradient text-dark
"
>
.bg-white
div
>
<
div
class
=
"
p-3 mb-2 bg-transparent bg-gradient text-dark
"
>
.bg-transparent
div
>
嘗試一下 ?
邊框
我們可以使用 border 相關(guān)類根據(jù)需要顯示邊框：
實例
<
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
>
<
br
>
<
span
class
=
"
border-top
"
>
span
>
<
span
class
=
"
border-end
"
>
span
>
<
span
class
=
"
border-bottom
"
>
span
>
<
span
class
=
"
border-start
"
>
span
>
嘗試一下 ?
.border-1 到 .border-5 類用于設(shè)置邊框線條的寬度：
實例
<
span
class
=
"
border border-1
"
>
span
>
<
span
class
=
"
border border-2
"
>
span
>
<
span
class
=
"
border border-3
"
>
span
>
<
span
class
=
"
border border-4
"
>
span
>
<
span
class
=
"
border border-5
"
>
span
>
嘗試一下 ?
以下設(shè)置了邊框的不同顏色：
實例
<
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 相關(guān)類用于設(shè)置圓角：
實例
<
img
decoding
=
"
async
"
src
=
"
...
"
class
=
"
rounded
"
alt
=
"
...
"
>
<
img
decoding
=
"
async
"
src
=
"
...
"
class
=
"
rounded-top
"
alt
=
"
...
"
>
<
img
decoding
=
"
async
"
src
=
"
...
"
class
=
"
rounded-end
"
alt
=
"
...
"
>
<
img
decoding
=
"
async
"
src
=
"
...
"
class
=
"
rounded-bottom
"
alt
=
"
...
"
>
<
img
decoding
=
"
async
"
src
=
"
...
"
class
=
"
rounded-start
"
alt
=
"
...
"
>
<
img
decoding
=
"
async
"
src
=
"
...
"
class
=
"
rounded-circle
"
alt
=
"
...
"
>
<
img
decoding
=
"
async
"
src
=
"
...
"
class
=
"
rounded-pill
"
alt
=
"
...
"
>
嘗試一下 ?
rounded-0 到 rounded-3 類用于設(shè)置圓角的大?。?/p>
實例
<
img
decoding
=
"
async
"
src
=
"
...
"
class
=
"
rounded-0
"
alt
=
"
...
"
>
<
img
decoding
=
"
async
"
src
=
"
...
"
class
=
"
rounded-1
"
alt
=
"
...
"
>
<
img
decoding
=
"
async
"
src
=
"
...
"
class
=
"
rounded-2
"
alt
=
"
...
"
>
<
img
decoding
=
"
async
"
src
=
"
...
"
class
=
"
rounded-3
"
alt
=
"
...
"
>
嘗試一下 ?
浮動與清除浮動
元素向右浮動使用 .float-end 類，向左浮動使用 .float-start 類， .clearfix 類用于清除浮動:
實例
<
div
class
=
"
clearfix
"
>
<
span
class
=
"
float-start
"
>
Float left
span
>
<
span
class
=
"
float-end
"
>
Float right
span
>
div
>
嘗試一下 ?
也可以根據(jù)屏幕尺寸來設(shè)置浮動效果(.float-*-left|right - * 表示 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):
實例
<
div
class
=
"
float-sm-end
"
>
小屏幕向右浮動
div
>
<
br
>
<
div
class
=
"
float-md-end
"
>
中等屏幕向右浮動
div
>
<
br
>
<
div
class
=
"
float-lg-end
"
>
大屏幕向右浮動
div
>
<
br
>
<
div
class
=
"
float-xl-end
"
>
超大屏幕向右浮動
div
>
<
br
>
<
div
class
=
"
float-xxl-end
"
>
特大屏幕向右浮動
div
>
<
br
>
<
div
class
=
"
float-none
"
>
沒有浮動
div
>
嘗試一下 ?
居中對齊
使用 .mx-auto 類來設(shè)置元素居中對齊 (添加 margin-left 和 margin-right 為 auto):
實例
<
div
class
=
"
mx-auto bg-warning
"
style
=
"
width:150px
"
>
居中對齊
div
>
嘗試一下 ?
寬度與高度
寬度使用 w-* (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100) 類來設(shè)置。
實例
<
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
=
"
w-auto bg-warning
"
>
自動設(shè)置寬度
div
>
<
div
class
=
"
mw-100 bg-warning
"
>
最大寬度為 100%
div
>
嘗試一下 ?
高度使用 h-* (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100) 類來設(shè)置。
實例
<
div
style
=
"
height:200px;background-color:#ddd
"
>
<
div
class
=
"
h-25 d-inline-block p-2 bg-warning
"
>
高度為 25%
div
>
<
div
class
=
"
h-50 d-inline-block p-2 bg-warning
"
>
高度為 50%
div
>
<
div
class
=
"
h-75 d-inline-block p-2 bg-warning
"
>
高度為 75%
div
>
<
div
class
=
"
h-100 d-inline-block p-2 bg-warning
"
>
高度為 100%
div
>
<
div
class
=
"
h-auto d-inline-block p-2 bg-warning
"
>
自動設(shè)置高度
div
>
<
div
class
=
"
mh-100 d-inline-block p-2 bg-warning
"
style
=
"
height:500px
"
>
最大高度為 100%
div
>
div
>
嘗試一下 ?
間距
間距設(shè)置語法如下:
{property}{sides}-{size} // 適用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 適用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 xxl (>=1400px)
breakpoints 指的是屏幕寬度: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 xxl (>=1400px)。
property 代表屬性，包含：
m- 用來設(shè)置marginp- 用來設(shè)置padding
sides 主要指方向：
t- 用來設(shè)置margin-top或padding-topb- 用來設(shè)置margin-bottom或padding-bottoms- 用來設(shè)置margin-left或padding-lefte- 用來設(shè)置margin-right或padding-rightx- 用來設(shè)置*-left和*-righty- 用來設(shè)置*-top和*-bottom- blank - 用來設(shè)置元素在四個方向的
margin或padding
size 指的是邊距的大?。?/p>
0- 設(shè)置margin或padding為01- 設(shè)置margin或padding為$spacer * .252- 設(shè)置margin或padding為$spacer * .53- 設(shè)置margin或padding為$spacer4- 設(shè)置margin或padding為$spacer * 1.55- 設(shè)置margin或padding為$spacer * 3auto- 設(shè)置margin為 auto
看下部分邊距的源碼設(shè)置：
.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;
"
>
元素設(shè)置居中
div
>
<
form
>
<
div
class
=
"
form-row
"
>
<
div
class
=
"
form-group
"
>
<
label
for
=
"
text
"
class
=
"
mt-2
"
>
設(shè)置 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-*-# | 設(shè)置所有邊的外邊距 | 嘗試一下 |
.mt-# / mt-*-# | margin top | 嘗試一下 |
.mb-# / mb-*-# | margin bottom | 嘗試一下 |
.ms-# / ms-*-# | margin left | 嘗試一下 |
.me-# / me-*-# | margin right | 嘗試一下 |
.mx-# / mx-*-# | margin left 與 right | 嘗試一下 |
.my-# / my-*-# | margin top 與 bottom | 嘗試一下 |
.p-# / p-*-# | 使用邊設(shè)置 padding | 嘗試一下 |
.pt-# / pt-*-# | padding top | 嘗試一下 |
.pb-# / pb-*-# | padding bottom | 嘗試一下 |
.ps-# / ps-*-# | padding left | 嘗試一下 |
.pe-# / pe-*-# | padding right | 嘗試一下 |
.py-# / py-*-# | padding top 與 bottom | 嘗試一下 |
.px-# / px-*-# | padding left 與 right | 嘗試一下 |
網(wǎng)站題目：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5小工具
標(biāo)題路徑：http://www.dlmjj.cn/article/djidoee.html
