diff options
| -rw-r--r-- | docs/components/breadcrumb.md | 23 | ||||
| -rw-r--r-- | docs/migration.md | 4 | ||||
| -rw-r--r-- | scss/_breadcrumb.scss | 20 | ||||
| -rw-r--r-- | scss/_variables.scss | 5 |
4 files changed, 33 insertions, 19 deletions
diff --git a/docs/components/breadcrumb.md b/docs/components/breadcrumb.md index bfd7ef1b6..204a60c81 100644 --- a/docs/components/breadcrumb.md +++ b/docs/components/breadcrumb.md @@ -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 %} diff --git a/docs/migration.md b/docs/migration.md index b586a41c3..d710d1768 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -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. diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index 30af411ab..5ccca354c 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,23 +1,23 @@ .breadcrumb { - padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; + padding: $breadcrumb-padding-y $breadcrumb-padding-x; margin-bottom: $spacer-y; list-style: none; background-color: $breadcrumb-bg; @include border-radius($border-radius); @include clearfix; +} - > li { - float: left; +.breadcrumb-item { + float: left; - + li::before { - padding-right: .5rem; - padding-left: .5rem; - color: $breadcrumb-divider-color; - content: "#{$breadcrumb-divider}"; - } + + .breadcrumb-item::before { + padding-right: $breadcrumb-item-padding; + padding-left: $breadcrumb-item-padding; + color: $breadcrumb-divider-color; + content: "#{$breadcrumb-divider}"; } - > .active { + &.active { color: $breadcrumb-active-color; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 88afa3ccd..a29d0399d 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -625,8 +625,9 @@ $thumbnail-border-radius: $border-radius !default; // Breadcrumbs -$breadcrumb-padding-vertical: .75rem !default; -$breadcrumb-padding-horizontal: 1rem !default; +$breadcrumb-padding-y: .75rem !default; +$breadcrumb-padding-x: 1rem !default; +$breadcrumb-item-padding: .5rem !default; $breadcrumb-bg: $gray-lighter !default; $breadcrumb-divider-color: $gray-light !default; |