mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
.btn-default to .btn-secondary
This commit is contained in:
parent
f399d21ef5
commit
93a7421f2c
@ -12,7 +12,7 @@
|
||||
<p>Turn a button into a dropdown toggle with some basic markup changes.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Default</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -75,7 +75,7 @@
|
||||
{% highlight html %}
|
||||
<!-- Single button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -92,8 +92,8 @@
|
||||
<p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-secondary">Default</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -192,7 +192,7 @@
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Large button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -206,7 +206,7 @@
|
||||
</div><!-- /btn-toolbar -->
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Small button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -220,7 +220,7 @@
|
||||
</div><!-- /btn-toolbar -->
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Extra small button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -236,7 +236,7 @@
|
||||
{% highlight html %}
|
||||
<!-- Large button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Large button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -246,7 +246,7 @@
|
||||
|
||||
<!-- Small button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Small button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -256,7 +256,7 @@
|
||||
|
||||
<!-- Extra small button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Extra small button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -270,8 +270,8 @@
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-default">Dropup</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-secondary">Dropup</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -299,8 +299,8 @@
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-default">Dropup</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-secondary">Dropup</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
|
@ -12,16 +12,16 @@
|
||||
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group" style="margin: 9px 0 5px;">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -30,18 +30,18 @@
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar" role="toolbar" style="margin: 0;">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">1</button>
|
||||
<button type="button" class="btn btn-default">2</button>
|
||||
<button type="button" class="btn btn-default">3</button>
|
||||
<button type="button" class="btn btn-default">4</button>
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">5</button>
|
||||
<button type="button" class="btn btn-default">6</button>
|
||||
<button type="button" class="btn btn-default">7</button>
|
||||
<button type="button" class="btn btn-secondary">5</button>
|
||||
<button type="button" class="btn btn-secondary">6</button>
|
||||
<button type="button" class="btn btn-secondary">7</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">8</button>
|
||||
<button type="button" class="btn btn-secondary">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -58,30 +58,30 @@
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-lg">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-xs">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -96,11 +96,11 @@
|
||||
<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">1</button>
|
||||
<button type="button" class="btn btn-default">2</button>
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
|
||||
@ -112,11 +112,11 @@
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">1</button>
|
||||
<button type="button" class="btn btn-default">2</button>
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -131,10 +131,10 @@
|
||||
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group-vertical">
|
||||
<button type="button" class="btn btn-default">Button</button>
|
||||
<button type="button" class="btn btn-default">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||
@ -142,10 +142,10 @@
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button type="button" class="btn btn-default">Button</button>
|
||||
<button type="button" class="btn btn-default">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
|
||||
@ -154,7 +154,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||
@ -163,7 +163,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||
@ -196,16 +196,16 @@
|
||||
<p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group btn-group-justified">
|
||||
<a class="btn btn-default" role="button">Left</a>
|
||||
<a class="btn btn-default" role="button">Middle</a>
|
||||
<a class="btn btn-default" role="button">Right</a>
|
||||
<a class="btn btn-secondary" role="button">Left</a>
|
||||
<a class="btn btn-secondary" role="button">Middle</a>
|
||||
<a class="btn btn-secondary" role="button">Right</a>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group btn-group-justified">
|
||||
<a class="btn btn-default" role="button">Left</a>
|
||||
<a class="btn btn-default" role="button">Middle</a>
|
||||
<a class="btn btn-secondary" role="button">Left</a>
|
||||
<a class="btn btn-secondary" role="button">Middle</a>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<a class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -229,26 +229,26 @@
|
||||
<div class="bs-example">
|
||||
<div class="btn-group btn-group-justified">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="btn-group btn-group-justified">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
@ -7,7 +7,7 @@
|
||||
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
|
||||
<div class="bs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
||||
@ -21,7 +21,7 @@
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
||||
@ -54,7 +54,7 @@
|
||||
<p>Add a header to label sections of actions in any dropdown menu.</p>
|
||||
<div class="bs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
|
||||
@ -82,7 +82,7 @@
|
||||
<p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p>
|
||||
<div class="bs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
|
||||
|
@ -143,7 +143,7 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
<button class="btn btn-secondary" type="button">Go!</button>
|
||||
</span>
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
@ -152,7 +152,7 @@
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
<button class="btn btn-secondary" type="button">Go!</button>
|
||||
</span>
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
@ -163,7 +163,7 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
<button class="btn btn-secondary" type="button">Go!</button>
|
||||
</span>
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
@ -172,7 +172,7 @@
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
<button class="btn btn-secondary" type="button">Go!</button>
|
||||
</span>
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
@ -186,7 +186,7 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -202,7 +202,7 @@
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -220,7 +220,7 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -236,7 +236,7 @@
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -256,8 +256,8 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -275,8 +275,8 @@
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
|
@ -58,7 +58,7 @@
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
<button type="submit" class="btn btn-secondary">Submit</button>
|
||||
</form>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="#">Link</a></li>
|
||||
@ -113,7 +113,7 @@
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
<button type="submit" class="btn btn-secondary">Submit</button>
|
||||
</form>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="#">Link</a></li>
|
||||
@ -190,7 +190,7 @@
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
<button type="submit" class="btn btn-secondary">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -201,7 +201,7 @@
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
<button type="submit" class="btn btn-secondary">Submit</button>
|
||||
</form>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -231,13 +231,13 @@
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
|
||||
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
|
||||
<button type="button" class="btn btn-secondary navbar-btn">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
|
||||
<button type="button" class="btn btn-secondary navbar-btn">Sign in</button>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
|
@ -36,37 +36,37 @@
|
||||
<div class="bs-example">
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-default btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary">Default button</button>
|
||||
<button type="button" class="btn btn-default">Default button</button>
|
||||
<button type="button" class="btn btn-secondary">Default button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-default btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
|
||||
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
|
||||
<button type="button" class="btn btn-secondary btn-xs">Extra small button</button>
|
||||
</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-default btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary">Default button</button>
|
||||
<button type="button" class="btn btn-default">Default button</button>
|
||||
<button type="button" class="btn btn-secondary">Default button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-default btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
|
||||
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
|
||||
<button type="button" class="btn btn-secondary btn-xs">Extra small button</button>
|
||||
</p>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -74,12 +74,12 @@
|
||||
<div class="bs-example">
|
||||
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
|
||||
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
@ -90,22 +90,22 @@
|
||||
<p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
|
||||
<p class="bs-example">
|
||||
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
|
||||
<button type="button" class="btn btn-default btn-lg active">Button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg active">Button</button>
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
|
||||
<button type="button" class="btn btn-default btn-lg active">Button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg active">Button</button>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Anchor element</h3>
|
||||
<p>Add the <code>.active</code> class to <code><a></code> buttons.</p>
|
||||
<p class="bs-example">
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
|
||||
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
|
||||
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
@ -116,11 +116,11 @@
|
||||
<p>Add the <code>disabled</code> attribute to <code><button></code> buttons.</p>
|
||||
<p class="bs-example">
|
||||
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary button</button>
|
||||
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg" disabled="disabled">Button</button>
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
|
||||
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg" disabled="disabled">Button</button>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
@ -132,11 +132,11 @@
|
||||
<p>Add the <code>.disabled</code> class to <code><a></code> buttons.</p>
|
||||
<p class="bs-example">
|
||||
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
|
||||
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
|
||||
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
|
||||
{% endhighlight %}
|
||||
<p>
|
||||
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
|
||||
@ -154,16 +154,16 @@
|
||||
<h2 id="buttons-tags">Button tags</h2>
|
||||
<p>Use the button classes on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
|
||||
<form class="bs-example">
|
||||
<a class="btn btn-default" href="#" role="button">Link</a>
|
||||
<button class="btn btn-default" type="submit">Button</button>
|
||||
<input class="btn btn-default" type="button" value="Input">
|
||||
<input class="btn btn-default" type="submit" value="Submit">
|
||||
<a class="btn btn-secondary" href="#" role="button">Link</a>
|
||||
<button class="btn btn-secondary" type="submit">Button</button>
|
||||
<input class="btn btn-secondary" type="button" value="Input">
|
||||
<input class="btn btn-secondary" type="submit" value="Submit">
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<a class="btn btn-default" href="#" role="button">Link</a>
|
||||
<button class="btn btn-default" type="submit">Button</button>
|
||||
<input class="btn btn-default" type="button" value="Input">
|
||||
<input class="btn btn-default" type="submit" value="Submit">
|
||||
<a class="btn btn-secondary" href="#" role="button">Link</a>
|
||||
<button class="btn btn-secondary" type="submit">Button</button>
|
||||
<input class="btn btn-secondary" type="button" value="Input">
|
||||
<input class="btn btn-secondary" type="submit" value="Submit">
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
|
@ -23,7 +23,7 @@
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
<button type="submit" class="btn btn-secondary">Submit</button>
|
||||
</form>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
@ -46,7 +46,7 @@
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
<button type="submit" class="btn btn-secondary">Submit</button>
|
||||
</form>
|
||||
{% endhighlight %}
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
@ -86,7 +86,7 @@
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Sign in</button>
|
||||
<button type="submit" class="btn btn-secondary">Sign in</button>
|
||||
</form>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
@ -110,7 +110,7 @@
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Sign in</button>
|
||||
<button type="submit" class="btn btn-secondary">Sign in</button>
|
||||
</form>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -142,7 +142,7 @@
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-offset-2 col-sm-10">
|
||||
<button type="submit" class="btn btn-default">Sign in</button>
|
||||
<button type="submit" class="btn btn-secondary">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -172,7 +172,7 @@
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-offset-2 col-sm-10">
|
||||
<button type="submit" class="btn btn-default">Sign in</button>
|
||||
<button type="submit" class="btn btn-secondary">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -297,16 +297,16 @@
|
||||
<input id="input-@btn-font-weight" type="text" value="normal" data-var="@btn-font-weight" class="form-control"/>
|
||||
</div>
|
||||
<div class="bs-customizer-input">
|
||||
<label for="input-@btn-default-color">@btn-default-color</label>
|
||||
<input id="input-@btn-default-color" type="text" value="#333" data-var="@btn-default-color" class="form-control"/>
|
||||
<label for="input-@btn-secondary-color">@btn-secondary-color</label>
|
||||
<input id="input-@btn-secondary-color" type="text" value="#333" data-var="@btn-secondary-color" class="form-control"/>
|
||||
</div>
|
||||
<div class="bs-customizer-input">
|
||||
<label for="input-@btn-default-bg">@btn-default-bg</label>
|
||||
<input id="input-@btn-default-bg" type="text" value="#fff" data-var="@btn-default-bg" class="form-control"/>
|
||||
<label for="input-@btn-secondary-bg">@btn-secondary-bg</label>
|
||||
<input id="input-@btn-secondary-bg" type="text" value="#fff" data-var="@btn-secondary-bg" class="form-control"/>
|
||||
</div>
|
||||
<div class="bs-customizer-input">
|
||||
<label for="input-@btn-default-border">@btn-default-border</label>
|
||||
<input id="input-@btn-default-border" type="text" value="#ccc" data-var="@btn-default-border" class="form-control"/>
|
||||
<label for="input-@btn-secondary-border">@btn-secondary-border</label>
|
||||
<input id="input-@btn-secondary-border" type="text" value="#ccc" data-var="@btn-secondary-border" class="form-control"/>
|
||||
</div>
|
||||
<div class="bs-customizer-input">
|
||||
<label for="input-@btn-primary-color">@btn-primary-color</label>
|
||||
|
@ -17,7 +17,7 @@
|
||||
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-danger">Take this action</button>
|
||||
<button type="button" class="btn btn-default">Or do this</button>
|
||||
<button type="button" class="btn btn-secondary">Or do this</button>
|
||||
</p>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
|
@ -31,7 +31,7 @@
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
@ -50,7 +50,7 @@
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
@ -74,7 +74,7 @@
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
|
||||
<h4>Popover in a modal</h4>
|
||||
<p>This <a href="#" role="button" class="btn btn-default 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="#" 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>
|
||||
@ -93,7 +93,7 @@
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
|
||||
@ -124,7 +124,7 @@
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -75,35 +75,35 @@
|
||||
<h4>Four directions</h4>
|
||||
<div class="bs-example popover-demo">
|
||||
<div class="bs-example-popovers">
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on top
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||||
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
{% endhighlight %}
|
||||
|
@ -12,20 +12,20 @@
|
||||
<h3>Four directions</h3>
|
||||
<div class="bs-example tooltip-demo">
|
||||
<div class="bs-example-tooltips">
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
|
@ -25,7 +25,7 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
|
||||
<!-- Customizer form -->
|
||||
<form class="bs-customizer" role="form">
|
||||
<div class="bs-docs-section" id="less-section">
|
||||
<button class="btn btn-default toggle" type="button">Toggle all</button>
|
||||
<button class="btn btn-secondary toggle" type="button">Toggle all</button>
|
||||
<h1 id="less" class="page-header">Less files</h1>
|
||||
|
||||
<p class="lead">Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href="../css/">CSS</a> and <a href="../components/">Components</a> pages in the docs.</p>
|
||||
@ -252,7 +252,7 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
|
||||
|
||||
|
||||
<div class="bs-docs-section" id="plugin-section">
|
||||
<button class="btn btn-default toggle" type="button">Toggle all</button>
|
||||
<button class="btn btn-secondary toggle" type="button">Toggle all</button>
|
||||
<h1 id="plugins" class="page-header">jQuery plugins</h1>
|
||||
|
||||
<p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="../javascript/">JavaScript</a> page in the docs.</p>
|
||||
@ -351,7 +351,7 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
|
||||
|
||||
|
||||
<div class="bs-docs-section" id="less-variables-section">
|
||||
<button class="btn btn-default toggle" type="button">Reset to defaults</button>
|
||||
<button class="btn btn-secondary toggle" type="button">Reset to defaults</button>
|
||||
<h1 id="less-variables" class="page-header">Less variables</h1>
|
||||
|
||||
<p class="lead">Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
|
||||
|
6
docs/dist/css/bootstrap-theme.css
vendored
6
docs/dist/css/bootstrap-theme.css
vendored
@ -4,7 +4,7 @@
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
.btn-default,
|
||||
.btn-secondary,
|
||||
.btn-primary,
|
||||
.btn-success,
|
||||
.btn-warning,
|
||||
@ -13,12 +13,12 @@
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
||||
}
|
||||
.btn-default:active,
|
||||
.btn-secondary:active,
|
||||
.btn-primary:active,
|
||||
.btn-success:active,
|
||||
.btn-warning:active,
|
||||
.btn-danger:active,
|
||||
.btn-default.active,
|
||||
.btn-secondary.active,
|
||||
.btn-primary.active,
|
||||
.btn-success.active,
|
||||
.btn-warning.active,
|
||||
|
2
docs/dist/css/bootstrap-theme.css.map
vendored
2
docs/dist/css/bootstrap-theme.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap-theme.min.css
vendored
2
docs/dist/css/bootstrap-theme.min.css
vendored
File diff suppressed because one or more lines are too long
@ -137,19 +137,19 @@
|
||||
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 140px; height: 140px;">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 140px; height: 140px;">
|
||||
<h2>Heading</h2>
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 140px; height: 140px;">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
|
@ -10,9 +10,9 @@ a:hover {
|
||||
}
|
||||
|
||||
/* Custom default button */
|
||||
.btn-default,
|
||||
.btn-default:hover,
|
||||
.btn-default:focus {
|
||||
.btn-secondary,
|
||||
.btn-secondary:hover,
|
||||
.btn-secondary:focus {
|
||||
color: #333;
|
||||
text-shadow: none; /* Prevent inheritence from `body` */
|
||||
background-color: #fff;
|
||||
|
@ -53,7 +53,7 @@
|
||||
<h1 class="cover-heading">Cover your page.</h1>
|
||||
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
|
||||
<p class="lead">
|
||||
<a href="#" class="btn btn-lg btn-default">Learn more</a>
|
||||
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
@ -72,17 +72,17 @@
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -68,32 +68,32 @@
|
||||
<div class="col-6 col-sm-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-6 col-sm-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-6 col-sm-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-6 col-sm-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-6 col-sm-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-6 col-sm-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</div><!--/span-->
|
||||
|
@ -83,7 +83,7 @@
|
||||
<h1>Buttons</h1>
|
||||
</div>
|
||||
<p>
|
||||
<button type="button" class="btn btn-lg btn-default">Default</button>
|
||||
<button type="button" class="btn btn-lg btn-secondary">Default</button>
|
||||
<button type="button" class="btn btn-lg btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-lg btn-success">Success</button>
|
||||
<button type="button" class="btn btn-lg btn-info">Info</button>
|
||||
@ -92,7 +92,7 @@
|
||||
<button type="button" class="btn btn-lg btn-link">Link</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<button type="button" class="btn btn-secondary">Default</button>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
@ -101,7 +101,7 @@
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-sm btn-default">Default</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary">Default</button>
|
||||
<button type="button" class="btn btn-sm btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-sm btn-success">Success</button>
|
||||
<button type="button" class="btn btn-sm btn-info">Info</button>
|
||||
@ -110,7 +110,7 @@
|
||||
<button type="button" class="btn btn-sm btn-link">Link</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-xs btn-default">Default</button>
|
||||
<button type="button" class="btn btn-xs btn-secondary">Default</button>
|
||||
<button type="button" class="btn btn-xs btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-xs btn-success">Success</button>
|
||||
<button type="button" class="btn btn-xs btn-info">Info</button>
|
||||
|
@ -32,19 +32,19 @@
|
||||
|
||||
<body>
|
||||
|
||||
<button class="btn btn-default pull-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
|
||||
<button class="btn btn-default tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
|
||||
<button class="btn btn-default tooltip-right" title="This should be shifted down">Shift Down</button>
|
||||
<button class="btn btn-secondary pull-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
|
||||
<button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
|
||||
<button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button>
|
||||
|
||||
<button class="btn btn-default tooltip-right btn-bottom" title="This should be shifted up">Shift Up</button>
|
||||
<button class="btn btn-secondary tooltip-right btn-bottom" title="This should be shifted up">Shift Up</button>
|
||||
|
||||
<div class="container-viewport">
|
||||
<button class="btn btn-default tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
|
||||
<button class="btn btn-default tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
|
||||
<button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
|
||||
<button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
|
||||
|
||||
<button class="btn btn-default pull-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
|
||||
<button class="btn btn-secondary pull-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
|
||||
|
||||
<button class="btn btn-default tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
|
||||
<button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user