2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-18 12:39:41 +03:00

Refactor Breadcrumbs component

Use new `.breadcrumb-item` class instead of child selectors and `li` tag selectors,
so as to no longer require the usage of `<ol>`-based markup.

Rename variables to follow naming conventions:
* $breadcrumb-padding-vertical => $breadcrumb-padding-y
* $breadcrumb-padding-horizontal => $breadcrumb-padding-x

Introduce new variable: $breadcrumb-item-padding

[skip sauce]
This commit is contained in:
Chris Rebert
2015-12-08 02:20:25 -08:00
parent 5173cb1def
commit 76a4c303ee
4 changed files with 33 additions and 19 deletions
+16 -7
View File
@@ -8,17 +8,26 @@ 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.
{% example html %}
<ol class="breadcrumb">
<li class="active">Home</li>
<li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li class="active">Library</li>
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb" style="margin-bottom: 5px;">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<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">
<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>
{% endexample %}
+4
View File
@@ -114,6 +114,10 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
- Explicit classes (`.page-item`, `.page-link`) are now required on the descendants of `.pagination`s
### Breadcrumbs
- An explicit class, `.breadcrumb-item`, is now required on the descendants of `.breadcrumb`s
### Badges
- Dropped the badge component. Use the `.label-pill` modifier together with the label component instead.