rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-25 17:52:20 +01:00
Code Issues Actions Packages Releases Activity

Merge branch '3.0.0-wip' into gh-pages

Browse Source
This commit is contained in:
Mark Otto 2013-08-06 11:56:24 -07:00
commit a57b93ee93
31 changed files with 466 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -63,13 +63,13 @@ When completed, you'll be able to run the various Grunt commands provided from t
### Available Grunt commands
#### Build - `grunt`
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Requires recess and uglify-js.**
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
#### Only compile CSS and JavaScript - `grunt dist`
`grunt dist` creates the `/dist` directory with compiled files. **Requires recess and uglify-js.**
`grunt dist` creates the `/dist` directory with compiled files. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
#### Tests - `grunt test`
Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). **Requires phantomjs.**
Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). **Requires [phantomjs](https://github.com/ariya/phantomjs/).**
#### Watch - `grunt watch`
This is a convenience method for watching just Less files and automatically building them whenever you save.

2
_includes/nav-components.html
View File

@ -61,6 +61,8 @@
<li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
<li><a href="#navbar-static-top">Static top navbar</a></li>
<li><a href="#navbar-responsive">Responsive navbar</a></li>
<li><a href="#navbar-scrollable">Scrollable responsive navbar</a></li>
<li><a href="#navbar-inverted">Inverted navbar</a></li>
</ul>
</li>
<li><a href="#breadcrumbs">Breadcrumbs</a></li>

1
_includes/nav-css.html
View File

@ -56,6 +56,7 @@
<li><a href="#forms-inline">Inline variation</a></li>
<li><a href="#forms-horizontal">Horizontal variation</a></li>
<li><a href="#forms-controls">Supported controls</a></li>
<li><a href="#forms-controls-static">Static form control</a></li>
<li><a href="#forms-control-states">Control states</a></li>
<li><a href="#forms-control-sizes">Control sizing</a></li>
<li><a href="#forms-help-text">Help text</a></li>

64
components.html
View File

@ -1326,7 +1326,49 @@ body { padding-bottom: 70px; }
</div>
<h2>Inverted variation</h2>
<h2 id="navbar-scrollable">Scrollable responsive navbar</h2>
<p>For instances where you have too many items in your navbar to fight within the viewport of a small device, add <code>.nav-collapse-scrollable</code> to your navbar's <code>.nav-collapse</code> to set a <code>max-height</code> and smooth scrolling.</p>
<div class="bs-example">
<div class="navbar">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-scroll-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
<div class="collapse nav-collapse nav-collapse-scrollable bs-navbar-scroll-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
</div><!-- /example -->
{% highlight html %}
<div class="navbar">
<div class="container">
...
<div class="collapse nav-collapse nav-collapse-scrollable">
...
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
{% endhighlight %}
<h2 id="navbar-inverted">Inverted variation</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-example">
<div class="navbar navbar-inverse">
@ -1520,7 +1562,7 @@ body { padding-bottom: 70px; }
</div>
{% highlight html %}
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination pagination">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>
{% endhighlight %}
@ -1587,28 +1629,28 @@ body { padding-bottom: 70px; }
<h3>Example</h3>
<div class="bs-example">
<h1>Example heading <span class="label">New</span></h1>
<h2>Example heading <span class="label">New</span></h2>
<h3>Example heading <span class="label">New</span></h3>
<h4>Example heading <span class="label">New</span></h4>
<h5>Example heading <span class="label">New</span></h5>
<h6>Example heading <span class="label">New</span></h6>
<h1>Example heading <span class="label label-default">New</span></h1>
<h2>Example heading <span class="label label-default">New</span></h2>
<h3>Example heading <span class="label label-default">New</span></h3>
<h4>Example heading <span class="label label-default">New</span></h4>
<h5>Example heading <span class="label label-default">New</span></h5>
<h6>Example heading <span class="label label-default">New</span></h6>
</div>
{% highlight html %}
<h3>Example heading <span class="label">New</span></h3>
<h3>Example heading <span class="label label-default">New</span></h3>
{% endhighlight %}
<h3>Available variations</h3>
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
<div class="bs-example">
<span class="label">Default</span>
<span class="label label-default">Default</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="label label-info">Info</span>
</div>
{% highlight html %}
<span class="label">Default</span>
<span class="label label-default">Default</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

80
css.html
View File

@ -807,7 +807,7 @@ base_url: "../"
{% endhighlight %}
<h4>Horizontal description</h4>
<p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
<p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side. Starts off stacked like default <code>&lt;dl&gt;</code>s, but when the navbar expands, so do these.</p>
<div class="bs-example">
<dl class="dl-horizontal">
<dt>Description lists</dt>
@ -1257,10 +1257,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2>Optional layouts</h2>
<p>Included with Bootstrap are optional form layouts for common use cases.</p>
<h3 id="forms-inline">Inline form</h3>
<h3 id="forms-inline">Inline form</h2>
<p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
<div class="bs-callout bs-callout-danger">
<h4>Requires custom widths</h4>
@ -1289,7 +1286,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form>
{% endhighlight %}
<h3 id="forms-horizontal">Horizontal form</h3>
<h2 id="forms-horizontal">Horizontal form</h2>
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
<form class="bs-example form-horizontal">
<div class="form-group">
@ -1485,6 +1482,39 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2 id="forms-controls-static">Static text in horizontal forms</h2>
<p>When you need to place regular, static text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
<form class="bs-example form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
{% highlight html %}
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail2" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword2" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
</div>
</form>
{% endhighlight %}
<h2 id="forms-control-states">Form control states</h2>
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
@ -1520,12 +1550,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div>
<form class="bs-example form-inline">
<form class="bs-example">
<fieldset disabled>
<input type="text" class="form-control" placeholder="Disabled input">
<select class="form-control">
<option>Disabled select</option>
</select>
<div class="form-group">
<label for="disabledInput">Disabled input</label>
<input type="text" id="disabledInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledInput">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
@ -1537,10 +1573,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html %}
<form class="form-inline">
<fieldset disabled>
<input type="text" class="form-control" placeholder="Disabled input">
<select class="form-control">
<option>Disabled select</option>
</select>
<div class="form-group">
<label for="disabledInput">Disabled input</label>
<input type="text" id="disabledInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledInput">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
@ -1649,10 +1691,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Block level help text for form controls.</p>
<form class="bs-example">
<input type="text" class="form-control">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
{% highlight html %}
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
{% endhighlight %}
</div>
@ -1924,8 +1966,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<tr>
<th>Class</th>
<th>Small devices <small>Up to 768px</small></th>
<th>Medium devices <small>768px to 979px</small></th>
<th>Large devices <small>980px and up</small></th>
<th>Medium devices <small>768px to 991px</small></th>
<th>Large devices <small>992px and up</small></th>
</tr>
</thead>
<tbody>

