mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
Merge branch '2.1.2-wip' into box-sizing-exercise
Conflicts: docs/scaffolding.html docs/templates/pages/scaffolding.mustache
This commit is contained in:
Mark Otto
+23
-5
@@ -88,14 +88,14 @@
|
||||
</p>
|
||||
</pre>
|
||||
|
||||
<h3><code><strong></code></h3>
|
||||
<h3>{{_i}}Bold{{/i}}</h3>
|
||||
<p>{{_i}}For emphasizing a snippet of text with <strong>important</strong>{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
|
||||
</div>
|
||||
<pre class="prettyprint"><strong>rendered as bold text</strong></pre>
|
||||
|
||||
<h3><code><em></code></h3>
|
||||
<h3>{{_i}}Italics{{/i}}</h3>
|
||||
<p>{{_i}}For emphasizing a snippet of text with <em>stress</em>{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
|
||||
@@ -104,6 +104,23 @@
|
||||
|
||||
<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}}Emphasis classes{{/i}}</h3>
|
||||
<p>{{_i}}Convey meaning through color with a handful of emphasis utility classes.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
@@ -932,7 +949,7 @@
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Textarea{{/i}}</h3>
|
||||
<p>{{_i}}Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.{{/i}}</p>
|
||||
<p>{{_i}}Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.{{/i}}</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<textarea rows="3"></textarea>
|
||||
</form>
|
||||
@@ -1837,8 +1854,9 @@
|
||||
<label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on"><i class="icon-envelope"></i></span>
|
||||
<input class="span2" id="inputIcon" type="text">
|
||||
<span class="add-on"><i class="icon-envelope"></i></span>
|
||||
<input class="span2" id="inputIcon" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
+18
@@ -111,6 +111,24 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="dropup" style="float: left; margin-left: 20px;">
|
||||
<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}}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 class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
|
||||
+2
-2
@@ -33,7 +33,7 @@
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}1. Download{{/i}}</h1>
|
||||
</div>
|
||||
<p class="lead">{{_i}}Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.{{/i}}</p>
|
||||
<p class="lead">{{_i}}Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.{{/i}}</p>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span6">
|
||||
@@ -128,7 +128,7 @@
|
||||
<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 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="#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>
|
||||
|
||||
Vendored
+2
-2
@@ -2,11 +2,11 @@
|
||||
<div class="container">
|
||||
<h1>Bootstrap</h1>
|
||||
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
|
||||
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.1']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p>
|
||||
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.2']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p>
|
||||
<ul class="masthead-links">
|
||||
<li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>GitHub project</a></li>
|
||||
<li><a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>Extend</a></li>
|
||||
<li>Version 2.1.1</li>
|
||||
<li>Version 2.1.2</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+30
@@ -1191,6 +1191,36 @@ $('#my-alert').bind('closed', function () {
|
||||
</div>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="accordion" id="accordion2">
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
|
||||
{{_i}}Collapsible Group Item #1{{/i}}
|
||||
</a>
|
||||
</div>
|
||||
<div id="collapseOne" class="accordion-body collapse in">
|
||||
<div class="accordion-inner">
|
||||
Anim pariatur cliche...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
|
||||
{{_i}}Collapsible Group Item #2{{/i}}
|
||||
</a>
|
||||
</div>
|
||||
<div id="collapseTwo" class="accordion-body collapse">
|
||||
<div class="accordion-inner">
|
||||
Anim pariatur cliche...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
...
|
||||
</pre>
|
||||
<p>{{_i}}You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
|
||||
{{_i}}simple collapsible{{/i}}
|
||||
</button>
|
||||
|
||||
+133
-29
@@ -107,7 +107,7 @@
|
||||
<p>{{_i}}Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.{{/i}}</p>
|
||||
|
||||
<h2>{{_i}}Offsetting columns{{/i}}</h2>
|
||||
<p>{{_i}}Move columns to the left using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.{{/i}}</p>
|
||||
<p>{{_i}}Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.{{/i}}</p>
|
||||
<div class="bs-docs-grid">
|
||||
<div class="row show-grid">
|
||||
<div class="span4">4</div>
|
||||
@@ -132,8 +132,8 @@
|
||||
<h2>{{_i}}Nesting columns{{/i}}</h2>
|
||||
<p>{{_i}}To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}</p>
|
||||
<div class="row show-grid">
|
||||
<div class="span12">
|
||||
{{_i}}Level 1 of column{{/i}}
|
||||
<div class="span9">
|
||||
{{_i}}Level 1 column{{/i}}
|
||||
<div class="row show-grid">
|
||||
<div class="span6">
|
||||
{{_i}}Level 2{{/i}}
|
||||
@@ -150,7 +150,111 @@
|
||||
{{_i}}Level 1 column{{/i}}
|
||||
<div class="row">
|
||||
<div class="span6">{{_i}}Level 2{{/i}}</div>
|
||||
<div class="span6">{{_i}}Level 2{{/i}}</div>
|
||||
<div class="span3">{{_i}}Level 2{{/i}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Fluid grid system
|
||||
================================================== -->
|
||||
<section id="fluidGridSystem">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Fluid grid system{{/i}}</h1>
|
||||
</div>
|
||||
|
||||
<h2>{{_i}}Live fluid grid example{{/i}}</h2>
|
||||
<p>{{_i}}The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
|
||||
<div class="bs-docs-grid">
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
</div>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
</div>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span8">8</div>
|
||||
</div>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6">6</div>
|
||||
<div class="span6">6</div>
|
||||
</div>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span12">12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>{{_i}}Basic fluid grid HTML{{/i}}</h3>
|
||||
<p>{{_i}}Make any row "fluid" by changing <code>.row</code> to <code>.row-fluid</code>. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row-fluid">
|
||||
<div class="span4">...</div>
|
||||
<div class="span8">...</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>{{_i}}Fluid offsetting{{/i}}</h2>
|
||||
<p>{{_i}}Operates the same way as the fixed grid system offsetting: add <code>.offset*</code> to any column to offset by that many columns.{{/i}}</p>
|
||||
<div class="bs-docs-grid">
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span4 offset4">4 offset 4</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6 offset6">6 offset 6</div>
|
||||
</div><!-- /row -->
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row-fluid">
|
||||
<div class="span4">...</div>
|
||||
<div class="span4 offset2">...</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>{{_i}}Fluid nesting{{/i}}</h2>
|
||||
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}</p>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span12">
|
||||
{{_i}}Fluid 12{{/i}}
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6">
|
||||
{{_i}}Fluid 6{{/i}}
|
||||
</div>
|
||||
<div class="span6">
|
||||
{{_i}}Fluid 6{{/i}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
{{_i}}Fluid 12{{/i}}
|
||||
<div class="row-fluid">
|
||||
<div class="span6">{{_i}}Fluid 6{{/i}}</div>
|
||||
<div class="span6">{{_i}}Fluid 6{{/i}}</div>
|
||||
>>>>>>> 2.1.2-wip
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -244,20 +348,10 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{_i}}Phones{{/i}}</td>
|
||||
<td>480px and below</td>
|
||||
<td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}Phones to tablets{{/i}}</td>
|
||||
<td>767px and below</td>
|
||||
<td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}Portrait tablets{{/i}}</td>
|
||||
<td>768px and above</td>
|
||||
<td>42px</td>
|
||||
<td>20px</td>
|
||||
<td>{{_i}}Large display{{/i}}</td>
|
||||
<td>1200px and up</td>
|
||||
<td>70px</td>
|
||||
<td>30px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}Default{{/i}}</td>
|
||||
@@ -266,25 +360,35 @@
|
||||
<td>20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}Large display{{/i}}</td>
|
||||
<td>1200px and up</td>
|
||||
<td>70px</td>
|
||||
<td>30px</td>
|
||||
<td>{{_i}}Portrait tablets{{/i}}</td>
|
||||
<td>768px and above</td>
|
||||
<td>42px</td>
|
||||
<td>20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}Phones to tablets{{/i}}</td>
|
||||
<td>767px and below</td>
|
||||
<td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}Phones{{/i}}</td>
|
||||
<td>480px and below</td>
|
||||
<td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<pre class="prettyprint linenums">
|
||||
/* {{_i}}Landscape phones and down{{/i}} */
|
||||
@media (max-width: 480px) { ... }
|
||||
|
||||
/* {{_i}}Landscape phone to portrait tablet{{/i}} */
|
||||
@media (max-width: 767px) { ... }
|
||||
/* {{_i}}Large desktop{{/i}} */
|
||||
@media (min-width: 1200px) { ... }
|
||||
|
||||
/* {{_i}}Portrait tablet to landscape and desktop{{/i}} */
|
||||
@media (min-width: 768px) and (max-width: 979px) { ... }
|
||||
|
||||
/* {{_i}}Large desktop{{/i}} */
|
||||
@media (min-width: 1200px) { ... }
|
||||
/* {{_i}}Landscape phone to portrait tablet{{/i}} */
|
||||
@media (max-width: 767px) { ... }
|
||||
|
||||
/* {{_i}}Landscape phones and down{{/i}} */
|
||||
@media (max-width: 480px) { ... }
|
||||
</pre>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user