Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).-Tutorial Bootstrap-php.cn

Rumah

hujung hadapan web

Tutorial Bootstrap

Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

青灯夜游

Dec 10, 2021 pm 07:18 PM

bootstrap

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.

Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

1 ikon baca mudah

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>

Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

2 warna

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>

Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

3 Ikon bacaan kecerunan

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>

Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

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>

Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

4 Margin

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>

Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

5 Penjajaran

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>

Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

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>

Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

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>

Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

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>

Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

6 Saiz

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>

Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

Tunjukkan ikon yang lebih besar

<div class="spinner-border" style="width: 3rem; height: 3rem;" 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>

1Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

7 butang

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>

1Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

<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>

1Bagaimana untuk mencapai kesan pemuatan dalam Bootstrap? Baca komponen ikon (Pemutar).

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!

Kenyataan

Artikel ini dikembalikan pada:掘金社区. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Memahami Bootstrap: Konsep dan Ciri TerasApr 11, 2025 am 12:01 AM

Bootstrap adalah rangka kerja front-end sumber terbuka, dan fungsi utamanya adalah untuk membantu pemaju dengan cepat membina laman web responsif. 1) Ia menyediakan kelas CSS yang telah ditetapkan dan pemalam JavaScript untuk memudahkan pelaksanaan kesan UI yang kompleks. 2) Prinsip kerja bootstrap bergantung pada komponen CSS dan JavaScript untuk merealisasikan reka bentuk responsif melalui pertanyaan media. 3) Contoh penggunaan termasuk penggunaan asas, seperti membuat butang, dan penggunaan lanjutan, seperti gaya tersuai. 4) Kesilapan biasa termasuk salah ejaan nama kelas dan memperkenalkan fail dengan salah. Adalah disyorkan untuk menggunakan alat pemaju penyemak imbas untuk debug. 5) Pengoptimuman prestasi dapat dicapai melalui alat binaan tersuai, amalan terbaik termasuk yang telah ditetapkan dengan menggunakan HTML semantik dan bootstrap

Bootstrap Deep Dive: Reka Bentuk Responsif & Teknik Layout LanjutanApr 10, 2025 am 09:35 AM

Bootstrap melaksanakan reka bentuk responsif melalui sistem grid dan pertanyaan media, menjadikan laman web ini disesuaikan dengan peranti yang berbeza. 1. Gunakan kelas yang telah ditetapkan (seperti COL-SM-6) untuk menentukan lebar lajur. 2. Sistem grid didasarkan pada 12 lajur, dan perlu diperhatikan bahawa jumlah itu tidak melebihi 12. 3. Gunakan titik putus (seperti SM, MD, LG) untuk menentukan susun atur di bawah saiz skrin yang berbeza.

Soalan Temuduga Bootstrap: Tanah pekerjaan depan impian andaApr 09, 2025 am 12:14 AM

Bootstrap adalah rangka kerja front-end sumber terbuka untuk perkembangan pesat laman web dan aplikasi yang responsif. 1. Ia memberikan kelebihan reka bentuk responsif, komponen UI yang konsisten dan perkembangan pesat. 2. Sistem grid menggunakan susun atur Flexbox, berdasarkan struktur 12-kolumn, dan dilaksanakan melalui kelas seperti .container, .row dan .col-sm-6. 3. Gaya tersuai boleh dilaksanakan dengan mengubah suai pembolehubah SASS atau menimpa CSS. 4. Komponen JavaScript yang biasa digunakan termasuk kotak modal, rajah karusel dan lipatan. 5. Prestasi pengoptimuman boleh dicapai dengan memuatkan hanya komponen yang diperlukan, menggunakan CDN, dan memampatkan fail gabungan.

Integrasi Bootstrap & JavaScript: Ciri & Fungsi DinamikApr 08, 2025 am 12:10 AM

Bootstrap dan JavaScript boleh diintegrasikan dengan lancar untuk memberikan fungsi web yang dinamik. 1) Gunakan JavaScript untuk memanipulasi komponen bootstrap, seperti kotak modal dan bar navigasi. 2) Memastikan jQuery memuat dengan betul dan elakkan masalah integrasi yang sama. 3) Mencapai interaksi pengguna yang kompleks dan kesan dinamik melalui pemantauan acara dan operasi DOM.

Cara mendapatkan bar carian bootstrapApr 07, 2025 pm 03:33 PM

Cara menggunakan Bootstrap untuk mendapatkan nilai bar carian: Menentukan ID atau nama bar carian. Gunakan JavaScript untuk mendapatkan elemen DOM. Mendapat nilai elemen. Lakukan tindakan yang diperlukan.

Cara memasukkan gambar di bootstrapApr 07, 2025 pm 03:30 PM

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara Menyiapkan Kerangka untuk BootstrapApr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Cara membuat kotak modal bootstrapApr 07, 2025 pm 03:24 PM

Bagaimana untuk membuat kotak modal menggunakan bootstrap? Buat kotak modal dengan struktur HTML yang sesuai. Termasuk perpustakaan bootstrap dan jQuery untuk membolehkan fungsi modal. Gunakan kod JavaScript atau jQuery untuk memaparkan atau menyembunyikan kotak modal.

See all articles