Bagaimana saya menggunakan komponen pemutar Bootstrap untuk menunjukkan keadaan pemuatan?

Bagaimana saya menggunakan komponen pemutar Bootstrap untuk menunjukkan keadaan pemuatan?

Komponen Spinner Bootstrap adalah cara yang berkesan untuk menunjukkan keadaan pemuatan dalam aplikasi web anda. Untuk menggunakan pemutar, anda perlu memasukkan bootstrap dalam projek anda. Anda boleh melakukan ini dengan menghubungkan ke fail CSS Bootstrap di bahagian dokumen HTML anda:

 <code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"></code>

Setelah bootstrap dimasukkan, anda boleh menambah pemutar ke halaman anda dengan menggunakan markup HTML yang sesuai. Berikut adalah contoh asas cara menggunakan pemutar sempadan:

 <code class="html"><div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div></code>

Kelas spinner-border mencipta pemutar dengan sempadan. <span></span> di dalam pemutar adalah untuk kebolehcapaian, memastikan pembaca skrin dapat mengumumkan keadaan pemuatan.

Jika anda memerlukan pemutar yang semakin meningkat, anda boleh menggunakan kelas spinner-grow :

 <code class="html"><div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div></code>

Anda boleh meletakkan pemintal dalam pelbagai cara untuk menunjukkan keadaan pemuatan, seperti memusatkannya pada halaman atau membenamkannya dalam butang atau bentuk. Sebagai contoh, untuk memusatkan pemutar pada halaman, anda boleh menggunakan utiliti flex:

 <code class="html"><div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div></code>

Apakah jenis pemintal yang terdapat di bootstrap dan bagaimana mereka berbeza?

Bootstrap menyediakan dua jenis spinner utama: spinner-border dan spinner-grow . Berikut adalah pandangan terperinci pada setiap jenis dan bagaimana mereka berbeza:

1. Spinner-sempadan :

   • Pemutar ini mempunyai sempadan yang berputar di sekitar bulatan, mewujudkan kesan berputar.
   • Ia dibuat menggunakan kelas spinner-border .
   • Sempadan berputar boleh disesuaikan dengan warna dan saiz.

   Contoh:

    <code class="html"><div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div></code>

2. Spinner-Grow :

   • Pemutar ini menggunakan kesan berdenyut yang tumbuh dan mengecut.
   • Ia dibuat menggunakan kelas spinner-grow .
   • Sama seperti pemutar sempadan, ia boleh disesuaikan dengan warna dan saiz.

   Contoh:

    <code class="html"><div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div></code>

Perbezaan utama antara kedua -dua jenis ini terletak pada penampilan visual dan gaya animasi mereka. spinner-border menawarkan putaran bulat yang lebih tradisional dan digunakan secara meluas, manakala spinner-grow memberikan animasi berdenyut yang mungkin lebih menarik untuk beberapa pengguna.

Bagaimanakah saya dapat menyesuaikan penampilan spinner bootstrap untuk menyesuaikan reka bentuk laman web saya?

Menyesuaikan penampilan spinner bootstrap untuk menyesuaikan reka bentuk laman web anda melibatkan mengubah saiz, warna, dan penempatan mereka. Berikut adalah beberapa kaedah untuk mencapai ini:

1. Menukar Warna :
   Anda boleh menukar warna pemutar dengan menggunakan kelas warna teks Bootstrap atau CSS tersuai. Sebagai contoh, untuk menukar warna menjadi primer:

    <code class="html"><div class="spinner-border text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div></code>

   Anda juga boleh menggunakan CSS tersuai untuk menetapkan warna tertentu:

    <code class="html"><style> .custom-spinner { color: #ff0000; /* Red color */ } </style> <div class="spinner-border custom-spinner" role="status"> <span class="visually-hidden">Loading...</span> </div></code>

2. Menyesuaikan saiz :
   Spinners boleh diubah saiznya dengan menggunakan utiliti saiz Bootstrap atau CSS tersuai. Untuk meningkatkan saiz:

    <code class="html"><div class="spinner-border spinner-border-sm" role="status"> <span class="visually-hidden">Loading...</span> </div></code>

   Untuk saiz tersuai, anda boleh menggunakan CSS:

    <code class="html"><style> .large-spinner { width: 3rem; height: 3rem; } </style> <div class="spinner-border large-spinner" role="status"> <span class="visually-hidden">Loading...</span> </div></code>

3. Penempatan dan kedudukan :
   Anda boleh meletakkan spinners menggunakan flex dan grid utiliti bootstrap atau CSS adat. Sebagai contoh, untuk memusatkan pemutar dalam bekas:

    <code class="html"><div class="d-flex justify-content-center align-items-center" style="height: 200px;"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div></code>

Bolehkah saya menggunakan spinner bootstrap dengan rangka kerja atau perpustakaan lain, dan jika ya, bagaimana?

Ya, anda boleh menggunakan spinner bootstrap dengan rangka kerja atau perpustakaan lain. Inilah cara anda dapat mengintegrasikannya:

1. Dengan reaksi :

   • Pertama, sertakan bootstrap dalam projek React anda dengan memasangnya melalui npm atau benang:

      <code class="bash">npm install bootstrap</code>

   • Import Bootstrap CSS dalam komponen React anda atau dalam fail index.js utama anda:

      <code class="javascript">import 'bootstrap/dist/css/bootstrap.min.css';</code>

   • Anda kemudian boleh menggunakan pemutar terus di JSX anda:

      <code class="jsx">function Loading() { return ( <div classname="d-flex justify-content-center"> <div classname="spinner-border" role="status"> <span classname="visually-hidden">Loading...</span> </div> </div> ); }</code>

2. Dengan vue.js :

   • Sama dengan React, Pasang Bootstrap:

      <code class="bash">npm install bootstrap</code>

   • Import CSS dalam fail Main.js anda:

      <code class="javascript">import 'bootstrap/dist/css/bootstrap.min.css';</code>

   • Gunakan pemutar dalam komponen Vue anda:

      <code class="vue"><template> <div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div> </template></code>

3. Dengan sudut :

   • Pasang bootstrap menggunakan npm:

      <code class="bash">npm install bootstrap</code>

   • Tambahkan CSS ke fail angular.json anda dalam pelbagai styles :

      <code class="json">"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ],</code>

   • Gunakan pemutar dalam templat komponen sudut anda:

      <code class="html"><div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div></code>

4. Dengan jQuery :

   • Bootstrap pada asalnya dibina untuk berfungsi dengan baik dengan jQuery, jadi integrasi adalah mudah. Selepas memasukkan CSS dan jQuery bootstrap di HTML anda, anda hanya boleh menggunakan markup spinner seperti yang ditunjukkan sebelumnya.

Untuk semua rangka kerja ini, anda boleh menyesuaikan lagi pemintal menggunakan kaedah yang diterangkan dalam bahagian sebelumnya, memastikan mereka sesuai dengan reka bentuk dan fungsi projek anda.

Atas ialah kandungan terperinci Bagaimana saya menggunakan komponen pemutar Bootstrap untuk menunjukkan keadaan pemuatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!