18
customize.html
View File

@ -660,12 +660,21 @@ base_url: "../"
</div>
<h2 id="variables-alerts">Alerts</h2>
<p>Define alert colors and border radius.</p>
<p>Define alert colors, border radius, and padding.</p>
<h4>Border radius</h4>
<label>@alert-padding</label>
<input type="text" class="form-control" placeholder="15px">
<label>@alert-border-radius</label>
<input type="text" class="form-control" placeholder="@border-radius-base">
<div class="row">
<div class="col-lg-6">
<h4>Default (Warning)</h4>
<label>@alert-text</label>
<input type="text" class="form-control" placeholder="@state-warning-text">
<label>@alert-bg</label>
<input type="text" class="form-control" placeholder="@state-warning-bg">
<label>@alert-border</label>
<input type="text" class="form-control" placeholder="@state-warning-border">
<h4>Success</h4>
<label>@alert-success-text</label>
<input type="text" class="form-control" placeholder="@state-success-text">
@ -673,13 +682,6 @@ base_url: "../"
<input type="text" class="form-control" placeholder="@state-success-bg">
<label>@alert-success-border</label>
<input type="text" class="form-control" placeholder="@state-success-border">
<h4>Warning</h4>
<label>@alert-warning-text</label>
<input type="text" class="form-control" placeholder="@state-warning-text">
<label>@alert-warning-bg</label>
<input type="text" class="form-control" placeholder="@state-warning-bg">
<label>@alert-warning-border</label>
<input type="text" class="form-control" placeholder="@state-warning-border">
</div>
<div class="col-lg-6">
<h4>Danger</h4>

