自訂 Bootstrap 讀取導航 - 版本 2

Bootstrap 5 框架的自訂麵包屑

摘要：我們正在展示自訂 Bootstrap 5 麵包屑的程式碼 (CSS)。這是之前發表的文章的改進版本。

1 需要更好的麵包屑

Bootstrap 5 框架附帶了非常基本的麵包屑實作。我需要更好的東西，無論是視覺上還是功能上。隨著時間的推移，在我的應用程式中，我發現使用麵包屑非常有用，可以讓使用者在深入了解特定項目/物件的詳細資訊後返回到更高層級。

對我來說非常重要的是能夠呈現兩行文字資料，特別是在我顯示一些資料和 ID 的情況下，例如指示某個帳戶的數據，同時提供帳號。

我對在網路上看到的解決方案不滿意，所以我開發了自己的解決方案。

雖然標題說這是一個「Bootstrap 5」函式庫，但它完全獨立於 Bootstrap CSS，並且僅從 Bootstrap CSS 中獲取選定的顏色以與 Bootstrap 5 主題保持一致。如果您願意，可以獨立於 Bootstrap 使用它。

1.1 本版本變化

此版本合併了來自 Graeme_Grant@codeproject.com 的建議和程式碼，以使程式碼更短。我不一定同意所有建議，因為我認為程式碼的人類可讀性比較短的程式碼更重要。所以，我製作了自己的新版本。

此外，此版本使用 Bootstrap Icons [1] 而不是 Font Awesome 圖示。

2 最終結果

這是最終結果以及產生它的示範程式碼。我創建了 3 種尺寸（大、中、小）的麵包屑條，並可選擇使用圖示。可以隨意選擇顏色，並且預設會出現懸停效果，除非明確停用。最後一個麵包屑的懸停效果通常會被停用，因為這是目前有效的選擇。

這是產生上述渲染的 HTML 程式碼。任何 Web 開發人員都應該能夠閱讀 HTML 程式碼並將其與上圖匹配，以找到他/她喜歡的變體。

如果您想使用圖標，可以安裝免費版本的 Bootstrap Icons [1]，並參考它，類似於本例中的操作方式。用於圖示使用的 HTML 程式碼有點複雜，因為我們需要將圖示和文字分成 2 個單獨的元素，以便它們可以獨立設定樣式。

    <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

這裡是 CSS，不需要 JavaScript。我故意使用類別名稱“breadcrumbs3”以避免與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 CSS 的工作原理

這裡我們將給出一些關於 CSS 如何運作的提示，儘管這是非常簡單的 CSS 程式碼，而且大部分都是不言自明的。

4.1 用CSS製作三角形的技巧

這裡使用了一個關於如何使用 CSS 製作三角形的非常流行的技巧。重點是濫用 CSS 渲染邊框的能力，使其渲染出三角形的邊框。為此，您可以建立一個寬度和高度為零的塊元素，並在一側設置彩色邊框（充當箭頭），並在相鄰的兩側設置兩個透明邊框。

4.2 為 CSS 三角形建立邊框的技巧

由於三角形本身就是一個邊框，所以我們不能在它上面建立邊框。因此，在三角形/箭頭上建立邊框的技巧是建立 2 個三角形，並以最小的偏移量渲染三角形。這樣我們就創造了邊框外觀。

你可以查看選擇器(.breadcrumb3-item:after) 和(.breadcrumb3-item:before) 中的CSS 程式碼，你會看到我們創建了2 個三角形，一個是灰色的，一個是訊息顏色的。仔細看第一個 (margin-left: 1px; z-index: 2;) 和第二個 (margin-left: 0px; z-index: 3;) 的 CSS 法則。您可以看到第二個三角形相對於第一個三角形有輕微的偏移和渲染。

偽元素（:before、:after）的目的只是將這些三角形附加到 .breadcrumb3-item 元素。

4.3 教學範例

這裡我們將提供一個教學範例程式碼，只是為了展示三角形是如何建立的。這是教學程式碼：

    <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>


   

這是執行結果：

任何更好的程式設計師都應該能夠將程式碼範例與產生的結果相匹配。

5 Bootstrap 圖示的使用

為您的應用程式找到合適的 Bootstrap Icons 圖示可能看起來很複雜，但實際上非常簡單。圖標按關鍵字索引，因此您需要先搜尋關鍵字，然後選擇（在本範例中免費）感興趣的圖標，然後將其 ID 類別複製到您的應用程式中。以下是顯示該過程的螢幕截圖。

6 參考文獻

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

以上是自訂 Bootstrap 讀取導航 - 版本 2的詳細內容。更多資訊請關注PHP中文網其他相關文章！