0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00

clear up and split out breadcrumb examples

This commit is contained in:
Mark Otto 2016-01-06 23:58:07 -08:00
parent 88c629fc59
commit b09f70e101

View File

@ -4,11 +4,7 @@ title: Breadcrumb
group: components
---
Indicate the current page's location within a navigational hierarchy.
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
Works fine with or without the usage of list markup.
Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
{% example html %}
<ol class="breadcrumb">
@ -23,11 +19,15 @@ Works fine with or without the usage of list markup.
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
<!-- Or use a div instead of a list -->
<div class="breadcrumb">
{% endexample %}
Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup.
{% example html %}
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span>
</div>
</nav>
{% endexample %}