Serbuk baca Bootstrap Tersuai -Ver 2

Breadcrumbs Tersuai untuk rangka kerja Bootstrap 5

Abstrak: Kami membentangkan kod (CSS) untuk serbuk roti Bootstrap 5 tersuai. Ini ialah versi diperbaik bagi artikel yang diterbitkan sebelum ini.

1 Keperluan untuk serbuk roti yang lebih baik

Rangka kerja Bootstrap 5 akan datang dengan pelaksanaan Breadcrumbs yang sangat asas. Saya memerlukan sesuatu yang lebih baik, secara visual dan lebih berfungsi. Lama kelamaan, dalam aplikasi saya, saya mendapati ia sangat berguna untuk menggunakan Breadcrumbs untuk membolehkan pengguna kembali ke tahap yang lebih tinggi, selepas dia menggerudi butiran tentang item/objek tertentu.

Sangat penting bagi saya ialah keupayaan untuk membentangkan DATA TEKS DALAM DUA BARIS, terutamanya dalam kes di mana saya menunjukkan beberapa data dan ID, seperti petunjuk yang merupakan data untuk beberapa Akaun, dan pada masa yang sama memberikan nombor Akaun.

Saya tidak berpuas hati dengan penyelesaian yang saya lihat di internet, jadi saya membangunkan saya sendiri.

Walaupun tajuk mengatakan ini ialah pustaka "Bootstrap 5", ia adalah bebas sepenuhnya daripada CSS Bootstrap dan hanya warna pilihan diambil daripada CSS Bootstrap untuk diselaraskan dengan tema Bootstrap 5. Anda boleh menggunakannya secara bebas daripada Bootstrap jika anda suka.

1.1 Perubahan dalam versi ini

Versi ini menggabungkan cadangan dan kod daripada Graeme_Grant@codeproject.com untuk menjadikan kod lebih pendek. Saya tidak semestinya bersetuju dengan semua cadangan, kerana saya fikir kebolehbacaan manusia kod adalah lebih penting daripada kod yang lebih pendek. Jadi, saya buat versi baharu saya sendiri.

Selain itu, versi ini menggunakan Ikon Bootstrap [1] dan bukannya Ikon Font Hebat.

2 Keputusan akhir

Berikut ialah hasil akhir, bersama-sama dengan kod demo yang menjananya. Saya mencipta jalur serbuk roti dalam 3 saiz (besar, sederhana, kecil), dengan penggunaan ikon pilihan. Warna boleh dipilih sesuka hati, dan kesan tuding hadir secara lalai, melainkan dilumpuhkan secara eksplisit. Kesan hover biasanya dilumpuhkan untuk serbuk roti terakhir kerana pilihan semasa yang berkuat kuasa.

Berikut ialah kod HTML yang menjana pemaparan di atas. Mana-mana pembangun web seharusnya boleh membaca kod HTML dan memadankannya dengan gambar di atas untuk mencari varian yang dia suka.