240
dist/css/bootstrap.css vendored
View File

@ -564,38 +564,35 @@ dd {
margin-left: 0;
}
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
.dl-horizontal dd:before,
.dl-horizontal dd:after {
display: table;
content: " ";
}
.dl-horizontal dd:after {
clear: both;
}
.dl-horizontal dd:before,
.dl-horizontal dd:after {
display: table;
content: " ";
}
.dl-horizontal dd:after {
clear: both;
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
.dl-horizontal dd:before,
.dl-horizontal dd:after {
display: table;
content: " ";
}
.dl-horizontal dd:after {
clear: both;
}
.dl-horizontal dd:before,
.dl-horizontal dd:after {
display: table;
content: " ";
}
.dl-horizontal dd:after {
clear: both;
}
}
abbr[title],
@ -636,7 +633,6 @@ blockquote small:before {
}
blockquote.pull-right {
float: right;
padding-right: 15px;
padding-left: 0;
border-right: 5px solid #eeeeee;
@ -877,7 +873,7 @@ pre code {
width: 100%;
}
@media (min-width: 768px) {
@media (min-width: 768px) and (max-width: 991px) {
.container {
max-width: 728px;
}
@ -1637,6 +1633,11 @@ textarea.input-sm {
border-color: #468847;
}
.form-control-static {
padding-top: 6px;
margin-bottom: 0;
}
.help-block {
display: block;
margin-top: 5px;
@ -1652,14 +1653,21 @@ textarea.input-sm {
.form-inline .radio,
.form-inline .checkbox {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
.form-horizontal .control-label,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 9px;
padding-top: 6px;
}
.form-horizontal .form-group:before,
@ -1705,7 +1713,7 @@ textarea.input-sm {
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 500;
font-weight: bold;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
@ -1728,7 +1736,7 @@ textarea.input-sm {
.btn:hover,
.btn:focus {
color: #ffffff;
color: #333333;
text-decoration: none;
}
@ -1751,17 +1759,18 @@ fieldset[disabled] .btn {
}
.btn-default {
color: #ffffff;
background-color: #474949;
border-color: #474949;
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
background-color: #3a3c3c;
border-color: #2e2f2f;
color: #333333;
background-color: #ebebeb;
border-color: #adadad;
}
.btn-default.disabled,
@ -1779,22 +1788,23 @@ fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
background-color: #474949;
border-color: #474949;
background-color: #ffffff;
border-color: #cccccc;
}
.btn-primary {
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
background-color: #357ebd;
border-color: #3071a9;
color: #ffffff;
background-color: #3276b1;
border-color: #285e8e;
}
.btn-primary.disabled,
@ -1813,21 +1823,22 @@ fieldset[disabled] .btn-primary:active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #428bca;
border-color: #428bca;
border-color: #357ebd;
}
.btn-warning {
color: #ffffff;
background-color: #f0ad4e;
border-color: #f0ad4e;
border-color: #eea236;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
background-color: #eea236;
border-color: #ec971f;
color: #ffffff;
background-color: #ed9c28;
border-color: #d58512;
}
.btn-warning.disabled,
@ -1846,21 +1857,22 @@ fieldset[disabled] .btn-warning:active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
background-color: #f0ad4e;
border-color: #f0ad4e;
border-color: #eea236;
}
.btn-danger {
color: #ffffff;
background-color: #d9534f;
border-color: #d9534f;
border-color: #d43f3a;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
background-color: #d43f3a;
border-color: #c9302c;
color: #ffffff;
background-color: #d2322d;
border-color: #ac2925;
}
.btn-danger.disabled,
@ -1879,21 +1891,22 @@ fieldset[disabled] .btn-danger:active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
background-color: #d9534f;
border-color: #d9534f;
border-color: #d43f3a;
}
.btn-success {
color: #ffffff;
background-color: #5cb85c;
border-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
background-color: #4cae4c;
border-color: #449d44;
color: #ffffff;
background-color: #47a447;
border-color: #398439;
}
.btn-success.disabled,
@ -1912,21 +1925,22 @@ fieldset[disabled] .btn-success:active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #5cb85c;
border-color: #5cb85c;
border-color: #4cae4c;
}
.btn-info {
color: #ffffff;
background-color: #5bc0de;
border-color: #5bc0de;
border-color: #46b8da;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
background-color: #46b8da;
border-color: #31b0d5;
color: #ffffff;
background-color: #39b3d7;
border-color: #269abc;
}
.btn-info.disabled,
@ -1945,7 +1959,7 @@ fieldset[disabled] .btn-info:active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
background-color: #5bc0de;
border-color: #5bc0de;
border-color: #46b8da;
}
.btn-link {
@ -1982,7 +1996,7 @@ fieldset[disabled] .btn-link {
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
color: #333333;
color: #999999;
text-decoration: none;
}
@ -2088,27 +2102,22 @@ input[type="button"].btn-block {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
line-height: 1;
text-align: center;
background-color: #eeeeee;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.input-group-addon.input-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.input-group-addon.input-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
@ -2605,10 +2614,6 @@ button.close {
border-bottom-color: #ffffff;
}
.nav > .pull-right {
float: right;
}
.nav .nav-divider {
height: 1px;
margin: 9px 0;
@ -2860,6 +2865,15 @@ button.close {
margin-bottom: 0;
}
@media (max-width: 768px) {
.nav-collapse-scrollable {
max-height: 360px;
margin-bottom: 15px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
.navbar-brand {
display: block;
max-width: 200px;
@ -2923,10 +2937,17 @@ button.close {
.navbar-form .radio,
.navbar-form .checkbox {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-right-radius: 0;
@ -3067,7 +3088,6 @@ button.close {
border-radius: 0;
}
.navbar-nav.pull-right {
float: right;
width: auto;
}
.navbar-toggle {
@ -3110,12 +3130,28 @@ button.close {
color: #ffffff;
}
.btn .caret {
border-top-color: #ffffff;
.btn-default .caret {
border-top-color: #333333;
}
.dropup .btn .caret {
border-bottom-color: #ffffff;
.btn-primary .caret,
.btn-success .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret {
border-top-color: #fff;
}
.btn-default .dropup .caret {
border-bottom-color: #333333;
}
.btn-primary .dropup .caret,
.btn-success .dropup .caret,
.btn-warning .dropup .caret,
.btn-danger .dropup .caret,
.btn-info .dropup .caret {
border-bottom-color: #fff;
}
.btn-group,
@ -3142,6 +3178,11 @@ button.close {
z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
outline: none;
}
.btn-group .btn + .btn {
margin-left: -1px;
}
@ -3627,8 +3668,8 @@ button.close {
}
.tooltip.in {
opacity: 1;
filter: alpha(opacity=100);
opacity: 0.9;
filter: alpha(opacity=90);
}
.tooltip.top {
@ -3657,7 +3698,7 @@ button.close {
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.9);
background-color: #000000;
border-radius: 4px;
}
@ -3673,21 +3714,21 @@ button.close {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top-color: rgba(0, 0, 0, 0.9);
border-top-color: #000000;
border-width: 5px 5px 0;
}
.tooltip.top-left .tooltip-arrow {
bottom: 0;
left: 5px;
border-top-color: rgba(0, 0, 0, 0.9);
border-top-color: #000000;
border-width: 5px 5px 0;
}
.tooltip.top-right .tooltip-arrow {
right: 5px;
bottom: 0;
border-top-color: rgba(0, 0, 0, 0.9);
border-top-color: #000000;
border-width: 5px 5px 0;
}
@ -3695,7 +3736,7 @@ button.close {
top: 50%;
left: 0;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.9);
border-right-color: #000000;
border-width: 5px 5px 5px 0;
}
@ -3703,7 +3744,7 @@ button.close {
top: 50%;
right: 0;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.9);
border-left-color: #000000;
border-width: 5px 0 5px 5px;
}
@ -3711,21 +3752,21 @@ button.close {
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-color: rgba(0, 0, 0, 0.9);
border-bottom-color: #000000;
border-width: 0 5px 5px;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
left: 5px;
border-bottom-color: rgba(0, 0, 0, 0.9);
border-bottom-color: #000000;
border-width: 0 5px 5px;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
right: 5px;
border-bottom-color: rgba(0, 0, 0, 0.9);
border-bottom-color: #000000;
border-width: 0 5px 5px;
}
@ -4032,7 +4073,6 @@ a.thumbnail:focus {
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #999999;
border-radius: .25em;
}
@ -4041,6 +4081,14 @@ a.thumbnail:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.label-default {
background-color: #999999;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #808080;
}
@ -4408,9 +4456,9 @@ a.list-group-item.active > .badge,
bottom: 10px;
left: 50%;
z-index: 15;
width: 120px;
width: 60%;
padding-left: 0;
margin-left: -60px;
margin-left: -30%;
text-align: center;
list-style: none;
}
@ -4510,11 +4558,11 @@ a.list-group-item.active > .badge,
}
.pull-right {
float: right;
float: right !important;
}
.pull-left {
float: left;
float: left !important;
}
.hide {

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

8
dist/js/bootstrap.js vendored
View File

@ -1503,7 +1503,13 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
$tip.removeClass('fade top bottom left right in')
$tip.find('.popover-title:empty').hide()
// Hide empty titles
//
// IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
// this manually by checking the contents.
if ($tip.find('.popover-title').html() === '') {
$tip.find('.popover-title').hide();
}
}
Popover.prototype.hasContent = function () {

2
dist/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
javascript.html
View File

@ -963,16 +963,16 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<h4>Four directions</h4>
<div class="bs-example tooltip-demo">
<div class="bs-example-tooltips">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<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.">
Popover on left
</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<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.">
Popover on top
</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<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.">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<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.">
Popover on right
</button>
</div>

8
js/popover.js
View File

@ -58,7 +58,13 @@
$tip.removeClass('fade top bottom left right in')
$tip.find('.popover-title:empty').hide()
// Hide empty titles
//
// IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
// this manually by checking the contents.
if ($tip.find('.popover-title').html() === '') {
$tip.find('.popover-title').hide();
}
}
Popover.prototype.hasContent = function () {

4
less/alerts.less
View File

@ -7,7 +7,7 @@
// -------------------------
.alert {
padding: 15px 35px 15px 15px;
padding: @alert-padding (@alert-padding + 20) @alert-padding @alert-padding;
margin-bottom: @line-height-computed;
color: @alert-text;
background-color: @alert-bg;
@ -26,7 +26,7 @@
}
// Provide class for links that match alerts
.alert-link {
font-weight: bold;
font-weight: @alert-link-font-weight;
color: darken(@alert-text, 10%);
}

6
less/badges.less
View File

@ -9,14 +9,14 @@
min-width: 10px;
padding: 3px 7px;
font-size: @font-size-small;
font-weight: bold;
font-weight: @badge-font-weight;
color: @badge-color;
line-height: 1;
line-height: @badge-line-height;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
background-color: @badge-bg;
border-radius: 10px;
border-radius: @badge-border-radius;
// Empty labels/badges collapse
&:empty {

37
less/button-groups.less
View File

@ -3,11 +3,32 @@
// --------------------------------------------------
// Button carets
.btn .caret {
border-top-color: @btn-default-color;
//
// Match the button text color to the arrow/caret for indicating dropdown-ness.
.caret {
.btn-default & {
border-top-color: @btn-default-color;
}
.btn-primary &,
.btn-success &,
.btn-warning &,
.btn-danger &,
.btn-info & {
border-top-color: #fff;
}
}
.dropup .btn .caret {
border-bottom-color: @btn-default-color;
.dropup .caret {
.btn-default & {
border-bottom-color: @btn-default-color;
}
.btn-primary &,
.btn-success &,
.btn-warning &,
.btn-danger &,
.btn-info & {
border-bottom-color: #fff;
}
}
// Make the div behave like a button
@ -26,6 +47,10 @@
&.active {
z-index: 2;
}
&:focus {
// Remove focus outline when dropdown JS adds it after closing the menu
outline: none;
}
}
}
@ -119,11 +144,11 @@
}
// Carets in other button sizes
.btn-lg .caret {
border-width: 5px;
border-width: @caret-width-large;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
border-bottom-width: 5px;
border-bottom-width: @caret-width-large;
}

6
less/buttons.less
View File

@ -12,7 +12,7 @@
padding: @padding-base-vertical @padding-base-horizontal;
margin-bottom: 0; // For input.btn
font-size: @font-size-base;
font-weight: 500;
font-weight: @btn-font-weight;
line-height: @line-height-base;
text-align: center;
vertical-align: middle;
@ -28,7 +28,7 @@
&:hover,
&:focus {
color: @btn-hover-color;
color: @btn-default-color;
text-decoration: none;
}
@ -110,7 +110,7 @@
fieldset[disabled] & {
&:hover,
&:focus {
color: @gray-dark;
color: @btn-link-disabled-color;
text-decoration: none;
}
}

15
less/carousel.less
View File

@ -69,9 +69,9 @@
top: 0;
left: 0;
bottom: 0;
width: 15%;
.opacity(.5);
font-size: 20px;
width: @carousel-control-width;
.opacity(@carousel-control-opacity);
font-size: @carousel-control-font-size;
color: @carousel-control-color;
text-align: center;
text-shadow: @carousel-text-shadow;
@ -127,14 +127,17 @@
}
// Optional indicator pips
// -----------------------------
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 120px;
margin-left: -60px;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;

2
less/close.less
View File

@ -6,7 +6,7 @@
.close {
float: right;
font-size: (@font-size-base * 1.5);
font-weight: bold;
font-weight: @close-font-weight;
line-height: 1;
color: @close-color;
text-shadow: @close-text-shadow;

6
less/dropdowns.less
View File

@ -11,9 +11,9 @@
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid @dropdown-caret-color;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top: @caret-width-base solid @dropdown-caret-color;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
content: "";
}

23
less/forms.less
View File

@ -266,6 +266,17 @@ textarea {
}
// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.
.form-control-static {
margin-bottom: 0; // Remove default margin from `p`
padding-top: @padding-base-vertical;
}
// Help text
//
// Apply to any element you wish to create light text for placement immediately
@ -290,10 +301,20 @@ textarea {
.checkbox {
display: inline-block;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match (which also avoids
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
.radio,
.checkbox {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
}
@ -306,7 +327,7 @@ textarea {
.form-horizontal .control-label,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 9px;
padding-top: @padding-base-vertical;
}
.form-horizontal {

2
less/grid.less
View File

@ -92,7 +92,7 @@
.col-12 { width: 100%; }
// Small device columns (phones to tablets)
@media (min-width: @screen-tablet) {
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.container {
max-width: @container-tablet;
}

5
less/input-groups.less
View File

@ -44,11 +44,10 @@
// Text input groups
// -------------------------
.input-group-addon {
.box-sizing(border-box);
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
font-weight: normal;
line-height: @line-height-base;
line-height: 1;
text-align: center;
background-color: @gray-lighter;
border: 1px solid @input-group-addon-border-color;
@ -59,13 +58,11 @@
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
line-height: @line-height-small;
}
&.input-lg {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
line-height: @line-height-large;
}
// Nuke default margins from checkboxes and radios to vertically center within.

7
less/labels.less
View File

@ -12,7 +12,6 @@
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: @gray-light;
border-radius: .25em;
// Add hover effects, but only for links
@ -22,13 +21,17 @@
color: @label-link-hover-color;
text-decoration: none;
cursor: pointer;
background-color: darken(@gray-light, 10%);
}
}
}
// Colors
// Contextual variations (linked labels get darker on :hover)
.label-default {
.label-variant(@label-default-bg);
}
.label-danger {
.label-variant(@label-danger-bg);
}

9
less/mixins.less
View File

@ -235,7 +235,7 @@
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-color: @end-color;
background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
@ -249,7 +249,7 @@
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-color: @end-color;
background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
@ -372,8 +372,9 @@
&:focus,
&:active,
&.active {
background-color: darken(@background, 5%);
border-color: darken(@border, 10%);
color: @color;
background-color: darken(@background, 8%);
border-color: darken(@border, 12%);
}
&.disabled,

22
less/navbar.less
View File

@ -82,6 +82,8 @@
}
.navbar-fixed-top {
top: 0;
.nav-collapse {
}
}
.navbar-fixed-bottom {
bottom: 0;
@ -89,6 +91,25 @@
}
// Scrollable navbar navigation
//
// Sometimes you might have too many links in your fixed navbar and you need to
// maintain access to all that content. To help, add `.nav-collapse-scrollable`
// to your `.nav-collapse` to prevent the the content from flowing past the max-
// height of your browser.
//
// This is not automatically added to the `.navbar-fixed-top` because it causes
// z-index bugs in iOS7 (possibly earlier).
@media (max-width: @screen-small) {
.nav-collapse-scrollable {
margin-bottom: @navbar-padding-vertical;
max-height: 360px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
//
// Navbar optional components
@ -318,7 +339,6 @@
}
&.pull-right {
float: right;
width: auto;
}
}

6
less/navs.less
View File

@ -56,12 +56,6 @@
}
}
// Redeclare pull classes because of specificity
// Todo: consider making these utilities !important to avoid this bullshit
> .pull-right {
float: right;
}
// Dividers (basically an hr) within the dropdown
.nav-divider {
.nav-divider();

2
less/tables.less
View File

@ -162,7 +162,7 @@ table {
> th.active,
&.active > td,
&.active > th {
background-color: @table-bg-hover;
background-color: @table-bg-active;
}
> td.success,
> th.success,

2
less/tooltip.less
View File

@ -13,7 +13,7 @@
line-height: 1.4;
.opacity(0);
&.in { .opacity(1); }
&.in { .opacity(.9); }
&.top { margin-top: -3px; padding: 5px 0; }
&.right { margin-left: 3px; padding: 0 5px; }
&.bottom { margin-top: 3px; padding: 5px 0; }

32
less/type.less
View File

@ -141,18 +141,25 @@ dt {
dd {
margin-left: 0; // Undo browser default
}
// Horizontal layout (like forms)
.dl-horizontal {
dt {
float: left;
width: (@component-offset-horizontal - 20);
clear: left;
text-align: right;
.text-overflow();
}
dd {
.clearfix(); // Clear the floated `dt` if an empty `dd` is present
margin-left: @component-offset-horizontal;
// Horizontal description lists
//
// Defaults to being stacked without any of the below styles applied, until the
// grid breakpoint is reached (default of ~768px).
@media (min-width: @grid-float-breakpoint) {
.dl-horizontal {
dt {
float: left;
width: (@component-offset-horizontal - 20);
clear: left;
text-align: right;
.text-overflow();
}
dd {
margin-left: @component-offset-horizontal;
.clearfix(); // Clear the floated `dt` if an empty `dd` is present
}
}
}
@ -195,7 +202,6 @@ blockquote {
// Float right with text-align: right
&.pull-right {
float: right;
padding-right: 15px;
padding-left: 0;
border-right: 5px solid @blockquote-border-color;

4
less/utilities.less
View File

@ -10,10 +10,10 @@
.clearfix();
}
.pull-right {
float: right;
float: right !important;
}
.pull-left {
float: left;
float: left !important;
}

64
less/variables.less
View File

@ -78,6 +78,8 @@
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
// Tables
// -------------------------
@ -96,31 +98,33 @@
// Buttons
// -------------------------
@btn-default-color: #fff;
@btn-default-bg: #474949;
@btn-default-border: @btn-default-bg;
@btn-font-weight: bold;
@btn-primary-color: @btn-default-color;
@btn-default-color: #333;
@btn-default-bg: #fff;
@btn-default-border: #ccc;
@btn-primary-color: #fff;
@btn-primary-bg: @brand-primary;
@btn-primary-border: @btn-primary-bg;
@btn-primary-border: darken(@btn-primary-bg, 5%);
@btn-success-color: @btn-default-color;
@btn-success-color: #fff;
@btn-success-bg: @brand-success;
@btn-success-border: @btn-success-bg;
@btn-success-border: darken(@btn-success-bg, 5%);
@btn-warning-color: @btn-default-color;
@btn-warning-color: #fff;
@btn-warning-bg: @brand-warning;
@btn-warning-border: @btn-warning-bg;
@btn-warning-border: darken(@btn-warning-bg, 5%);
@btn-danger-color: @btn-default-color;
@btn-danger-color: #fff;
@btn-danger-bg: @brand-danger;
@btn-danger-border: @btn-danger-bg;
@btn-danger-border: darken(@btn-danger-bg, 5%);
@btn-info-color: @btn-default-color;
@btn-info-color: #fff;
@btn-info-bg: @brand-info;
@btn-info-border: @btn-info-bg;
@btn-info-border: darken(@btn-info-bg, 5%);
@btn-hover-color: @btn-default-color;
@btn-link-disabled-color: @gray-light;
// Forms
@ -193,14 +197,16 @@
@screen-medium: 992px;
@screen-desktop: @screen-medium;
// So media queries don't overlap when required, provide a maximum
@screen-small-max: (@screen-medium - 1);
@screen-tablet-max: @screen-small-max;
// Large screen / wide desktop
@screen-large: 1200px;
@screen-large-desktop: @screen-large;
// So media queries don't overlap when required, provide a maximum
@screen-small-max: (@screen-medium - 1);
@screen-tablet-max: (@screen-desktop - 1);
@screen-desktop-max: (@screen-large-desktop - 1);
// Grid system
// --------------------------------------------------
@ -352,7 +358,7 @@
// -------------------------
@tooltip-max-width: 200px;
@tooltip-color: #fff;
@tooltip-bg: rgba(0,0,0,.9);
@tooltip-bg: #000;
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;
@ -377,6 +383,8 @@
// Labels
// -------------------------
@label-default-bg: @gray-light;
@label-success-bg: @brand-success;
@label-info-bg: @brand-info;
@label-warning-bg: @brand-warning;
@ -404,10 +412,13 @@
// Alerts
// -------------------------
@alert-padding: 15px;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-bg: @state-warning-bg;
@alert-text: @state-warning-text;
@alert-border: @state-warning-border;
@alert-border-radius: @border-radius-base;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@ -500,11 +511,15 @@
// -------------------------
@badge-color: #fff;
@badge-link-hover-color: #fff;
@badge-bg: @gray-light;
@badge-active-color: @link-color;
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
// Breadcrumbs
// -------------------------
@ -515,12 +530,16 @@
// Carousel
// ------------------------
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
@carousel-control-width: 15%;
@carousel-control-opacity: .5;
@carousel-control-font-size: 20px;
@carousel-indicator-border-color: #fff;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
@ -528,6 +547,7 @@
// Close
// ------------------------
@close-color: #000;
@close-font-weight: bold;
@close-text-shadow: 0 1px 0 #fff;