rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #18474 from twbs/breadcrumbs-2.0

Browse Source 
Refactor Breadcrumbs component
This commit is contained in:
Chris Rebert 2015-12-23 22:22:21 -07:00
commit 68061027b6
4 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/components/breadcrumb.md
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). 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 %} {% example html %}
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="active">Home</li> <li class="breadcrumb-item active">Home</li>
</ol> </ol>
<ol class="breadcrumb"> <ol class="breadcrumb">
<li><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="active">Library</li> <li class="breadcrumb-item active">Library</li>
</ol> </ol>
<ol class="breadcrumb" style="margin-bottom: 5px;"> <ol class="breadcrumb">
<li><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Home</a></li>
<li><a href="#">Library</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="active">Data</li> <li class="breadcrumb-item active">Data</li>
</ol> </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 %} {% endexample %}

4
docs/migration.md
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 - 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 ### Badges
- Dropped the badge component. Use the `.label-pill` modifier together with the label component instead. - Dropped the badge component. Use the `.label-pill` modifier together with the label component instead.

14
scss/_breadcrumb.scss
View File

@ -1,23 +1,23 @@
.breadcrumb { .breadcrumb {
padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $spacer-y; margin-bottom: $spacer-y;
list-style: none; list-style: none;
background-color: $breadcrumb-bg; background-color: $breadcrumb-bg;
@include border-radius($border-radius); @include border-radius($border-radius);
@include clearfix; @include clearfix;
}
> li { .breadcrumb-item {
float: left; float: left;
+ li::before { + .breadcrumb-item::before {
padding-right: .5rem; padding-right: $breadcrumb-item-padding;
padding-left: .5rem; padding-left: $breadcrumb-item-padding;
color: $breadcrumb-divider-color; color: $breadcrumb-divider-color;
content: "#{$breadcrumb-divider}"; content: "#{$breadcrumb-divider}";
} }
}
> .active { &.active {
color: $breadcrumb-active-color; color: $breadcrumb-active-color;
} }
} }

5
scss/_variables.scss
View File

@ -625,8 +625,9 @@ $thumbnail-border-radius: $border-radius !default;
// Breadcrumbs // Breadcrumbs
$breadcrumb-padding-vertical: .75rem !default; $breadcrumb-padding-y: .75rem !default;
$breadcrumb-padding-horizontal: 1rem !default; $breadcrumb-padding-x: 1rem !default;
$breadcrumb-item-padding: .5rem !default;
$breadcrumb-bg: $gray-lighter !default; $breadcrumb-bg: $gray-lighter !default;
$breadcrumb-divider-color: $gray-light !default; $breadcrumb-divider-color: $gray-light !default;