Analisis ringkas tentang penggunaan kumpulan senarai, paging dan komponen bar kemajuan dalam Bootstrap

Bagaimana untuk melaksanakan kumpulan senarai, halaman dan bar kemajuan dalam

Bootstrap? Artikel berikut akan memperkenalkan kepada anda penggunaan kumpulan senarai, paging dan komponen bar kemajuan dalam Bootstrap. Saya harap ia akan membantu anda!

Kumpulan senarai

• Gunakan .list-group untuk memilih kumpulan senarai
• Tambahkan .active pada.list-group-item untuk Menunjukkan pemilihan aktif semasa. [Cadangan berkaitan: "tutorial bootstrap"]
• Tambahkan .disabled pada.list-group-item untuk menjadikannya kelihatan dilumpuhkan
• Gunakan <a> atau <button> Cipta senaraikan item kumpulan .list-group-item-action yang boleh diambil tindakan dengan keadaan tuding, dilumpuhkan dan aktif dengan menambahkan
• Tambahkan .list-group-flush untuk mengalih keluar beberapa jidar dan sudut bulat untuk pergi ke tepi ke tepi dalam bekas induk seperti senarai Rendering kad item kumpulan
• Ditambah .list-group-horizontal untuk menukar susun atur item kumpulan senarai daripada menegak ke mendatar merentas semua titik putus
• Gunakan kelas konteks untuk menetapkan item senarai dengan latar belakang keadaan dan Gaya warna
• Tambah lencana pada mana-mana item kumpulan senarai untuk menunjukkan kiraan belum dibaca, aktiviti, dsb. dengan bantuan beberapa utiliti

Latihan Kod:

<ul class="list-group">
    <li class="list-group-item active">列表组一</li>
    <li class="list-group-item">列表组二</li>
    <li class="list-group-item disabled">列表组三</li>
</ul>
<br />
<div class="list-group list-group-flush">
    <a href="#" class="list-group-item active list-group-item-action">列表组一</a>
    <a href="#" class="list-group-item list-group-item-action">列表组二</a>
    <a href="#" class="list-group-item disabled list-group-item-action">列表组三</a>
</div>
<br />
<ul class="list-group list-group-horizontal-sm">
    <li class="list-group-item active">列表组一</li>
    <li class="list-group-item list-group-item-danger">列表组二</li>
    <li class="list-group-item disabled">列表组三</li>
</ul>
<br />
<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">列表组一
    <span class="badge badge-danger">标记</span></li>
    <li class="list-group-item">列表组二</li>
    <li class="list-group-item disabled">列表组三</li>
</ul>

Halaman

Tambah .pagination, tambah teg perkataan .page-item, tambah teg pautan .page-link
Anda boleh menambah .pagination-lg atau .pagination-sm untuk menetapkan kesan kelui saiz Anda boleh menambah .justify-content-* untuk menetapkan tetapan tengah, kiri atau kanan Latihan kod:

<ul class="pagination pagination-sm justify-content-center">
    <li class="page-item"><a href="#" class="page-link">首页</a></li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">下一页</a></li>
</ul>

Bar kemajuan

• Kami menggunakan .progress sebagai elemen paling luar untuk menunjukkan nilai maksimum bar kemajuan.
• Kami menggunakan .progress-bar secara dalaman untuk menunjukkan kemajuan setakat ini.
• .progress-bar perlu menetapkan lebarnya melalui gaya sebaris, kelas utiliti atau sifat CSS tersuai.
• Anda boleh menambah label pada bar kemajuan dengan menambahkan teks di dalam elemen .progress-bar.
• menetapkan nilai .progress untuk height , jadi jika anda menukar nilai itu, dalam .progress-bar akan mengubah saiz secara automatik.
• Kemunculan bar kemajuan tunggal boleh ditukar dengan menggunakan kelas alat berkaitan warna latar belakang.
• Jika perlu, anda boleh menambah berbilang bar kemajuan dalam komponen bar kemajuan.
• Tambah .progress-bar pada mana-mana .progress-bar-striped untuk menambah gaya jalur Ini dicapai dengan menggunakan kesan jalur pada warna latar belakang bar kemajuan melalui fungsi kecerunan CSS.
• Kecerunan berjalur juga boleh mempunyai kesan animasi. Tambahkan .progress-bar pada .progress-bar-animated untuk menggunakan fungsi animasi CSS3 untuk menambah kesan animasi jalur menatal dari kanan ke kiri.

Amalan kod:

<div class="progress">
    <div class="progress-bar w-50 ">
    </div>
</div>
<br />
<div class="progress" style="height: 30px;">
    <div class="progress-bar bg-danger" style="width: 35%;">
        30%
    </div>
</div>
<br>
<div class="progress">
    <div class="progress-bar bg-success w-25"></div>
    <div class="progress-bar bg-danger w-25"></div>
    <div class="progress-bar bg-info w-25"></div>
</div>
<br />
<div class="progress">
    <div class="progress-bar w-50 bg-info progress-bar-striped progress-bar-animated">
    </div>
</div>

Untuk pengetahuan lanjut tentang bootstrap, sila lawati: tutorial asas bootstrap! !

Atas ialah kandungan terperinci Analisis ringkas tentang penggunaan kumpulan senarai, paging dan komponen bar kemajuan dalam Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!