rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-26 18:52:18 +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-07-27 23:53:23 -07:00
commit 841711f2f6
21 changed files with 664 additions and 622 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.editorconfig
View File

@ -9,6 +9,3 @@ end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[Makefile]
indent_style = tab

3
Gruntfile.js
View File

@ -1,4 +1,6 @@
/* jshint node: true */
module.exports = function(grunt) {
"use strict";
// Project configuration.
grunt.initConfig({
@ -26,6 +28,7 @@ module.exports = function(grunt) {
},
jshint: {
options: {
ignores: [],// HACK: workaround https://github.com/gruntjs/grunt-contrib-jshint/issues/86
jshintrc: 'js/.jshintrc'
},
gruntfile: {

4
README.md
View File

@ -1,4 +1,4 @@
# [Bootstrap v3.0.0](http://getbootstrap.com) [![Build Status](https://secure.travis-ci.org/twitter/bootstrap.png)](http://travis-ci.org/twitter/bootstrap)
# [Bootstrap v3.0.0](http://getbootstrap.com) [![Build Status](https://secure.travis-ci.org/twbs/bootstrap.png)](http://travis-ci.org/twbs/bootstrap)
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat).
@ -39,7 +39,7 @@ Learn more about using Jekyll by reading their [documentation](http://jekyllrb.c
### Documentation for previous releases
Documentation for v2.3.3 has been made available for the time being at [http://getbootstrap.com/2.3.3/](http://getbootstrap.com/2.3.3/) while folks transition to Bootstrap 3.
Documentation for v2.3.2 has been made available for the time being at [http://getbootstrap.com/2.3.2/](http://getbootstrap.com/2.3.2/) while folks transition to Bootstrap 3.
[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.

11
_includes/nav-components.html
View File

@ -25,6 +25,17 @@
<li><a href="#btn-dropdowns-dropup">Dropup variation</a></li>
</ul>
</li>
<li>
<a href="#input-groups">Input groups</a>
<ul class="nav">
<li><a href="#input-groups-basic">Basic input group</a></li>
<li><a href="#input-groups-sizes">Sizing options</a></li>
<li><a href="#input-groups-checkboxes-radios">Checkbox and radios addons</a></li>
<li><a href="#input-groups-buttons">Button addons</a></li>
<li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li>
<li><a href="#input-groups-buttons-segmented">Segmented buttons</a></li>
</ul>
</li>
<li>
<a href="#nav">Navs</a>
<ul class="nav">

1
_includes/nav-css.html
View File

@ -57,7 +57,6 @@
<li><a href="#forms-horizontal">Horizontal variation</a></li>
<li><a href="#forms-controls">Supported controls</a></li>
<li><a href="#forms-control-states">Control states</a></li>
<li><a href="#forms-input-groups">Input groups</a></li>
<li><a href="#forms-control-sizes">Control sizing</a></li>
<li><a href="#forms-help-text">Help text</a></li>
</ul>

3
_layouts/default.html
View File

@ -48,9 +48,6 @@
</div>
<!-- Quick back to top -->
<a href="#" class="bs-top">Back to top</a>
<!-- Footer
================================================== -->
<footer class="bs-footer">

25
assets/css/docs.css
View File

@ -749,11 +749,6 @@ input.focused {
margin-bottom: 5px;
}
/* Hide the top link initially */
.bs-top {
display: none;
}
/* Responsive variations
-------------------------------------------------- */
@ -768,26 +763,6 @@ input.focused {
/* Tablets and up */
@media screen and (min-width: 768px) {
/* Back to top link */
.bs-top {
display: block; /* Unhide */
float: left;
padding: 7px 15px;
font-weight: 500;
color: #999;
background-color: #eee;
border-radius: 4px;
}
.bs-top:hover {
color: #fff;
text-decoration: none;
background-color: #999;
}
.bs-top.affix {
position: fixed;
right: 15px;
bottom: 15px;
}
.bs-header {
font-size: 21px;
text-align: left;

2
assets/js/application.js
View File

@ -22,7 +22,7 @@
$(document.body).on('click', '.bs-sidenav [href^=#]', function (e) {
var $target = $(this.getAttribute('href'))
e.preventDefault() // prevent browser scroll
// e.preventDefault() // prevent browser scroll
document.body.scrollTop =
$target.offset().top -

308
components.html
View File

@ -477,6 +477,314 @@ base_url: "../"
<!-- Input groups
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="input-groups">Input groups</h1>
</div>
<p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a <code>.form-control</code>.</p>
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
</div>
<div class="bs-callout bs-callout-info">
<h4>Tooltips &amp; popovers in input groups require special setting</h4>
<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
<h2 id="input-groups-basic">Basic input group</h2>
<form class="bs-example bs-example-form">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
</form>
{% highlight html %}
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
{% endhighlight %}
<h2 id="input-groups-sizes">Optional sizes</h2>
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
<form class="bs-example bs-example-form">
<div class="input-group">
<span class="input-group-addon input-large">@</span>
<input type="text" class="form-control input-large" placeholder="Username">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group">
<span class="input-group-addon input-small">@</span>
<input type="text" class="form-control input-small" placeholder="Username">
</div>
</form>
{% highlight html %}
<div class="input-group">
<span class="input-group-addon input-large">@</span>
<input type="text" class="form-control input-large" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon input-small">@</span>
<input type="text" class="form-control input-small" placeholder="Username">
</div>
{% endhighlight %}
<h2 id="input-groups-checkboxes-radios">Checkboxes and radio buttons</h2>
<p>Place any checkbox or radio option within an input group's addon instead of text.</p>
<form class="bs-example bs-example-form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
{% highlight html %}
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
{% endhighlight %}
<h2 id="input-groups-buttons">Buttons instead of text</h2>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-example bs-example-form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
{% highlight html %}
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
{% endhighlight %}
<h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
<p></p>
<form class="bs-example bs-example-form">
<div class="row">
<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 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<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 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
{% highlight html %}
<div class="row">
<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 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<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 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
{% endhighlight %}
<h2 id="input-groups-buttons-segmented">Segmented dropdown groups</h2>
<form class="bs-example bs-example-form">
<div class="row">
<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">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<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">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
{% highlight html %}
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-group">
<!-- Button and dropdown menu -->
</div>
</div>
{% endhighlight %}
<!-- Navs
================================================== -->
<div class="bs-docs-section">

257
css.html
View File

@ -94,7 +94,7 @@ base_url: "../"
</th>
<th>
Medium-large grid
<small>Destkops (&gt;768px)</small>
<small>Desktops (&gt;768px)</small>
</th>
</tr>
</thead>
@ -1466,7 +1466,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
<p>While Bootstrap will apply these styles in all browsers, IE and Safari 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">
@ -1533,259 +1533,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2 id="forms-input-groups">Input groups</h3>
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
</div>
<div class="bs-callout bs-callout-info">
<h4>Tooltips &amp; popovers in input groups require special setting</h4>
<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
<form class="bs-example bs-example-form">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
</form>
{% highlight html %}
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
{% endhighlight %}
<h3>Optional sizes</h3>
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
<form class="bs-example bs-example-form">
<div class="input-group">
<span class="input-group-addon input-large">@</span>
<input type="text" class="form-control input-large" placeholder="Username">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group">
<span class="input-group-addon input-small">@</span>
<input type="text" class="form-control input-small" placeholder="Username">
</div>
</form>
{% highlight html %}
<div class="input-group">
<span class="input-group-addon input-large">@</span>
<input type="text" class="form-control input-large" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon input-small">@</span>
<input type="text" class="form-control input-small" placeholder="Username">
</div>
{% endhighlight %}
<h3>Buttons instead of text</h3>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-example bs-example-form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
{% highlight html %}
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
{% endhighlight %}
<h3>Button dropdowns</h3>
<p></p>
<form class="bs-example bs-example-form">
<div class="row">
<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 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<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 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
{% highlight html %}
<div class="row">
<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 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<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 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
{% endhighlight %}
<h3>Segmented dropdown groups</h3>
<form class="bs-example bs-example-form">
<div class="row">
<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">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<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">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
{% highlight html %}
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-group">
<!-- Button and dropdown menu -->
</div>
</div>
{% endhighlight %}
<h2 id="forms-control-sizes">Control sizing</h2>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-lg-*</code> classes.</p>

7
customize.html
View File

@ -104,6 +104,13 @@ base_url: "../"
<h3>Components</h3>
<div class="row">
<div class="col-lg-4">
<div class="checkbox">
<label>
<input type="checkbox" checked value="input-groups.less">
Input groups
</label>
</div>
<h4>Navigation</h4>
<div class="checkbox">
<label>

336
dist/css/bootstrap.css vendored
View File

@ -1541,165 +1541,6 @@ select.input-small {
color: #737373;
}
.input-group {
display: table;
border-collapse: separate;
}
.input-group.col {
float: none;
padding-right: 0;
padding-left: 0;
}
.input-group .form-control {
width: 100%;
margin-bottom: 0;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon {
padding: 8px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
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-small {
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
}
.input-group-addon.input-large {
padding: 14px 16px;
font-size: 18px;
border-radius: 6px;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.input-group-addon:last-child {
border-left: 0;
}
.input-group-btn {
position: relative;
white-space: nowrap;
}
.input-group-btn > .btn {
position: relative;
}
.input-group-btn > .btn + .btn {
margin-left: -4px;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:active {
z-index: 2;
}
.form-inline .form-control,
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
}
.form-inline .radio,
.form-inline .checkbox {
margin-top: 0;
margin-bottom: 0;
}
.form-horizontal .control-label {
padding-top: 6px;
}
.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
display: table;
content: " ";
}
.form-horizontal .form-group:after {
clear: both;
}
.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
display: table;
content: " ";
}
.form-horizontal .form-group:after {
clear: both;
}
@media (min-width: 768px) {
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
}
.form-horizontal .form-group .row {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
}
}
.btn {
display: inline-block;
padding: 8px 12px;
@ -2037,6 +1878,170 @@ input[type="button"].btn-block {
transition: height 0.35s ease;
}
.input-group {
display: table;
border-collapse: separate;
}
.input-group.col {
float: none;
padding-right: 0;
padding-left: 0;
}
.input-group .form-control {
width: 100%;
margin-bottom: 0;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon {
padding: 8px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
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-small {
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
}
.input-group-addon.input-large {
padding: 14px 16px;
font-size: 18px;
border-radius: 6px;
}
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
margin-top: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.input-group-addon:last-child {
border-left: 0;
}
.input-group-btn {
position: relative;
white-space: nowrap;
}
.input-group-btn > .btn {
position: relative;
}
.input-group-btn > .btn + .btn {
margin-left: -4px;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:active {
z-index: 2;
}
.form-inline .form-control,
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
}
.form-inline .radio,
.form-inline .checkbox {
margin-top: 0;
margin-bottom: 0;
}
.form-horizontal .control-label {
padding-top: 9px;
}
.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
display: table;
content: " ";
}
.form-horizontal .form-group:after {
clear: both;
}
.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
display: table;
content: " ";
}
.form-horizontal .form-group:after {
clear: both;
}
@media (min-width: 768px) {
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
}
.form-horizontal .form-group .row {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
}
}
.caret {
display: inline-block;
width: 0;
@ -2458,10 +2463,6 @@ button.close {
background-color: transparent;
}
.nav > li + .nav-header {
margin-top: 9px;
}
.nav.open > a,
.nav.open > a:hover,
.nav.open > a:focus {
@ -3365,13 +3366,11 @@ button.close {
}
.modal-dialog {
position: relative;
top: 0;
right: 0;
left: 0;
z-index: 1050;
width: auto;
padding: 10px;
margin-right: auto;
margin-left: auto;
}
.modal-content {
@ -3470,10 +3469,9 @@ button.close {
.modal-dialog {
right: auto;
left: 50%;
width: 560px;
width: 600px;
padding-top: 30px;
padding-bottom: 30px;
margin-left: -280px;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

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

File diff suppressed because one or more lines are too long

2
getting-started.html
View File

@ -44,7 +44,7 @@ base_url: "../"
<p>The folks over at <a href="https://www.netdna.com/">NetDNA</a> have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p>
{% highlight html linenos %}
<!-- Latest compiled and minified CSS -->
<link href="{{ site.cdn_css }}">
<link rel="stylesheet" href="{{ site.cdn_css }}">
<!-- Latest compiled and minified JavaScript -->
<script src="{{ site.cdn_js }}"></script>

4
javascript.html
View File

@ -790,7 +790,7 @@ $('#example').tooltip(options)
<td>placement</td>
<td>string | function</td>
<td>'top'</td>
<td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
<td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
</tr>
<tr>
<td>selector</td>
@ -1012,7 +1012,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<td>placement</td>
<td>string | function</td>
<td>'right'</td>
<td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
<td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
</tr>
<tr>
<td>selector</td>

2
js/.jshintrc
View File

@ -3,9 +3,11 @@
"laxcomma" : true,
"laxbreak" : true,
"browser" : true,
"eqeqeq" : false,
"eqnull" : true,
"debug" : true,
"devel" : true,
"curly" : false,
"boss" : true,
"expr" : true,
"asi" : true

1
less/bootstrap.less vendored
View File

@ -28,6 +28,7 @@
// Components: common
@import "component-animations.less";
@import "input-groups.less";
@import "dropdowns.less";
@import "list-group.less";
@import "panels.less";

148
less/forms.less
View File

@ -273,151 +273,3 @@ select {
margin-bottom: 10px;
color: lighten(@text-color, 25%); // lighten the text some for contrast
}
// Input groups
// --------------------------------------------------
// Base styles
// -------------------------
.input-group {
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
// Undo padding and float of grid classes
&.col {
float: none;
padding-left: 0;
padding-right: 0;
}
.form-control {
width: 100%;
margin-bottom: 0;
}
}
// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
// 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;
text-align: center;
background-color: @gray-lighter;
border: 1px solid @input-group-addon-border-color;
border-radius: @border-radius-base;
&.input-small {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
&.input-large {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
}
// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
.border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
}
// Button input groups
// -------------------------
.input-group-btn {
position: relative;
white-space: nowrap;
}
.input-group-btn > .btn {
position: relative;
// Jankily prevent input button groups from wrapping
+ .btn {
margin-left: -4px;
}
// Bring the "active" button to the front
&:hover,
&:active {
z-index: 2;
}
}
// Inline forms
// --------------------------------------------------
.form-inline {
.form-control,
.radio,
.checkbox {
display: inline-block;
}
.radio,
.checkbox {
margin-top: 0;
margin-bottom: 0;
}
}
// Horizontal forms
// --------------------------------------------------
// Horizontal forms are built on grid classes.
.form-horizontal .control-label {
padding-top: 6px;
}
.form-horizontal {
.form-group {
.make-row();
}
}
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-tablet) {
.form-horizontal .control-label {
text-align: right;
}
}

153
less/input-groups.less Normal file
View File

@ -0,0 +1,153 @@
//
// Input groups
// --------------------------------------------------
// Base styles
// -------------------------
.input-group {
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
// Undo padding and float of grid classes
&.col {
float: none;
padding-left: 0;
padding-right: 0;
}
.form-control {
width: 100%;
margin-bottom: 0;
}
}
// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
// 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;
text-align: center;
background-color: @gray-lighter;
border: 1px solid @input-group-addon-border-color;
border-radius: @border-radius-base;
// Sizing
&.input-small {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
&.input-large {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
.border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
}
// Button input groups
// -------------------------
.input-group-btn {
position: relative;
white-space: nowrap;
}
.input-group-btn > .btn {
position: relative;
// Jankily prevent input button groups from wrapping
+ .btn {
margin-left: -4px;
}
// Bring the "active" button to the front
&:hover,
&:active {
z-index: 2;
}
}
// Inline forms
// --------------------------------------------------
.form-inline {
.form-control,
.radio,
.checkbox {
display: inline-block;
}
.radio,
.checkbox {
margin-top: 0;
margin-bottom: 0;
}
}
// Horizontal forms
// --------------------------------------------------
// Horizontal forms are built on grid classes.
.form-horizontal .control-label {
padding-top: 9px;
}
.form-horizontal {
.form-group {
.make-row();
}
}
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-tablet) {
.form-horizontal .control-label {
text-align: right;
}
}

9
less/modals.less
View File

@ -34,10 +34,8 @@
// Shell div to position the modal with bottom padding
.modal-dialog {
position: relative;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: auto;
padding: 10px;
z-index: (@zindex-modal-background + 10);
@ -124,8 +122,7 @@
.modal-dialog {
left: 50%;
right: auto;
width: 560px;
margin-left: -280px;
width: 600px;
padding-top: 30px;
padding-bottom: 30px;
}

5
less/navs.less
View File

@ -39,11 +39,6 @@
cursor: not-allowed;
}
}
// Space the headers out when they follow another list item (link)
+ .nav-header {
margin-top: 9px;
}
}
// Open dropdowns