2016年6月20日 星期一

BS3 Breadcrumb

BS3 Breadcrumb

簡介

Breadcrumb 是「麵包屑」的意思，原由應該來自格林童話中糖果屋的故事，故事中的兄妹在樹林中延路用麵包屑標記回家的路途。BS3 中也定義了名為 .breadcrumb 的 CSS 基礎類別，用來產生介面元件以標示目前網頁在直系網頁中的位置，同時也可以作為直接返回上層直系網頁的捷徑。是一種在網頁中常見的導航方式。和 <ul> 及 <li> 標記搭配使用，通常在 <li> 的標記中放置 <a> 標記並指定前往的 url 位置。

以下為 BS3 在 bootstrap.css 樣式表中，有關於 .breadcrumb 的樣式定義。

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb > li {
    display: inline-block;
}
.breadcrumb > li + li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0";
}
.breadcrumb > .active {
    color: #777;
}

範例

範例中展示了二個 breadcrumb。第一個的外觀採用 BS3 預設的 CSS 定義，第二個則修改了底色和間隔符號。

圖 1. 範例

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    max-width:1000px;
    padding:20px;
}
#demo.breadcrumb {
    background-color: lightgreen;
}
#demo.breadcrumb > li + li:before {
    padding: 0 5px;
    color: #ccc;
    content: "|\00a0";
}
</style>

在 CSS 中，修改了 id="demo" 之 breadcrumb 的背景顏色，間隔符號也由 "/" 改成 "\"。\00a0 是 utf-8 內碼的不斷行空白符號 (no-break space)。

HTML

<body>
    
    

    
</body>
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)