mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
Revert "use #0 instead of dummy # anchor to avoid jumps"
This reverts commit b80fbb66e6
.
This commit is contained in:
parent
10b39a828d
commit
087985e237
|
@ -3,23 +3,23 @@
|
|||
{% comment %}
|
||||
<nav class="nav navbar-nav pull-xs-right">
|
||||
<div class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle" href="#0" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v{{ site.data.version }}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item" href="#0">v4.0.0-alpha</a>
|
||||
<a class="dropdown-item" href="#0">v3.3.5</a>
|
||||
<a class="dropdown-item" href="#0">v3.3.4</a>
|
||||
<a class="dropdown-item" href="#0">v3.3.2</a>
|
||||
<a class="dropdown-item" href="#0">v3.3.1</a>
|
||||
<a class="dropdown-item" href="#0">v3.3.0</a>
|
||||
<a class="dropdown-item" href="#0">v3.2.0</a>
|
||||
<a class="dropdown-item" href="#0">v3.1.1</a>
|
||||
<a class="dropdown-item" href="#0">v3.1.0</a>
|
||||
<a class="dropdown-item" href="#0">v3.0.3</a>
|
||||
<a class="dropdown-item" href="#0">v3.0.2</a>
|
||||
<a class="dropdown-item" href="#0">v3.0.1</a>
|
||||
<a class="dropdown-item" href="#0">v3.0.0</a>
|
||||
<a class="dropdown-item" href="#">v4.0.0-alpha</a>
|
||||
<a class="dropdown-item" href="#">v3.3.5</a>
|
||||
<a class="dropdown-item" href="#">v3.3.4</a>
|
||||
<a class="dropdown-item" href="#">v3.3.2</a>
|
||||
<a class="dropdown-item" href="#">v3.3.1</a>
|
||||
<a class="dropdown-item" href="#">v3.3.0</a>
|
||||
<a class="dropdown-item" href="#">v3.2.0</a>
|
||||
<a class="dropdown-item" href="#">v3.1.1</a>
|
||||
<a class="dropdown-item" href="#">v3.1.0</a>
|
||||
<a class="dropdown-item" href="#">v3.0.3</a>
|
||||
<a class="dropdown-item" href="#">v3.0.2</a>
|
||||
<a class="dropdown-item" href="#">v3.0.1</a>
|
||||
<a class="dropdown-item" href="#">v3.0.0</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
@ -27,7 +27,7 @@ class Application {
|
|||
$('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
|
||||
|
||||
// Disable empty links in docs examples
|
||||
$('.bd-example [href="#0"]').click((e) => {
|
||||
$('.bd-example [href="#"]').click((e) => {
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
|
|
2
docs/assets/js/vendor/anchor.min.js
vendored
2
docs/assets/js/vendor/anchor.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -51,16 +51,16 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
|
|||
|
||||
{% example html %}
|
||||
<div class="alert alert-success" role="alert">
|
||||
<strong>Well done!</strong> You successfully read <a href="#0" class="alert-link">this important alert message</a>.
|
||||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<strong>Heads up!</strong> This <a href="#0" class="alert-link">alert needs your attention</a>, but it's not super important.
|
||||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>Warning!</strong> Better check yourself, you're <a href="#0" class="alert-link">not looking too good</a>.
|
||||
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<strong>Oh snap!</strong> <a href="#0" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
|
|
@ -23,12 +23,12 @@ Indicate the current page's location within a navigational hierarchy. Separators
|
|||
<li class="breadcrumb-item active">Home</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#0">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active">Library</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#0">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#0">Library</a></li>
|
||||
<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>
|
||||
{% endexample %}
|
||||
|
@ -37,9 +37,9 @@ Similar to our navigation components, breadcrumbs work fine with or without the
|
|||
|
||||
{% example html %}
|
||||
<nav class="breadcrumb">
|
||||
<a class="breadcrumb-item" href="#0">Home</a>
|
||||
<a class="breadcrumb-item" href="#0">Library</a>
|
||||
<a class="breadcrumb-item" href="#0">Data</a>
|
||||
<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>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
|
|
@ -37,61 +37,61 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
|||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
|
@ -103,11 +103,11 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
|||
Action
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
@ -123,11 +123,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
|
@ -136,11 +136,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
|
@ -149,11 +149,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
|
@ -162,11 +162,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
|
@ -175,11 +175,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
|
@ -188,11 +188,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
|
@ -205,11 +205,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
@ -225,11 +225,11 @@ Button dropdowns work with buttons of all sizes.
|
|||
Large button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
|
@ -239,11 +239,11 @@ Button dropdowns work with buttons of all sizes.
|
|||
Small button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
|
@ -283,11 +283,11 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
|
@ -296,11 +296,11 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
|
|
|
@ -102,8 +102,8 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
|
|||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<a class="dropdown-item" href="#0">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#0">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -122,8 +122,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
|||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||
<a class="dropdown-item" href="#0">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#0">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
|
@ -133,8 +133,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
|||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
|
||||
<a class="dropdown-item" href="#0">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#0">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
|
@ -142,8 +142,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
|||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||
<a class="dropdown-item" href="#0">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#0">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
|
@ -151,8 +151,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
|||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||
<a class="dropdown-item" href="#0">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#0">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -61,7 +61,7 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
|
|||
When using button classes on `<a>` elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a `role="button"` to appropriately convey their purpose to assistive technologies such as screen readers.
|
||||
|
||||
{% example html %}
|
||||
<a class="btn btn-primary" href="#0" role="button">Link</a>
|
||||
<a class="btn btn-primary" href="#" role="button">Link</a>
|
||||
<button class="btn btn-primary" type="submit">Button</button>
|
||||
<input class="btn btn-primary" type="button" value="Input">
|
||||
<input class="btn btn-primary" type="submit" value="Submit">
|
||||
|
@ -108,8 +108,8 @@ Create block level buttons—those that span the full width of a parent—by add
|
|||
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
|
||||
|
||||
{% example html %}
|
||||
<a href="#0" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
|
||||
<a href="#0" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
|
||||
{% endexample %}
|
||||
|
||||
## Disabled state
|
||||
|
@ -132,8 +132,8 @@ Disabled buttons using the `<a>` element behave a bit different:
|
|||
- Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
|
||||
|
||||
{% example html %}
|
||||
<a href="#0" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
|
||||
<a href="#0" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
|
||||
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
|
||||
{% endexample %}
|
||||
|
||||
{% callout warning %}
|
||||
|
|
|
@ -35,7 +35,7 @@ Cards require a small amount of markup and classes to provide you with as much c
|
|||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -57,8 +57,8 @@ Cards support a wide variety of content, including images, text, list groups, li
|
|||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
<div class="card-block">
|
||||
<a href="#0" class="card-link">Card link</a>
|
||||
<a href="#0" class="card-link">Another link</a>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -92,8 +92,8 @@ Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, l
|
|||
<div class="card card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#0" class="card-link">Card link</a>
|
||||
<a href="#0" class="card-link">Another link</a>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -110,8 +110,8 @@ The multiple content types can be easily combined to create the card you need. S
|
|||
<img data-src="holder.js/100px180/?text=Image" alt="Card image">
|
||||
<div class="card-block">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#0" class="card-link">Card link</a>
|
||||
<a href="#0" class="card-link">Another link</a>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -128,14 +128,14 @@ Using the grid:
|
|||
<div class="card card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="card card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -147,7 +147,7 @@ Using custom widths:
|
|||
<div class="card card-block" style="width: 18rem;">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -159,19 +159,19 @@ You can quickly change the text alignment of any card—in its entirety or speci
|
|||
<div class="card card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
||||
<div class="card card-block text-xs-center">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
||||
<div class="card card-block text-xs-right">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -187,7 +187,7 @@ Add an optional header and/or footer within a card.
|
|||
<div class="card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -200,7 +200,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
|
|||
<div class="card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -227,7 +227,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
|
|||
<div class="card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
<div class="card-footer text-muted">
|
||||
2 days ago
|
||||
|
@ -244,20 +244,20 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
|
|||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs pull-xs-left">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -267,20 +267,20 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
|
|||
<div class="card-header">
|
||||
<ul class="nav nav-pills card-header-pills pull-xs-left">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -334,7 +334,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
|
|||
<div class="card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#0" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
|
@ -37,9 +37,9 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
|
|||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -53,9 +53,9 @@ And with `<a>` elements:
|
|||
</a>
|
||||
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -66,61 +66,61 @@ The best part is you can do this with any button variant, too:
|
|||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
|
@ -132,11 +132,11 @@ The best part is you can do this with any button variant, too:
|
|||
Action
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
@ -154,11 +154,11 @@ We use this extra class to reduce the horizontal `padding` on either side of the
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
|
@ -167,11 +167,11 @@ We use this extra class to reduce the horizontal `padding` on either side of the
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
|
@ -180,11 +180,11 @@ We use this extra class to reduce the horizontal `padding` on either side of the
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
|
@ -193,11 +193,11 @@ We use this extra class to reduce the horizontal `padding` on either side of the
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
|
@ -206,11 +206,11 @@ We use this extra class to reduce the horizontal `padding` on either side of the
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
|
@ -219,11 +219,11 @@ We use this extra class to reduce the horizontal `padding` on either side of the
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
|
@ -236,11 +236,11 @@ We use this extra class to reduce the horizontal `padding` on either side of the
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
@ -256,11 +256,11 @@ Button dropdowns work with buttons of all sizes, including default and split dro
|
|||
Large button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
|
@ -269,11 +269,11 @@ Button dropdowns work with buttons of all sizes, including default and split dro
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
|
@ -283,11 +283,11 @@ Button dropdowns work with buttons of all sizes, including default and split dro
|
|||
Small button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
|
@ -296,11 +296,11 @@ Button dropdowns work with buttons of all sizes, including default and split dro
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
|
@ -361,11 +361,11 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
|
|||
Dropup
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -377,11 +377,11 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -458,8 +458,8 @@ Add a header to label sections of actions in any dropdown menu.
|
|||
{% example html %}
|
||||
<div class="dropdown-menu">
|
||||
<h6 class="dropdown-header">Dropdown header</h6>
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -469,11 +469,11 @@ Separate groups of related menu items with a divider.
|
|||
|
||||
{% example html %}
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -483,9 +483,9 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
|
|||
|
||||
{% example html %}
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Regular link</a>
|
||||
<a class="dropdown-item disabled" href="#0">Disabled link</a>
|
||||
<a class="dropdown-item" href="#0">Another link</a>
|
||||
<a class="dropdown-item" href="#">Regular link</a>
|
||||
<a class="dropdown-item disabled" href="#">Disabled link</a>
|
||||
<a class="dropdown-item" href="#">Another link</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -512,7 +512,7 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
|
|||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
To keep URLs intact with link buttons, use the `data-target` attribute instead of `href="#0"`.
|
||||
To keep URLs intact with link buttons, use the `data-target` attribute instead of `href="#"`.
|
||||
|
||||
{% highlight html %}
|
||||
<div class="dropdown">
|
||||
|
|
|
@ -174,11 +174,11 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
|||
Action
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
|
@ -192,11 +192,11 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
|||
Action
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -216,11 +216,11 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
|
||||
|
@ -235,11 +235,11 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
|||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -27,7 +27,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
|
|||
<hr class="m-y-2">
|
||||
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
||||
<p class="lead">
|
||||
<a class="btn btn-primary btn-lg" href="#0" role="button">Learn more</a>
|
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
|
@ -63,13 +63,13 @@ Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
|
|||
|
||||
{% example html %}
|
||||
<div class="list-group">
|
||||
<a href="#0" class="list-group-item disabled">
|
||||
<a href="#" class="list-group-item disabled">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#0" class="list-group-item">Dapibus ac facilisis in</a>
|
||||
<a href="#0" class="list-group-item">Morbi leo risus</a>
|
||||
<a href="#0" class="list-group-item">Porta ac consectetur ac</a>
|
||||
<a href="#0" class="list-group-item">Vestibulum at eros</a>
|
||||
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -81,13 +81,13 @@ Be sure to **not use the standard `.btn` classes here**.
|
|||
|
||||
{% example html %}
|
||||
<div class="list-group">
|
||||
<a href="#0" class="list-group-item active">
|
||||
<a href="#" class="list-group-item active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#0" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="#0" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="#0" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="#0" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -109,10 +109,10 @@ Use contextual classes to style list items, default or linked. Also includes `.a
|
|||
|
||||
{% example html %}
|
||||
<div class="list-group">
|
||||
<a href="#0" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
|
||||
<a href="#0" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a>
|
||||
<a href="#0" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a>
|
||||
<a href="#0" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -125,15 +125,15 @@ Add nearly any HTML within, even for linked list groups like the one below.
|
|||
|
||||
{% example html %}
|
||||
<div class="list-group">
|
||||
<a href="#0" class="list-group-item list-group-item-action active">
|
||||
<a href="#" class="list-group-item list-group-item-action active">
|
||||
<h5 class="list-group-item-heading">List group item heading</h5>
|
||||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
<a href="#0" class="list-group-item list-group-item-action">
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<h5 class="list-group-item-heading">List group item heading</h5>
|
||||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
<a href="#0" class="list-group-item list-group-item-action">
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<h5 class="list-group-item-heading">List group item heading</h5>
|
||||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
|
|
|
@ -116,10 +116,10 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
|
|||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
|
||||
<h4>Popover in a modal</h4>
|
||||
<p>This <a href="#0" role="button" class="btn btn-secondary popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
|
||||
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
|
||||
|
||||
<h4>Tooltips in a modal</h4>
|
||||
<p><a href="#0" class="tooltip-test" title="Tooltip">This link</a> and <a href="#0" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
|
||||
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
|
|
|
@ -44,19 +44,19 @@ Here's an example of all the sub-components included in a default, light navbar:
|
|||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<a class="navbar-brand" href="#0">Navbar</a>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#0">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Features</a>
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Pricing</a>
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">About</a>
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
|
@ -72,7 +72,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
|
|||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<a class="navbar-brand" href="#0">Navbar</a>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
|
@ -89,16 +89,16 @@ Navbar navigation is similar to our regular nav options—use the `.nav` base cl
|
|||
<nav class="navbar navbar-light bg-faded">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#0">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Features</a>
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Pricing</a>
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">About</a>
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
@ -109,10 +109,10 @@ And because we use classes for our navs, you can avoid the list-based approach e
|
|||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<div class="nav navbar-nav">
|
||||
<a class="nav-item nav-link active" href="#0">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-item nav-link" href="#0">Features</a>
|
||||
<a class="nav-item nav-link" href="#0">Pricing</a>
|
||||
<a class="nav-item nav-link" href="#0">About</a>
|
||||
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-item nav-link" href="#">Features</a>
|
||||
<a class="nav-item nav-link" href="#">Pricing</a>
|
||||
<a class="nav-item nav-link" href="#">About</a>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
@ -126,19 +126,19 @@ Here are some examples to show what we mean.
|
|||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-dark bg-inverse">
|
||||
<a class="navbar-brand" href="#0">Navbar</a>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#0">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Features</a>
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Pricing</a>
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">About</a>
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
|
@ -147,19 +147,19 @@ Here are some examples to show what we mean.
|
|||
</form>
|
||||
</nav>
|
||||
<nav class="navbar navbar-dark bg-primary">
|
||||
<a class="navbar-brand" href="#0">Navbar</a>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#0">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Features</a>
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Pricing</a>
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">About</a>
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
|
@ -168,19 +168,19 @@ Here are some examples to show what we mean.
|
|||
</form>
|
||||
</nav>
|
||||
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
|
||||
<a class="navbar-brand" href="#0">Navbar</a>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#0">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Features</a>
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Pricing</a>
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">About</a>
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
|
@ -211,7 +211,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
|
|||
{% example html %}
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<a class="navbar-brand" href="#0">Navbar</a>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</nav>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -219,7 +219,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
|
|||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#0">Navbar</a>
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
@ -230,19 +230,19 @@ Navbars can be statically placed (their default behavior), static without rounde
|
|||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-full navbar-light bg-faded">
|
||||
<a class="navbar-brand" href="#0">Full width</a>
|
||||
<a class="navbar-brand" href="#">Full width</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
|
||||
<a class="navbar-brand" href="#0">Fixed top</a>
|
||||
<a class="navbar-brand" href="#">Fixed top</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">
|
||||
<a class="navbar-brand" href="#0">Fixed bottom</a>
|
||||
<a class="navbar-brand" href="#">Fixed bottom</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -273,19 +273,19 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
|
|||
☰
|
||||
</button>
|
||||
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
|
||||
<a class="navbar-brand" href="#0">Responsive navbar</a>
|
||||
<a class="navbar-brand" href="#">Responsive navbar</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#0">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Features</a>
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Pricing</a>
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">About</a>
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -34,16 +34,16 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
|
|||
{% example html %}
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
@ -52,10 +52,10 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
|
|||
|
||||
{% example html %}
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -65,10 +65,10 @@ Space out nav links in a horizontal band with `.nav-inline`. Longer series of li
|
|||
|
||||
{% example html %}
|
||||
<nav class="nav nav-inline">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -77,16 +77,16 @@ The same works for a navigation built with lists.
|
|||
{% example html %}
|
||||
<ul class="nav nav-inline">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
@ -98,16 +98,16 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
|
|||
{% example html %}
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
@ -119,16 +119,16 @@ Take that same HTML, but use `.nav-pills` instead:
|
|||
{% example html %}
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
@ -140,16 +140,16 @@ Add `.nav-stacked` to the `.nav.nav-pills` to stack them vertically. Each `.nav-
|
|||
{% example html %}
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
@ -158,10 +158,10 @@ As always, stacked pills are possible without `<ul>`s.
|
|||
|
||||
{% example html %}
|
||||
<nav class="nav nav-pills nav-stacked">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -174,23 +174,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
|||
{% example html %}
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#0" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
@ -200,23 +200,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
|||
{% example html %}
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#0" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
@ -234,7 +234,7 @@ Use the tab JavaScript plugin—include it individually or through the compiled
|
|||
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#0" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
|
|
|
@ -31,18 +31,18 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
|
|||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#0" aria-label="Previous">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#0">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#0">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#0">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#0">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#0">5</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#0" aria-label="Next">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
|
@ -71,20 +71,20 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
|
|||
<nav aria-label="...">
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#0" tabindex="-1" aria-label="Previous">
|
||||
<a class="page-link" href="#" tabindex="-1" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#0">1 <span class="sr-only">(current)</span></a>
|
||||
<a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#0">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#0">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#0">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#0">5</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#0" aria-label="Next">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
|
@ -118,16 +118,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
|||
<nav aria-label="...">
|
||||
<ul class="pagination pagination-lg">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#0" aria-label="Previous">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#0">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#0">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#0">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#0" aria-label="Next">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
|
@ -140,16 +140,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
|||
<nav aria-label="...">
|
||||
<ul class="pagination pagination-sm">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#0" aria-label="Previous">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#0">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#0">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#0">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#0" aria-label="Next">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
|
|
|
@ -32,7 +32,7 @@ The ScrollSpy plugin is for automatically updating nav targets based on scroll p
|
|||
<li class="nav-item"><a class="nav-link" href="#fat">@fat</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#0" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#one">one</a>
|
||||
<a class="dropdown-item" href="#two">two</a>
|
||||
|
|
|
@ -52,7 +52,7 @@ $(function () {
|
|||
Hover over the links below to see tooltips:
|
||||
|
||||
<div class="bd-example tooltip-demo">
|
||||
<p class="muted">Tight pants next level keffiyeh <a href="#0" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#0" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#0" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#0" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
<p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
@ -137,7 +137,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
|
|||
|
||||
{% highlight html %}
|
||||
<!-- HTML to write -->
|
||||
<a href="#0" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
|
||||
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
|
||||
|
||||
<!-- Generated markup by the plugin -->
|
||||
<div class="tooltip tooltip-top" role="tooltip">
|
||||
|
|
|
@ -149,12 +149,12 @@ Convey meaning through color with a handful of emphasis utility classes. These m
|
|||
Contextual text classes also work well on anchors with the provided hover and focus states.
|
||||
|
||||
{% example html %}
|
||||
<a href="#0" class="text-muted">Muted link</a>
|
||||
<a href="#0" class="text-primary">Primary link</a>
|
||||
<a href="#0" class="text-success">Success link</a>
|
||||
<a href="#0" class="text-info">Info link</a>
|
||||
<a href="#0" class="text-warning">Warning link</a>
|
||||
<a href="#0" class="text-danger">Danger link</a>
|
||||
<a href="#" class="text-muted">Muted link</a>
|
||||
<a href="#" class="text-primary">Primary link</a>
|
||||
<a href="#" class="text-success">Success link</a>
|
||||
<a href="#" class="text-info">Info link</a>
|
||||
<a href="#" class="text-warning">Warning link</a>
|
||||
<a href="#" class="text-danger">Danger link</a>
|
||||
{% endexample %}
|
||||
|
||||
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
|
||||
|
|
|
@ -195,7 +195,7 @@ js: example.js
|
|||
<p class="card-text">Non dolore elit adipisicing ea reprehenderit consectetur culpa.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#0" class="btn">Read More</a>
|
||||
<a href="#" class="btn">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -229,7 +229,7 @@ js: example.js
|
|||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#0" class="btn">Change location</a>
|
||||
<a href="#" class="btn">Change location</a>
|
||||
<i class="material-icons">location_on</i>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -20,10 +20,10 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Text only</li>
|
||||
<a href="#0" class="list-group-item">Link item</a>
|
||||
<a href="#" class="list-group-item">Link item</a>
|
||||
<button type="button" class="list-group-item">Button item</button>
|
||||
<a href="#0" class="list-group-item active">Active link item</a>
|
||||
<a href="#0" class="list-group-item disabled">Disabled item</a>
|
||||
<a href="#" class="list-group-item active">Active link item</a>
|
||||
<a href="#" class="list-group-item disabled">Disabled item</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
|
@ -32,10 +32,10 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
|
|||
{% example html %}
|
||||
<ul class="list-group bmd-list-group-sm">
|
||||
<li class="list-group-item">Text</li>
|
||||
<a href="#0" class="list-group-item">Link item</a>
|
||||
<a href="#" class="list-group-item">Link item</a>
|
||||
<button type="button" class="list-group-item">Button item</button>
|
||||
<a href="#0" class="list-group-item active">Active link item</a>
|
||||
<a href="#0" class="list-group-item disabled">Disabled item</a>
|
||||
<a href="#" class="list-group-item active">Active link item</a>
|
||||
<a href="#" class="list-group-item disabled">Disabled item</a>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
|
|
|
@ -34,9 +34,9 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
|
|||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="ex2">
|
||||
<a class="dropdown-item" href="#0">Regular link</a>
|
||||
<a class="dropdown-item disabled" href="#0">Disabled link</a>
|
||||
<a class="dropdown-item" href="#0">Another link</a>
|
||||
<a class="dropdown-item" href="#">Regular link</a>
|
||||
<a class="dropdown-item disabled" href="#">Disabled link</a>
|
||||
<a class="dropdown-item" href="#">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -75,9 +75,9 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
|
|||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="buttonMenu1">
|
||||
<a class="dropdown-item" href="#0">Action</a>
|
||||
<a class="dropdown-item" href="#0">Another action</a>
|
||||
<a class="dropdown-item" href="#0">Something else here</a>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -96,7 +96,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
|
|||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item disabled" type="button">Disabled action</button>
|
||||
<div class="dropdown-divider"> </div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -114,7 +114,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
|
|||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item disabled" type="button">Disabled action</button>
|
||||
<div class="dropdown-divider"> </div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
@ -131,7 +131,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
|
|||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item disabled" type="button">Disabled action</button>
|
||||
<div class="dropdown-divider"> </div>
|
||||
<a class="dropdown-item" href="#0">Separated link</a>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
|
@ -17,48 +17,48 @@ Navigation available in Bootstrap share general markup and styles, from the base
|
|||
{% example html %}
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Another link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- inverse -->
|
||||
<ul class="nav nav-tabs bg-inverse">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Another link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- primary -->
|
||||
<ul class="nav nav-tabs bg-primary">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#0">Active</a>
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#0">Another link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#0">Disabled</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
|
Loading…
Reference in New Issue
Block a user