mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-13 05:07:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Revert "use #0 instead of dummy # anchor to avoid jumps"

Browse Source 
This reverts commit b80fbb66e6.
This commit is contained in:
FezVrasta 2016-08-02 19:44:50 +02:00
parent 10b39a828d
commit 087985e237
24 changed files with 420 additions and 420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/_includes/nav-home.html
View File

@ -3,23 +3,23 @@
{% comment %} {% comment %}
<nav class="nav navbar-nav pull-xs-right"> <nav class="nav navbar-nav pull-xs-right">
<div class="nav-item dropdown"> <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 }} v{{ site.data.version }}
</a> </a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> <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="#">v4.0.0-alpha</a>
<a class="dropdown-item" href="#0">v3.3.5</a> <a class="dropdown-item" href="#">v3.3.5</a>
<a class="dropdown-item" href="#0">v3.3.4</a> <a class="dropdown-item" href="#">v3.3.4</a>
<a class="dropdown-item" href="#0">v3.3.2</a> <a class="dropdown-item" href="#">v3.3.2</a>
<a class="dropdown-item" href="#0">v3.3.1</a> <a class="dropdown-item" href="#">v3.3.1</a>
<a class="dropdown-item" href="#0">v3.3.0</a> <a class="dropdown-item" href="#">v3.3.0</a>
<a class="dropdown-item" href="#0">v3.2.0</a> <a class="dropdown-item" href="#">v3.2.0</a>
<a class="dropdown-item" href="#0">v3.1.1</a> <a class="dropdown-item" href="#">v3.1.1</a>
<a class="dropdown-item" href="#0">v3.1.0</a> <a class="dropdown-item" href="#">v3.1.0</a>
<a class="dropdown-item" href="#0">v3.0.3</a> <a class="dropdown-item" href="#">v3.0.3</a>
<a class="dropdown-item" href="#0">v3.0.2</a> <a class="dropdown-item" href="#">v3.0.2</a>
<a class="dropdown-item" href="#0">v3.0.1</a> <a class="dropdown-item" href="#">v3.0.1</a>
<a class="dropdown-item" href="#0">v3.0.0</a> <a class="dropdown-item" href="#">v3.0.0</a>
</div> </div>
</div> </div>
</nav> </nav>

2
docs/assets/js/src/index.js
View File

