BOOTSTRAP 基础教程
BOOTSTRAP 高级教程
BOOTSTRAP 示例

Bootstrap Breadcrumbs

In this tutorial you will learn how to create breadcrumbs with Bootstrap.

Creating Breadcrumbs with Bootstrap

A breadcrumb is a navigation scheme that indicates current page's location to the user within a website or application. Breadcrumb navigation can greatly enhance the accessibility of the websites having a large number of pages.

You can create static breadcrumbs layouts with Bootstrap simply using the class .breadcrumb on the unordered lists, like this:

  • <ul class="breadcrumb">
  •     <li><a href="#">Home</a></li>
  •     <li><a href="#">Products</a></li>
  •     <li class="active">Accessories</li>
  • </ul>

— 上面示例的输出将如下所示:

Tip: Separators inside the breadcrumbs components are added automatically via CSS through ::before pseudo-element and content property.

Advertisements