Bagaimana untuk mencapai kesan pemuatan dalam
Bootstrap? Artikel berikut akan memperkenalkan kepada anda penggunaan komponen ikon baca Bootstrap5 (Spinners) dan melihat cara membaca ikon untuk menunjukkan status pemuatan komponen saya harap ia akan membantu anda.
Gunakan ikon baca Bootstrap untuk menunjukkan status pemuatan elemen, ikon baca ini sepenuhnya menggunakan HTML, CSS, tanpa JavaScript digunakan. Penampilan, penjajaran dan saiznya boleh disesuaikan melalui kelas biasa, tetapi anda masih memerlukan JavaScript tersuai untuk menogol paparannya. [Cadangan berkaitan: "tutorial bootstrap"]
Berikut ialah ikon baca ringkas
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>读取图标</title>
</head>
<body>
<div>
<br><br><br><br>
<div role="status">
<span>Loading...</span>
</div>
</div>
</body>
</html>Ikon bacaan sempadan menggunakan currentColor sebagai warna sempadannya, yang bermaksud anda boleh menggunakan kategori umum warna teks untuk menyesuaikan warnanya. Anda boleh menggunakan warna daripada mana-mana kategori biasa pada ikon baca standard.
<div class="spinner-border text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-secondary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-success" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-danger" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-warning" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-info" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-light" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-dark" role="status"> <span class="visually-hidden">Loading...</span> </div>
Jika anda tidak menyukai ikon bacaan sempadan, anda boleh bertukar kepada ikon bacaan kecerunan. Walaupun secara teknikal ia tidak berputar, ia pudar berulang kali! Ikon kecerunan juga menyokong warna yang berbeza.
<div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div>
Sama seperti di atas, ikon baca ini juga menggunakan CurrentColor, jadi anda boleh menukar penampilannya dengan mudah menggunakan kategori universal warna teks. Di sini adalah biru, dan variasi warna yang disokongnya.
<div class="spinner-grow text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-secondary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-success" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-danger" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-warning" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-info" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-light" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-dark" role="status"> <span class="visually-hidden">Loading...</span> </div>
Gunakan utiliti margin untuk menambah jarak seperti m-5 sahaja.
<div class="spinner-border m-5" role="status"> <span class="visually-hidden">Loading...</span> </div>
Gunakan kategori universal flexbox, kategori universal terapung atau susun atur teks untuk membaca ikon dalam apa jua keadaan Letakkannya tepat di tempat anda memerlukannya.
5.1 Flex
Yang berikut ialah penjajaran berpusat
<div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
Kepada Penjajaran yang betul
<div class="d-flex align-items-center"> <strong>Loading...</strong> <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div> </div>
5.2 Terapung
Float melaksanakan penjajaran kanan
<div class="clearfix"> <div class="spinner-border float-end" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
5.3 Kelas umum teks
Kelas umum teks melaksanakan penjajaran tengah
<div class="text-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
Tambah spinner-border-sm dan spinner-grow-sm untuk menjadikan ikon baca yang lebih kecil supaya ia boleh digunakan dengan cepat antara komponen lain.
<div class="spinner-border spinner-border-sm" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow spinner-grow-sm" role="status"> <span class="visually-hidden">Loading...</span> </div>
Tunjukkan ikon yang lebih besar
<div class="spinner-border" style="max-width:90%" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status"> <span class="visually-hidden">Loading...</span> </div>
dalam Penggunaan ikon baca dalam butang menunjukkan bahawa ia sedang diproses atau operasi sedang dijalankan. Anda juga boleh menggunakan teks butang untuk menukar teks ikon baca mengikut keperluan anda.
<button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">Loading...</span> </button> <button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading... </button>
<button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">Loading...</span> </button> <button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> Loading... </button>
Untuk pengetahuan lanjut tentang bootstrap, sila lawati: tutorial asas bootstrap ! !
Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk membuka Rangkaian Komputer dan Pusat Perkongsian
Apakah kekunci pintasan untuk menyalin dan menampal ctrl?
Perbezaan antara fungsi anak panah dan fungsi biasa
Pengesyoran perisian desktop Android
susun atur mutlak
Mongodb dan mysql mudah digunakan dan disyorkan
Kad grafik 940mx
Apakah klasifikasi sistem linux?
. "163913466050885Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).")
. "163913466620244Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).")
. "163913467239610Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).")
. "163913467758018Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).")
. "163913468163927Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).")
. "163913468664185Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).")
. "163913468913696Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).")
. "163913469457450Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).")
. "163913469981221Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).")
. "163913470394754Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).")
. "163913470774160Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).")
. "163913471279683Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).")
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
