diff options
Diffstat (limited to 'docs/templates')
| -rw-r--r-- | docs/templates/layout.mustache | 4 | ||||
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 36 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 32 | ||||
| -rw-r--r-- | docs/templates/pages/extend.mustache | 10 | ||||
| -rw-r--r-- | docs/templates/pages/getting-started.mustache | 23 | ||||
| -rw-r--r-- | docs/templates/pages/index.mustache | 4 | ||||
| -rw-r--r-- | docs/templates/pages/javascript.mustache | 137 |
7 files changed, 155 insertions, 91 deletions
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index b3f36e99d5..993b44620c 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -15,7 +15,7 @@ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> - <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <script src="assets/js/html5shiv.js"></script> <![endif]--> <!-- Le fav and touch icons --> @@ -97,7 +97,7 @@ <li class="muted">·</li> <li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Issues{{/i}}</a></li> <li class="muted">·</li> - <li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap and changelog{{/i}}</a></li> + <li><a href="https://github.com/twitter/bootstrap/blob/master/CHANGELOG.md">{{_i}}Changelog{{/i}}</a></li> </ul> </div> </footer> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 6136d00952..1f40f37110 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -104,6 +104,19 @@ <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.{{/i}}</p> + <h3>{{_i}}Alignment classes{{/i}}</h3> + <p>{{_i}}Easily realign text to components with text alignment classes.{{/i}}</p> + <div class="bs-docs-example"> + <p class="text-left">Left aligned text.</p> + <p class="text-center">Center aligned text.</p> + <p class="text-right">Right aligned text.</p> + </div> +<pre class="prettyprint linenums"> +<p class="text-left">Left aligned text.</p> +<p class="text-center">Center aligned text.</p> +<p class="text-right">Right aligned text.</p> +</pre> + <h3>{{_i}}Emphasis classes{{/i}}</h3> <p>{{_i}}Convey meaning through color with a handful of emphasis utility classes.{{/i}}</p> <div class="bs-docs-example"> @@ -390,7 +403,7 @@ For example, <code><section></code> should be wrapped as inline. </div> <pre class="prettyprint linenums"> -{{_i}}For example, <code><section></code> should be wrapped as inline.{{/i}} +{{_i}}For example, <code>&lt;section&gt;</code> should be wrapped as inline.{{/i}} </pre> <h2>Basic block</h2> @@ -464,7 +477,7 @@ <p>{{_i}}Add any of the following classes to the <code>.table</code> base class.{{/i}}</p> <h3><code>{{_i}}.table-striped{{/i}}</code></h3> - <p>{{_i}}Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).{{/i}}</p> + <p>{{_i}}Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-8).{{/i}}</p> <div class="bs-docs-example"> <table class="table table-striped"> <thead> @@ -781,8 +794,7 @@ <code><th></code> </td> <td> - {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}<br> - {{_i}}Must be used within a <code><thead></code>{{/i}} + {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}} </td> </tr> <tr> @@ -1459,7 +1471,7 @@ </pre> <h3>{{_i}}Form actions{{/i}}</h3> - <p>{{_i}}End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.{{/i}}</p> + <p>{{_i}}End a form with a group of actions (buttons). When placed within a <code>.form-actions</code>, the buttons will automatically indent to line up with the form controls.{{/i}}</p> <form class="bs-docs-example"> <div class="form-actions"> <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button> @@ -1509,7 +1521,8 @@ </pre> <h3>{{_i}}Invalid inputs{{/i}}</h3> - <p>{{_i}}Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.{{/i}}</p> + <p>{{_i}}Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.{{/i}}</p> + <p>{{_i}}This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.{{/i}}</p> <form class="bs-docs-example form-inline"> <input class="span3" type="email" placeholder="test@example.com" required> </form> @@ -1567,6 +1580,7 @@ <span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span> </div> </div> + <div class="control-group error"> <label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label> <div class="controls"> @@ -1574,6 +1588,15 @@ <span class="help-inline">{{_i}}Please correct the error{{/i}}</span> </div> </div> + +<div class="control-group info"> + <label class="control-label" for="inputInfo">{{_i}}Input with info{{/i}}</label> + <div class="controls"> + <input type="text" id="inputInfo"> + <span class="help-inline">{{_i}}Username is already taken{{/i}}</span> + </div> +</div> + <div class="control-group success"> <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label> <div class="controls"> @@ -1978,7 +2001,6 @@ <pre class="prettyprint linenums"> <div class="btn-toolbar"> <div class="btn-group"> - <a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="icon-align-right"></i></a> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 96896b5b3e..6d3ff9beee 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -92,6 +92,25 @@ </ul> </pre> + <h3>{{_i}}Disabled menu options{{/i}}</h3> + <p>{{_i}}Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.{{/i}}</p> + <div class="bs-docs-example"> + <div class="dropdown clearfix"> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> + <li><a tabindex="-1" href="#">{{_i}}Regular link{{/i}}</a></li> + <li class="disabled"><a tabindex="-1" href="#">{{_i}}Disabled link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Another link{{/i}}</a></li> + </ul> + </div> + </div>{{! /example }} +<pre class="prettyprint linenums"> +<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> + <li><a tabindex="-1" href="#">{{_i}}Regular link{{/i}}</a></li> + <li class="disabled"><a tabindex="-1" href="#">{{_i}}Disabled link{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Another link{{/i}}</a></li> +</ul> +</pre> + <h3>{{_i}}Sub menus on dropdowns{{/i}}</h3> <p>{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.{{/i}}</p> <div class="bs-docs-example bs-docs-example-submenus"> @@ -201,9 +220,9 @@ </div> <pre class="prettyprint linenums"> <div class="btn-group"> - <button class="btn">1</button> - <button class="btn">2</button> - <button class="btn">3</button> + <button class="btn">Left</button> + <button class="btn">Middle</button> + <button class="btn">Right</button> </div> </pre> @@ -1425,6 +1444,7 @@ <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> + <li><a href="#">5</a></li> <li><a href="#">Next</a></li> </ul> </div> @@ -1454,7 +1474,7 @@ <pre class="prettyprint linenums"> <div class="pagination"> <ul> - <li class="disabled"><a href="#">Prev</a></li> + <li class="disabled"><a href="#">&laquo;</a></li> <li class="active"><a href="#">1</a></li> ... </ul> @@ -1464,7 +1484,7 @@ <pre class="prettyprint linenums"> <div class="pagination"> <ul> - <li class="disabled"><span>Prev</span></li> + <li class="disabled"><span>&laquo;</span></li> <li class="active"><span>1</span></li> ... </ul> @@ -2417,7 +2437,7 @@ <p><button class="close" style="float: none;">×</button></p> </div> <pre class="prettyprint linenums"><button class="close">&times;</button></pre> - <p>{{_i}}iOS devices require an href="#" for click events if you would rather use an anchor.{{/i}}</p> + <p>{{_i}}iOS devices require an <code>href="#"</code> for click events if you would rather use an anchor.{{/i}}</p> <pre class="prettyprint linenums"><a class="close" href="#">&times;</a></pre> <h2>{{_i}}Helper classes{{/i}}</h2> diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index c1976427cf..b5c8d57474 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -65,16 +65,8 @@ <h2>{{_i}}Tools for compiling{{/i}}</h2> - <h3>{{_i}}Node with makefile{{/i}}</h3> - <p>{{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}</p> - <pre>$ npm install -g less jshint recess uglify-js</pre> - <p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p> - <p>{{_i}}Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}</p> - <h3>{{_i}}Command line{{/i}}</h3> - <p>{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}</p> - <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre> - <p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p> + <p>{{_i}}Follow <a href="https://github.com/twitter/bootstrap#developers">the instructions in the project readme</a> on GitHub for compiling via command line.{{/i}}</p> <h3>{{_i}}JavaScript{{/i}}</h3> <p>{{_i}}<a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.{{/i}}</p> diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index 2eec7ff769..ae1534ce36 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -127,17 +127,18 @@ <div class="page-header"> <h1>{{_i}}4. Basic HTML template{{/i}}</h1> </div> - <p class="lead">{{_i}}With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.{{/i}}</p> + <p class="lead">{{_i}}With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.{{/i}}</p> <p>{{_i}}Now, here's a look at a <strong>typical HTML file</strong>:{{/i}}</p> <pre class="prettyprint linenums"> <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Hello, world!</h1> - <script src="http://code.jquery.com/jquery-latest.js"></script> + <script src="http://code.jquery.com/jquery.js"></script> </body> </html> </pre> @@ -147,12 +148,13 @@ <html> <head> <title>Bootstrap 101 Template</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>Hello, world!</h1> - <script src="http://code.jquery.com/jquery-latest.js"></script> + <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> @@ -172,21 +174,21 @@ <ul class="thumbnails bootstrap-examples"> <li class="span3"> <a class="thumbnail" href="examples/starter-template.html"> - <img src="assets/img/examples/bootstrap-example-starter.jpg" alt=""> + <img src="assets/img/examples/bootstrap-example-starter.png" alt=""> </a> <h4>{{_i}}Starter template{{/i}}</h4> <p>{{_i}}A barebones HTML document with all the Bootstrap CSS and JavaScript included.{{/i}}</p> </li> <li class="span3"> <a class="thumbnail" href="examples/hero.html"> - <img src="assets/img/examples/bootstrap-example-hero.jpg" alt=""> + <img src="assets/img/examples/bootstrap-example-marketing.png" alt=""> </a> <h4>{{_i}}Basic marketing site{{/i}}</h4> <p>{{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}</p> </li> <li class="span3"> <a class="thumbnail" href="examples/fluid.html"> - <img src="assets/img/examples/bootstrap-example-fluid.jpg" alt=""> + <img src="assets/img/examples/bootstrap-example-fluid.png" alt=""> </a> <h4>{{_i}}Fluid layout{{/i}}</h4> <p>{{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}</p> @@ -200,12 +202,20 @@ <p>{{_i}}Slim, lightweight marketing template for small projects or teams.{{/i}}</p> </li> <li class="span3"> + <a class="thumbnail" href="examples/justified-nav.html"> + <img src="assets/img/examples/bootstrap-example-justified-nav.png" alt=""> + </a> + <h4>{{_i}}Justified nav{{/i}}</h4> + <p>{{_i}}Marketing page with equal-width navigation links in a modified navbar.{{/i}}</p> + </li> + <li class="span3"> <a class="thumbnail" href="examples/signin.html"> <img src="assets/img/examples/bootstrap-example-signin.png" alt=""> </a> <h4>{{_i}}Sign in{{/i}}</h4> <p>{{_i}}Barebones sign in form with custom, larger form controls and a flexible layout.{{/i}}</p> </li> + <li class="span3"> <a class="thumbnail" href="examples/sticky-footer.html"> <img src="assets/img/examples/bootstrap-example-sticky-footer.png" alt=""> @@ -213,7 +223,6 @@ <h4>{{_i}}Sticky footer{{/i}}</h4> <p>{{_i}}Pin a fixed-height footer to the bottom of the user's viewport.{{/i}}</p> </li> - <li class="span3"> <a class="thumbnail" href="examples/carousel.html"> <img src="assets/img/examples/bootstrap-example-carousel.png" alt=""> diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index c46784494b..b38ddec254 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -3,7 +3,7 @@ <h1>{{_i}}Bootstrap{{/i}}</h1> <p>{{_i}}Sleek, intuitive, and powerful front-end framework for faster and easier web development.{{/i}}</p> <p> - <a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.2.2']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a> + <a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.3.0']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a> </p> <ul class="masthead-links"> <li> @@ -16,7 +16,7 @@ <a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>{{_i}}Extend{{/i}}</a> </li> <li> - {{_i}}Version 2.2.2{{/i}} + {{_i}}Version 2.3.0{{/i}} </li> </ul> </div> diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index e6b3f812a7..744988f4b4 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -90,7 +90,7 @@ $('#myModal').on('show', function (e) { <h1>{{_i}}Transitions{{/i}} <small>bootstrap-transition.js</small></h1> </div> <h3>{{_i}}About transitions{{/i}}</h3> - <p>{{_i}}For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.{{/i}}</p> + <p>{{_i}}For simple transition effects, include <strong>bootstrap-transition.js</strong> once alongside the other JS files. If you're using the compiled (or minified) <strong>bootstrap.js</strong>, there is no need to include this—it's already there.{{/i}}</p> <h3>{{_i}}Use cases{{/i}}</h3> <p>{{_i}}A few examples of the transition plugin:{{/i}}</p> <ul> @@ -335,21 +335,21 @@ $('#myModal').on('hidden', function () { <li class="dropdown"> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> - <li><a tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li> - <li><a tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> </ul> </li> <li class="dropdown"> <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> - <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> </ul> </li> </ul> @@ -357,11 +357,11 @@ $('#myModal').on('hidden', function () { <li id="fat-menu" class="dropdown"> <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> - <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> </ul> </li> </ul> @@ -377,31 +377,31 @@ $('#myModal').on('hidden', function () { <li class="dropdown"> <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> - <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5"> - <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5"> - <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> </ul> </li> </ul> <!-- /tabs --> @@ -697,23 +697,27 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h2>{{_i}}Examples{{/i}}</h2> <p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}</p> + <p>{{_i}}For performance reasons, the tooltip and popover data-apis are opt in, meaning <strong>you must initialize them yourself</strong>.{{/i}}</p> <p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p> <div class="bs-docs-example tooltip-demo"> - <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}} + <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="A much longer tooltip belongs right here to demonstrate the max-width we apply.">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}} </p> </div>{{! /example }} <h3>{{_i}}Four directions{{/i}}</h3> <div class="bs-docs-example tooltip-demo"> <ul class="bs-docs-tooltip-examples"> - <li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li> - <li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li> - <li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li> - <li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li> + <li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li> + <li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li> + <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li> + <li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li> </ul> </div>{{! /example }} + <h3>{{_i}}Tooltips in input groups{{/i}}</h3> + <p>{{_i}}When using tooltips and popovers with the Bootstrap input groups, you'll have to set the <code>container</code> (documented below) option to avoid unwanted side effects.{{/i}}</p> + <hr class="bs-docs-separator"> @@ -747,7 +751,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </tr> <tr> <td>{{_i}}placement{{/i}}</td> - <td>{{_i}}string|function{{/i}}</td> + <td>{{_i}}string | function{{/i}}</td> <td>'top'</td> <td>{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right</td> </tr> @@ -766,8 +770,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <tr> <td>{{_i}}trigger{{/i}}</td> <td>{{_i}}string{{/i}}</td> - <td>'hover'</td> - <td>{{_i}}how tooltip is triggered{{/i}} - click | hover | focus | manual</td> + <td>'hover focus'</td> + <td>{{_i}}how tooltip is triggered{{/i}} - click | hover | focus | manual. {{_i}}Note you case pass trigger mutliple, space seperated, trigger types.{{/i}}</td> </tr> <tr> <td>{{_i}}delay{{/i}}</td> @@ -779,6 +783,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p> </td> </tr> + <tr> + <td>{{_i}}container{{/i}}</td> + <td>{{_i}}string | false{{/i}}</td> + <td>{{_i}}false{{/i}}</td> + <td> + <p>{{_i}}Appends the tooltip to a specific element <code>container: 'body'</code>{{/i}}</p> + </td> + </tr> </tbody> </table> <div class="alert alert-info"> @@ -787,8 +799,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </div> <h3>{{_i}}Markup{{/i}}</h3> - <p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p> - <pre class="prettyprint linenums"><a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a></pre> + <pre class="prettyprint linenums"><a href="#" data-toggle="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a></pre> <h3>{{_i}}Methods{{/i}}</h3> <h4>$().tooltip({{_i}}options{{/i}})</h4> @@ -860,16 +871,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h3>Live demo</h3> <div class="bs-docs-example" style="padding-bottom: 24px;"> - <a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Click to toggle popover{{/i}}</a> + <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Click to toggle popover{{/i}}</a> </div> <h4>{{_i}}Four directions{{/i}}</h4> <div class="bs-docs-example tooltip-demo"> <ul class="bs-docs-tooltip-examples"> - <li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li> - <li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li> - <li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li> - <li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li> + <li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li> + <li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li> + <li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li> + <li><a href="#" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li> </ul> </div>{{! /example }} @@ -907,7 +918,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </tr> <tr> <td>{{_i}}placement{{/i}}</td> - <td>{{_i}}string|function{{/i}}</td> + <td>{{_i}}string | function{{/i}}</td> <td>'right'</td> <td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td> </tr> @@ -945,6 +956,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p> </td> </tr> + <tr> + <td>{{_i}}container{{/i}}</td> + <td>{{_i}}string | false{{/i}}</td> + <td>{{_i}}false{{/i}}</td> + <td> + <p>{{_i}}Appends the popover to a specific element <code>container: 'body'</code>{{/i}}</p> + </td> + </tr> </tbody> </table> <div class="alert alert-info"> @@ -1352,6 +1371,11 @@ $('#myCollapsible').on('hidden', function () { <p>{{_i}}The slideshow below shows a generic plugin and component for cycling through elements like a carousel.{{/i}}</p> <div class="bs-docs-example"> <div id="myCarousel" class="carousel slide"> + <ol class="carousel-indicators"> + <li data-target="#myCarousel" data-slide-to="0" class="active"></li> + <li data-target="#myCarousel" data-slide-to="1"></li> + <li data-target="#myCarousel" data-slide-to="2"></li> + </ol> <div class="carousel-inner"> <div class="item active"> <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""> @@ -1381,6 +1405,11 @@ $('#myCollapsible').on('hidden', function () { </div>{{! /example }} <pre class="prettyprint linenums"> <div id="myCarousel" class="carousel slide"> + <ol class="carousel-indicators"> + <li data-target="#myCarousel" data-slide-to="0" class="active"></li> + <li data-target="#myCarousel" data-slide-to="1"></li> + <li data-target="#myCarousel" data-slide-to="2"></li> + </ol> <!-- {{_i}}Carousel items{{/i}} --> <div class="carousel-inner"> <div class="active item">…</div> @@ -1405,14 +1434,14 @@ $('#myCollapsible').on('hidden', function () { <h2>{{_i}}Usage{{/i}}</h2> <h3>{{_i}}Via data attributes{{/i}}</h3> - <p>{{_i}}...{{/i}}</p> + <p>{{_i}}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 it's 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 jump's the slide position to a particular index beginning with <code>0</code>.{{/i}}</p> <h3>{{_i}}Via JavaScript{{/i}}</h3> <p>{{_i}}Call carousel manually with:{{/i}}</p> <pre class="prettyprint linenums">$('.carousel').carousel()</pre> <h3>{{_i}}Options{{/i}}</h3> - <p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.{{/i}}</p> + <p>{{_i}}Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.{{/i}}</p> <table class="table table-bordered table-striped"> <thead> <tr> @@ -1495,7 +1524,7 @@ $('.carousel').carousel({ <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'> </div>{{! /example }} <pre class="prettyprint linenums"><input type="text" data-provide="typeahead"></pre> - + <p>You'll want to set <code>autocomplete="off"</code> to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.</p> <hr class="bs-docs-separator"> @@ -1601,14 +1630,6 @@ $('.carousel').carousel({ <p>{{_i}}Call the affix plugin via JavaScript:{{/i}}</p> <pre class="prettyprint linenums">$('#navbar').affix()</pre> - <h3>{{_i}}Methods{{/i}}</h3> - <h4>.affix('refresh')</h4> - <p>{{_i}}When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:{{/i}}</p> -<pre class="prettyprint linenums"> -$('[data-spy="affix"]').each(function () { - $(this).affix('refresh') -}); -</pre> <h3>{{_i}}Options{{/i}}</h3> <p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.{{/i}}</p> <table class="table table-bordered table-striped"> |