kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Document caret /cc #10102

Browse source
This commit is contained in:
Mark Otto 2013-10-13 15:23:58 -07:00
parent dcef0a78d5
commit 12fa502e67
2 changed files with 18 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
_includes/nav-css.html
View file

@ -79,6 +79,7 @@
<a href="#helper-classes">Helper classes</a> <a href="#helper-classes">Helper classes</a>
<ul class="nav"> <ul class="nav">
<li><a href="#helper-classes-close">Close icon</a></li> <li><a href="#helper-classes-close">Close icon</a></li>
<li><a href="#helper-classes-carets">Carets</a></li>
<li><a href="#helper-classes-floats">Quick floats</a></li> <li><a href="#helper-classes-floats">Quick floats</a></li>
<li><a href="#helper-classes-center">Center content blocks</a></li> <li><a href="#helper-classes-center">Center content blocks</a></li>
<li><a href="#helper-classes-clearfix">Clearfix</a></li> <li><a href="#helper-classes-clearfix">Clearfix</a></li>

17
css.html
View file

@ -72,6 +72,13 @@ base_url: "../"
</div> </div>
<p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p> <p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h3 id="grid-how-it-works">How it works</h3>
<p>Grid systems are great for building easy to use and maintain web pages. In the most basic implementation, you create rows of columns to house your content. Bootstrap's grid system enables this in two ways: predefined CSS classes and LESS mixins. In both cases, the following guidelines apply.</p>
<ul>
<li>Create a <code>.row</code> to house your columns. No content should be placed directly within a row, only in columns.</li>
<li>Each column is created by specifying the number of available grid columns you'd like to span. By default, we have 12 columns. For an even layout, you'd create two columns, each spanning six columns.</li>
</ul>
<h3 id="grid-media-queries">Media queries</h3> <h3 id="grid-media-queries">Media queries</h3>
<p>We use the following media queries in our LESS files to create the key breakpoints in our grid system.</p> <p>We use the following media queries in our LESS files to create the key breakpoints in our grid system.</p>
{% highlight css %} {% highlight css %}
@ -2258,6 +2265,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h3 id="helper-classes-carets">Carets</h3>
<p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <a href="../components/#btn-dropdowns-dropup">dropup menus</a>.</p>
<div class="bs-example">
<span class="caret"></span>
</div>
{% highlight html %}
<span class="caret"></span>
{% endhighlight %}
<h3 id="helper-classes-floats">Quick floats</h3> <h3 id="helper-classes-floats">Quick floats</h3>
<p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</p> <p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</p>
{% highlight html %} {% highlight html %}