diff options
Diffstat (limited to 'docs/docs.html')
| -rw-r--r-- | docs/docs.html | 306 |
1 files changed, 153 insertions, 153 deletions
diff --git a/docs/docs.html b/docs/docs.html index e62e44661..3ea2d84f7 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -20,22 +20,22 @@ title: Bootstrap Documentation </div> <p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p> <div class="row"> - <div class="col-span-6"> + <div class="col col-lg-6"> <h3>Compiled CSS and JS</h3> <p><strong>The fastest way to get started:</strong> get the compiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source files are included.</p> <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p> </div> - <div class="col-span-6"> + <div class="col col-lg-6"> <h3>Latest source code</h3> <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p> <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p> </div> - <div class="col-span-6"> + <div class="col col-lg-6"> <h3>Clone or fork via GitHub</h3> <p>Clone the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.</p> <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">GitHub repository</a></p> </div> - <div class="col-span-6"> + <div class="col col-lg-6"> <h3>Bower</h3> <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p> {% highlight bash %}$ bower install bootstrap{% endhighlight %} @@ -110,63 +110,63 @@ title: Bootstrap Documentation <h3>Examples</h3> <div class="row bs-docs-examples"> - <div class="col-span-4"> + <div class="col col-lg-4"> <a class="thumbnail" href="/examples/starter-template/" target="_blank"> <img src="/assets/img/examples/bootstrap-example-starter.png" alt=""> </a> <h4>Starter template</h4> <p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <a class="thumbnail" href="/examples/grid/" target="_blank"> <img src="/assets/img/examples/bootstrap-example-grid.png" alt=""> </a> <h4>Basic grid layouts</h4> <p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <a class="thumbnail" href="/examples/jumbotron/" target="_blank"> <img src="/assets/img/examples/bootstrap-example-marketing.png" alt=""> </a> <h4>Basic marketing site</h4> <p>Features a jumbotron for primary message and three supporting elements.</p> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank"> <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt=""> </a> <h4>Narrow marketing</h4> <p>Slim, lightweight marketing template for small projects or teams.</p> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <a class="thumbnail" href="/examples/justified-nav/" target="_blank"> <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt=""> </a> <h4>Justified nav</h4> <p>Marketing page with equal-width navigation links in a modified navbar.</p> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <a class="thumbnail" href="/examples/signin/" target="_blank"> <img src="/assets/img/examples/bootstrap-example-signin.png" alt=""> </a> <h4>Sign in</h4> <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <a class="thumbnail" href="/examples/sticky-footer/" target="_blank"> <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt=""> </a> <h4>Sticky footer</h4> <p>Pin a fixed-height footer to the bottom of the user's viewport.</p> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank"> <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt=""> </a> <h4>Sticky footer w/ navbar</h4> <p>Add a fixed navbar to the default sticky footer template.</p> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <a class="thumbnail" href="/examples/carousel/" target="_blank"> <img src="/assets/img/examples/bootstrap-example-carousel.png" alt=""> </a> @@ -174,21 +174,21 @@ title: Bootstrap Documentation <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <a class="thumbnail" href="/examples/navbar/" target="_blank"> <img src="/assets/img/examples/bootstrap-example-navbar.png" alt=""> </a> <h4>Navbar</h4> <p>Basic template for showcasing how the navbar works.</p> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank"> <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt=""> </a> <h4>Static top navbar</h4> <p>Basic template for showcasing the static navbar variation.</p> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank"> <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt=""> </a> @@ -338,81 +338,81 @@ title: Bootstrap Documentation <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-span-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p> <div class="bs-docs-grid"> <div class="row show-grid"> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> </div> <div class="row show-grid"> - <div class="col-span-4">4</div> - <div class="col-span-4">4</div> - <div class="col-span-4">4</div> + <div class="col col-lg-4">4</div> + <div class="col col-lg-4">4</div> + <div class="col col-lg-4">4</div> </div> <div class="row show-grid"> - <div class="col-span-6">6</div> - <div class="col-span-6">6</div> + <div class="col col-lg-6">6</div> + <div class="col col-lg-6">6</div> </div> </div> {% highlight html linenos %} <div class="row"> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> - <div class="col-span-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> + <div class="col col-lg-1">1</div> </div> <div class="row"> - <div class="col-span-4">4</div> - <div class="col-span-4">4</div> - <div class="col-span-4">4</div> + <div class="col col-lg-4">4</div> + <div class="col col-lg-4">4</div> + <div class="col col-lg-4">4</div> </div> <div class="row"> - <div class="col-span-6">6</div> - <div class="col-span-6">6</div> + <div class="col col-lg-6">6</div> + <div class="col col-lg-6">6</div> </div> {% endhighlight %} <h3 id="grid-offsetting">Offsetting columns</h3> - <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-span-4</code> over four columns.</p> + <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col col-lg-4</code> over four columns.</p> <div class="bs-docs-grid"> <div class="row show-grid"> - <div class="col-span-4">4</div> - <div class="col-span-4 col-offset-4">4 offset 4</div> + <div class="col col-lg-4">4</div> + <div class="col col-lg-4 col-offset-4">4 offset 4</div> </div><!-- /row --> <div class="row show-grid"> - <div class="col-span-3 col-offset-3">3 offset 3</div> - <div class="col-span-3 col-offset-3">3 offset 3</div> + <div class="col col-lg-3 col-offset-3">3 offset 3</div> + <div class="col col-lg-3 col-offset-3">3 offset 3</div> </div><!-- /row --> <div class="row show-grid"> - <div class="col-span-6 col-offset-3">6 offset 3</div> + <div class="col col-lg-6 col-offset-3">6 offset 3</div> </div><!-- /row --> </div> {% highlight html linenos %} <div class="row"> - <div class="col-span-4">...</div> - <div class="col-span-4 col-offset-4">...</div> + <div class="col col-lg-4">...</div> + <div class="col col-lg-4 col-offset-4">...</div> </div> <div class="row"> - <div class="col-span-3 col-offset-3">3 offset 3</div> - <div class="col-span-3 col-offset-3">3 offset 3</div> + <div class="col col-lg-3 col-offset-3">3 offset 3</div> + <div class="col col-lg-3 col-offset-3">3 offset 3</div> </div> <div class="row"> - <div class="col-span-6 col-offset-3">...</div> + <div class="col col-lg-6 col-offset-3">...</div> </div> {% endhighlight %} @@ -420,13 +420,13 @@ title: Bootstrap Documentation <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-span-*</code> columns within an existing <code>.col-span-*</code> column. Nested rows should include a set of columns that add up to 12.</p> <div class="row show-grid"> - <div class="col-span-9"> + <div class="col col-lg-9"> Level 1: 9 columns <div class="row show-grid"> - <div class="col-span-6"> + <div class="col col-lg-6"> Level 2: 6 columns </div> - <div class="col-span-6"> + <div class="col col-lg-6"> Level 2: 6 columns </div> </div> @@ -434,13 +434,13 @@ title: Bootstrap Documentation </div> {% highlight html linenos %} <div class="row"> - <div class="col-span-9"> + <div class="col col-lg-9"> Level 1: 9 columns <div class="row"> - <div class="col-span-6"> + <div class="col col-lg-6"> Level 2: 6 columns </div> - <div class="col-span-6"> + <div class="col col-lg-6"> Level 2: 6 columns </div> </div> @@ -451,29 +451,29 @@ title: Bootstrap Documentation <h3 id="grid-column-ordering">Column ordering</h3> <p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p> <div class="row show-grid"> - <div class="col-span-9 col-push-3">9</div> - <div class="col-span-3 col-pull-9">3</div> + <div class="col col-lg-9 col-push-3">9</div> + <div class="col col-lg-3 col-pull-9">3</div> </div> {% highlight html linenos %} <div class="row show-grid"> - <div class="col-span-9 col-push-3">9</div> - <div class="col-span-3 col-pull-9">3</div> + <div class="col col-lg-9 col-push-3">9</div> + <div class="col col-lg-3 col-pull-9">3</div> </div> {% endhighlight %} <h3 id="grid-small">Small device grid</h3> - <p>Use the small device grid classes, like <code>.col-small-span-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p> + <p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p> <div class="row show-grid"> - <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div> - <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div> - <div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div> + <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> + <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> + <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div> </div> {% highlight html linenos %} <div class="row"> - <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div> - <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div> - <div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div> + <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> + <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> + <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div> </div> {% endhighlight %} @@ -1186,8 +1186,8 @@ For example, <code><section></code> should be wrapped as inline. <p>Use contextual classes to color table rows.</p> <table class="table table-bordered table-striped"> <colgroup> - <col class="col-span-1"> - <col class="col-span-7"> + <col class="col col-lg-1"> + <col class="col col-lg-7"> </colgroup> <thead> <tr> @@ -1316,8 +1316,8 @@ For example, <code><section></code> should be wrapped as inline. <h3 id="forms-inline">Inline form</h3> <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p> <form class="bs-docs-example form-inline"> - <input type="text" class="col-span-3" placeholder="Email"> - <input type="password" class="col-span-3" placeholder="Password"> + <input type="text" class="col col-lg-3" placeholder="Email"> + <input type="password" class="col col-lg-3" placeholder="Password"> <div class="checkbox"> <label> <input type="checkbox"> Remember me @@ -1327,8 +1327,8 @@ For example, <code><section></code> should be wrapped as inline. </form><!-- /example --> {% highlight html linenos %} <form class="form-inline"> - <input type="text" class="col-span-3" placeholder="Email"> - <input type="password" class="col-span-3" placeholder="Password"> + <input type="text" class="col col-lg-3" placeholder="Email"> + <input type="password" class="col col-lg-3" placeholder="Password"> <div class="checkbox"> <label> <input type="checkbox"> Remember me @@ -1548,10 +1548,10 @@ For example, <code><section></code> should be wrapped as inline. </div> <form class="bs-docs-example form-inline"> - <input class="col-span-3" type="email" placeholder="[email protected]" required> + <input class="col col-lg-3" type="email" placeholder="[email protected]" required> </form> {% highlight html linenos %} -<input class="col-span-3" type="email" placeholder="[email protected]" required> +<input class="col col-lg-3" type="email" placeholder="[email protected]" required> {% endhighlight %} <h3 id="forms-disabled-inputs">Disabled inputs</h3> @@ -1579,10 +1579,10 @@ For example, <code><section></code> should be wrapped as inline. <form class="bs-docs-example form-inline"> <fieldset disabled> <div> - <input type="text" class="col-span-4" placeholder="Disabled input"> + <input type="text" class="col col-lg-4" placeholder="Disabled input"> </div> <div> - <select class="col-span-4"> + <select class="col col-lg-4"> <option>Disabled select</option> </select> </div> @@ -1598,10 +1598,10 @@ For example, <code><section></code> should be wrapped as inline. <form class="form-inline"> <fieldset disabled> <div> - <input type="text" class="col-span-4" placeholder="Disabled input"> + <input type="text" class="col col-lg-4" placeholder="Disabled input"> </div> <div> - <select class="col-span-4"> + <select class="col col-lg-4"> <option>Disabled select</option> </select> </div> @@ -1678,34 +1678,34 @@ For example, <code><section></code> should be wrapped as inline. </div> <form class="bs-docs-example"> - <div class="input-group col-span-9"> + <div class="input-group col col-lg-9"> <span class="input-group-addon">@</span> <input type="text" placeholder="Username"> </div> <br> - <div class="input-group col-span-6"> + <div class="input-group col col-lg-6"> <input type="text"> <span class="input-group-addon">.00</span> </div> <br> - <div class="input-group col-span-3"> + <div class="input-group col col-lg-3"> <span class="input-group-addon">$</span> <input type="text"> <span class="input-group-addon">.00</span> </div> </form> {% highlight html linenos %} -<div class="input-group col-span-9"> +<div class="input-group col col-lg-9"> <span class="input-group-addon">@</span> <input type="text" placeholder="Username"> </div> -<div class="input-group col-span-6"> +<div class="input-group col col-lg-6"> <input type="text"> <span class="input-group-addon">.00</span> </div> -<div class="input-group col-span-3"> +<div class="input-group col col-lg-3"> <span class="input-group-addon">$</span> <input type="text"> <span class="input-group-addon">.00</span> @@ -1715,33 +1715,33 @@ For example, <code><section></code> should be wrapped as inline. <h4>Optional sizes</h4> <p>Add the relative form sizing classes to the `.input-group-addon`.</p> <form class="bs-docs-example"> - <div class="input-group col-span-9"> + <div class="input-group col col-lg-9"> <span class="input-group-addon input-large">@</span> <input type="text" class="input-large" placeholder="Username"> </div> <br> - <div class="input-group col-span-9"> + <div class="input-group col col-lg-9"> <span class="input-group-addon">@</span> <input type="text" placeholder="Username"> </div> <br> - <div class="input-group col-span-9"> + <div class="input-group col col-lg-9"> <span class="input-group-addon input-small">@</span> <input type="text" class="input-small" placeholder="Username"> </div> </form> {% highlight html linenos %} -<div class="input-group col-span-9"> +<div class="input-group col col-lg-9"> <span class="input-group-addon input-large">@</span> <input type="text" class="input-large" placeholder="Username"> </div> -<div class="input-group col-span-9"> +<div class="input-group col col-lg-9"> <span class="input-group-addon">@</span> <input type="text" placeholder="Username"> </div> -<div class="input-group col-span-9"> +<div class="input-group col col-lg-9"> <span class="input-group-addon input-small">@</span> <input type="text" class="input-small" placeholder="Username"> </div> @@ -1750,14 +1750,14 @@ For example, <code><section></code> should be wrapped as inline. <h4>Buttons instead of text</h4> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <form class="bs-docs-example"> - <div class="input-group col-span-7"> + <div class="input-group col col-lg-7"> <span class="input-group-btn"> <button class="btn" type="button">Go!</button> </span> <input type="text"> </div> <br> - <div class="input-group col-span-7"> + <div class="input-group col col-lg-7"> <input type="text"> <span class="input-group-btn"> <button class="btn" type="button">Go!</button> @@ -1765,14 +1765,14 @@ For example, <code><section></code> should be wrapped as inline. </div> </form> {% highlight html linenos %} -<div class="input-group col-span-7"> +<div class="input-group col col-lg-7"> <span class="input-group-btn"> <button class="btn" type="button">Go!</button> </span> <input type="text"> </div> -<div class="input-group col-span-7"> +<div class="input-group col col-lg-7"> <input type="text"> <span class="input-group-btn"> <button class="btn" type="button">Go!</button> @@ -1783,7 +1783,7 @@ For example, <code><section></code> should be wrapped as inline. <h4>Button dropdowns</h4> <p></p> <form class="bs-docs-example"> - <div class="input-group col-span-7"> + <div class="input-group col col-lg-7"> <div class="input-group-btn"> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu"> @@ -1797,7 +1797,7 @@ For example, <code><section></code> should be wrapped as inline. <input type="text"> </div><!-- /input-group --> <br> - <div class="input-group col-span-7"> + <div class="input-group col col-lg-7"> <input type="text"> <div class="input-group-btn"> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> @@ -1812,7 +1812,7 @@ For example, <code><section></code> should be wrapped as inline. </div><!-- /input-group --> </form> {% highlight html linenos %} -<div class="input-group col-span-7"> +<div class="input-group col col-lg-7"> <div class="input-group-btn"> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu"> @@ -1826,7 +1826,7 @@ For example, <code><section></code> should be wrapped as inline. <input type="text"> </div><!-- /input-group --> -<div class="input-group col-span-7"> +<div class="input-group col col-lg-7"> <input type="text"> <div class="input-group-btn"> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> @@ -1843,7 +1843,7 @@ For example, <code><section></code> should be wrapped as inline. <h4>Segmented dropdown groups</h4> <form class="bs-docs-example"> - <div class="input-group col-span-7"> + <div class="input-group col col-lg-7"> <div class="input-group-btn"> <button class="btn" tabindex="-1">Action</button> <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"> @@ -1862,7 +1862,7 @@ For example, <code><section></code> should be wrapped as inline. <br> - <div class="input-group col-span-7"> + <div class="input-group col col-lg-7"> <input type="text"> <div class="input-group-btn"> <button class="btn" tabindex="-1">Action</button> @@ -1880,14 +1880,14 @@ For example, <code><section></code> should be wrapped as inline. </div> </form> {% highlight html linenos %} -<div class="input-group col-span-7"> +<div class="input-group col col-lg-7"> <div class="input-group-btn"> <!-- Button and dropdown menu --> </div> <input type="text"> </div> -<div class="input-group col-span-7"> +<div class="input-group col col-lg-7"> <input type="text"> <div class="input-group-btn btn-group"> <!-- Button and dropdown menu --> @@ -1914,27 +1914,27 @@ For example, <code><section></code> should be wrapped as inline. {% endhighlight %} <h4>Column sizing</h4> - <p>Use <code>.col-span-1</code> to <code>.col-span-12</code> for setting widths on inputs that match Bootstrap's grid system.</p> + <p>Use <code>.col col-lg-1</code> to <code>.col col-lg-12</code> for setting widths on inputs that match Bootstrap's grid system.</p> <form class="bs-docs-example" style="padding-bottom: 15px;"> <div class="controls docs-input-sizes"> - <input class="col-span-1" type="text" placeholder=".col-span-1"> - <input class="col-span-2" type="text" placeholder=".col-span-2"> - <input class="col-span-3" type="text" placeholder=".col-span-3"> - <select class="col-span-1"> + <input class="col col-lg-1" type="text" placeholder=".col col-lg-1"> + <input class="col col-lg-2" type="text" placeholder=".col col-lg-2"> + <input class="col col-lg-3" type="text" placeholder=".col col-lg-3"> + <select class="col col-lg-1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> - <select class="col-span-2"> + <select class="col col-lg-2"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> - <select class="col-span-3"> + <select class="col col-lg-3"> <option>1</option> <option>2</option> <option>3</option> @@ -1944,16 +1944,16 @@ For example, <code><section></code> should be wrapped as inline. </div> </form> {% highlight html linenos %} -<input class="col-span-1" type="text" placeholder=".col-span-1"> -<input class="col-span-2" type="text" placeholder=".col-span-2"> -<input class="col-span-3" type="text" placeholder=".col-span-3"> -<select class="col-span-1"> +<input class="col col-lg-1" type="text" placeholder=".col col-lg-1"> +<input class="col col-lg-2" type="text" placeholder=".col col-lg-2"> +<input class="col col-lg-3" type="text" placeholder=".col col-lg-3"> +<select class="col col-lg-1"> ... </select> -<select class="col-span-2"> +<select class="col col-lg-2"> ... </select> -<select class="col-span-3"> +<select class="col col-lg-3"> ... </select> {% endhighlight %} @@ -1961,27 +1961,27 @@ For example, <code><section></code> should be wrapped as inline. <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.col-span-*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p> <form class="bs-docs-example" style="padding-bottom: 15px;"> <div class="row"> - <div class="col-span-4"> - <input type="text" placeholder=".col-span-4"> + <div class="col col-lg-4"> + <input type="text" placeholder=".col col-lg-4"> </div> - <div class="col-span-4"> - <input type="text" placeholder=".col-span-4"> + <div class="col col-lg-4"> + <input type="text" placeholder=".col col-lg-4"> </div> - <div class="col-span-4"> - <input type="text" placeholder=".col-span-4"> + <div class="col col-lg-4"> + <input type="text" placeholder=".col col-lg-4"> </div> </div> </form> {% highlight html linenos %} <div class="row"> - <div class="col-span-4"> - <input type="text" placeholder=".col-span-4"> + <div class="col col-lg-4"> + <input type="text" placeholder=".col col-lg-4"> </div> - <div class="col-span-4"> - <input type="text" placeholder=".col-span-4"> + <div class="col col-lg-4"> + <input type="text" placeholder=".col col-lg-4"> </div> - <div class="col-span-4"> - <input type="text" placeholder=".col-span-4"> + <div class="col col-lg-4"> + <input type="text" placeholder=".col col-lg-4"> </div> </div> {% endhighlight %} @@ -2679,7 +2679,7 @@ For example, <code><section></code> should be wrapped as inline. <div class="controls"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> - <input class="col-span-2" id="inputIcon" type="text"> + <input class="col col-lg-2" id="inputIcon" type="text"> </div> </div> </div> @@ -2690,7 +2690,7 @@ For example, <code><section></code> should be wrapped as inline. <div class="controls"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> - <input class="col-span-2" id="inputIcon" type="text"> + <input class="col col-lg-2" id="inputIcon" type="text"> </div> </div> </div> @@ -3646,7 +3646,7 @@ body { </li> </ul> <form class="navbar-form pull-left" action=""> - <input type="text" class="col-span-8" placeholder="Search"> + <input type="text" class="col col-lg-8" placeholder="Search"> </form> <ul class="nav pull-right"> <li><a href="#">Link</a></li> @@ -3724,7 +3724,7 @@ body { </li> </ul> <form class="navbar-form pull-left" action=""> - <input type="text" class="col-span-8" placeholder="Search"> + <input type="text" class="col col-lg-8" placeholder="Search"> </form> <ul class="nav pull-right"> <li><a href="#">Link</a></li> @@ -4115,22 +4115,22 @@ body { <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> <div class="bs-docs-example"> <div class="row"> - <div class="col-span-3"> + <div class="col col-lg-3"> <a href="#" class="thumbnail"> <img data-src="holder.js/260x180" alt=""> </a> </div> - <div class="col-span-3"> + <div class="col col-lg-3"> <a href="#" class="thumbnail"> <img data-src="holder.js/260x180" alt=""> </a> </div> - <div class="col-span-3"> + <div class="col col-lg-3"> <a href="#" class="thumbnail"> <img data-src="holder.js/260x180" alt=""> </a> </div> - <div class="col-span-3"> + <div class="col col-lg-3"> <a href="#" class="thumbnail"> <img data-src="holder.js/260x180" alt=""> </a> @@ -4139,7 +4139,7 @@ body { </div><!-- /.bs-docs-example --> {% highlight html linenos %} <div class="row"> - <div class="col-span-3"> + <div class="col col-lg-3"> <a href="#" class="thumbnail"> <img data-src="holder.js/260x180" alt=""> </a> @@ -4152,7 +4152,7 @@ body { <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> <div class="bs-docs-example"> <div class="row"> - <div class="col-span-4"> + <div class="col col-lg-4"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt=""> <div class="caption"> @@ -4162,7 +4162,7 @@ body { </div> </div> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt=""> <div class="caption"> @@ -4172,7 +4172,7 @@ body { </div> </div> </div> - <div class="col-span-4"> + <div class="col col-lg-4"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt=""> <div class="caption"> @@ -4186,7 +4186,7 @@ body { </div><!-- /.bs-docs-example --> {% highlight html linenos %} <div class="row"> - <div class="col-span-3"> + <div class="col col-lg-3"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt=""> <div class="caption"> @@ -6542,7 +6542,7 @@ $('.carousel').carousel({ <h2>Example</h2> <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p> <div class="bs-docs-example" style="background-color: #f5f5f5;"> - <input type="text" class="col-span-3" 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"]'> + <input type="text" class="col col-lg-3" 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 --> {% highlight html linenos %} <input type="text" data-provide="typeahead"> |