Jika anda ingin menggunakan ikon, anda boleh memasang versi percuma Ikon Bootstrap [1], dan merujuknya, sama seperti cara ia dilakukan dalam contoh ini. Kod HTML untuk penggunaan ikon agak rumit kerana kami perlu mengasingkan ikon dan teks kepada 2 elemen berasingan supaya ia boleh digayakan secara bebas.

    <link rel="stylesheet" href="breadcrumb3.css">
    <!-- Download bootstrap icons from https://icons.getbootstrap.com/#install  
        and install -->
    <link rel="stylesheet" href="bootstrap-icons-1.11.3%5Cfont%5Cbootstrap-icons.min.css">



    <!--Large size --------------------------------------------------------------->
    <h5 id="Large-size-info-case">Large size, info case</h5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>
    <h5 id="Large-size-info-case-with-no-hover-effect-on-the-last-button">Large size, info case, with no hover effect on the last button</h5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info">Contracts</a>
        <a href="#" class="breadcrumb3-item info">Contract number99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>
    <h5 id="Large-size-Rainbow">Large size, Rainbow</h5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info ">Breadcrumbinfo</a>
        <a href="#" class="breadcrumb3-item primary ">Breadcrumbprimary</a>
        <a href="#" class="breadcrumb3-item warning ">Breadcrumbwarning</a>
        <a href="#" class="breadcrumb3-item success ">Breadcrumbsuccess</a>
        <a href="#" class="breadcrumb3-item secondary ">Breadcrumbsecondary</a>
        <a href="#" class="breadcrumb3-item light ">Breadcrumblight</a>
        <a href="#" class="breadcrumb3-item danger ">Breadcrumbdanger</a>
    </div>
    <h5 id="Large-size-icons-usage">Large size, icons usage</h5>
    <div class="breadcrumb3-lg ">
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-people-fill"></i></span> 
            <span class="breadcrumb3-text">Users</span>
        </a>
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-person-fill"></i></span>
            <span class="breadcrumb3-text">User number123456</span>
        </a>
        <a href="#" class="breadcrumb3-item primary"> 
            <span class="breadcrumb3-icon"><i class="bi bi-info-circle-fill"></i></span>
            <span class="breadcrumb3-text">Details</span>
        </a>
    </div>

    <!--Medium size --------------------------------------------------------------->
    <h5 id="Medium-size-info-case">Medium size, info case</h5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>
    <h5 id="Medium-size-info-case-with-no-hover-effect-on-the-last-button">Medium size, info case, with no hover effect on the last button</h5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info">Contracts</a>
        <a href="#" class="breadcrumb3-item info">Contract number99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>
    <h5 id="Medium-size-Rainbow">Medium size, Rainbow</h5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info ">Breadcrumbinfo</a>
        <a href="#" class="breadcrumb3-item primary ">Breadcrumbprimary</a>
        <a href="#" class="breadcrumb3-item warning ">Breadcrumbwarning</a>
        <a href="#" class="breadcrumb3-item success ">Breadcrumbsuccess</a>
        <a href="#" class="breadcrumb3-item secondary ">Breadcrumbsecondary</a>
        <a href="#" class="breadcrumb3-item light ">Breadcrumblight</a>
        <a href="#" class="breadcrumb3-item danger ">Breadcrumbdanger</a>
    </div>
    <h5 id="Medium-size-icons-usage">Medium size, icons usage</h5>
    <div class="breadcrumb3-md ">
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-people-fill"></i></span> 
            <span class="breadcrumb3-text">Users</span>
        </a>
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-person-fill"></i></span>
            <span class="breadcrumb3-text">User number123456</span>
        </a>
        <a href="#" class="breadcrumb3-item primary"> 
            <span class="breadcrumb3-icon"><i class="bi bi-info-circle-fill"></i></span>
            <span class="breadcrumb3-text">Details</span>
        </a>
    </div>

    <!--Small size --------------------------------------------------------------->
    <h5 id="Small-size-info-case">Small size, info case</h5>
    <div class="breadcrumb3-sm ">
        <a href="#" class="breadcrumb3-item info">Accounts</a>
        <a href="#" class="breadcrumb3-item info">Account number123456</a>
        <a href="#" class="breadcrumb3-item primary">Details</a>
    </div>
    <h5 id="Small-size-info-case-with-no-hover-effect-on-the-last-button">Small size, info case, with no hover effect on the last button</h5>
    <div class="breadcrumb3-sm  ">
        <a href="#" class="breadcrumb3-item info">Contracts</a>
        <a href="#" class="breadcrumb3-item info">Contract number99999-2024</a>
        <a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
    </div>
    <h5 id="Small-size-Rainbow">Small size, Rainbow</h5>
    <div class="breadcrumb3-sm  ">
        <a href="#" class="breadcrumb3-item info ">Breadcrumbinfo</a>
        <a href="#" class="breadcrumb3-item primary ">Breadcrumbprimary</a>
        <a href="#" class="breadcrumb3-item warning ">Breadcrumbwarning</a>
        <a href="#" class="breadcrumb3-item success ">Breadcrumbsuccess</a>
        <a href="#" class="breadcrumb3-item secondary ">Breadcrumbsecondary</a>
        <a href="#" class="breadcrumb3-item light ">Breadcrumblight</a>
        <a href="#" class="breadcrumb3-item danger ">Breadcrumbdanger</a>
    </div>
    <h5 id="Small-size-icons-usage">Small size, icons usage</h5>
    <div class="breadcrumb3-sm  ">
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-people-fill"></i></span> 
            <span class="breadcrumb3-text">Users</span>
        </a>
        <a href="#" class="breadcrumb3-item info">
            <span class="breadcrumb3-icon"><i class="bi bi-person-fill"></i></span>
            <span class="breadcrumb3-text">User number123456</span>
        </a>
        <a href="#" class="breadcrumb3-item primary"> 
            <span class="breadcrumb3-icon"><i class="bi bi-info-circle-fill"></i></span>
            <span class="breadcrumb3-text">Details</span>
        </a>
    </div>

