diff options
Diffstat (limited to 'docs/_includes')
51 files changed, 825 insertions, 422 deletions
diff --git a/docs/_includes/components/alerts.html b/docs/_includes/components/alerts.html index 063c52cd5..749ecc2b4 100644 --- a/docs/_includes/components/alerts.html +++ b/docs/_includes/components/alerts.html @@ -32,17 +32,17 @@ <div class="alert alert-danger" role="alert">...</div> {% endhighlight %} - <h2 id="alerts-dismissable">Dismissable alerts</h2> - <p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p> + <h2 id="alerts-dismissible">Dismissible alerts</h2> + <p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p> <div class="bs-example"> - <div class="alert alert-warning alert-dismissable" role="alert"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> + <div class="alert alert-warning alert-dismissible" role="alert"> + <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> </div> {% highlight html %} -<div class="alert alert-warning alert-dismissable" role="alert"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> +<div class="alert alert-warning alert-dismissible" role="alert"> + <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> {% endhighlight %} diff --git a/docs/_includes/components/badges.html b/docs/_includes/components/badges.html index daa0636cb..95aea2e40 100644 --- a/docs/_includes/components/badges.html +++ b/docs/_includes/components/badges.html @@ -21,13 +21,13 @@ <h4>Adapts to active nav states</h4> <p>Built-in styles are included for placing badges in active states in pill navigations.</p> <div class="bs-example"> - <ul class="nav nav-pills"> + <ul class="nav nav-pills" role="tablist"> <li class="active"><a href="#">Home <span class="badge">42</span></a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages <span class="badge">3</span></a></li> </ul> <br> - <ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> + <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> @@ -48,7 +48,7 @@ </button> </div> {% highlight html %} -<ul class="nav nav-pills nav-stacked"> +<ul class="nav nav-pills nav-stacked" role="tablist"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> diff --git a/docs/_includes/components/button-dropdowns.html b/docs/_includes/components/button-dropdowns.html index d4ae0450f..165e0777e 100644 --- a/docs/_includes/components/button-dropdowns.html +++ b/docs/_includes/components/button-dropdowns.html @@ -246,7 +246,7 @@ <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span> </button> - <ul class="dropdown-menu"> + <ul class="dropdown-menu" role="menu"> ... </ul> </div> @@ -256,7 +256,7 @@ <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> Small button <span class="caret"></span> </button> - <ul class="dropdown-menu"> + <ul class="dropdown-menu" role="menu"> ... </ul> </div> @@ -266,7 +266,7 @@ <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> Extra small button <span class="caret"></span> </button> - <ul class="dropdown-menu"> + <ul class="dropdown-menu" role="menu"> ... </ul> </div> @@ -313,7 +313,7 @@ <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> - <ul class="dropdown-menu"> + <ul class="dropdown-menu" role="menu"> <!-- Dropdown menu links --> </ul> </div> diff --git a/docs/_includes/components/button-groups.html b/docs/_includes/components/button-groups.html index b2f700528..018d66ed5 100644 --- a/docs/_includes/components/button-groups.html +++ b/docs/_includes/components/button-groups.html @@ -121,7 +121,7 @@ Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu"> + <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> @@ -194,7 +194,7 @@ </div> <div class="bs-callout bs-callout-warning"> <h4>IE8 and borders</h4> - <p>Internet Explorer 8 doesn't render borders in on buttons in a justified button group, whether it's on <code><a></code> or <code><button></code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p> + <p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code><a></code> or <code><button></code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p> <p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p> </div> diff --git a/docs/_includes/components/dropdowns.html b/docs/_includes/components/dropdowns.html index 6e44c45ba..4889c64f2 100644 --- a/docs/_includes/components/dropdowns.html +++ b/docs/_includes/components/dropdowns.html @@ -7,7 +7,7 @@ <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> @@ -22,7 +22,7 @@ </div><!-- /example --> {% highlight html %} <div class="dropdown"> - <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> @@ -56,7 +56,7 @@ <p>Add a header to label sections of actions in any dropdown menu.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> @@ -85,7 +85,7 @@ <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu3" data-toggle="dropdown"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> diff --git a/docs/_includes/components/glyphicons.html b/docs/_includes/components/glyphicons.html index 6900e0dfa..e87434137 100644 --- a/docs/_includes/components/glyphicons.html +++ b/docs/_includes/components/glyphicons.html @@ -21,6 +21,20 @@ <h4>Don't mix with other components</h4> <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p> </div> + <div class="bs-callout bs-callout-danger"> + <h4>Only for use on empty elements</h4> + <p>Icon classes should only be used on elements that contain no text content and have no child elements.</p> + </div> + <div class="bs-callout bs-callout-info"> + <h4>Changing the icon font location</h4> + <p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p> + <ul> + <li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li> + <li>Utilize the <a href="http://lesscss.org/usage/#command-line-usage-relative-urls">relative URLs option</a> provided by the Less compiler.</li> + <li>Change the <code>url()</code> paths in the compiled CSS.</li> + </ul> + <p>Use whatever option best suits your specific development setup.</p> + </div> {% highlight html %} <span class="glyphicon glyphicon-search"></span> {% endhighlight %} diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index e7ea9c064..4cfddad08 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -221,7 +221,7 @@ <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"> + <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> @@ -237,7 +237,7 @@ <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 dropdown-menu-right"> + <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> diff --git a/docs/_includes/components/labels.html b/docs/_includes/components/labels.html index bc2d5f9a2..05cf2fe81 100644 --- a/docs/_includes/components/labels.html +++ b/docs/_includes/components/labels.html @@ -32,4 +32,9 @@ <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> {% endhighlight %} + + <div class="bs-callout bs-callout-info"> + <h4>Have tons of labels?</h4> + <p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p> + </div> </div> diff --git a/docs/_includes/components/navbar.html b/docs/_includes/components/navbar.html index ab78e5853..2bacc282d 100644 --- a/docs/_includes/components/navbar.html +++ b/docs/_includes/components/navbar.html @@ -17,13 +17,17 @@ <h4>Requires JavaScript</h4> <p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p> </div> + <div class="bs-callout bs-callout-info"> + <h4>Changing the collapsed mobile navbar breakpoint</h4> + <p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p> + </div> <div class="bs-example"> <nav class="navbar navbar-default" role="navigation"> <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"> + <button type="button" class="navbar-toggle collapsed" 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> @@ -38,7 +42,7 @@ <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> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -59,7 +63,7 @@ <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> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -78,7 +82,7 @@ <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"> + <button type="button" class="navbar-toggle collapsed" 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> @@ -93,8 +97,8 @@ <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"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></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> @@ -114,8 +118,8 @@ <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"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></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> @@ -140,6 +144,32 @@ </div> + <h2 id="navbar-brand-image">Brand image</h2> + <p>Replace the navbar brand with your own image by swapping the text for an <code><img></code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p> + <div class="bs-example"> + <nav class="navbar navbar-default" role="navigation"> + <div class="container-fluid"> + <div class="navbar-header"> + <a class="navbar-brand" href="#"> + <img alt="Brand" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYCAYAAAAYwiAhAAAMU0lEQVR4AeyZzU4TARSFhx08ienKiAsSSymliEjpdBBqoUX++gMJupZC/6B0prPUhIRI4qvIwoUhxAU8gBKiS0kkYQW5npsUAZloy4xYp3fxJSxYDMOXc07uKETkGJmI6clo5iLYmtfMbXAwP2IeA2oNqo6Q0W6N40ykegC205HqFlgEHiedcECq6j0ItQGZDptcABGqXiLVQ7CRVo3OfyLYU1+uDQ+iQaqdyy8cD0Szj9fp2cM1SvSVaNxfoFhPnvD7LmDFEaLdzQP/Xfz/iQeKNNm/SjODZUqFK7/IZuykVV2Ldi+33YpgMLsLibV7LlUqbNDUwBrLxA8sMlkI1bwsWwHpcgiJEiWHL2RLRYzdlKp3/TXBkE4dXIWQ6gzQXKhC8b6iCPWfy2TF2CXGA3maGSpTGpKBs3TE2EyG9Q5HBYNYHki1f55YLJbI5A6hxuqERZsbrtREM/aRaB5HBEMl+hZGzCPsLd5WIpQL0skOif4SIcW4No9SquGzJRjkUpFaJzzeJwJFkckV6WSfWG+e9xmLdoJGU28kGOTyslzJYZ1i/rwLZJJ0soX3KlG8t9mh9ZpkurchwXBsu7Ogmd+SIcjVk2+5dBKZ6gPPAcnKfMpAXeqeugRDarVjb+0huVgukcldVWdDqKwVNcmQZKq+hzRr/6NgGc3c5M2FWhShWjadsg0R9S3zJmPJNn8rGB9RkV6nzg96SafmlYnJ2ibmz7Fgp/gS0GUpGH/+gVwfcYqQIS7p1BCjNeLBIqUi+i5+brsmGNJL4yOqC9JJZLoVoayZDa1TUq1o1wRDen3AhV5kcuEQty9T/cR6c5RS9Z0rgiG9OvFtUYRq8apjRh1genCNsMXuXwimma+QXpJOUnWN82DpGjH/Cgv2+qdguHl9lXSSqrupUFbgAPuF3UI9GnenBlal6qyRdLohiWCBkuGKB/VYfTHuz0vVMZJOjoH3wYI9V7D437ZSOskQd16mJ9bQTKj8Rpl+VH4v6SRVZ1soCyYHSu+URLD0WWSSqrMrkxXxYOGTMhEofJeqk3SyK9MFL8/hc8WxEuvJSzpJ1dmWyYqx7izxR24Z4pJOtmWyYtS7RIpUXeNIOtWP0tpVJ0P8Rzt39ptlEcVx/HDHPwJeIUvRondcSG3LoneiFKIXKG3ZRMGyaGSRVcJarKxuiUQWNxCI7DS2mFAEb0ohCg0mGilqgiiBPJ4M9SX1TF4Z3jnvb9r3TPK9NdF+cuZ5Z57HeJi4x2Rk06n3b3V4ULKnu6PUz5wuXejs9X1/tiPbv/eka8WCHdnMSW/3iekkQcko9enUh5fDd+zQt1njyp3ZC2MX9XpMstkZpb7VldI6z5PuvU2fA0DFweSLUn8QL8V1/drvbjtNfTrJZJT6gzh24aFtXLkzvekUEAEwGbDwrZOf0RaippMmMPyZk62766fOXxwyLKbwKOkzJwnMkI1ZmBIm0VMjekapH2DKZcieZ2R4UBKT7NWM8KAMWOg63XweP50kJm+U+vWKf9lavmB7cph8UeqXv/5lq4uPMECgFIEpYzJgYWvHps8AmMIi4HQyYBEe+GM8iGtGqb+aYiv/mj5xZYTppBel/hZm/mXrkw8OgTHJxo14JRel/uJc7MWXyLGuV3h6rOJfczu62+7+2Pz6Db+Gc6V410htHQmBkhEeEwCY/vUKH4a+6R7C+deeKrCbf/6Fx+Sr/G6U+jviCsCKfsWyf+8JTWPJYPJFKWGSqQBDXK+4aaa1ls3fVjxQ5WERGhQAGOy+jp/RAMAUplNABMYEAHYCevl7sf0KBJg+Jn+U+udQCsCg1ysbVnysDgyFaWz5LBHhMcnwwHRPxDWA4UH5o9Q/h1IABr+v421SFxgIky9KDRQAmAImADA8KG+U+udQsdc+Boa+rzvfdgEMTGBSi1L/HEoBmAIm7ARDYRI9KiPkdMIBw97VxQTGV1EpgRIRHhMYGOCKJeb9ZGvzORwm0csiCsCkDAoADHBfN61mRRZzbW/8FA/K05juKAAU4HpFFxjgvo6viw5mMdfE6tfxmPJEKX6sqQ8Mc/k7qfqN2NujEiYuHJM3SvBjzR5pAQNc/joQMdfUmuWA6RQWJfixpj4wwH3dvj1x3wk7eug0AFN4hMYEAKYJSsRTJvq519XOn92zV0qgRI/MdFGRtrrEgOnf182but5tiRqvSM+rX58kJl+EnE4AYO6PzlcrBbd0/tZc+/Ycz8XXQA4BL21cyWEa7YkA0ykoWz1wpQ5KRBJUWt/X2XLPXA4XHlN4lBImmQE7erA1q6legAEVIQqCALheKeWptXTeFiQmADDA9UopLv6hoIdJtRkiQk4nmaikH+pbT53L5tav7w2gRNXdEWA6BZXZcge1vF0mj8kXIaeTAQtaPNG+y2qqFiQJSjT8bgTBFHAibktunW/xNINj8oMSUWIfa4ps+de2xr3JYfJFYFAKwAyZxlYX3nQXATApADNkiOkkQclIH5MB014N9Wsh00kUDgz/OZTG/1+ef/YX0GVvQa9CK/w7TaiajwflifCY8hd78Ss1RTkR5196bvviowX3y097fbnnGAqTqCqXBJba93UawCAn4oxNc8o5xHXPLYViEpUxsIQwicboAEOeiLtJo7WOHGxVBSURCVAiSgXUGJkeMOwVC2+fm93E0ZhiEyrnF206yUKB4T+HUnhWOZ7E9cq65R/pHFts3FO06SSbJiI0Jjww3PVKC/8AiL3OtbUXbTpJUDICgEoRGOREnB/KNbZJGCZflPq3dfrAoPd1buLEXkvmbo671QVU+Z8o/EFcFZRIHxj0vs49M8VeO9//yo9JH5SIGE7K39dpHEiCMDlQooa6NfH/HXcfg2DyRXhMMn1guMtfX7EXX10VDKoyUgQFhQEGwAQAhgHFTe0RATChgcFBVfVMAxgEk2gYAwNgwgNL7L5OFVgRMfmi1D+H0geGv6+LvToYmCqoYfcfpf5tnS4w/H0dHlj4dAqJEgMl0gEmoaCuV5bMfRcATAWT6EmOksEEAAa4/BUdOdiiA0x/OglMslBggPs6fWDY+7qua79lsRejLT4mUb2L0sFUPGASEea+7ovdRzONxf/ceFtdACZfhPlYEwssAJPaificujVq7+ovaWiCYAoABrv8FSnd0+lf/oJw8UKCElGKH2vqA8Nd/q5d9qEqrnNn2iGYREPvRkBMIGBH9UH5Yblfd9pr68bdOUwAUCIKwAS4XsEBqywwPt9yf+yWU2fFxNL8dG18RQMCk6iiO0oMlCj24mMB8VV2R4QSWA6zxKQPqiJPBMUkCrhGsSWm15RnFxdtOuWvLpcEBr38NWAFnH0BMAlQIgrCBLivs3V/2/74itfCQClg8kVpYBIFALM1p3Y1ZDoFA8ODMmDhxxK7FKZTvAiAKeiYwFaeS+0DLVEexDVzwOCXv3my5V8tJ8+GTidIBJlOAdmSa8uGXVhMAREeUwgwO+ta3NCEBxUQBWCCfFtn696W+AwfReDRhEV4UFPzZMA62n/kqfVOr8A0akitiAIwQb6vM1i9BlMAMBAmX6V2In/4wDfZS+MX9VZQIlKYTgGYDBhPKr5HPJLNrl2dEqZoUXGmkwFjSDlMfMyA3/50QIkIjwn/Wi+HPxHHY1KJkKDSxyQzTGFRn8SEuvw1UCKyrc4wKfY3MYY/bDoZKKV+JQbyQ9KgDFOv64khU1yjhtZeIj4HO24P4oVmmHxVDKs7Tvw+WJNtdQaqAEz5gDXR6PIZtfYgHppNJ2+De1ZZVv8ijXt81iDb6mQ2nYJBiUaXT3+IsiwjRnHVtrr82XQKrpNt0b/AVtl0EhmmwlqVA1Y1fNpgm0621cWM/zsOzgHrnmLN9iBu0ylSzd2u7gFjPNW21dl0ilS1AMZY+nGtNp0MU4G1cv0EsG5kZdxtm0621T1gt7ky50kAyyGrW2ugbDo9YGtzlvIA68+dMUw2nQI7w/X3A5PIBnBdhsmm0312nRsoLXmB5ZCVczcMlGH6n25w5dKQBOZDVsXdNEwuwyS7yVUJOwJYfmQjw7dLm04lUBc3MmclHJh4Jmsr1elkmERt3ABhJRyY+HW5hrtjD+Il2x1unfi1WAAwEf+ByrgWw1RytfQ4RI0KTCLrx1VzzbbV9fmauerc9Y86MIltELeau9xnppN1hVvNPRxgQQGYxDaQm8w1cl9zF7ku7lZy08m6xXVxF7nDXCM3WR6YFtY/g9j2sjS1K/4AAAAASUVORK5CYII="> + </a> + </div> + </div> + </nav> + </div> +{% highlight html %} +<nav class="navbar navbar-default" role="navigation"> + <div class="container-fluid"> + <div class="navbar-header"> + <a class="navbar-brand" href="#"> + <img alt="Brand" src="..."> + </a> + </div> + </div> +</nav> +{% endhighlight %} + + <h2 id="navbar-forms">Forms</h2> <p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p> <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> @@ -147,7 +177,7 @@ <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> + <button type="button" class="navbar-toggle collapsed" 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> @@ -192,7 +222,7 @@ <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3"> + <button type="button" class="navbar-toggle collapsed" 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> @@ -221,7 +251,7 @@ <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4"> + <button type="button" class="navbar-toggle collapsed" 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> @@ -246,7 +276,7 @@ <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5"> + <button type="button" class="navbar-toggle collapsed" 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> @@ -282,7 +312,7 @@ <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --> <div class="container-fluid"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -326,7 +356,7 @@ body { padding-top: 70px; } <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --> <div class="container-fluid"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -371,7 +401,7 @@ body { padding-bottom: 70px; } <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --> <div class="container-fluid"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -407,7 +437,7 @@ body { padding-bottom: 70px; } <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"> + <button type="button" class="navbar-toggle collapsed" 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> diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html index 9cad335d0..5fcb1490c 100644 --- a/docs/_includes/components/navs.html +++ b/docs/_includes/components/navs.html @@ -6,14 +6,14 @@ <h2 id="nav-tabs">Tabs</h2> <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p> <div class="bs-example"> - <ul class="nav nav-tabs"> + <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> {% highlight html %} -<ul class="nav nav-tabs"> +<ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> @@ -27,14 +27,14 @@ <h2 id="nav-pills">Pills</h2> <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> <div class="bs-example"> - <ul class="nav nav-pills"> + <ul class="nav nav-pills" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> {% highlight html %} -<ul class="nav nav-pills"> +<ul class="nav nav-pills" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> @@ -42,14 +42,14 @@ {% endhighlight %} <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p> <div class="bs-example"> - <ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> + <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> {% highlight html %} -<ul class="nav nav-pills nav-stacked"> +<ul class="nav nav-pills nav-stacked" role="tablist"> ... </ul> {% endhighlight %} @@ -62,23 +62,23 @@ <p>As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p> </div> <div class="bs-example"> - <ul class="nav nav-tabs nav-justified"> + <ul class="nav nav-tabs nav-justified" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> <br> - <ul class="nav nav-pills nav-justified"> + <ul class="nav nav-pills nav-justified" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> {% highlight html %} -<ul class="nav nav-tabs nav-justified"> +<ul class="nav nav-tabs nav-justified" role="tablist"> ... </ul> -<ul class="nav nav-pills nav-justified"> +<ul class="nav nav-pills nav-justified" role="tablist"> ... </ul> {% endhighlight %} @@ -93,14 +93,14 @@ </div> <div class="bs-example"> - <ul class="nav nav-pills"> + <ul class="nav nav-pills" role="tablist"> <li><a href="#">Clickable link</a></li> <li><a href="#">Clickable link</a></li> <li class="disabled"><a href="#">Disabled link</a></li> </ul> </div> {% highlight html %} -<ul class="nav nav-pills"> +<ul class="nav nav-pills" role="tablist"> ... <li class="disabled"><a href="#">Disabled link</a></li> ... @@ -113,7 +113,7 @@ <h3>Tabs with dropdowns</h3> <div class="bs-example"> - <ul class="nav nav-tabs"> + <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Help</a></li> <li class="dropdown"> @@ -131,13 +131,13 @@ </ul> </div> {% highlight html %} -<ul class="nav nav-tabs"> +<ul class="nav nav-tabs" role="tablist"> ... <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> - <ul class="dropdown-menu"> + <ul class="dropdown-menu" role="menu"> ... </ul> </li> @@ -147,7 +147,7 @@ <h3>Pills with dropdowns</h3> <div class="bs-example"> - <ul class="nav nav-pills"> + <ul class="nav nav-pills" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Help</a></li> <li class="dropdown"> @@ -165,13 +165,13 @@ </ul> </div><!-- /example --> {% highlight html %} -<ul class="nav nav-pills"> +<ul class="nav nav-pills" role="tablist"> ... <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> - <ul class="dropdown-menu"> + <ul class="dropdown-menu" role="menu"> ... </ul> </li> diff --git a/docs/_includes/components/panels.html b/docs/_includes/components/panels.html index b00cd0f72..acf32c51c 100644 --- a/docs/_includes/components/panels.html +++ b/docs/_includes/components/panels.html @@ -22,6 +22,7 @@ <h3 id="panels-heading">Panel with heading</h3> <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code><h1></code>-<code><h6></code> with a <code>.panel-title</code> class to add a pre-styled heading.</p> + <p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p> <div class="bs-example"> <div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> diff --git a/docs/_includes/components/progress-bars.html b/docs/_includes/components/progress-bars.html index a78e2c881..d57c3fa7d 100644 --- a/docs/_includes/components/progress-bars.html +++ b/docs/_includes/components/progress-bars.html @@ -120,60 +120,60 @@ <h3 id="progress-striped">Striped</h3> <p>Uses a gradient to create a striped effect. Not available in IE8.</p> <div class="bs-example"> - <div class="progress progress-striped" > - <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> + <div class="progress"> + <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> - <div class="progress progress-striped"> - <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> + <div class="progress"> + <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> - <div class="progress progress-striped"> - <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> + <div class="progress"> + <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> - <div class="progress progress-striped"> - <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> + <div class="progress"> + <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> </div> {% highlight html %} -<div class="progress progress-striped"> - <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> +<div class="progress"> + <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> -<div class="progress progress-striped"> - <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> +<div class="progress"> + <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> -<div class="progress progress-striped"> - <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> +<div class="progress"> + <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> -<div class="progress progress-striped"> - <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> +<div class="progress"> + <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> {% endhighlight %} <h3 id="progress-animated">Animated</h3> - <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p> + <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p> <div class="bs-example"> - <div class="progress progress-striped active"> - <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div> + <div class="progress"> + <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div> </div> </div> {% highlight html %} -<div class="progress progress-striped active"> - <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> +<div class="progress"> + <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div> @@ -186,7 +186,7 @@ <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div> - <div class="progress-bar progress-bar-warning" style="width: 20%"> + <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 10%"> @@ -199,7 +199,7 @@ <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div> - <div class="progress-bar progress-bar-warning" style="width: 20%"> + <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 10%"> diff --git a/docs/_includes/components/responsive-embed.html b/docs/_includes/components/responsive-embed.html index bf65599d7..c9e0f5807 100644 --- a/docs/_includes/components/responsive-embed.html +++ b/docs/_includes/components/responsive-embed.html @@ -2,7 +2,7 @@ <h1 id="responsive-embed" class="page-header">Responsive embed</h1> <p>Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.</p> - <p>Rules are directly apply to <code><iframe></code>, <code><embed></code> and <code><object></code> elements, optionally use of an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p> + <p>Rules are directly applied to <code><iframe></code>, <code><embed></code>, and <code><object></code> elements; optionally use an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p> <p><strong>Pro-Tip!</strong> You don't need to include <code>frameborder="0"</code> in your <code><iframe></code>s as we override that for you.</p> <div class="bs-example"> <div class="embed-responsive embed-responsive-16by9"> diff --git a/docs/_includes/components/thumbnails.html b/docs/_includes/components/thumbnails.html index ecc53882f..3b6dfce43 100644 --- a/docs/_includes/components/thumbnails.html +++ b/docs/_includes/components/thumbnails.html @@ -46,7 +46,7 @@ <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> - <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail"> + <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> @@ -56,7 +56,7 @@ </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> - <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail"> + <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> @@ -66,7 +66,7 @@ </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> - <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail"> + <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> @@ -80,7 +80,7 @@ <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> - <img data-src="holder.js/300x200" alt="..."> + <img data-src="holder.js/300x300" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> diff --git a/docs/_includes/css/buttons.html b/docs/_includes/css/buttons.html index f6a131aaa..bfc5ded80 100644 --- a/docs/_includes/css/buttons.html +++ b/docs/_includes/css/buttons.html @@ -88,7 +88,7 @@ <h2 id="buttons-active">Active state</h2> - <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s should you need to replicate the active state progammatically.</p> + <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s should you need to replicate the active state programmatically.</p> <h3>Button element</h3> <p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p> @@ -173,6 +173,6 @@ <div class="bs-callout bs-callout-warning"> <h4>Cross-browser rendering</h4> <p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p> - <p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a Firefox bug</a> that prevents us from setting the <code>line-height</code> of <code><input></code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p> + <p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox <30</a> that prevents us from setting the <code>line-height</code> of <code><input></code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p> </div> </div> diff --git a/docs/_includes/css/code.html b/docs/_includes/css/code.html index 0d1396145..ba2edc151 100644 --- a/docs/_includes/css/code.html +++ b/docs/_includes/css/code.html @@ -13,10 +13,12 @@ For example, <code><section></code> should be wrapped as inline. <h2 id="code-user-input">User input</h2> <p>Use the <code><kbd></code> to indicate input that is typically entered via keyboard.</p> <div class="bs-example"> - To switch directories, type <kbd>cd</kbd> followed by the name of the directory. + To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> + To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> </div> {% highlight html %} - To switch directories, type <kbd>cd</kbd> followed by the name of the directory. +To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> +To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> {% endhighlight %} <h2 id="code-block">Basic block</h2> diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index eb2141cf1..08b3e77ae 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -49,17 +49,17 @@ <button type="submit" class="btn btn-default">Submit</button> </form> {% endhighlight %} - <div class="bs-callout bs-callout-warning"> - <h4>Don't mix form groups with input groups</h4> - <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p> - </div> + <div class="bs-callout bs-callout-warning"> + <h4>Don't mix form groups with input groups</h4> + <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p> + </div> <h2 id="forms-inline">Inline form</h2> <p>Add <code>.form-inline</code> to your <code><form></code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p> <div class="bs-callout bs-callout-danger"> <h4>Requires custom widths</h4> - <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p> + <p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p> </div> <div class="bs-callout bs-callout-warning"> <h4>Always add labels</h4> @@ -96,6 +96,12 @@ <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> + <div class="input-group"> + <div class="input-group-addon">@</div> + <input class="form-control" type="email" placeholder="Enter email"> + </div> + </div> + <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> @@ -207,7 +213,8 @@ {% endhighlight %} <h3>Checkboxes and radios</h3> - <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p> + <p>Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p> + <p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code><label></code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code><fieldset></code>.</p> <h4>Default (stacked)</h4> <div class="bs-example"> <form role="form"> @@ -217,6 +224,12 @@ Option one is this and that—be sure to include why it's great </label> </div> + <div class="checkbox disabled"> + <label> + <input type="checkbox" value="" disabled> + Option two is disabled + </label> + </div> <br> <div class="radio"> <label> @@ -230,6 +243,12 @@ Option two can be something else and selecting it will deselect option one </label> </div> + <div class="radio disabled"> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> + Option three is disabled + </label> + </div> </form> </div><!-- /.bs-example --> {% highlight html %} @@ -239,6 +258,12 @@ Option one is this and that—be sure to include why it's great </label> </div> +<div class="checkbox disabled"> + <label> + <input type="checkbox" value="" disabled> + Option two is disabled + </label> +</div> <div class="radio"> <label> @@ -252,9 +277,15 @@ Option two can be something else and selecting it will deselect option one </label> </div> +<div class="radio disabled"> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> + Option three is disabled + </label> +</div> {% endhighlight %} - <h4>Inline checkboxes</h4> + <h4>Inline checkboxes and radios</h4> <p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of checkboxes or radios for controls that appear on the same line.</p> <div class="bs-example"> <form role="form"> @@ -268,6 +299,18 @@ <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label> </form> + <br> + <form role="form"> + <label class="radio-inline"> + <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 + </label> + <label class="radio-inline"> + <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 + </label> + <label class="radio-inline"> + <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3 + </label> + </form> </div><!-- /.bs-example --> {% highlight html %} <label class="checkbox-inline"> @@ -279,6 +322,16 @@ <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label> + +<label class="radio-inline"> + <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 +</label> +<label class="radio-inline"> + <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 +</label> +<label class="radio-inline"> + <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3 +</label> {% endhighlight %} <h3>Selects</h3> @@ -468,6 +521,30 @@ <label class="control-label" for="inputError1">Input with error</label> <input type="text" class="form-control" id="inputError1"> </div> + <div class="has-success"> + <div class="checkbox"> + <label> + <input type="checkbox" id="checkboxSuccess" value="option1"> + Checkbox with success + </label> + </div> + </div> + <div class="has-warning"> + <div class="checkbox"> + <label> + <input type="checkbox" id="checkboxWarning" value="option1"> + Checkbox with warning + </label> + </div> + </div> + <div class="has-error"> + <div class="checkbox"> + <label> + <input type="checkbox" id="checkboxError" value="option1"> + Checkbox with error + </label> + </div> + </div> </form> </div><!-- /.bs-example --> {% highlight html %} @@ -483,13 +560,37 @@ <label class="control-label" for="inputError1">Input with error</label> <input type="text" class="form-control" id="inputError1"> </div> +<div class="has-success"> + <div class="checkbox"> + <label> + <input type="checkbox" id="checkboxSuccess" value="option1"> + Checkbox with success + </label> + </div> +</div> +<div class="has-warning"> + <div class="checkbox"> + <label> + <input type="checkbox" id="checkboxWarning" value="option1"> + Checkbox with warning + </label> + </div> +</div> +<div class="has-error"> + <div class="checkbox"> + <label> + <input type="checkbox" id="checkboxError" value="option1"> + Checkbox with error + </label> + </div> +</div> {% endhighlight %} <h3>With optional icons</h3> <p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p> <div class="bs-callout bs-callout-warning"> <h4>Icons, labels, and input groups</h4> - <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. For inputs without labels, adjust the <code>top</code>value. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p> + <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p> </div> <div class="bs-example"> <form role="form"> @@ -528,7 +629,7 @@ </div> {% endhighlight %} - <p>Optional icons also work on horizontal and inline forms.</p> + <h4>Optional icons in horizontal and inline forms</h4> <div class="bs-example"> <form class="form-horizontal" role="form"> <div class="form-group has-success has-feedback"> @@ -571,6 +672,23 @@ </form> {% endhighlight %} + <h4>Optional icons with hidden <code>.sr-only</code> labels</h4> + <p>For form controls with no visible label, add the <code>.sr-only</code> class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.</p> + <div class="bs-example"> + <div class="form-group has-success has-feedback"> + <label class="control-label sr-only" for="inputSuccess5">Hidden label</label> + <input type="text" class="form-control" id="inputSuccess5"> + <span class="glyphicon glyphicon-ok form-control-feedback"></span> + </div> + </div> +{% highlight html %} +<div class="form-group has-success has-feedback"> + <label class="control-label sr-only" for="inputSuccess5">Hidden label</label> + <input type="text" class="form-control" id="inputSuccess5"> + <span class="glyphicon glyphicon-ok form-control-feedback"></span> +</div> +{% endhighlight %} + <h2 id="forms-control-sizes">Control sizing</h2> <p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p> @@ -606,6 +724,42 @@ <select class="form-control input-sm">...</select> {% endhighlight %} + <h3>Horizontal form group sizes</h3> + <p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p> + <div class="bs-example"> + <form class="form-horizontal" role="form"> + <div class="form-group form-group-lg"> + <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label> + <div class="col-sm-10"> + <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"> + </div> + </div> + <div class="form-group form-group-sm"> + <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label> + <div class="col-sm-10"> + <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"> + </div> + </div> + </form> + </div><!-- /.bs-example --> +{% highlight html %} +<form class="form-horizontal" role="form"> + <div class="form-group form-group-lg"> + <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label> + <div class="col-sm-10"> + <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"> + </div> + </div> + <div class="form-group form-group-sm"> + <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label> + <div class="col-sm-10"> + <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"> + </div> + </div> +</form> +{% endhighlight %} + + <h3>Column sizing</h3> <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p> <div class="bs-example"> diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html index 992612e85..429ef90f9 100644 --- a/docs/_includes/css/grid.html +++ b/docs/_includes/css/grid.html @@ -13,6 +13,7 @@ <li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li> <li>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.</li> <li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li> + <li>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</li> <li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</li> </ul> <p>Look to the examples for applying these principles to your code.</p> @@ -67,49 +68,49 @@ </thead> <tbody> <tr> - <th>Grid behavior</th> + <th class="text-nowrap">Grid behavior</th> <td>Horizontal at all times</td> <td colspan="3">Collapsed to start, horizontal above breakpoints</td> </tr> <tr> - <th>Container width</th> + <th class="text-nowrap">Container width</th> <td>None (auto)</td> <td>750px</td> <td>970px</td> <td>1170px</td> </tr> <tr> - <th>Class prefix</th> + <th class="text-nowrap">Class prefix</th> <td><code>.col-xs-</code></td> <td><code>.col-sm-</code></td> <td><code>.col-md-</code></td> <td><code>.col-lg-</code></td> </tr> <tr> - <th># of columns</th> + <th class="text-nowrap"># of columns</th> <td colspan="4">12</td> </tr> <tr> - <th>Column width</th> + <th class="text-nowrap">Column width</th> <td class="text-muted">Auto</td> <td>~62px</td> <td>~81px</td> <td>~97px</td> </tr> <tr> - <th>Gutter width</th> + <th class="text-nowrap">Gutter width</th> <td colspan="4">30px (15px on each side of a column)</td> </tr> <tr> - <th>Nestable</th> + <th class="text-nowrap">Nestable</th> <td colspan="4">Yes</td> </tr> <tr> - <th>Offsets</th> + <th class="text-nowrap">Offsets</th> <td colspan="4">Yes</td> </tr> <tr> - <th>Column ordering</th> + <th class="text-nowrap">Column ordering</th> <td colspan="4">Yes</td> </tr> </tbody> @@ -254,6 +255,23 @@ </div> {% endhighlight %} + <h3 id="grid-example-wrapping">Example: Column wrapping</h3> + <p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p> + <div class="bs-docs-grid"> + <div class="row show-grid"> + <div class="col-xs-9">.col-xs-9</div> + <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> + <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> + </div> + </div> +{% highlight html %} +<div class="row"> + <div class="col-xs-9">.col-xs-9</div> + <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> + <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> +</div> +{% endhighlight %} + <h3 id="grid-responsive-resets">Responsive column resets</h3> <p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="#responsive-utilities">responsive utility classes</a>.</p> <div class="bs-docs-grid"> @@ -329,30 +347,30 @@ <h3 id="grid-nesting">Nesting columns</h3> - <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12 or less.</p> + <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p> <div class="row show-grid"> - <div class="col-md-9"> - Level 1: .col-md-9 + <div class="col-sm-9"> + Level 1: .col-sm-9 <div class="row show-grid"> - <div class="col-md-6"> - Level 2: .col-md-6 + <div class="col-xs-8 col-sm-6"> + Level 2: .col-xs-8 .col-sm-6 </div> - <div class="col-md-6"> - Level 2: .col-md-6 + <div class="col-xs-4 col-sm-6"> + Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div> {% highlight html %} <div class="row"> - <div class="col-md-9"> - Level 1: .col-md-9 + <div class="col-sm-9"> + Level 1: .col-sm-9 <div class="row"> - <div class="col-md-6"> - Level 2: .col-md-6 + <div class="col-xs-8 col-sm-6"> + Level 2: .col-xs-8 .col-sm-6 </div> - <div class="col-md-6"> - Level 2: .col-md-6 + <div class="col-xs-4 col-sm-6"> + Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> diff --git a/docs/_includes/css/helpers.html b/docs/_includes/css/helpers.html index e787a3103..9b7223740 100644 --- a/docs/_includes/css/helpers.html +++ b/docs/_includes/css/helpers.html @@ -40,15 +40,18 @@ <p class="bg-warning">...</p> <p class="bg-danger">...</p> {% endhighlight %} - + <div class="bs-callout bs-callout-info"> + <h4>Dealing with specificity</h4> + <p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code><div></code> with the class.</p> + </div> <h3 id="helper-classes-close">Close icon</h3> <p>Use the generic close icon for dismissing content like modals and alerts.</p> <div class="bs-example"> - <p><button type="button" class="close" aria-hidden="true">×</button></p> + <p><button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button></p> </div> {% highlight html %} -<button type="button" class="close" aria-hidden="true">×</button> +<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> {% endhighlight %} @@ -113,7 +116,7 @@ <h3 id="helper-classes-clearfix">Clearfix</h3> - <p>Clear the <code>float</code> on any element with the <code>.clearfix</code> class. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p> + <p>Easily clear <code>float</code>s by adding <code>.clearfix</code> <strong>to the parent element</strong>. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p> {% highlight html %} <!-- Usage as a class --> <div class="clearfix">...</div> diff --git a/docs/_includes/css/images.html b/docs/_includes/css/images.html index 4e0fc4a77..78f4c65b8 100644 --- a/docs/_includes/css/images.html +++ b/docs/_includes/css/images.html @@ -3,6 +3,10 @@ <h2 id="images-responsive">Responsive images</h2> <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p> + <div class="bs-callout bs-callout-warning"> + <h4>SVG images and IE 8-10</h4> + <p>In Internet Explorer IE 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p> + </div> {% highlight html %} <img src="..." class="img-responsive" alt="Responsive image"> {% endhighlight %} diff --git a/docs/_includes/css/less.html b/docs/_includes/css/less.html index b6d46da29..b325ea9eb 100644 --- a/docs/_includes/css/less.html +++ b/docs/_includes/css/less.html @@ -7,7 +7,7 @@ <h2 id="less-bootstrap">Compiling Bootstrap</h2> - <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="https://github.com/twbs/bootstrap#compiling-css-and-javascript">visit the README</a> for how to setup your development environment to run the necessary commands.</p> + <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="../getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p> <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> @@ -28,7 +28,7 @@ @gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 -@gray-light: lighten(#000, 60%); // #999 +@gray-light: lighten(#000, 46.7%); // #777 @gray-lighter: lighten(#000, 93.5%); // #eee {% endhighlight %} @@ -76,7 +76,7 @@ {% highlight scss %} // Variables @link-color: @brand-primary; -@link-color-hover: darken(@link-color, 15%); +@link-hover-color: darken(@link-color, 15%); // Usage a { @@ -84,12 +84,12 @@ a { text-decoration: none; &:hover { - color: @link-color-hover; + color: @link-hover-color; text-decoration: underline; } } {% endhighlight %} - <p>Note that the <code>@link-color-hover</code> uses a function, another awesome tool from Less, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p> + <p>Note that the <code>@link-hover-color</code> uses a function, another awesome tool from Less, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p> <h3 id="less-variables-typography">Typography</h3> <p>Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.</p> @@ -378,10 +378,10 @@ a { {% highlight scss %} #gradient > .striped(#333; 45deg); {% endhighlight %} - <p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:</p> + <p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:</p> {% highlight scss %} -#gradient > .vertical-three-colors(#777; #333; .25; #000); -#gradient > .horizontal-three-colors(#777; #333; .25; #000); +#gradient > .vertical-three-colors(#777; #333; 25%; #000); +#gradient > .horizontal-three-colors(#777; #333; 25%; #000); {% endhighlight %} <p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using the <code>.reset-filter()</code> mixin alongside <code>background-image: none;</code>.</p> diff --git a/docs/_includes/css/responsive-utilities.html b/docs/_includes/css/responsive-utilities.html index 260eea3cc..666c0bce7 100644 --- a/docs/_includes/css/responsive-utilities.html +++ b/docs/_includes/css/responsive-utilities.html @@ -93,7 +93,7 @@ </table> </div> - <p>As of v3.2, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p> + <p>As of v3.2.0, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> @@ -119,7 +119,7 @@ </table> </div> <p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p> - <p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code><table></code>-related elements.</p> + <p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2.0</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code><table></code>-related elements.</p> <h2 id="responsive-utilities-print">Print classes</h2> <p>Similar to the regular responsive classes, use these for toggling content for print.</p> @@ -150,7 +150,7 @@ </tbody> </table> </div> - <p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.1.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code><table></code>-related elements.</p> + <p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.2.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code><table></code>-related elements.</p> <h2 id="responsive-utilities-tests">Test cases</h2> diff --git a/docs/_includes/css/rtl.html b/docs/_includes/css/rtl.html deleted file mode 100644 index 050c429b1..000000000 --- a/docs/_includes/css/rtl.html +++ /dev/null @@ -1,20 +0,0 @@ -<div class="bs-docs-section"> - <h1 id="rtl" class="page-header">RTL</h1> - <p class="lead">As of Bootstrap 3.2, a right-to-left version of Bootstrap ships as part of the repository. It's powered by Twitter's <a href="https://github.com/twitter/css-flip">CSS Flip project</a> and is generated via our Gruntfile.</p> - - <h2 id="rtl-how-to">How to use</h2> - <p>Bootstrap is by default a left-to-right project. For right-to-left projects, you'll need to set your language and replace the default Bootstrap CSS with an RTL version. First, set your language and text direction:</p> -{% highlight html %} -<!-- Example: Arabic language with direction set to RTL --> -<html lang="ar" dir="rtl"> -{% endhighlight %} - <p>Then, include the right-to-left CSS file in place of the default Bootstrap CSS:</p> -{% highlight html %} -<!-- Bootstrap RTL --> -<link rel="stylesheet" href="bootstrap-rtl.css"> -{% endhighlight %} - <p>Alternatively, you may use the minified RTL file, <code>bootstrap-rtl.min.css</code>.</p> - - <h2 id="rtl-css-flip">CSS Flip</h2> - <p><a href="https://github.com/twitter/css-flip">CSS Flip</a> is a project for converting left-to-right CSS files into right-to-left CSS files. We use it in our Gruntfile to automate the generation of Bootstrap's RTL CSS files.</p> -</div> diff --git a/docs/_includes/css/tables.html b/docs/_includes/css/tables.html index 99db2af72..655545112 100644 --- a/docs/_includes/css/tables.html +++ b/docs/_includes/css/tables.html @@ -348,7 +348,19 @@ <h2 id="tables-responsive">Responsive tables</h2> - <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p> + <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p> + + <div class="bs-callout bs-callout-warning"> + <h4>Firefox and fieldsets</h4> + <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p> +{% highlight css %} +@-moz-document url-prefix() { + fieldset { display: table-cell; } +} +{% endhighlight %} + <p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p> + </div> + <div class="bs-example"> <div class="table-responsive"> <table class="table"> diff --git a/docs/_includes/css/type.html b/docs/_includes/css/type.html index 9c5aee200..6eca026de 100644 --- a/docs/_includes/css/type.html +++ b/docs/_includes/css/type.html @@ -107,12 +107,12 @@ <!-- Inline text elements --> <h2 id="type-inline-text">Inline text elements</h2> <h3>Marked text</h3> - <p>For indicating blocks of text that have been deleted use the <code><mark></code> tag.</p> + <p>For highlighting a run of text due to its relevance in another context, use the <code><mark></code> tag.</p> <div class="bs-example"> <p>You can use the mark tag to <mark>highlight</mark> text.</p> </div> {% highlight html %} -<mark>This line of text is meant to be treated as deleted text.</mark> +You can use the mark tag to <mark>highlight</mark> text. {% endhighlight %} @@ -146,10 +146,10 @@ <h3>Underlined text</h3> <p>To underline text use the <code><u></code> tag.</p> <div class="bs-example"> - <p><u>This line of text is will render as underlined</u></p> + <p><u>This line of text will render as underlined</u></p> </div> {% highlight html %} -<u>This line of text is will render as underlined</u> +<u>This line of text will render as underlined</u> {% endhighlight %} <p>Make use of HTML's default emphasis tags with lightweight styles.</p> @@ -195,14 +195,28 @@ <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> + <p class="text-nowrap">No wrap text.</p> </div> {% highlight html %} <p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> +<p class="text-nowrap">No wrap text.</p> {% endhighlight %} + <h2 id="type-transformation">Transformation classes</h2> + <p>Transform text in components with text capitalization classes.</p> + <div class="bs-example"> + <p class="text-lowercase">Lowercased text.</p> + <p class="text-uppercase">Uppercased text.</p> + <p class="text-capitalize">Capitalized text.</p> + </div> +{% highlight html %} +<p class="text-lowercase">Lowercased text.</p> +<p class="text-uppercase">Uppercased text.</p> +<p class="text-capitalize">Capitalized text.</p> +{% endhighlight %} <!-- Abbreviations --> <h2 id="type-abbreviations">Abbreviations</h2> diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html index e807e1231..64f536b94 100644 --- a/docs/_includes/customizer-variables.html +++ b/docs/_includes/customizer-variables.html @@ -4,24 +4,28 @@ <p>Gray and brand colors for use across Bootstrap.</p> <div class="row"> <div class="bs-customizer-input"> + <label for="input-@gray-base">@gray-base</label> + <input id="input-@gray-base" type="text" value=" #000" data-var="@gray-base" class="form-control"/> + </div> + <div class="bs-customizer-input"> <label for="input-@gray-darker">@gray-darker</label> - <input id="input-@gray-darker" type="text" value="lighten(#000, 13.5%)" data-var="@gray-darker" class="form-control"/> + <input id="input-@gray-darker" type="text" value="lighten(@gray-base, 13.5%)" data-var="@gray-darker" class="form-control"/> </div> <div class="bs-customizer-input"> <label for="input-@gray-dark">@gray-dark</label> - <input id="input-@gray-dark" type="text" value="lighten(#000, 20%)" data-var="@gray-dark" class="form-control"/> + <input id="input-@gray-dark" type="text" value="lighten(@gray-base, 20%)" data-var="@gray-dark" class="form-control"/> </div> <div class="bs-customizer-input"> <label for="input-@gray">@gray</label> - <input id="input-@gray" type="text" value="lighten(#000, 33.5%)" data-var="@gray" class="form-control"/> + <input id="input-@gray" type="text" value="lighten(@gray-base, 33.5%)" data-var="@gray" class="form-control"/> </div> <div class="bs-customizer-input"> <label for="input-@gray-light">@gray-light</label> - <input id="input-@gray-light" type="text" value="lighten(#000, 60%)" data-var="@gray-light" class="form-control"/> + <input id="input-@gray-light" type="text" value="lighten(@gray-base, 46.7%)" data-var="@gray-light" class="form-control"/> </div> <div class="bs-customizer-input"> <label for="input-@gray-lighter">@gray-lighter</label> - <input id="input-@gray-lighter" type="text" value="lighten(#000, 93.5%)" data-var="@gray-lighter" class="form-control"/> + <input id="input-@gray-lighter" type="text" value="lighten(@gray-base, 93.5%)" data-var="@gray-lighter" class="form-control"/> </div> <div class="bs-customizer-input"> <label for="input-@brand-primary">@brand-primary</label> @@ -502,6 +506,7 @@ <div class="bs-customizer-input"> <label for="input-@dropdown-caret-color">@dropdown-caret-color</label> <input id="input-@dropdown-caret-color" type="text" value="#000" data-var="@dropdown-caret-color" class="form-control"/> + <p class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p> </div> </div> <h2 id="media-queries-breakpoints">Media queries breakpoints</h2> @@ -510,18 +515,22 @@ <div class="bs-customizer-input"> <label for="input-@screen-xs">@screen-xs</label> <input id="input-@screen-xs" type="text" value="480px" data-var="@screen-xs" class="form-control"/> + <p class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.1</p> </div> <div class="bs-customizer-input"> <label for="input-@screen-xs-min">@screen-xs-min</label> <input id="input-@screen-xs-min" type="text" value="@screen-xs" data-var="@screen-xs-min" class="form-control"/> + <p class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.0</p> </div> <div class="bs-customizer-input"> <label for="input-@screen-phone">@screen-phone</label> <input id="input-@screen-phone" type="text" value="@screen-xs-min" data-var="@screen-phone" class="form-control"/> + <p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.1</p> </div> <div class="bs-customizer-input"> <label for="input-@screen-sm">@screen-sm</label> <input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/> + <p class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.1</p> </div> <div class="bs-customizer-input"> <label for="input-@screen-sm-min">@screen-sm-min</label> @@ -530,10 +539,12 @@ <div class="bs-customizer-input"> <label for="input-@screen-tablet">@screen-tablet</label> <input id="input-@screen-tablet" type="text" value="@screen-sm-min" data-var="@screen-tablet" class="form-control"/> + <p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.1</p> </div> <div class="bs-customizer-input"> <label for="input-@screen-md">@screen-md</label> <input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/> + <p class="help-block">Deprecated <code>@screen-md</code> as of v3.0.1</p> </div> <div class="bs-customizer-input"> <label for="input-@screen-md-min">@screen-md-min</label> @@ -542,10 +553,12 @@ <div class="bs-customizer-input"> <label for="input-@screen-desktop">@screen-desktop</label> <input id="input-@screen-desktop" type="text" value="@screen-md-min" data-var="@screen-desktop" class="form-control"/> + <p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.1</p> </div> <div class="bs-customizer-input"> <label for="input-@screen-lg">@screen-lg</label> <input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/> + <p class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.1</p> </div> <div class="bs-customizer-input"> <label for="input-@screen-lg-min">@screen-lg-min</label> @@ -554,6 +567,7 @@ <div class="bs-customizer-input"> <label for="input-@screen-lg-desktop">@screen-lg-desktop</label> <input id="input-@screen-lg-desktop" type="text" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control"/> + <p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p> </div> <div class="bs-customizer-input"> <label for="input-@screen-xs-max">@screen-xs-max</label> @@ -716,7 +730,7 @@ </div> <div class="bs-customizer-input"> <label for="input-@navbar-inverse-color">@navbar-inverse-color</label> - <input id="input-@navbar-inverse-color" type="text" value="@gray-light" data-var="@navbar-inverse-color" class="form-control"/> + <input id="input-@navbar-inverse-color" type="text" value="lighten(@gray-light, 12%)" data-var="@navbar-inverse-color" class="form-control"/> </div> <div class="bs-customizer-input"> <label for="input-@navbar-inverse-bg">@navbar-inverse-bg</label> @@ -1691,6 +1705,11 @@ <p></p> <div class="row"> <div class="bs-customizer-input"> + <label for="input-@component-offset-horizontal">@component-offset-horizontal</label> + <input id="input-@component-offset-horizontal" type="text" value="180px" data-var="@component-offset-horizontal" class="form-control"/> + <p class="help-block">Horizontal offset for forms and lists.</p> + </div> + <div class="bs-customizer-input"> <label for="input-@text-muted">@text-muted</label> <input id="input-@text-muted" type="text" value="@gray-light" data-var="@text-muted" class="form-control"/> <p class="help-block">Text muted color</p> @@ -1725,19 +1744,15 @@ <input id="input-@page-header-border-color" type="text" value="@gray-lighter" data-var="@page-header-border-color" class="form-control"/> <p class="help-block">Page header border color</p> </div> -</div> -<h2 id="miscellaneous">Miscellaneous</h2> -<p></p> -<div class="row"> + <div class="bs-customizer-input"> + <label for="input-@dl-horizontal-offset">@dl-horizontal-offset</label> + <input id="input-@dl-horizontal-offset" type="text" value="@component-offset-horizontal" data-var="@dl-horizontal-offset" class="form-control"/> + <p class="help-block">Width of horizontal description list titles</p> + </div> <div class="bs-customizer-input"> <label for="input-@hr-border">@hr-border</label> <input id="input-@hr-border" type="text" value="@gray-lighter" data-var="@hr-border" class="form-control"/> <p class="help-block">Horizontal line color.</p> </div> - <div class="bs-customizer-input"> - <label for="input-@component-offset-horizontal">@component-offset-horizontal</label> - <input id="input-@component-offset-horizontal" type="text" value="180px" data-var="@component-offset-horizontal" class="form-control"/> - <p class="help-block">Horizontal offset for forms and lists.</p> - </div> </div> <!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->
\ No newline at end of file diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 3159faa16..6aff132af 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -30,9 +30,19 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> -<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> +<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> +{% if site.github %} <script src="../dist/js/bootstrap.min.js"></script> +{% else %} +<script src="../dist/js/bootstrap.js"></script> +{% endif %} +{% if site.github %} <script src="../assets/js/docs.min.js"></script> +{% else %} +<script src="../assets/js/vendor/holder.js"></script> +<script src="../assets/js/vendor/ZeroClipboard.min.js"></script> +<script src="../assets/js/src/application.js"></script> +{% endif %} {% if page.slug == "customize" %} <script src="../assets/js/customize.min.js"></script> {% endif %} diff --git a/docs/_includes/getting-started/browser-device-support.html b/docs/_includes/getting-started/browser-device-support.html index 3e1dd3e66..0c7c1a4a9 100644 --- a/docs/_includes/getting-started/browser-device-support.html +++ b/docs/_includes/getting-started/browser-device-support.html @@ -20,7 +20,7 @@ <tr> <th>Android</th> <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td> - <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td> + <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td> <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td> <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td> <td class="text-muted">N/A</td> @@ -106,13 +106,16 @@ <h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3> <p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p> + <h3 id="support-ie8-font-face">Internet Explorer 8 and @font-face</h3> + <p>IE8 has some issues with <code>@font-face</code> when combined with <code>:before</code>. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. <a href="https://github.com/twbs/bootstrap/issues/13863">See issue #13863</a> for details.</p> + <h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3> <p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code><meta></code> tag in your pages:</p> {% highlight html %} <meta http-equiv="X-UA-Compatible" content="IE=edge"> {% endhighlight %} <p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p> - <p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p> + <p>This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p> <p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p> <h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3> @@ -141,7 +144,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { } {% 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> - <p>As a heads up, we include this in the Bootstrap docs as an example.</p> + <p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p> <h3 id="support-safari-percentages">Safari percent rounding</h3> <p>As of Safari v7.0.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p> @@ -155,7 +158,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { <h4>Overflow and scrolling</h4> <p>Support for <code>overflow: hidden</code> on the <code><body></code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code><body></code> content will begin to scroll.</p> <h4>Virtual keyboards</h4> - <p>Also, note that if you're using inputs in your modal or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p> + <p>Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p> <h4>Navbar Dropdowns</h4> <p>The <code>.dropdown-backdrop</code> element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).</p> @@ -173,14 +176,16 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { <h3 id="support-android-stock-browser">Android stock browser</h3> <p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p> <h4>Select menus</h4> - <p>On <code><select></code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code><select></code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p> + <p>On <code><select></code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. (See <a href="http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code><select></code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p> {% highlight html %} <script> -var nua = navigator.userAgent -var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1) -if (isAndroid) { - $('select.form-control').removeClass('form-control').css('width', '100%') -} +$(function () { + var nua = navigator.userAgent + var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1) + if (isAndroid) { + $('select.form-control').removeClass('form-control').css('width', '100%') + } +}) </script> {% endhighlight %} <p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p> diff --git a/docs/_includes/getting-started/download.html b/docs/_includes/getting-started/download.html index e3adffd8b..bb0537796 100644 --- a/docs/_includes/getting-started/download.html +++ b/docs/_includes/getting-started/download.html @@ -8,21 +8,21 @@ <h3 id="download-bootstrap">Bootstrap</h3> <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> <p> - <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a> + <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a> </p> </div> <div class="col-sm-4"> <h3 id="download-source">Source code</h3> - <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="{{ site.repo }}#compiling-css-and-javascript">some setup.</a></strong></p> + <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="#grunt">some setup.</a></strong></p> <p> - <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source</a> + <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a> </p> </div> <div class="col-sm-4"> <h3 id="download-sass">Sass</h3> <p><a href="{{ site.sass_repo }}">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p> <p> - <a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download Sass']);">Download Sass</a> + <a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a> </p> </div> </div> diff --git a/docs/_includes/getting-started/examples.html b/docs/_includes/getting-started/examples.html index e6aed9bee..b1739f1d7 100644 --- a/docs/_includes/getting-started/examples.html +++ b/docs/_includes/getting-started/examples.html @@ -1,7 +1,7 @@ <div class="bs-docs-section"> <h1 id="examples" class="page-header">Examples</h1> - <p class="lead">Build on the basic template above with Bootstrap's many components. See also <a href="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p> + <p class="lead">Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.</p> <h3 id="examples-framework">Using the framework</h3> <div class="row bs-examples"> @@ -119,7 +119,7 @@ <img src="../examples/screenshots/justified-nav.jpg" alt=""> </a> <h4>Justified nav</h4> - <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too WebKit friendly.</a></p> + <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too Safari friendly.</a></p> </div> <div class="clearfix visible-xs"></div> diff --git a/docs/_includes/getting-started/grunt.html b/docs/_includes/getting-started/grunt.html new file mode 100644 index 000000000..93fa44a70 --- /dev/null +++ b/docs/_includes/getting-started/grunt.html @@ -0,0 +1,32 @@ +<div class="bs-docs-section"> + <h1 id="grunt" class="page-header">Compiling CSS and JavaScript</h1> + + <p class="lead">Bootstrap uses <a href="http://gruntjs.com">Grunt</a> for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p> + + <h2 id="grunt-installing">Installing Grunt</h2> + <p>To install Grunt, you must <strong>first <a href="http://nodejs.org/download/">download and install node.js</a></strong> (which includes npm). npm stands for <a href="http://npmjs.org/">node packaged modules</a> and is a way to manage development dependencies through node.js.</p> + + Then, from the command line: + <ol> + <li>Install <code>grunt-cli</code> globally with <code>npm install -g grunt-cli</code>.</li> + <li>Navigate to the root <code>/bootstrap/</code> directory, then run <code>npm install</code>. npm will look at the <a href="https://github.com/twbs/bootstrap/blob/master/package.json"><code>package.json</code></a> file and automatically install the necessary local dependencies listed there.</li> + </ol> + + <p>When completed, you'll be able to run the various Grunt commands provided from the command line.</p> + + <h2 id="grunt-commands">Available Grunt commands</h2> + <h3><code>grunt dist</code> (Just compile CSS and JavaScript)</h3> + <p>Regenerates the <code>/dist/</code> directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.</p> + + <h3><code>grunt watch</code> (Watch)</h3> + <p>Watches the Less source files and automatically recompiles them to CSS whenever you save a change.</p> + + <h3><code>grunt test</code> (Run tests)</h3> + <p>Runs <a href="http://jshint.com">JSHint</a> and runs the <a href="http://qunitjs.com">QUnit</a> tests headlessly in <a href="http://phantomjs.org">PhantomJS</a>.</p> + + <h3><code>grunt</code> (Build absolutely everything and run tests)</h3> + <p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Usually only necessary if you're hacking on Bootstrap itself.</p> + + <h2 id="grunt-troubleshooting">Troubleshooting</h2> + <p>Should you encounter problems with installing dependencies or running Grunt commands, first delete the <code>/node_modules/</code> directory generated by npm. Then, rerun <code>npm install</code>.</p> +</div> diff --git a/docs/_includes/getting-started/template.html b/docs/_includes/getting-started/template.html index c6a1646d6..3952621a6 100644 --- a/docs/_includes/getting-started/template.html +++ b/docs/_includes/getting-started/template.html @@ -19,15 +19,15 @@ <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> - <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> - <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> diff --git a/docs/_includes/getting-started/translations.html b/docs/_includes/getting-started/translations.html index dc46f5d90..215f790de 100644 --- a/docs/_includes/getting-started/translations.html +++ b/docs/_includes/getting-started/translations.html @@ -3,13 +3,9 @@ <p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and they 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/fr">Bootstrap en Français (French)</a></li> - <li><a href="http://holdirbootstrap.de/">Bootstrap auf Deutsch (German)</a></li> - <li><a href="http://bootstrapk.com/BS3/">Bootstrap 한국어 (Korean)</a></li> - <li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li> - <li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li> - <li><a href="http://twbs.site-konstruktor.com.ua">Bootstrap ua Українською (Ukrainian)</a></li> + {% for language in site.data.translations %} + <li><a href="{{ language.url }}" hreflang="{{ language.code }}">{{ language.description }} ({{ language.name }})</a></li> + {% endfor %} </ul> <p><strong class="text-danger">We don't help organize or host translations, we just link to them.</strong></p> <p>Finished a new or better translation? Open a pull request to add it to our list.</p> diff --git a/docs/_includes/header.html b/docs/_includes/header.html index defb549ae..406b84cda 100644 --- a/docs/_includes/header.html +++ b/docs/_includes/header.html @@ -6,7 +6,7 @@ <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <title> - {% if page.title == "Bootstrap" %} + {% if page.url == site.baseurl %} {{ page.title }} {% else %} {{ page.title }} · Bootstrap @@ -14,29 +14,47 @@ </title> <!-- Bootstrap core CSS --> +{% if site.github %} <link href="../dist/css/bootstrap.min.css" rel="stylesheet"> +{% else %} +<link href="../dist/css/bootstrap.css" rel="stylesheet"> +{% endif %} +{% if page.slug == "css" or page.slug == "components" or page.slug == "js" %} + <!-- Optional Bootstrap Theme --> +{% if site.github %} + <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet"> +{% else %} + <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.css" rel="stylesheet" id="bs-theme-stylesheet"> +{% endif %} +{% endif %} <!-- Documentation extras --> +{% if site.github %} <link href="../assets/css/docs.min.css" rel="stylesheet"> +{% else %} +<link href="../assets/css/src/docs.css" rel="stylesheet"> +<link href="../assets/css/src/pygments-manni.css" rel="stylesheet"> +{% endif %} <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> +<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> +<script src="../assets/js/ie10-viewport-bug-workaround.js"></script> +<script src="../assets/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> - <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> - <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Favicons --> -<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> - <link rel="shortcut icon" href="../assets/ico/favicon.ico"> +<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"> +<link rel="icon" href="/favicon.ico"> <script> - var _gaq = _gaq || []; - _gaq.push(['_setAccount', 'UA-146052-10']); - _gaq.push(['_trackPageview']); - (function() { - var ga = document.createElement('script'); ga.async = true; - ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; - var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); - })(); + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create', 'UA-146052-10', 'getbootstrap.com'); + ga('send', 'pageview'); </script> diff --git a/docs/_includes/js/affix.html b/docs/_includes/js/affix.html index cfd32ec35..4ce51cb34 100644 --- a/docs/_includes/js/affix.html +++ b/docs/_includes/js/affix.html @@ -7,7 +7,7 @@ <hr class="bs-docs-separator"> <h2 id="affix-usage">Usage</h2> - <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong>In both situations, you must provide CSS for the positioning of your content.</strong></p> + <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong class="text-danger">In both situations, you must provide CSS for the positioning and width of your affixed content.</strong></p> <h3>Positioning via CSS</h3> <p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p> @@ -62,6 +62,13 @@ <td>10</td> <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td> </tr> + <tr> + <td>target</td> + <td>selector | node | jQuery element</td> + <td>the <code>window</code> object</td> + <td>Specifies the target element of the affix.</td> + </tr> + </tbody> </table> </div><!-- /.table-responsive --> diff --git a/docs/_includes/js/alerts.html b/docs/_includes/js/alerts.html new file mode 100644 index 000000000..351301533 --- /dev/null +++ b/docs/_includes/js/alerts.html @@ -0,0 +1,71 @@ +<div class="bs-docs-section"> + <h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1> + + <h2 id="alerts-examples">Example alerts</h2> + <p>Add dismiss functionality to all alert messages with this plugin.</p> + <div class="bs-example"> + <div class="alert alert-warning fade in" role="alert"> + <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. + </div> + </div><!-- /example --> + + <div class="bs-example"> + <div class="alert alert-danger fade in" role="alert"> + <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <h4>Oh snap! You got an error!</h4> + <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> + <p> + <button type="button" class="btn btn-danger">Take this action</button> + <button type="button" class="btn btn-default">Or do this</button> + </p> + </div> + </div><!-- /example --> + + + <h2 id="alerts-usage">Usage</h2> + <p>Enable dismissal of an alert via JavaScript:</p> + {% highlight js %}$(".alert").alert(){% endhighlight %} + + <h3>Markup</h3> + <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p> + {% highlight html %}<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>{% endhighlight %} + + <h3>Methods</h3> + + <h4>$().alert()</h4> + <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p> + + <h4>.alert('close')</h4> + <p>Closes an alert.</p> + {% highlight js %}$(".alert").alert('close'){% endhighlight %} + + + <h3>Events</h3> + <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p> + <div class="table-responsive"> + <table class="table table-bordered table-striped"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>close.bs.alert</td> + <td>This event fires immediately when the <code>close</code> instance method is called.</td> + </tr> + <tr> + <td>closed.bs.alert</td> + <td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td> + </tr> + </tbody> + </table> + </div><!-- /.table-responsive --> +{% highlight js %} +$('#my-alert').on('closed.bs.alert', function () { + // do something… +}) +{% endhighlight %} +</div> diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html index 5af374228..ee5b3d71d 100644 --- a/docs/_includes/js/buttons.html +++ b/docs/_includes/js/buttons.html @@ -37,10 +37,14 @@ <h4>Checkbox</h4> <p>Add <code>data-toggle="buttons"</code> to a group of checkboxes for checkbox style toggling on btn-group.</p> + <div class="bs-callout bs-callout-warning"> + <h4>Pre-checked options need <code>.active</code></h4> + <p>For pre-checked options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p> + </div> <div class="bs-example" style="padding-bottom: 24px;"> <div class="btn-group" data-toggle="buttons"> - <label class="btn btn-primary"> - <input type="checkbox"> Option 1 + <label class="btn btn-primary active"> + <input type="checkbox" checked> Option 1 (pre-checked) </label> <label class="btn btn-primary"> <input type="checkbox"> Option 2 @@ -52,8 +56,8 @@ </div><!-- /example --> {% highlight html %} <div class="btn-group" data-toggle="buttons"> - <label class="btn btn-primary"> - <input type="checkbox"> Option 1 + <label class="btn btn-primary active"> + <input type="checkbox" checked> Option 1 (pre-checked) </label> <label class="btn btn-primary"> <input type="checkbox"> Option 2 @@ -66,10 +70,14 @@ <h4>Radio</h4> <p>Add <code>data-toggle="buttons"</code> to a group of radio inputs for radio style toggling on btn-group.</p> + <div class="bs-callout bs-callout-warning"> + <h4>Preselected options need <code>.active</code></h4> + <p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p> + </div> <div class="bs-example" style="padding-bottom: 24px;"> <div class="btn-group" data-toggle="buttons"> - <label class="btn btn-primary"> - <input type="radio" name="options" id="option1"> Option 1 + <label class="btn btn-primary active"> + <input type="radio" name="options" id="option1" checked> Option 1 (preselected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> Option 2 @@ -81,8 +89,8 @@ </div><!-- /example --> {% highlight html %} <div class="btn-group" data-toggle="buttons"> - <label class="btn btn-primary"> - <input type="radio" name="options" id="option1"> Option 1 + <label class="btn btn-primary active"> + <input type="radio" name="options" id="option1" checked> Option 1 (preselected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> Option 2 @@ -136,7 +144,7 @@ $('.btn').button() <div class="bs-callout bs-callout-danger"> <h4>Cross-browser compatibility</h4> - <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p> + <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p> </div> <h4>$().button('reset')</h4> diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html index 945910c75..728356268 100644 --- a/docs/_includes/js/carousel.html +++ b/docs/_includes/js/carousel.html @@ -10,7 +10,7 @@ <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> - <div class="carousel-inner"> + <div class="carousel-inner" role="listbox"> <div class="item active"> <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide"> </div> @@ -21,11 +21,13 @@ <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide"> </div> </div> - <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> + <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> + <span class="sr-only">Previous</span> </a> - <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> + <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> + <span class="sr-only">Next</span> </a> </div> </div><!-- /example --> @@ -39,22 +41,30 @@ </ol> <!-- Wrapper for slides --> - <div class="carousel-inner"> + <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> + <div class="item"> + <img src="..." alt="..."> + <div class="carousel-caption"> + ... + </div> + </div> ... </div> <!-- Controls --> - <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> + <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> + <span class="sr-only">Previous</span> </a> - <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> + <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> + <span class="sr-only">Next</span> </a> </div> {% endhighlight %} @@ -73,7 +83,7 @@ <li data-target="#carousel-example-captions" data-slide-to="1"></li> <li data-target="#carousel-example-captions" data-slide-to="2"></li> </ol> - <div class="carousel-inner"> + <div class="carousel-inner" role="listbox"> <div class="item active"> <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image"> <div class="carousel-caption"> @@ -96,16 +106,18 @@ </div> </div> </div> - <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev"> + <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> + <span class="sr-only">Previous</span> </a> - <a class="right carousel-control" href="#carousel-example-captions" data-slide="next"> + <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> + <span class="sr-only">Next</span> </a> </div> </div><!-- /example --> {% highlight html %} -<div class="item active"> +<div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> @@ -122,11 +134,11 @@ <h2 id="carousel-usage">Usage</h2> <h3>Multiple carousels</h3> - <p>Carousels require the use of an <code>id</code> on the outermost container, <code>.carousel</code>, for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's <code>id</code>, be sure to update the relevant controls.</p> + <p>Carousels require the use of an <code>id</code> on the outermost container (the <code>.carousel</code>) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's <code>id</code>, be sure to update the relevant controls.</p> <h3>Via data attributes</h3> <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p> - <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load.</p> + <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load. <strong class="text-danger">It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.</strong></p> <h3>Via JavaScript</h3> <p>Call carousel manually with:</p> @@ -197,6 +209,11 @@ $('.carousel').carousel({ <h3>Events</h3> <p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p> + <p>Both events have the following additional properties:</p> + <ul> + <li><code>direction</code>: The direction in which the carousel is sliding (either <code>"left"</code> or <code>"right"</code>).</li> + <li><code>relatedTarget</code>: The DOM element that is being slid into place as the active item.</li> + </ul> <div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html index 6b8c26ed5..9313419ac 100644 --- a/docs/_includes/js/dropdowns.html +++ b/docs/_includes/js/dropdowns.html @@ -9,7 +9,7 @@ <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> - <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse"> + <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -20,7 +20,7 @@ <div class="collapse navbar-collapse bs-example-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> + <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></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> @@ -30,7 +30,7 @@ </ul> </li> <li class="dropdown"> - <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> + <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></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> @@ -42,7 +42,7 @@ </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> + <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <span class="caret"></span></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> @@ -59,10 +59,10 @@ <h3>Within pills</h3> <div class="bs-example"> - <ul class="nav nav-pills"> + <ul class="nav nav-pills" role="tablist"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown"> - <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> + <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> <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> @@ -72,7 +72,7 @@ </ul> </li> <li class="dropdown"> - <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a> + <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <span class="caret"></span></a> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5"> <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> @@ -82,7 +82,7 @@ </ul> </li> <li class="dropdown"> - <a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a> + <a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <span class="caret"></span></a> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6"> <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> @@ -96,7 +96,9 @@ <h2 id="dropdowns-usage">Usage</h2> - <p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item. When opened, the plugin also adds <code>.dropdown-backdrop</code> as a click area for closing dropdown menus when clicking outside the menu. Note: The <code>data-toggle=dropdown</code> attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.</p> + <p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item.</p> + <p>On mobile devices, opening a dropdown adds a <code>.dropdown-backdrop</code> as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. <strong class="text-danger">This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.</strong></p> + <p>Note: The <code>data-toggle="dropdown"</code> attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.</p> <h3>Via data attributes</h3> <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p> diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html index e99d319e7..d5b1aee84 100644 --- a/docs/_includes/js/modal.html +++ b/docs/_includes/js/modal.html @@ -24,7 +24,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> @@ -43,7 +43,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> @@ -66,8 +66,8 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> - <h4 class="modal-title" id="myModalLabel">Modal Heading</h4> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <h4>Text in a modal</h4> @@ -117,7 +117,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> @@ -179,7 +179,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> </div> <div class="modal-body"> @@ -193,7 +193,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4> </div> <div class="modal-body"> @@ -259,7 +259,9 @@ <td>remote</td> <td>path</td> <td>false</td> - <td><p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p> + <td> + <p><span class="text-danger">This option is deprecated since v3.2.1 and will be removed in v4.</span> We recommend instead using client-side templating or a data binding framework, or calling <a href="http://api.jquery.com/load/">jQuery.load</a> yourself.</p> + <p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p> {% highlight html %} <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> {% endhighlight %} @@ -320,7 +322,7 @@ $('#myModal').modal({ </tr> <tr> <td>loaded.bs.modal</td> - <td>This event is fired when the modal has loaded content using the remote option.</td> + <td>This event is fired when the modal has loaded content using the <code>remote</code> option.</td> </tr> </tbody> </table> diff --git a/docs/_includes/js/overview.html b/docs/_includes/js/overview.html index abc2a47e5..2ef8fe850 100644 --- a/docs/_includes/js/overview.html +++ b/docs/_includes/js/overview.html @@ -45,7 +45,7 @@ $('#myModal').modal({ keyboard: false }) // initialized with no keyboard $('#myModal').modal('show') // initializes and invokes show immediately {% endhighlight %} - <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p> + <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p> <h3 id="js-noconflict">No conflict</h3> <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p> diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html index 7bf515ad4..ef8e07941 100644 --- a/docs/_includes/js/popovers.html +++ b/docs/_includes/js/popovers.html @@ -16,6 +16,10 @@ <h4>Popovers in button groups and input groups require special setting</h4> <p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p> </div> + <div class="bs-callout bs-callout-warning"> + <h4>Don't try to show popovers on hidden elements</h4> + <p>Invoking <code>$(...).popover('show')</code> when the target element is <code>display: none;</code> will cause the popover to be incorrectly positioned.</p> + </div> <div class="bs-callout bs-callout-info"> <h4>Popovers on disabled elements require wrapper elements</h4> <p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the popover to that <code><div></code> instead.</p> @@ -69,8 +73,8 @@ {% endhighlight %} <h4>Four directions</h4> - <div class="bs-example tooltip-demo"> - <div class="bs-example-tooltips"> + <div class="bs-example popover-demo"> + <div class="bs-example-popovers"> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button> @@ -105,12 +109,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."> {% endhighlight %} <h4>Dismiss on next click</h4> - <p>Use the <code>focus</code> trigger to dismiss popovers on their next click.</p> + <p>Use the <code>focus</code> trigger to dismiss popovers on the next click that the user makes.</p> <div class="bs-example" style="padding-bottom: 24px;"> - <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button> + <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button> </div> {% highlight html %} -<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button> +<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button> {% endhighlight %} {% highlight js %} $('.popover-dismiss').popover({ @@ -135,9 +139,9 @@ $('.popover-dismiss').popover({ <thead> <tr> <th style="width: 100px;">Name</th> - <th style="width: 100px;">type</th> - <th style="width: 50px;">default</th> - <th>description</th> + <th style="width: 100px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> </tr> </thead> <tbody> @@ -145,7 +149,34 @@ $('.popover-dismiss').popover({ <td>animation</td> <td>boolean</td> <td>true</td> - <td>apply a CSS fade transition to the popover</td> + <td>Apply a CSS fade transition to the popover</td> + </tr> + <tr> + <td>container</td> + <td>string | false</td> + <td>false</td> + <td> + <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p> + </td> + </tr> + <tr> + <td>content</td> + <td>string | function</td> + <td>''</td> + <td> + <p>Default content value if <code>data-content</code> attribute isn't present.</p> + <p>If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.</p> + </td> + </tr> + <tr> + <td>delay</td> + <td>number | object</td> + <td>0</td> + <td> + <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p> + <p>If a number is supplied, delay is applied to both hide/show</p> + <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p> + </td> </tr> <tr> <td>html</td> @@ -157,50 +188,46 @@ $('.popover-dismiss').popover({ <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 placement is "auto left", the popover 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 popover will display to the left when possible, otherwise it will display right.</td> </tr> <tr> <td>selector</td> <td>string</td> <td>false</td> - <td>if a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td> + <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td> </tr> <tr> - <td>trigger</td> + <td>template</td> <td>string</td> - <td>'click'</td> - <td>how popover is triggered - click | hover | focus | manual</td> + <td><code>'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td> + <td> + <p>Base HTML to use when creating the popover.</p> + <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p> + <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p> + <p><code>.arrow</code> will become the popover's arrow.</p> + <p>The outermost wrapper element should have the <code>.popover</code> class.</p> + </td> </tr> <tr> <td>title</td> <td>string | function</td> <td>''</td> - <td>default title value if <code>title</code> attribute isn't present</td> - </tr> - <tr> - <td>content</td> - <td>string | function</td> - <td>''</td> - <td>default content value if <code>data-content</code> attribute isn't present</td> + <td>Default title value if <code>title</code> attribute isn't present</td> </tr> <tr> - <td>delay</td> - <td>number | object</td> - <td>0</td> - <td> - <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p> - <p>If a number is supplied, delay is applied to both hide/show</p> - <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p> - </td> + <td>trigger</td> + <td>string</td> + <td>'click'</td> + <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td> </tr> <tr> - <td>container</td> - <td>string | false</td> - <td>false</td> - <td> - <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p> - </td> - </tr> + <td>viewport</td> + <td>string | object</td> + <td>{ selector: 'body', padding: 0 }</td> + <td> + <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p> + </td> + </tr> </tbody> </table> </div><!-- /.table-responsive --> @@ -263,79 +290,3 @@ $('#myPopover').on('hidden.bs.popover', function () { }) {% endhighlight %} </div> - - - -<!-- Alert -================================================== --> -<div class="bs-docs-section"> - <h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1> - - <h2 id="alerts-examples">Example alerts</h2> - <p>Add dismiss functionality to all alert messages with this plugin.</p> - <div class="bs-example"> - <div class="alert alert-warning fade in" role="alert"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> - <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. - </div> - </div><!-- /example --> - - <div class="bs-example"> - <div class="alert alert-danger fade in" role="alert"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> - <h4>Oh snap! You got an error!</h4> - <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> - <p> - <button type="button" class="btn btn-danger">Take this action</button> - <button type="button" class="btn btn-default">Or do this</button> - </p> - </div> - </div><!-- /example --> - - - <h2 id="alerts-usage">Usage</h2> - <p>Enable dismissal of an alert via JavaScript:</p> - {% highlight js %}$(".alert").alert(){% endhighlight %} - - <h3>Markup</h3> - <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p> - {% highlight html %}<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>{% endhighlight %} - - <h3>Methods</h3> - - <h4>$().alert()</h4> - <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p> - - <h4>.alert('close')</h4> - <p>Closes an alert.</p> - {% highlight js %}$(".alert").alert('close'){% endhighlight %} - - - <h3>Events</h3> - <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p> - <div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>close.bs.alert</td> - <td>This event fires immediately when the <code>close</code> instance method is called.</td> - </tr> - <tr> - <td>closed.bs.alert</td> - <td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td> - </tr> - </tbody> - </table> - </div><!-- /.table-responsive --> -{% highlight js %} -$('#my-alert').bind('closed.bs.alert', function () { - // do something… -}) -{% endhighlight %} -</div> diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html index 959807a2f..c68ec32a4 100644 --- a/docs/_includes/js/scrollspy.html +++ b/docs/_includes/js/scrollspy.html @@ -7,7 +7,7 @@ <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> - <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy"> + <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -20,7 +20,7 @@ <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> + <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></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> @@ -65,7 +65,7 @@ body { <body data-spy="scroll" data-target=".navbar-example"> ... <div class="navbar-example"> - <ul class="nav nav-tabs"> + <ul class="nav nav-tabs" role="tablist"> ... </ul> </div> @@ -83,6 +83,10 @@ $('body').scrollspy({ target: '.navbar-example' }) <h4>Resolvable ID targets required</h4> <p>Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the DOM like <code><div id="home"></div></code>.</p> </div> + <div class="bs-callout bs-callout-info"> + <h4>Non-<code>:visible</code> target elements ignored</h4> + <p>Target elements that are not <a href="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p> + </div> <h3>Methods</h3> <h4>.scrollspy('refresh')</h4> diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html index 8ada59028..38518f0b1 100644 --- a/docs/_includes/js/tabs.html +++ b/docs/_includes/js/tabs.html @@ -4,14 +4,14 @@ <h2 id="tabs-examples">Example tabs</h2> <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p> <div class="bs-example bs-example-tabs"> - <ul id="myTab" class="nav nav-tabs"> - <li class="active"><a href="#home" data-toggle="tab">Home</a></li> - <li><a href="#profile" data-toggle="tab">Profile</a></li> + <ul id="myTab" class="nav nav-tabs" role="tablist"> + <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> + <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> <li class="dropdown"> - <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> - <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li> - <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li> + <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li> + <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li> </ul> </li> </ul> @@ -60,11 +60,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) <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"> - <li class="active"><a href="#home" data-toggle="tab">Home</a></li> - <li><a href="#profile" data-toggle="tab">Profile</a></li> - <li><a href="#messages" data-toggle="tab">Messages</a></li> - <li><a href="#settings" data-toggle="tab">Settings</a></li> +<ul class="nav nav-tabs" role="tablist"> + <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> + <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> + <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> + <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> @@ -93,11 +93,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM. </p> {% highlight html %} -<ul class="nav nav-tabs" id="myTab"> - <li class="active"><a href="#home" data-toggle="tab">Home</a></li> - <li><a href="#profile" data-toggle="tab">Profile</a></li> - <li><a href="#messages" data-toggle="tab">Messages</a></li> - <li><a href="#settings" data-toggle="tab">Settings</a></li> +<ul class="nav nav-tabs" role="tablist" id="myTab"> + <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> + <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> + <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> + <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <div class="tab-content"> diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index 2656556be..fac4f6519 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -36,6 +36,10 @@ <h4>Tooltips in button groups and input groups require special setting</h4> <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p> </div> + <div class="bs-callout bs-callout-warning"> + <h4>Don't try to show tooltips on hidden elements</h4> + <p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p> + </div> <div class="bs-callout bs-callout-info"> <h4>Tooltips on disabled elements require wrapper elements</h4> <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the tooltip to that <code><div></code> instead.</p> @@ -54,16 +58,16 @@ $('#example').tooltip(options) <h4>Multiple-line links</h4> <p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p> </div> -{% highlight html linenos %} +{% highlight html %} <!-- HTML to write --> <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a> <!-- Generated markup by the plugin --> -<div class="tooltip top"> +<div class="tooltip top" role="tooltip"> + <div class="tooltip-arrow"></div> <div class="tooltip-inner"> Some tooltip text! </div> - <div class="tooltip-arrow"></div> </div> {% endhighlight %} @@ -74,9 +78,9 @@ $('#example').tooltip(options) <thead> <tr> <th style="width: 100px;">Name</th> - <th style="width: 100px;">type</th> - <th style="width: 50px;">default</th> - <th>description</th> + <th style="width: 100px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> </tr> </thead> <tbody> @@ -84,7 +88,25 @@ $('#example').tooltip(options) <td>animation</td> <td>boolean</td> <td>true</td> - <td>apply a CSS fade transition to the tooltip</td> + <td>Apply a CSS fade transition to the tooltip</td> + </tr> + <tr> + <td>container</td> + <td>string | false</td> + <td>false</td> + <td> + <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p> + </td> + </tr> + <tr> + <td>delay</td> + <td>number | object</td> + <td>0</td> + <td> + <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p> + <p>If a number is supplied, delay is applied to both hide/show</p> + <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p> + </td> </tr> <tr> <td>html</td> @@ -96,42 +118,43 @@ $('#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 placement 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> <td>string</td> <td>false</td> - <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td> + <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td> + </tr> + <tr> + <td>template</td> + <td>string</td> + <td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'</code></td> + <td> + <p>Base HTML to use when creating the tooltip.</p> + <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p> + <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p> + <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p> + </td> </tr> <tr> <td>title</td> <td>string | function</td> <td>''</td> - <td>default title value if <code>title</code> attribute isn't present</td> + <td>Default title value if <code>title</code> attribute isn't present</td> </tr> <tr> <td>trigger</td> <td>string</td> <td>'hover focus'</td> - <td>how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td> - </tr> - <tr> - <td>delay</td> - <td>number | object</td> - <td>0</td> - <td> - <p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p> - <p>If a number is supplied, delay is applied to both hide/show</p> - <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p> - </td> + <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td> </tr> <tr> - <td>container</td> - <td>string | false</td> - <td>false</td> + <td>viewport</td> + <td>string | object</td> + <td>{ selector: 'body', padding: 0 }</td> <td> - <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p> + <p>Keeps the tooltip within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p> </td> </tr> </tbody> diff --git a/docs/_includes/nav/components.html b/docs/_includes/nav/components.html index e850f3abc..ebc0c904f 100644 --- a/docs/_includes/nav/components.html +++ b/docs/_includes/nav/components.html @@ -60,6 +60,7 @@ <a href="#navbar">Navbar</a> <ul class="nav"> <li><a href="#navbar-default">Default navbar</a></li> + <li><a href="#navbar-brand-image">Brand image</a></li> <li><a href="#navbar-forms">Forms</a></li> <li><a href="#navbar-buttons">Buttons</a></li> <li><a href="#navbar-text">Text</a></li> @@ -94,7 +95,7 @@ <a href="#alerts">Alerts</a> <ul class="nav"> <li><a href="#alerts-examples">Examples</a></li> - <li><a href="#alerts-dismissable">Dismissable alerts</a></li> + <li><a href="#alerts-dismissible">Dismissible alerts</a></li> <li><a href="#alerts-links">Links in alerts</a></li> </ul> </li> diff --git a/docs/_includes/nav/css.html b/docs/_includes/nav/css.html index d67ad20be..ac86dffce 100644 --- a/docs/_includes/nav/css.html +++ b/docs/_includes/nav/css.html @@ -18,6 +18,7 @@ <li><a href="#grid-example-fluid">Ex: Fluid container</a></li> <li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li> <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li> + <li><a href="#grid-example-wrapping">Ex: Column wrapping</a></li> <li><a href="#grid-responsive-resets">Responsive column resets</a></li> <li><a href="#grid-offsetting">Offsetting columns</a></li> <li><a href="#grid-nesting">Nesting columns</a></li> @@ -32,6 +33,7 @@ <li><a href="#type-body-copy">Body copy</a></li> <li><a href="#type-inline-text">Inline text elements</a></li> <li><a href="#type-alignment">Alignment classes</a></li> + <li><a href="#type-transformation">Transformation classes</a></li> <li><a href="#type-abbreviations">Abbreviations</a></li> <li><a href="#type-addresses">Addresses</a></li> <li><a href="#type-blockquotes">Blockquotes</a></li> @@ -132,10 +134,3 @@ <li><a href="#sass-installation">Rails install</a></li> </ul> </li> -<li> - <a href="#rtl">RTL version</a> - <ul class="nav"> - <li><a href="#rtl-how-to">How to use</a></li> - <li><a href="#rtl-css-flip">CSS Flip</a></li> - </ul> -</li> diff --git a/docs/_includes/nav/customize.html b/docs/_includes/nav/customize.html index 04725096c..3245a3f75 100644 --- a/docs/_includes/nav/customize.html +++ b/docs/_includes/nav/customize.html @@ -40,7 +40,6 @@ <li><a href="#close">Close</a></li> <li><a href="#code">Code</a></li> <li><a href="#type">Type</a></li> - <li><a href="#miscellaneous">Miscellaneous</a></li> </ul> </li> <li><a href="#download">Download</a></li> diff --git a/docs/_includes/nav/getting-started.html b/docs/_includes/nav/getting-started.html index e253bf1c1..54927c22a 100644 --- a/docs/_includes/nav/getting-started.html +++ b/docs/_includes/nav/getting-started.html @@ -9,6 +9,14 @@ </ul> </li> <li> + <a href="#grunt">Compiling CSS and JavaScript</a> + <ul class="nav"> + <li><a href="#grunt-installing">Installing Grunt</a></li> + <li><a href="#grunt-commands">Available Grunt commands</a></li> + <li><a href="#grunt-troubleshooting">Troubleshooting</a></li> + </ul> +</li> +<li> <a href="#template">Basic template</a> </li> <li> @@ -36,6 +44,7 @@ <li><a href="#support-ie8-ie9">Internet Explorer 8-9</a></li> <li><a href="#support-ie8-respondjs">IE8 and Respond.js</a></li> <li><a href="#support-ie8-box-sizing">IE8 and box-sizing</a></li> + <li><a href="#support-ie8-font-face">IE8 and @font-face</a></li> <li><a href="#support-ie-compatibility-modes">IE Compatibility modes</a></li> <li><a href="#support-ie10-width">IE10 and Windows (Phone) 8</a></li> <li><a href="#support-safari-percentages">Safari percent rounding</a></li> diff --git a/docs/_includes/nav/home.html b/docs/_includes/nav/home.html index 520825902..2f80391b8 100644 --- a/docs/_includes/nav/home.html +++ b/docs/_includes/nav/home.html @@ -1,7 +1,7 @@ <header class="navbar navbar-inverse navbar-static-top bs-docs-nav" id="top" role="banner"> <div class="container"> <div class="navbar-header"> - <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> + <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -28,8 +28,8 @@ </li> </ul> <ul class="nav navbar-nav navbar-right"> - <li><a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Expo']);">Expo</a></li> - <li><a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Blog']);">Blog</a></li> + <li><a href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li> + <li><a href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li> </ul> </nav> </div> diff --git a/docs/_includes/nav/javascript.html b/docs/_includes/nav/javascript.html index 741b9cf81..9cccf1d99 100644 --- a/docs/_includes/nav/javascript.html +++ b/docs/_includes/nav/javascript.html @@ -6,6 +6,7 @@ <li><a href="#js-programmatic-api">Programmatic API</a></li> <li><a href="#js-noconflict">No conflict</a></li> <li><a href="#js-events">Events</a></li> + <li><a href="#callout-third-party-libs">Third-party libraries</a></li> </ul> </li> <li><a href="#transitions">Transitions</a></li> |