Bootstrap4 加載效果

要創(chuàng)建加載中效果可以使用 .spinner-border 類:

吉林網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,吉林網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為吉林上1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的吉林做網(wǎng)站的公司定做！

實例

<
div

class
=
"
spinner-border
"
>
div
>

嘗試一下 ?

可以使用文本顏色類設(shè)置不同的顏色：

實例

<
div

class
=
"
spinner-border text-muted
"
>
div
>

<
div

class
=
"
spinner-border text-primary
"
>
div
>

<
div

class
=
"
spinner-border text-success
"
>
div
>

<
div

class
=
"
spinner-border text-info
"
>
div
>

<
div

class
=
"
spinner-border text-warning
"
>
div
>

<
div

class
=
"
spinner-border text-danger
"
>
div
>

<
div

class
=
"
spinner-border text-secondary
"
>
div
>

<
div

class
=
"
spinner-border text-dark
"
>
div
>

<
div

class
=
"
spinner-border text-light
"
>
div
>

嘗試一下 ?

閃爍的加載效果

使用 .spinner-grow 類來設(shè)置閃爍的加載效果:

實例

<
div

class
=
"
spinner-grow text-muted
"
>
div
>

<
div

class
=
"
spinner-grow text-primary
"
>
div
>

<
div

class
=
"
spinner-grow text-success
"
>
div
>

<
div

class
=
"
spinner-grow text-info
"
>
div
>

<
div

class
=
"
spinner-grow text-warning
"
>
div
>

<
div

class
=
"
spinner-grow text-danger
"
>
div
>

<
div

class
=
"
spinner-grow text-secondary
"
>
div
>

<
div

class
=
"
spinner-grow text-dark
"
>
div
>

<
div

class
=
"
spinner-grow text-light
"
>
div
>

嘗試一下 ?

設(shè)置加載效果大小

使用.spinner-border-sm 或 .spinner-grow-sm 類來創(chuàng)建加載效果的大小:

實例

<
div

class
=
"
spinner-grow text-muted
"
>
div
>

<
div

class
=
"
spinner-grow text-primary
"
>
div
>

<
div

class
=
"
spinner-grow text-success
"
>
div
>

<
div

class
=
"
spinner-grow text-info
"
>
div
>

<
div

class
=
"
spinner-grow text-warning
"
>
div
>

<
div

class
=
"
spinner-grow text-danger
"
>
div
>

<
div

class
=
"
spinner-grow text-secondary
"
>
div
>

<
div

class
=
"
spinner-grow text-dark
"
>
div
>

<
div

class
=
"
spinner-grow text-light
"
>
div
>

嘗試一下 ?

加載按鈕

我們也可以設(shè)置一個正在加載的按鈕。

實例

<
button

class
=
"
btn btn-primary
"
>

<
span

class
=
"
spinner-border spinner-border-sm
"
>
span
>

button
>

<
button

class
=
"
btn btn-primary
"
>

<
span

class
=
"
spinner-border spinner-border-sm
"
>
span
>
Loading..
button
>

<
button

class
=
"
btn btn-primary
"

disabled
>

<
span

class
=
"
spinner-border spinner-border-sm
"
>
span
>
Loading..
button
>

<
button

class
=
"
btn btn-primary
"

disabled
>

<
span

class
=
"
spinner-grow spinner-grow-sm
"
>
span
>
Loading..
button
>

嘗試一下 ?

網(wǎng)站欄目：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4加載效果
分享地址：http://www.dlmjj.cn/article/dphdceg.html