diff options
| author | Chris Rebert <[email protected]> | 2015-12-08 02:20:25 -0800 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2015-12-23 22:16:35 -0700 |
| commit | 76a4c303eed00a1f30b7a6d2d1d04fdf2f935e62 (patch) | |
| tree | 9b812446dac19c61787c8941c886f78d85dfa48b /docs | |
| parent | 5173cb1defa360b5ebd15f4f5455e4cbdc40ad66 (diff) | |
| download | bootstrap-76a4c303eed00a1f30b7a6d2d1d04fdf2f935e62.tar.xz bootstrap-76a4c303eed00a1f30b7a6d2d1d04fdf2f935e62.zip | |
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]
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/breadcrumb.md | 23 | ||||
| -rw-r--r-- | docs/migration.md | 4 |
2 files changed, 20 insertions, 7 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. |