Bagaimana Untuk Membuat reka bentuk UI Senarai Pengguna Dalam Bootstrap?

Senarai pengguna ialah elemen antara muka biasa yang digunakan untuk memaparkan senarai pengguna dalam sistem. Dalam Bootstrap, anda boleh menggunakan pelbagai pilihan susun atur dan penggayaan untuk mereka bentuk rupa senarai pengguna anda.

Cara Membuat Senarai Pengguna Menggunakan HTML Dan CSS

Salah satu cara untuk membuat senarai pengguna dalam Bootstrap adalah dengan menggunakan

dan
• elemen untuk mencipta senarai item terpakai yang tidak tersusun. Anda kemudiannya boleh menggunakan sistem grid Bootstrap untuk mengawal susun atur senarai dan menggunakan pelbagai kelas pada
  dan
  • elemen untuk menggayakannya mengikut keperluan anda.

    Sebagai contoh, anda boleh menggunakan kelas .list-group dan .list-group-item untuk membuat senarai pengguna dengan penampilan seperti kad, atau kelas .table dan .table-row untuk mencipta reka letak yang lebih jadual .

    Anda juga boleh menggunakan kelas utiliti Bootstrap untuk menggayakan item senarai, seperti kelas .font-weight-bold untuk menjadikan nama pengguna tebal atau kelas .text-muted untuk menjadikan butiran pengguna teks berwarna kelabu.

    Berikut ialah contoh senarai pengguna ringkas yang dilaksanakan menggunakan Bootstrap:
    

    <ul class="list-group">
      <li class="list-group-item">
        <span class="font-weight-bold"> Ricky </span>
        <span class="text-muted">(Ricky@example.com)</span>
      </li>
      <li class="list-group-item">
        <span class="font-weight-bold"> Neha </span>
        <span class="text-muted">(Neha@example.com)</span>
      </li>
      <li class="list-group-item">
        <span class="font-weight-bold">Alex</span>
        <span class="text-muted">(Alex@example.com)</span>
      </li>
    </ul>
    

    Salin selepas log masuk

    Terdapat petua berikut –

    1. Gunakan titik putus responsif Bootstrap untuk memastikan senarai pengguna anda kelihatan bagus pada saiz skrin yang berbeza. Contohnya, anda boleh menggunakan kelas .d-sm-flex dan .flex-sm-column untuk menjadikan item senarai pengguna disusun secara menegak pada skrin kecil dan kelas .d-none untuk menyembunyikan elemen tertentu pada saiz skrin tertentu.
    2. Anda boleh menggunakan komponen penomboran Bootstrap untuk membolehkan pengguna menyemak imbas senarai besar pengguna. Sebagai contoh, anda boleh menggunakan kelas .pagination untuk mencipta bar penomboran dan kelas .page-item dan .page-link untuk menggayakan pautan penomboran individu.
    3. Anda boleh menggunakan kawalan borang Bootstrap untuk membenarkan pengguna menapis atau mengisih senarai pengguna. Contohnya, anda boleh menggunakan kelas .form-control untuk menggayakan input carian atau kelas .custom-select untuk menggayakan menu lungsur turun untuk memilih susunan isihan.
    4. Anda boleh menggunakan komponen objek media Bootstrap untuk memaparkan avatar pengguna atau media kaya lain di samping nama pengguna dan butiran. Contohnya, anda boleh menggunakan kelas .media dan .media-body untuk mencipta objek media dan kelas .mr-3 untuk memberi imej avatar sedikit ruang daripada teks.
    5. Pertimbangkan untuk menggunakan pilihan penyesuaian Bootstrap untuk menyesuaikan lagi penampilan senarai pengguna anda mengikut keperluan anda. Sebagai contoh, anda boleh menggunakan pembolehubah Sass $list-group-item-color untuk menukar warna latar belakang item senarai, atau $list-group-item-color dan $list-group-item-text-color pembolehubah kepada mengawal warna teks.

    Atas ialah kandungan terperinci Bagaimana Untuk Membuat reka bentuk UI Senarai Pengguna Dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!