3 CSS serbuk roti

Ini adalah CSS, tiada JavaScript diperlukan. Saya sengaja menggunakan nama kelas “breadcrumbs3” untuk mengelakkan perlanggaran nama dengan kelas asal Bootstrap 5.

/* breadcrumb3.css */
/* by Mark.Pelf@Codeproject.com, 
   using partly code from Graeme_Grant@codeproject.com  */

.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm{
    /* colors taken from bootstrap.css Bootstrap v5.1.0 */
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-gray: #6c757d;
    --bs-white: white;
    --bs-black: black;

    /* changeable colors */
    --_bgcolor: var(--bs-info);
    --_color: var(--bs-black);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

@media (max-width: 767px) {
    /* making it responsive, using CSS Flexbox with column (vertical) direction*/
    .breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm {
        display: flex;
        flex-direction: column;
    }

    .breadcrumb3-lg  .breadcrumb3-item {
        width: 80% ;
        border-radius: 4px 0 0 4px;
        padding-left: 25px ;
    }

    .breadcrumb3-md .breadcrumb3-item {
        width: 80% ;
        border-radius: 3px 0 0 3px;
        padding-left: 20px ;
    }

    .breadcrumb3-sm .breadcrumb3-item {
        width: 80% ;
        border-radius: 3px 0 0 3px;
        padding-left: 18px ;
    }
}

/* large size breadcrumb3-item -----------------------------------*/
.breadcrumb3-item {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    color: var(--_color);
    background-color: var(--_bgcolor);
    height: 40px;
    line-height: 18px;
    font-size: 18px;
    text-align: center;
    padding-right: 10px;
    padding-left: 25px;
    text-decoration: none;
}

.breadcrumb3-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.breadcrumb3-icon {
    display: table-cell;
    text-align: center;
    line-height: 25px;
    font-size: 25px;
    padding-right: 10px;
    vertical-align: middle;
}

.breadcrumb3-item:first-child {
    border-radius: 4px 0 0 4px;
    padding-left: 15px;
}

.breadcrumb3-item:before,
.breadcrumb3-item:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    position: absolute;
    margin-top: -20px;
    border-bottom: 20px solid transparent;
    left: 100%;
    top: 50%;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-item:after {
    border-left: 15px solid var(--_arrowbordercolor);
    margin-left: 1px;
    z-index: 2;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-item:before {
    border-left: 15px solid var(--_bgcolor);
    margin-left: 0px;
    z-index: 3;
}

.breadcrumb3-item:hover:not(.no-hover-effect) ,
.breadcrumb3-item:focus:not(.no-hover-effect){
    background-color: var(--_hover-bgcolor);
    color: var(--_hover-color);
}

.breadcrumb3-item:hover:not(.no-hover-effect):before,
.breadcrumb3-item:focus:not(.no-hover-effect):before {
    border-left-color: var(--_hover-bgcolor);
}

/* remove keyboard navigation focus rectangle */
.breadcrumb3-item:focus-visible {
  outline: none;
}

/* medium size breadcrumb3-item -----------------------------------*/
.breadcrumb3-md .breadcrumb3-item {
    height: 32px;
    line-height: 15px;
    font-size: 15px;
    padding-left: 20px;
}

.breadcrumb3-md .breadcrumb3-icon {
    line-height: 20px;
    font-size: 20px;
    padding-right: 7px;
}

.breadcrumb3-md .breadcrumb3-item:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 12px;
}

/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-md .breadcrumb3-item:after {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 12px solid var(--_arrowbordercolor);
    margin-top: -16px;
    margin-left: 1px;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-md .breadcrumb3-item:before {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 12px solid var(--_bgcolor);
    margin-top: -16px;
}

/* small size breadcrumb3-item-sm -----------------------------------*/
.breadcrumb3-sm .breadcrumb3-item {
    height: 24px;
    line-height: 11px;
    font-size: 11px;
    padding-right: 8px;
    padding-left: 18px;
}

.breadcrumb3-sm .breadcrumb3-icon {
    line-height: 16px;
    font-size: 16px;
    padding-right: 5px;
}

.breadcrumb3-sm .breadcrumb3-item:first-child {
    border-radius: 3px 0 0 3px;
    padding-left: 10px;
}

/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-sm .breadcrumb3-item:after {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_arrowbordercolor);
    margin-top: -12px;
    margin-left: 1px;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-sm .breadcrumb3-item:before {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_bgcolor);
    margin-top: -12px;
}

/*breadcrumb3-item colors ------------------------------------------*/
/* we like specificity, to avoid namespace collisions */
.breadcrumb3-lg .info, .breadcrumb3-md .info, .breadcrumb3-sm .info {
    --_color: var(--bs-black);
    --_bgcolor: var(--bs-info);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .primary , .breadcrumb3-md .primary , .breadcrumb3-sm .primary {
    --_color: var(--bs-white);
    --_bgcolor: var(--bs-primary);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-success);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .warning, .breadcrumb3-md .warning, .breadcrumb3-sm .warning {
    --_color: var(--bs-black);
    --_bgcolor: var(--bs-warning);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .success, .breadcrumb3-md .success, .breadcrumb3-sm .success {
    --_color: var(--bs-black);
    --_bgcolor: var(--bs-success);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .secondary, .breadcrumb3-md .secondary, .breadcrumb3-sm .secondary {
    --_color: var(--bs-white);
    --_bgcolor: var(--bs-secondary);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .light, .breadcrumb3-md .light, .breadcrumb3-sm .light {
    --_color: var(--bs-black);
    --_bgcolor: var(--bs-light);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .danger, .breadcrumb3-md .danger, .breadcrumb3-sm .danger {
    --_color: var(--bs-white);
    --_bgcolor: var(--bs-danger);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-primary);
    --_hover-color: var(--bs-white);
}

4 Bagaimana CSS berfungsi

Di sini kami akan memberikan beberapa petunjuk tentang cara CSS berfungsi, walaupun ini adalah kod CSS yang agak mudah dan kebanyakannya menerangkan sendiri.

4.1 Helah untuk membuat segi tiga dengan CSS

Helah yang sangat popular tentang cara membuat segi tiga dengan CSS digunakan di sini. Intinya ialah menyalahgunakan keupayaan CSS untuk membuat sempadan dan menjadikannya sebagai sempadan yang berbentuk segi tiga. Anda melakukannya dengan mencipta elemen blok dengan lebar dan tinggi sifar serta sempadan berwarna pada satu sisi yang bertindak sebagai anak panah dan dua sempadan lutsinar pada dua sisi bersebelahan.

4.2 Helah untuk mencipta sempadan kepada segi tiga CSS

Memandangkan segitiga itu sendiri adalah sempadan, kita tidak boleh membuat sempadan di atasnya. Jadi, helah untuk mencipta sempadan pada segi tiga/anak panah adalah dengan mencipta 2 segi tiga dan menjadikan satu di atas yang lain dengan mengetepikan offset minimum. Dengan cara itu kita mencipta rupa sempadan.

Anda boleh melihat ke dalam kod CSS ke dalam pemilih (.breadcrumb3-item:after) dan (.breadcrumb3-item:before) dan anda akan melihat bahawa kami di sana mencipta 2 segi tiga, satu kelabu dan satu warna maklumat di atasnya. Lihat dengan teliti peraturan CSS untuk yang pertama (margin-kiri: 1px; z-index: 2;) dan untuk yang kedua (margin-left: 0px; z-index: 3;). Anda boleh melihat sedikit offset dan pemaparan bagi segi tiga kedua berbanding yang pertama.

Unsur Pseudo (:sebelum, :selepas) hanya bertujuan untuk melampirkan segi tiga tersebut pada elemen .breadcrumb3-item.

4.3 Contoh Tutorial

Di sini kami akan menyediakan kod contoh tutorial, hanya untuk menunjukkan cara segi tiga dicipta. Berikut ialah kod tutorial:

    <style>
        .test1 {
            position: relative;
            display: table-cell;
            vertical-align: middle;
            color: blue;
            background-color: yellow;
            height: 40px;
            line-height: 18px;
            font-size: 18px;
            text-align: center;
            padding-right: 10px;
            padding-left: 25px;
            text-decoration: none;
        }

        .test1:after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid red;
            position: absolute;
            margin-top: -20px;
            border-bottom: 20px solid red;
            left: 100%;
            top: 50%;
            border-left: 15px solid gray;
            margin-left: 1px;
            z-index: 2;
        }

        .test2 {
            position: relative;
            display: table-cell;
            vertical-align: middle;
            color: blue;
            background-color: yellow;
            height: 40px;
            line-height: 18px;
            font-size: 18px;
            text-align: center;
            padding-right: 10px;
            padding-left: 25px;
            text-decoration: none;
        }

        .test2:after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            position: absolute;
            margin-top: -20px;
            border-bottom: 20px solid transparent;
            left: 100%;
            top: 50%;
            border-left: 15px solid gray;
            margin-left: 1px;
            z-index: 2;
        }

        .test3 {
            position: relative;
            display: table-cell;
            vertical-align: middle;
            color: blue;
            background-color: yellow;
            height: 40px;
            line-height: 18px;
            font-size: 18px;
            text-align: center;
            padding-right: 10px;
            padding-left: 25px;
            text-decoration: none;
        }

        .test3:before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            position: absolute;
            margin-top: -20px;
            border-bottom: 20px solid transparent;
            left: 100%;
            top: 50%;
            border-left: 15px solid blue;
            margin-left: 0px;
            z-index: 3;
        }
    </style>



    <div class="test1">
        Note how gray arrow is created from red border
    </div>
    <br>
    <div>
        Now we will change red to transparent to keep just arrow
    </div>
    <br>
    <div class="test2">
        Now we have only gray arrow, with 1 pixel offset to the right
    </div>
    <br>
    <div class="test3">
        Similarly we have blue arrow, without that offset
    </div>
    <br>
    <div class="test2 test3">
        Now we overlap 2 arrows, to get border effect for the arrow
    </div>


   

Dan inilah hasil pelaksanaan:

Mana-mana pengaturcara yang lebih baik seharusnya dapat memadankan sampel kod dengan hasil yang dihasilkan.

5 Penggunaan Ikon Bootstrap

Mungkin kelihatan rumit untuk mencari ikon Ikon Bootstrap yang sesuai untuk aplikasi anda tetapi sebenarnya agak mudah. Ikon diindeks mengikut kata kunci, jadi anda perlu mencari kata kunci anda dahulu, kemudian pilih (dalam contoh ini percuma) ikon yang diminati, dan kemudian salin kelas IDnya ke dalam apl anda. Berikut ialah tangkapan skrin yang menunjukkan proses itu.

6 Rujukan

[1] https://icons.getbootstrap.com/#install

Atas ialah kandungan terperinci Serbuk baca Bootstrap Tersuai -Ver 2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!