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

Bootstrap dan React: Membuat aplikasi web responsifMay 03, 2025 am 12:13 AM

Bagaimana untuk membuat aplikasi web responsif menggunakan bootstrap dan bertindak balas? Dengan menggabungkan kerangka CSS Bootstrap dan seni bina komponen React, moden, fleksibel dan mudah untuk dikekalkan dapat diwujudkan. Langkah -langkah khusus termasuk: 1) mengimport fail CSS bootstrap dan menggunakan kelasnya untuk komponen reaksi gaya; 2) menggunakan komponen reaksi untuk menguruskan keadaan dan logik; 3) Memuatkan gaya bootstrap yang diperlukan untuk mengoptimumkan prestasi; 4) Mewujudkan antara muka yang dinamik menggunakan cangkuk React dan komponen JavaScrip Bootstrap.

Bootstrap: Pembangunan frontend dibuat lebih mudahMay 02, 2025 am 12:10 AM

Bootstrap adalah rangka kerja front-end sumber terbuka yang membantu pemaju dengan cepat membina laman web responsif. 1) Ia menyediakan gaya dan komponen yang telah ditetapkan seperti sistem grid dan bar navigasi. 2) Melaksanakan gaya dan interaksi dinamik melalui fail CSS dan JavaScript. 3) Penggunaan asas adalah memperkenalkan fail dan membina halaman dengan nama kelas. 4) Penggunaan lanjutan termasuk gaya tersuai melalui SASS. 5) Soalan -soalan yang sering ditanya termasuk konflik gaya dan isu komponen JavaScript, yang dapat diselesaikan melalui alat pemaju dan pengurusan modular. 6) Pengoptimuman prestasi disyorkan untuk secara selektif memperkenalkan modul dan menggunakan sistem grid secara rasional.

React and Bootstrap: Gabungan yang ideal?May 01, 2025 am 12:01 AM

React dan Bootstrap adalah kombinasi yang ideal. 1) Gunakan kelas CSS Bootstrap dan komponen JavaScript, 2) mengintegrasikan melalui React-Bootstrap atau ReactStrap, 3) beban dan mengoptimumkan prestasi rendering atas permintaan, dan membina antara muka pengguna yang cekap dan indah.

Menggunakan Bootstrap: Membuat laman web moden dan mudah alih pertamaApr 30, 2025 am 12:08 AM

Bootstrap adalah rangka kerja front-end sumber terbuka untuk mewujudkan laman web moden, responsif, dan mesra pengguna. 1) Ia menyediakan sistem grid dan gaya yang telah ditetapkan untuk memudahkan susun atur dan pembangunan. 2) Reka bentuk pertama mudah alih memastikan keserasian dan prestasi. 3) Melalui gaya dan komponen tersuai, laman web boleh diperibadikan. 4) Pengoptimuman prestasi dan amalan terbaik termasuk pemuatan selektif dan imej responsif. 5) Kesalahan umum seperti masalah susun atur dan konflik gaya dapat diselesaikan melalui teknik debugging.

Bootstrap dan Reka Bentuk Web: Amalan dan Teknik TerbaikApr 29, 2025 am 12:15 AM

Bootstrap adalah rangka kerja front-end sumber terbuka yang dibangunkan oleh Twitter, sesuai untuk membina laman web responsif dengan cepat. 1) Sistem gridnya didasarkan pada struktur 12-kolumn, yang membolehkan penciptaan susun atur fleksibel. 2) Fungsi reka bentuk responsif membolehkan laman web menyesuaikan diri dengan peranti yang berbeza. 3) Penggunaan asas termasuk membina bar navigasi, dan penggunaan lanjutan melibatkan komponen kad. 4) Kesalahan umum seperti penyalahgunaan sistem grid boleh dielakkan dengan betul menetapkan lebar lajur. 5) Pengoptimuman prestasi termasuk memuatkan hanya komponen yang diperlukan, menggunakan CDN dan pemampatan fail. 6) Amalan terbaik menekankan kod kemas, gaya tersuai dan reka bentuk responsif.

Bootstrap dan React: Menggabungkan rangka kerja untuk pembangunan webApr 28, 2025 am 12:08 AM

Alasan untuk menggabungkan Bootstrap dan React adalah pelengkap mereka: 1. Bootstrap menyediakan gaya dan komponen yang telah ditetapkan untuk mempermudah reka bentuk UI; 2. React meningkatkan kecekapan dan prestasi melalui pembangunan komponen dan DOM maya. Gunakannya bersempena untuk menikmati pembinaan UI yang cepat dan pengurusan interaksi yang kompleks.

Dari Zero hingga Bootstrap: Bermula dengan cepatApr 27, 2025 am 12:07 AM

Bootstrap adalah rangka kerja front-end sumber terbuka berdasarkan HTML, CSS dan JavaScript, yang direka untuk membantu pemaju dengan cepat membina laman web responsif. Falsafah reka bentuknya adalah "mudah alih pertama", menyediakan banyak komponen dan alat yang telah ditetapkan, seperti sistem grid, butang, bentuk, bar navigasi, dan lain-lain, memudahkan proses pembangunan depan, meningkatkan kecekapan pembangunan, dan memastikan respons dan konsistensi laman web. Menggunakan bootstrap boleh bermula dengan halaman mudah dan secara beransur -ansur menambah komponen lanjutan seperti kad dan kotak modal. Amalan terbaik untuk mengoptimumkan prestasi termasuk menyesuaikan bootstrap, menggunakan CDN, dan mengelakkan terlalu banyak nama kelas.

React dan Bootstrap: Meningkatkan Reka Bentuk Antara Muka PenggunaApr 26, 2025 am 12:18 AM

React dan Bootstrap boleh diintegrasikan dengan lancar untuk meningkatkan reka bentuk antara muka pengguna. 1) Pasang Pakej Ketergantungan: NPMinstallBootstrapReact-Bootstrap. 2) Import fail CSS: import'bootstrap/dist/css/bootstrap.min.css '. 3) Gunakan komponen bootstrap seperti butang dan bar navigasi. Dengan gabungan ini, pemaju boleh memanfaatkan fleksibiliti React dan perpustakaan gaya Bootstrap untuk mewujudkan antara muka pengguna yang indah dan cekap.

See all articles