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

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

@ -51,16 +51,16 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
{% example html %}
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read <a href="#0" class="alert-link">this important alert message</a>.
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This <a href="#0" class="alert-link">alert needs your attention</a>, but it's not super important.
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're <a href="#0" class="alert-link">not looking too good</a>.
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <a href="#0" class="alert-link">Change a few things up</a> and try submitting again.
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
{% endexample %}

View File

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

View File

@ -37,61 +37,61 @@ Turn a button into a dropdown toggle with some basic markup changes.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
</div>
@ -103,11 +103,11 @@ Turn a button into a dropdown toggle with some basic markup changes.
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
{% endhighlight %}
@ -123,11 +123,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
@ -136,11 +136,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
@ -149,11 +149,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
@ -162,11 +162,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
@ -175,11 +175,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group">
@ -188,11 +188,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
</div>
@ -205,11 +205,11 @@ Similarly, create split button dropdowns with the same markup changes, only with
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
{% endhighlight %}
@ -225,11 +225,11 @@ Button dropdowns work with buttons of all sizes.
Large button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
@ -239,11 +239,11 @@ Button dropdowns work with buttons of all sizes.
Small button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
@ -283,11 +283,11 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
<div class="btn-group dropup">
@ -296,11 +296,11 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#0">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
</div>

View File

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

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.
{% example html %}
<a class="btn btn-primary" href="#0" role="button">Link</a>
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
@ -108,8 +108,8 @@ Create block level buttons—those that span the full width of a parent—by add
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
{% example html %}
<a href="#0" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#0" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
{% endexample %}
## Disabled state
@ -132,8 +132,8 @@ Disabled buttons using the `<a>` element behave a bit different:
- Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
{% example html %}
<a href="#0" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#0" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
{% endexample %}
{% callout warning %}

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">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
@ -57,8 +57,8 @@ Cards support a wide variety of content, including images, text, list groups, li
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-block">
<a href="#0" class="card-link">Card link</a>
<a href="#0" class="card-link">Another link</a>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
{% endexample %}
@ -92,8 +92,8 @@ Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, l
<div class="card card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#0" class="card-link">Card link</a>
<a href="#0" class="card-link">Another link</a>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
{% endexample %}
@ -110,8 +110,8 @@ The multiple content types can be easily combined to create the card you need. S
<img data-src="holder.js/100px180/?text=Image" alt="Card image">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#0" class="card-link">Card link</a>
<a href="#0" class="card-link">Another link</a>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
{% endexample %}
@ -128,14 +128,14 @@ Using the grid:
<div class="card card-block">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="col-sm-6">
<div class="card card-block">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
@ -147,7 +147,7 @@ Using custom widths:
<div class="card card-block" style="width: 18rem;">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
{% endexample %}
@ -159,19 +159,19 @@ You can quickly change the text alignment of any card—in its entirety or speci
<div class="card card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card card-block text-xs-center">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card card-block text-xs-right">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
{% endexample %}
@ -187,7 +187,7 @@ Add an optional header and/or footer within a card.
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
@ -200,7 +200,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
@ -227,7 +227,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
@ -244,20 +244,20 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs pull-xs-left">
<li class="nav-item">
<a class="nav-link active" href="#0">Active</a>
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
@ -267,20 +267,20 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
<div class="card-header">
<ul class="nav nav-pills card-header-pills pull-xs-left">
<li class="nav-item">
<a class="nav-link active" href="#0">Active</a>
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#0">Disabled</a>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
@ -334,7 +334,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
<div class="card-block">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#0" class="btn btn-primary">Go somewhere</a>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}

View File

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

View File

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

View File

@ -27,7 +27,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
<hr class="m-y-2">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#0" role="button">Learn more</a>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
{% endexample %}

View File

@ -63,13 +63,13 @@ Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
{% example html %}
<div class="list-group">
<a href="#0" class="list-group-item disabled">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#0" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#0" class="list-group-item">Morbi leo risus</a>
<a href="#0" class="list-group-item">Porta ac consectetur ac</a>
<a href="#0" class="list-group-item">Vestibulum at eros</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
{% endexample %}
@ -81,13 +81,13 @@ Be sure to **not use the standard `.btn` classes here**.
{% example html %}
<div class="list-group">
<a href="#0" class="list-group-item active">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#0" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#0" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#0" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#0" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
{% endexample %}
@ -109,10 +109,10 @@ Use contextual classes to style list items, default or linked. Also includes `.a
{% example html %}
<div class="list-group">
<a href="#0" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
<a href="#0" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a>
<a href="#0" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a>
<a href="#0" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
</div>
{% endexample %}
@ -125,15 +125,15 @@ Add nearly any HTML within, even for linked list groups like the one below.
{% example html %}
<div class="list-group">
<a href="#0" class="list-group-item list-group-item-action active">
<a href="#" class="list-group-item list-group-item-action active">
<h5 class="list-group-item-heading">List group item heading</h5>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#0" class="list-group-item list-group-item-action">
<a href="#" class="list-group-item list-group-item-action">
<h5 class="list-group-item-heading">List group item heading</h5>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#0" class="list-group-item list-group-item-action">
<a href="#" class="list-group-item list-group-item-action">
<h5 class="list-group-item-heading">List group item heading</h5>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>

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>
<h4>Popover in a modal</h4>
<p>This <a href="#0" role="button" class="btn btn-secondary popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
<h4>Tooltips in a modal</h4>
<p><a href="#0" class="tooltip-test" title="Tooltip">This link</a> and <a href="#0" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
<hr>

View File

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

View File

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

View File

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

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="#mdo">@mdo</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#0" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>

View File

@ -52,7 +52,7 @@ $(function () {
Hover over the links below to see tooltips:
<div class="bd-example tooltip-demo">
<p class="muted">Tight pants next level keffiyeh <a href="#0" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#0" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#0" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#0" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
<p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
</div>
@ -137,7 +137,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
{% highlight html %}
<!-- HTML to write -->
<a href="#0" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip tooltip-top" role="tooltip">

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.
{% example html %}
<a href="#0" class="text-muted">Muted link</a>
<a href="#0" class="text-primary">Primary link</a>
<a href="#0" class="text-success">Success link</a>
<a href="#0" class="text-info">Info link</a>
<a href="#0" class="text-warning">Warning link</a>
<a href="#0" class="text-danger">Danger link</a>
<a href="#" class="text-muted">Muted link</a>
<a href="#" class="text-primary">Primary link</a>
<a href="#" class="text-success">Success link</a>
<a href="#" class="text-info">Info link</a>
<a href="#" class="text-warning">Warning link</a>
<a href="#" class="text-danger">Danger link</a>
{% endexample %}
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

View File

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

View File

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

View File

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

View File

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