aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2014-01-05 17:49:40 -0800
committerMark Otto <[email protected]>2014-01-05 17:49:40 -0800
commited5c7baaf1e17ba87a18a0ebb13dacb6e8e8bb03 (patch)
tree11907c9251b0b8b07ebdedf5e144fd66fa71d81d
parent0b75e2d73848ee754fef5543393821d574d5a683 (diff)
parent1d0bf580c99e9b03a4219c8aa4e313808bccbf10 (diff)
downloadbootstrap-ed5c7baaf1e17ba87a18a0ebb13dacb6e8e8bb03.tar.xz
bootstrap-ed5c7baaf1e17ba87a18a0ebb13dacb6e8e8bb03.zip
Merge branch 'master' into docs_derp
-rw-r--r--.travis.yml2
-rw-r--r--_config.yml2
-rw-r--r--docs/about.html2
-rw-r--r--docs/assets/js/application.js2
-rw-r--r--docs/components.html344
-rw-r--r--docs/css.html8
-rw-r--r--docs/examples/dashboard/index.html4
-rw-r--r--docs/examples/navbar/index.html68
-rw-r--r--docs/getting-started.html10
-rw-r--r--docs/javascript.html144
-rw-r--r--less/forms.less2
11 files changed, 304 insertions, 284 deletions
diff --git a/.travis.yml b/.travis.yml
index be6353802..5eccbe3a5 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,6 +1,6 @@
language: node_js
node_js:
- - 0.10
+ - "0.10"
before_install:
- time sudo pip install --use-mirrors -r test-infra/requirements.txt
- rvm use 1.9.3 --fuzzy
diff --git a/_config.yml b/_config.yml
index e4d64c79f..14d1f6455 100644
--- a/_config.yml
+++ b/_config.yml
@@ -16,6 +16,7 @@ url: http://localhost:9001
# Custom vars
current_version: 3.0.3
repo: https://github.com/twbs/bootstrap
+sass_repo: https://github.com/twbs/bootstrap-sass
download:
source: https://github.com/twbs/bootstrap/archive/v3.0.3.zip
@@ -24,7 +25,6 @@ download:
blog: http://blog.getbootstrap.com
expo: http://expo.getbootstrap.com
-sass_repo: https://github.com/twbs/bootstrap-sass
cdn:
css: //netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
diff --git a/docs/about.html b/docs/about.html
index 463d8fc3b..2f8efe8ea 100644
--- a/docs/about.html
+++ b/docs/about.html
@@ -174,7 +174,7 @@ lead: "Learn about the history of Bootstrap, meet the core team, and check out t
<div class="page-header">
<h1 id="translations">Translations</h1>
</div>
- <p class="lead">Community members have translated Bootstrap's documentation into various langauges. None are officially supported and may not always be up to date.</p>
+ <p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and may not always be up to date.</p>
<ul>
<li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
<li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 4a6cd0ef3..0b8409076 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -24,7 +24,7 @@
'@-ms-viewport{width:auto!important}'
)
);
- document.getElementsByTagName('head')[0].
+ document.querySelector('head').
appendChild(msViewportStyle);
}
diff --git a/docs/components.html b/docs/components.html
index 61b2d8188..b864d594d 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1271,108 +1271,112 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
- <!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Brand</a>
- </div>
+ <div class="container-fluid">
+ <!-- Brand and toggle get grouped for better mobile display -->
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Brand</a>
+ </div>
- <!-- Collect the nav links, forms, and other content for toggling -->
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul class="nav navbar-nav">
- <li class="active"><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu" role="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>
- <li class="divider"></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </li>
- </ul>
- <form class="navbar-form navbar-left" role="search">
- <div class="form-group">
- <input type="text" class="form-control" placeholder="Search">
- </div>
- <button type="submit" class="btn btn-default">Submit</button>
- </form>
- <ul class="nav navbar-nav navbar-right">
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu" role="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>
- </li>
- </ul>
- </div><!-- /.navbar-collapse -->
+ <!-- Collect the nav links, forms, and other content for toggling -->
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+ <ul class="nav navbar-nav">
+ <li class="active"><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu" role="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>
+ <li class="divider"></li>
+ <li><a href="#">One more separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="navbar-form navbar-left" role="search">
+ <div class="form-group">
+ <input type="text" class="form-control" placeholder="Search">
+ </div>
+ <button type="submit" class="btn btn-default">Submit</button>
+ </form>
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu" role="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>
+ </li>
+ </ul>
+ </div><!-- /.navbar-collapse -->
+ </div><!-- /.container-fluid -->
</nav>
</div>
{% highlight html %}
<nav class="navbar navbar-default" role="navigation">
- <!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Brand</a>
- </div>
+ <div class="container-fluid">
+ <!-- Brand and toggle get grouped for better mobile display -->
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Brand</a>
+ </div>
- <!-- Collect the nav links, forms, and other content for toggling -->
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul class="nav navbar-nav">
- <li class="active"><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <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>
- <li class="divider"></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </li>
- </ul>
- <form class="navbar-form navbar-left" role="search">
- <div class="form-group">
- <input type="text" class="form-control" placeholder="Search">
- </div>
- <button type="submit" class="btn btn-default">Submit</button>
- </form>
- <ul class="nav navbar-nav navbar-right">
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <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>
- </li>
- </ul>
- </div><!-- /.navbar-collapse -->
+ <!-- Collect the nav links, forms, and other content for toggling -->
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+ <ul class="nav navbar-nav">
+ <li class="active"><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <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>
+ <li class="divider"></li>
+ <li><a href="#">One more separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="navbar-form navbar-left" role="search">
+ <div class="form-group">
+ <input type="text" class="form-control" placeholder="Search">
+ </div>
+ <button type="submit" class="btn btn-default">Submit</button>
+ </form>
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <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>
+ </li>
+ </ul>
+ </div><!-- /.navbar-collapse -->
+ </div><!-- /.container-fluid -->
</nav>
{% endhighlight %}
@@ -1392,22 +1396,24 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Brand</a>
- </div>
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
- <form class="navbar-form navbar-left" role="search">
- <div class="form-group">
- <input type="text" class="form-control" placeholder="Search">
- </div>
- <button type="submit" class="btn btn-default">Submit</button>
- </form>
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Brand</a>
+ </div>
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
+ <form class="navbar-form navbar-left" role="search">
+ <div class="form-group">
+ <input type="text" class="form-control" placeholder="Search">
+ </div>
+ <button type="submit" class="btn btn-default">Submit</button>
+ </form>
+ </div>
</div>
</nav>
</div>
@@ -1422,7 +1428,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<div class="bs-callout bs-callout-warning">
<h4>Mobile device caveats</h4>
- <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="{{ site.baseurl }}getting-started#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
+ <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
</div>
<div class="bs-callout bs-callout-danger">
@@ -1435,17 +1441,19 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<p>Add the <code>.navbar-btn</code> class to <code>&lt;button&gt;</code> elements not residing in a <code>&lt;form&gt;</code> to vertically center them in the navbar.</p>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <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>
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <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>
+ </div>
</div>
</nav>
</div>
@@ -1455,24 +1463,26 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<div class="bs-callout bs-callout-warning">
<h4>Context-specific usage</h4>
- <p>Like the standard <a href="{{ site.baseurl }}css#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code>&lt;a&gt;</code> and <code>&lt;input&gt;</code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code>&lt;a&gt;</code> elements within <code>.navbar-nav</code>.</p>
+ <p>Like the standard <a href="../css/#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code>&lt;a&gt;</code> and <code>&lt;input&gt;</code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code>&lt;a&gt;</code> elements within <code>.navbar-nav</code>.</p>
</div>
<h2 id="navbar-text">Text</h2>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Brand</a>
- </div>
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
- <p class="navbar-text">Signed in as Mark Otto</p>
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Brand</a>
+ </div>
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
+ <p class="navbar-text">Signed in as Mark Otto</p>
+ </div>
</div>
</nav>
</div>
@@ -1485,17 +1495,19 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Brand</a>
- </div>
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
- <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Brand</a>
+ </div>
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
+ <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
+ </div>
</div>
</nav>
</div>
@@ -1638,25 +1650,27 @@ body { padding-bottom: 70px; }
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-example">
<nav class="navbar navbar-inverse" role="navigation">
- <!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Brand</a>
- </div>
+ <div class="container-fluid">
+ <!-- Brand and toggle get grouped for better mobile display -->
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Brand</a>
+ </div>
- <!-- Collect the nav links, forms, and other content for toggling -->
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
- <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>
- </ul>
- </div><!-- /.navbar-collapse -->
+ <!-- Collect the nav links, forms, and other content for toggling -->
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
+ <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>
+ </ul>
+ </div><!-- /.navbar-collapse -->
+ </div><!-- /.container-fluid -->
</nav>
</div><!-- /example -->
{% highlight html %}
diff --git a/docs/css.html b/docs/css.html
index 35184cd2c..424145776 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -2552,7 +2552,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="helper-classes-screen-readers">Screen reader content</h3>
- <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Necessary for following <a href="{{ site.baseurl }}getting-started#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
+ <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Necessary for following <a href="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
{% highlight html %}
<a class="sr-only" href="#content">Skip to main content</a>
{% endhighlight %}
@@ -2820,7 +2820,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<p class="lead">Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
- <p>Grid variables and mixins are covered <a href="{{ site.baseurl }}css/#grid-less">within the Grid system section</a>.</p>
+ <p>Grid variables and mixins are covered <a href="#grid-less">within the Grid system section</a>.</p>
<h2 id="less-bootstrap">Compiling Bootstrap</h2>
@@ -2828,7 +2828,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>
<h2 id="less-variables">Variables</h2>
- <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="{{ site.baseurl }}customize/#less-variables-section">the Customizer</a>.</p>
+ <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="../customize/#less-variables-section">the Customizer</a>.</p>
<h3 id="less-variables-colors">Colors</h3>
<p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
@@ -3466,7 +3466,7 @@ Bootstrap.javascripts_path
@import "bootstrap/theme";
{% endhighlight %}
- <p>The full list of Bootstrap variables can be found <a href="{{ page.url }}customize/#less-variables">in the Customizer</a>. You can override these by simply redefining the variable before the <code>@import</code> directive, e.g.:</p>
+ <p>The full list of Bootstrap variables can be found <a href="../customize/#less-variables">in the Customizer</a>. You can override these by simply redefining the variable before the <code>@import</code> directive, e.g.:</p>
{% highlight sass %}
$navbar-default-bg: #312312;
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index b85e41a13..d06644878 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -55,7 +55,7 @@
<div class="container-fluid">
<div class="row">
- <div class="col-sm-3 sidebar">
+ <div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview</a></li>
<li><a href="#">Reports</a></li>
@@ -75,7 +75,7 @@
<li><a href="">Another nav item</a></li>
</ul>
</div>
- <div class="col-sm-9 col-sm-offset-3 main">
+ <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
diff --git a/docs/examples/navbar/index.html b/docs/examples/navbar/index.html
index 2ff133f7d..3abc93cca 100644
--- a/docs/examples/navbar/index.html
+++ b/docs/examples/navbar/index.html
@@ -32,39 +32,41 @@
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Project name</a>
- </div>
- <div class="navbar-collapse collapse">
- <ul class="nav navbar-nav">
- <li class="active"><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <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 class="dropdown-header">Nav header</li>
- <li><a href="#">Separated link</a></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </li>
- </ul>
- <ul class="nav navbar-nav navbar-right">
- <li class="active"><a href="./">Default</a></li>
- <li><a href="../navbar-static-top/">Static top</a></li>
- <li><a href="../navbar-fixed-top/">Fixed top</a></li>
- </ul>
- </div><!--/.nav-collapse -->
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Project name</a>
+ </div>
+ <div class="navbar-collapse collapse">
+ <ul class="nav navbar-nav">
+ <li class="active"><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <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 class="dropdown-header">Nav header</li>
+ <li><a href="#">Separated link</a></li>
+ <li><a href="#">One more separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+ <li class="active"><a href="./">Default</a></li>
+ <li><a href="../navbar-static-top/">Static top</a></li>
+ <li><a href="../navbar-fixed-top/">Fixed top</a></li>
+ </ul>
+ </div><!--/.nav-collapse -->
+ </div><!--/.container-fluid -->
</div>
<!-- Main component for a primary marketing message or call to action -->
diff --git a/docs/getting-started.html b/docs/getting-started.html
index ecd23781f..cf3ee6119 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -111,7 +111,7 @@ bootstrap/
<div class="page-header">
<h1 id="template">Basic template</h1>
</div>
- <p class="lead">Start with this basic HTML template, or modify <a href="../getting-started#examples">these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p>
+ <p class="lead">Start with this basic HTML template, or modify <a href="#examples">these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p>
<p>Copy the HTML below to begin working with a minimal Bootstrap document.</p>
{% highlight html %}
@@ -294,7 +294,7 @@ bootstrap/
<img src="../examples/screenshots/non-responsive.jpg" alt="">
</a>
<h4>Non-responsive Bootstrap</h4>
- <p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
+ <p>Easily disable the responsiveness of Bootstrap <a href="#disable-responsive">per our docs</a>.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/offcanvas/">
@@ -857,7 +857,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
"@-ms-viewport{width:auto!important}"
)
)
- document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
+ document.querySelector("head").appendChild(msViewportStyle)
}
{% endhighlight %}
<p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
@@ -1007,12 +1007,12 @@ if (isAndroid) {
<li>Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes</li>
<li>Use Bootstrap in packages or distributions that you create</li>
<li>Modify the source code</li>
- <li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the lincense</li>
+ <li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li>
</ul>
<h4>It forbids you to:</h4>
<ul>
- <li>Hold the authors and license owners liable for damanges as Bootstrap is provided without warranty</li>
+ <li>Hold the authors and license owners liable for damages as Bootstrap is provided without warranty</li>
<li>Hold the creators or copyright holders of Bootstrap liable</li>
<li>Redistribute any piece of Bootstrap without proper attribution</li>
<li>Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution</li>
diff --git a/docs/javascript.html b/docs/javascript.html
index 3bceb6751..d7035d661 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -109,7 +109,7 @@ $('#myModal').on('show.bs.modal', function (e) {
</div>
<div class="bs-callout bs-callout-warning">
<h4>Mobile device caveats</h4>
- <p>There are some caveats regarding using modals on mobile devices. <a href="{{ site.baseurl }}getting-started#fixed-position-keyboards">See our browser support docs</a> for details.</p>
+ <p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
</div>
<h3>Static example</h3>
@@ -431,51 +431,53 @@ $('#myModal').on('hidden.bs.modal', function (e) {
<h3>Within a navbar</h3>
<div class="bs-example">
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
- <div class="navbar-header">
- <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Project Name</a>
- </div>
- <div class="collapse navbar-collapse bs-js-navbar-collapse">
- <ul class="nav navbar-nav">
- <li class="dropdown">
- <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
- </ul>
- </li>
- </ul>
- <ul class="nav navbar-nav navbar-right">
- <li id="fat-menu" class="dropdown">
- <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
- </ul>
- </li>
- </ul>
- </div><!-- /.nav-collapse -->
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Project Name</a>
+ </div>
+ <div class="collapse navbar-collapse bs-js-navbar-collapse">
+ <ul class="nav navbar-nav">
+ <li class="dropdown">
+ <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+ </ul>
+ </li>
+ <li class="dropdown">
+ <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+ <li id="fat-menu" class="dropdown">
+ <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- /.nav-collapse -->
+ </div><!-- /.container-fluid -->
</nav> <!-- /navbar-example -->
</div> <!-- /example -->
@@ -606,29 +608,31 @@ $('#myDropdown').on('show.bs.dropdown', function () {
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-example">
<nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
- <div class="navbar-header">
- <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Project Name</a>
- </div>
- <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
- <ul class="nav navbar-nav">
- <li><a href="#fat">@fat</a></li>
- <li><a href="#mdo">@mdo</a></li>
- <li class="dropdown">
- <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
- <li><a href="#one" tabindex="-1">one</a></li>
- <li><a href="#two" tabindex="-1">two</a></li>
- <li class="divider"></li>
- <li><a href="#three" tabindex="-1">three</a></li>
- </ul>
- </li>
- </ul>
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Project Name</a>
+ </div>
+ <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
+ <ul class="nav navbar-nav">
+ <li><a href="#fat">@fat</a></li>
+ <li><a href="#mdo">@mdo</a></li>
+ <li class="dropdown">
+ <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
+ <li><a href="#one" tabindex="-1">one</a></li>
+ <li><a href="#two" tabindex="-1">two</a></li>
+ <li class="divider"></li>
+ <li><a href="#three" tabindex="-1">three</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
@@ -795,7 +799,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
{% endhighlight %}
<h3>Markup</h3>
- <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="{{ site.baseurl }}components#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="{{ site.baseurl }}components#nav-pills">pill styling</a>.</p>
+ <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p>
{% highlight html %}
<!-- Nav tabs -->
<ul class="nav nav-tabs">
diff --git a/less/forms.less b/less/forms.less
index aefa5a462..34f970e2e 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -325,7 +325,7 @@ input[type="checkbox"],
.form-inline {
// Kick in the inline
- @media (min-width: @screen-sm) {
+ @media (min-width: @screen-sm-min) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;