@ -27,7 +27,7 @@ class Application {
$('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true) $('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
// Disable empty links in docs examples // Disable empty links in docs examples
$('.bd-example [href="#0"]').click((e) => { $('.bd-example [href="#"]').click((e) => {
e.preventDefault() e.preventDefault()
}) })

2
docs/assets/js/vendor/anchor.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
docs/components/alerts.md
View File

@ -51,16 +51,16 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
{% example html %} {% example html %}
<div class="alert alert-success" role="alert"> <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>
<div class="alert alert-info" role="alert"> <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>
<div class="alert alert-warning" role="alert"> <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>
<div class="alert alert-danger" role="alert"> <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> </div>
{% endexample %} {% endexample %}

12
docs/components/breadcrumb.md
View File

@ -23,12 +23,12 @@ Indicate the current page's location within a navigational hierarchy. Separators
<li class="breadcrumb-item active">Home</li> <li class="breadcrumb-item active">Home</li>
</ol> </ol>
<ol class="breadcrumb"> <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> <li class="breadcrumb-item active">Library</li>
</ol> </ol>
<ol class="breadcrumb"> <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"><a href="#0">Library</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li> <li class="breadcrumb-item active">Data</li>
</ol> </ol>
{% endexample %} {% endexample %}
@ -37,9 +37,9 @@ Similar to our navigation components, breadcrumbs work fine with or without the
{% example html %} {% example html %}
<nav class="breadcrumb"> <nav class="breadcrumb">
<a class="breadcrumb-item" href="#0">Home</a> <a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#0">Library</a> <a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#0">Data</a> <a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span> <span class="breadcrumb-item active">Bootstrap</span>
</nav> </nav>
{% endexample %} {% endexample %}

144
docs/components/button-dropdown.md
View File

@ -37,61 +37,61 @@ Turn a button into a dropdown toggle with some basic markup changes.
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
@ -103,11 +103,11 @@ Turn a button into a dropdown toggle with some basic markup changes.
Action Action
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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> </div>
{% endhighlight %} {% endhighlight %}
@ -123,11 +123,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
@ -205,11 +205,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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> </div>
{% endhighlight %} {% endhighlight %}
@ -225,11 +225,11 @@ Button dropdowns work with buttons of all sizes.
Large button Large button
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
@ -239,11 +239,11 @@ Button dropdowns work with buttons of all sizes.
Small button Small button
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group dropup"> <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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>

20
docs/components/button-group.md
View File

@ -102,8 +102,8 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
Dropdown Dropdown
</button> </button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#0">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#0">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
</div> </div>
</div> </div>
</div> </div>
@ -122,8 +122,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
Dropdown Dropdown
</button> </button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1"> <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<a class="dropdown-item" href="#0">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#0">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
</div> </div>
</div> </div>
<button type="button" class="btn btn-secondary">Button</button> <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 Dropdown
</button> </button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"> <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
<a class="dropdown-item" href="#0">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#0">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
</div> </div>
</div> </div>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
@ -142,8 +142,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
Dropdown Dropdown
</button> </button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3"> <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
<a class="dropdown-item" href="#0">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#0">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
</div> </div>
</div> </div>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
@ -151,8 +151,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
Dropdown Dropdown
</button> </button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4"> <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
<a class="dropdown-item" href="#0">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#0">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
</div> </div>
</div> </div>
</div> </div>

10
docs/components/buttons.md
View File

@ -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. 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 %} {% 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> <button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input"> <input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit"> <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. 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 %} {% example html %}
<a href="#0" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a> <a href="#" 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-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
{% endexample %} {% endexample %}
## Disabled state ## 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. - Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
{% example html %} {% example html %}
<a href="#0" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a> <a href="#" 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-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
{% endexample %} {% endexample %}
{% callout warning %} {% callout warning %}

50
docs/components/card.md
View File

@ -35,7 +35,7 @@ Cards require a small amount of markup and classes to provide you with as much c
<div class="card-block"> <div class="card-block">
<h4 class="card-title">Card title</h4> <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> <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>
</div> </div>
{% endexample %} {% 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> <li class="list-group-item">Vestibulum at eros</li>
</ul> </ul>
<div class="card-block"> <div class="card-block">
<a href="#0" class="card-link">Card link</a> <a href="#" class="card-link">Card link</a>
<a href="#0" class="card-link">Another link</a> <a href="#" class="card-link">Another link</a>
</div> </div>
</div> </div>
{% endexample %} {% 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"> <div class="card card-block">
<h4 class="card-title">Card title</h4> <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> <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="#" class="card-link">Card link</a>
<a href="#0" class="card-link">Another link</a> <a href="#" class="card-link">Another link</a>
</div> </div>
{% endexample %} {% 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"> <img data-src="holder.js/100px180/?text=Image" alt="Card image">
<div class="card-block"> <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> <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="#" class="card-link">Card link</a>
<a href="#0" class="card-link">Another link</a> <a href="#" class="card-link">Another link</a>
</div> </div>
</div> </div>
{% endexample %} {% endexample %}
@ -128,14 +128,14 @@ Using the grid:
<div class="card card-block"> <div class="card card-block">
<h3 class="card-title">Special title treatment</h3> <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> <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> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<div class="card card-block"> <div class="card card-block">
<h3 class="card-title">Special title treatment</h3> <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> <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> </div>
</div> </div>
@ -147,7 +147,7 @@ Using custom widths:
<div class="card card-block" style="width: 18rem;"> <div class="card card-block" style="width: 18rem;">
<h3 class="card-title">Special title treatment</h3> <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> <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 %} {% 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"> <div class="card card-block">
<h4 class="card-title">Special title treatment</h4> <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> <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="card card-block text-xs-center"> <div class="card card-block text-xs-center">
<h4 class="card-title">Special title treatment</h4> <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> <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="card card-block text-xs-right"> <div class="card card-block text-xs-right">
<h4 class="card-title">Special title treatment</h4> <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> <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 %} {% endexample %}
@ -187,7 +187,7 @@ Add an optional header and/or footer within a card.
<div class="card-block"> <div class="card-block">
<h4 class="card-title">Special title treatment</h4> <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> <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> </div>
{% endexample %} {% endexample %}
@ -200,7 +200,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
<div class="card-block"> <div class="card-block">
<h4 class="card-title">Special title treatment</h4> <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> <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> </div>
{% endexample %} {% endexample %}
@ -227,7 +227,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
<div class="card-block"> <div class="card-block">
<h4 class="card-title">Special title treatment</h4> <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> <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="card-footer text-muted"> <div class="card-footer text-muted">
2 days ago 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"> <div class="card-header">
<ul class="nav nav-tabs card-header-tabs pull-xs-left"> <ul class="nav nav-tabs card-header-tabs pull-xs-left">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="card-block"> <div class="card-block">
<h4 class="card-title">Special title treatment</h4> <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> <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> </div>
{% endexample %} {% 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"> <div class="card-header">
<ul class="nav nav-pills card-header-pills pull-xs-left"> <ul class="nav nav-pills card-header-pills pull-xs-left">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="card-block"> <div class="card-block">
<h4 class="card-title">Special title treatment</h4> <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> <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> </div>
{% endexample %} {% endexample %}
@ -334,7 +334,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
<div class="card-block"> <div class="card-block">
<h3 class="card-title">Special title treatment</h3> <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> <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> </div>
{% endexample %} {% endexample %}

192
docs/components/dropdowns.md
View File

@ -37,9 +37,9 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
Dropdown button Dropdown button
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
</div> </div>
</div> </div>
{% endexample %} {% endexample %}
@ -53,9 +53,9 @@ And with `<a>` elements:
</a> </a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
</div> </div>
</div> </div>
{% endexample %} {% endexample %}
@ -66,61 +66,61 @@ The best part is you can do this with any button variant, too:
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
@ -132,11 +132,11 @@ The best part is you can do this with any button variant, too:
Action Action
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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> </div>
{% endhighlight %} {% 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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
</div> </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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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> </div>
{% endhighlight %} {% endhighlight %}
@ -256,11 +256,11 @@ Button dropdowns work with buttons of all sizes, including default and split dro
Large button Large button
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
@ -283,11 +283,11 @@ Button dropdowns work with buttons of all sizes, including default and split dro
Small button Small button
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
<div class="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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
@ -361,11 +361,11 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
Dropup Dropup
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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> </div>
@ -377,11 +377,11 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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> </div>
</div> </div>
@ -458,8 +458,8 @@ Add a header to label sections of actions in any dropdown menu.
{% example html %} {% example html %}
<div class="dropdown-menu"> <div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6> <h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
</div> </div>
{% endexample %} {% endexample %}
@ -469,11 +469,11 @@ Separate groups of related menu items with a divider.
{% example html %} {% example html %}
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <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 %} {% endexample %}
@ -483,9 +483,9 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
{% example html %} {% example html %}
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Regular link</a> <a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#0">Disabled link</a> <a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#0">Another link</a> <a class="dropdown-item" href="#">Another link</a>
</div> </div>
{% endexample %} {% endexample %}
@ -512,7 +512,7 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
</div> </div>
{% endhighlight %} {% 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 %} {% highlight html %}
<div class="dropdown"> <div class="dropdown">

32
docs/components/input-group.md
View File

@ -174,11 +174,11 @@ Buttons in input groups are a bit different and require one extra level of nesti
Action Action
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div> <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> </div>
<input type="text" class="form-control" aria-label="Text input with dropdown button"> <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 Action
</button> </button>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div> <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> </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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div> <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> </div>
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown"> <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> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div> <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> </div>
</div> </div>

2
docs/components/jumbotron.md
View File

@ -27,7 +27,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
<hr class="m-y-2"> <hr class="m-y-2">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead"> <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> </p>
</div> </div>
{% endexample %} {% endexample %}

34
docs/components/list-group.md
View File

@ -63,13 +63,13 @@ Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
{% example html %} {% example html %}
<div class="list-group"> <div class="list-group">
<a href="#0" class="list-group-item disabled"> <a href="#" class="list-group-item disabled">
Cras justo odio Cras justo odio
</a> </a>
<a href="#0" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#0" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#0" class="list-group-item">Porta ac consectetur ac</a> <a href="#" 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">Vestibulum at eros</a>
</div> </div>
{% endexample %} {% endexample %}
@ -81,13 +81,13 @@ Be sure to **not use the standard `.btn` classes here**.
{% example html %} {% example html %}
<div class="list-group"> <div class="list-group">
<a href="#0" class="list-group-item active"> <a href="#" class="list-group-item active">
Cras justo odio Cras justo odio
</a> </a>
<a href="#0" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" 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="#" 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="#" 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 disabled">Vestibulum at eros</a>
</div> </div>
{% endexample %} {% endexample %}
@ -109,10 +109,10 @@ Use contextual classes to style list items, default or linked. Also includes `.a
{% example html %} {% example html %}
<div class="list-group"> <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="#" 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="#" 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="#" 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-danger">Vestibulum at eros</a>
</div> </div>
{% endexample %} {% endexample %}
@ -125,15 +125,15 @@ Add nearly any HTML within, even for linked list groups like the one below.
{% example html %} {% example html %}
<div class="list-group"> <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> <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> <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>
<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> <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> <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>
<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> <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> <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>

4
docs/components/modal.md
View File

@ -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> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4> <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> <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> <hr>

78
docs/components/navbar.md
View File

@ -44,19 +44,19 @@ Here's an example of all the sub-components included in a default, light navbar:
{% example html %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <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"> <ul class="nav navbar-nav">
<li class="nav-item active"> <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>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Features</a> <a class="nav-link" href="#">Features</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Pricing</a> <a class="nav-link" href="#">Pricing</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="form-inline pull-xs-right"> <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 %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#0">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
</nav> </nav>
<nav class="navbar navbar-light bg-faded"> <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"> <nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="nav-item active"> <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>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Features</a> <a class="nav-link" href="#">Features</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Pricing</a> <a class="nav-link" href="#">Pricing</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -109,10 +109,10 @@ And because we use classes for our navs, you can avoid the list-based approach e
{% example html %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-faded">
<div class="nav navbar-nav"> <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 active" href="#">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="#">Features</a>
<a class="nav-item nav-link" href="#0">Pricing</a> <a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link" href="#0">About</a> <a class="nav-item nav-link" href="#">About</a>
</div> </div>
</nav> </nav>
{% endexample %} {% endexample %}
@ -126,19 +126,19 @@ Here are some examples to show what we mean.
<div class="bd-example"> <div class="bd-example">
<nav class="navbar navbar-dark bg-inverse"> <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"> <ul class="nav navbar-nav">
<li class="nav-item active"> <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>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Features</a> <a class="nav-link" href="#">Features</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Pricing</a> <a class="nav-link" href="#">Pricing</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="form-inline pull-xs-right"> <form class="form-inline pull-xs-right">
@ -147,19 +147,19 @@ Here are some examples to show what we mean.
</form> </form>
</nav> </nav>
<nav class="navbar navbar-dark bg-primary"> <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"> <ul class="nav navbar-nav">
<li class="nav-item active"> <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>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Features</a> <a class="nav-link" href="#">Features</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Pricing</a> <a class="nav-link" href="#">Pricing</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="form-inline pull-xs-right"> <form class="form-inline pull-xs-right">
@ -168,19 +168,19 @@ Here are some examples to show what we mean.
</form> </form>
</nav> </nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;"> <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"> <ul class="nav navbar-nav">
<li class="nav-item active"> <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>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Features</a> <a class="nav-link" href="#">Features</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Pricing</a> <a class="nav-link" href="#">Pricing</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="form-inline pull-xs-right"> <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 %} {% example html %}
<div class="container"> <div class="container">
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#0">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
</nav> </nav>
</div> </div>
{% endexample %} {% endexample %}
@ -219,7 +219,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
{% example html %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-faded">
<div class="container"> <div class="container">
<a class="navbar-brand" href="#0">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
</div> </div>
</nav> </nav>
{% endexample %} {% endexample %}
@ -230,19 +230,19 @@ Navbars can be statically placed (their default behavior), static without rounde
{% example html %} {% example html %}
<nav class="navbar navbar-full navbar-light bg-faded"> <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> </nav>
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<nav class="navbar navbar-fixed-top navbar-light bg-faded"> <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> </nav>
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded"> <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> </nav>
{% endexample %} {% endexample %}
@ -273,19 +273,19 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
&#9776; &#9776;
</button> </button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> <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"> <ul class="nav navbar-nav">
<li class="nav-item active"> <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>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Features</a> <a class="nav-link" href="#">Features</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Pricing</a> <a class="nav-link" href="#">Pricing</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
</div> </div>

98
docs/components/navs.md
View File

@ -34,16 +34,16 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
{% example html %} {% example html %}
<ul class="nav"> <ul class="nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
@ -52,10 +52,10 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
{% example html %} {% example html %}
<nav class="nav"> <nav class="nav">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</nav> </nav>
{% endexample %} {% endexample %}
@ -65,10 +65,10 @@ Space out nav links in a horizontal band with `.nav-inline`. Longer series of li
{% example html %} {% example html %}
<nav class="nav nav-inline"> <nav class="nav nav-inline">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</nav> </nav>
{% endexample %} {% endexample %}
@ -77,16 +77,16 @@ The same works for a navigation built with lists.
{% example html %} {% example html %}
<ul class="nav nav-inline"> <ul class="nav nav-inline">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
@ -98,16 +98,16 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
{% example html %} {% example html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
@ -119,16 +119,16 @@ Take that same HTML, but use `.nav-pills` instead:
{% example html %} {% example html %}
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
@ -140,16 +140,16 @@ Add `.nav-stacked` to the `.nav.nav-pills` to stack them vertically. Each `.nav-
{% example html %} {% example html %}
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
@ -158,10 +158,10 @@ As always, stacked pills are possible without `<ul>`s.
{% example html %} {% example html %}
<nav class="nav nav-pills nav-stacked"> <nav class="nav nav-pills nav-stacked">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</nav> </nav>
{% endexample %} {% endexample %}
@ -174,23 +174,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %} {% example html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item dropdown"> <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"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
@ -200,23 +200,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %} {% example html %}
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item dropdown"> <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"> <div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% 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> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li> </li>
<li class="nav-item dropdown"> <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 Dropdown
</a> </a>
<div class="dropdown-menu"> <div class="dropdown-menu">

48
docs/components/pagination.md
View File

@ -31,18 +31,18 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
<nav aria-label="Page navigation"> <nav aria-label="Page navigation">
<ul class="pagination"> <ul class="pagination">
<li class="page-item"> <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">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li class="page-item"><a class="page-link" href="#0">1</a></li> <li class="page-item"><a class="page-link" href="#">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="#">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="#">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="#">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="#">5</a></li>
<li class="page-item"> <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">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
@ -71,20 +71,20 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
<nav aria-label="..."> <nav aria-label="...">
<ul class="pagination"> <ul class="pagination">
<li class="page-item disabled"> <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">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li class="page-item active"> <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>
<li class="page-item"><a class="page-link" href="#0">2</a></li> <li class="page-item"><a class="page-link" href="#">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="#">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="#">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="#">5</a></li>
<li class="page-item"> <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">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
@ -118,16 +118,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<nav aria-label="..."> <nav aria-label="...">
<ul class="pagination pagination-lg"> <ul class="pagination pagination-lg">
<li class="page-item"> <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">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li class="page-item"><a class="page-link" href="#0">1</a></li> <li class="page-item"><a class="page-link" href="#">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="#">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="#">3</a></li>
<li class="page-item"> <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">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
@ -140,16 +140,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<nav aria-label="..."> <nav aria-label="...">
<ul class="pagination pagination-sm"> <ul class="pagination pagination-sm">
<li class="page-item"> <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">&laquo;</span> <span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
</li> </li>
<li class="page-item"><a class="page-link" href="#0">1</a></li> <li class="page-item"><a class="page-link" href="#">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="#">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="#">3</a></li>
<li class="page-item"> <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">&raquo;</span> <span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>

2
docs/components/scrollspy.md
View File

@ -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="#fat">@fat</a></li>
<li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li> <li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>
<li class="nav-item dropdown"> <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"> <div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a> <a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a> <a class="dropdown-item" href="#two">two</a>

4
docs/components/tooltips.md
View File

@ -52,7 +52,7 @@ $(function () {
Hover over the links below to see tooltips: Hover over the links below to see tooltips:
<div class="bd-example tooltip-demo"> <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> </p>
</div> </div>
@ -137,7 +137,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
{% highlight html %} {% highlight html %}
<!-- HTML to write --> <!-- 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 --> <!-- Generated markup by the plugin -->
<div class="tooltip tooltip-top" role="tooltip"> <div class="tooltip tooltip-top" role="tooltip">

12
docs/components/utilities.md
View File

@ -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. Contextual text classes also work well on anchors with the provided hover and focus states.
{% example html %} {% example html %}
<a href="#0" class="text-muted">Muted link</a> <a href="#" class="text-muted">Muted link</a>
<a href="#0" class="text-primary">Primary link</a> <a href="#" class="text-primary">Primary link</a>
<a href="#0" class="text-success">Success link</a> <a href="#" class="text-success">Success link</a>
<a href="#0" class="text-info">Info link</a> <a href="#" class="text-info">Info link</a>
<a href="#0" class="text-warning">Warning link</a> <a href="#" class="text-warning">Warning link</a>
<a href="#0" class="text-danger">Danger link</a> <a href="#" class="text-danger">Danger link</a>
{% endexample %} {% 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. 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.

4
docs/examples/dashboard/index.html
View File

@ -195,7 +195,7 @@ js: example.js
<p class="card-text">Non dolore elit adipisicing ea reprehenderit consectetur culpa.</p> <p class="card-text">Non dolore elit adipisicing ea reprehenderit consectetur culpa.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<a href="#0" class="btn">Read More</a> <a href="#" class="btn">Read More</a>
</div> </div>
</div> </div>
@ -229,7 +229,7 @@ js: example.js
</div> </div>
</div> </div>
<div class="card-footer"> <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> <i class="material-icons">location_on</i>
</div> </div>
</div> </div>

12
docs/material-design/list-groups.md
View File

@ -20,10 +20,10 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item">Text only</li> <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> <button type="button" class="list-group-item">Button item</button>
<a href="#0" class="list-group-item active">Active link item</a> <a href="#" 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 disabled">Disabled item</a>
</ul> </ul>
{% endexample %} {% endexample %}
@ -32,10 +32,10 @@ the varieties specified. ([Specification](https://www.google.com/design/spec/com
{% example html %} {% example html %}
<ul class="list-group bmd-list-group-sm"> <ul class="list-group bmd-list-group-sm">
<li class="list-group-item">Text</li> <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> <button type="button" class="list-group-item">Button item</button>
<a href="#0" class="list-group-item active">Active link item</a> <a href="#" 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 disabled">Disabled item</a>
</ul> </ul>
{% endexample %} {% endexample %}

18
docs/material-design/menus.md
View File

@ -34,9 +34,9 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="ex2"> <div class="dropdown-menu dropdown-menu-left" aria-labelledby="ex2">
<a class="dropdown-item" href="#0">Regular link</a> <a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#0">Disabled link</a> <a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#0">Another link</a> <a class="dropdown-item" href="#">Another link</a>
</div> </div>
</div> </div>
{% endexample %} {% endexample %}
@ -75,9 +75,9 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
Dropdown Dropdown
</button> </button>
<div class="dropdown-menu" aria-labelledby="buttonMenu1"> <div class="dropdown-menu" aria-labelledby="buttonMenu1">
<a class="dropdown-item" href="#0">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#0">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
</div> </div>
</div> </div>
{% endexample %} {% 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" type="button">Another action</button>
<button class="dropdown-item disabled" type="button">Disabled action</button> <button class="dropdown-item disabled" type="button">Disabled action</button>
<div class="dropdown-divider"> </div> <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> </div>
{% endexample %} {% 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" type="button">Another action</button>
<button class="dropdown-item disabled" type="button">Disabled action</button> <button class="dropdown-item disabled" type="button">Disabled action</button>
<div class="dropdown-divider"> </div> <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> </div>
{% endexample %} {% 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" type="button">Another action</button>
<button class="dropdown-item disabled" type="button">Disabled action</button> <button class="dropdown-item disabled" type="button">Disabled action</button>
<div class="dropdown-divider"> </div> <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> </div>
{% endexample %} {% endexample %}

24
docs/material-design/navs.md
View File

@ -17,48 +17,48 @@ Navigation available in Bootstrap share general markup and styles, from the base
{% example html %} {% example html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Another link</a> <a class="nav-link" href="#">Another link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
<!-- inverse --> <!-- inverse -->
<ul class="nav nav-tabs bg-inverse"> <ul class="nav nav-tabs bg-inverse">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Another link</a> <a class="nav-link" href="#">Another link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
<!-- primary --> <!-- primary -->
<ul class="nav nav-tabs bg-primary"> <ul class="nav nav-tabs bg-primary">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#0">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#0">Another link</a> <a class="nav-link" href="#">Another link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}