mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 21:49:09 +01:00
Code Issues Releases Wiki Activity

Rearrange helper classes docs section; add subnav list items to docs side nav

Browse Source
This commit is contained in:
Mark Otto 2013-08-23 22:00:54 -07:00
parent 7edd87dde9
commit 7a7149d2ee
2 changed files with 43 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_includes/nav-css.html
View File

@ -76,6 +76,12 @@
</li>
<li>
<a href="#helper-classes">Helper classes</a>
<ul class="nav">
<li><a href="#helper-classes-close">Close icon</a></li>
<li><a href="#helper-classes-floats">Quick floats</a></li>
<li><a href="#helper-classes-clearfix">Clearfix</a></li>
<li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
</ul>
</li>
<li>
<a href="#responsive-utilities">Responsive utilities</a>

61
css.html
View File

@ -2213,7 +2213,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h1 id="helper-classes">Helper classes</h1>
</div>
<h3>Close icon</h3>
<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">&times;</button></p>
@ -2222,43 +2223,45 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="close" aria-hidden="true">&times;</button>
{% endhighlight %}
<h3>.pull-left</h3>
<p>Float an element left with a class. Can also be used as a mixin.</p>
<h3 id="helper-classes-floats">Quick floats</h3>
<p>Float an element to the left or right with a class. Classes can also be used as mixins.</p>
{% highlight html %}
<div class="pull-left">...</div>
{% endhighlight %}
{% highlight css %}
.pull-left {
float: left !important;
}
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Not for use in navbars</h4>
<p>To left-align components in navbars, use <code>.navbar-left</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
</div>
<h3>.pull-right</h3>
<p>Float an element right with a class. Can also be used as a mixin.</p>
{% highlight html %}
<div class="pull-right">...</div>
{% endhighlight %}
{% highlight css %}
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Not for use in navbars</h4>
<p>To right-align components in navbars, use <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
<p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
</div>
<h3>.clearfix</h3>
<p>Clear the <code>float</code> on any element. 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>
<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>
{% highlight html %}
<!-- Usage as a class -->
<div class="clearfix">...</div>
{% endhighlight %}
{% highlight css %}
// Mixin
// Mixin itself
.clearfix() {
&:before,
&:after {
@ -2270,19 +2273,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
}
}
// Usage
// Usage as a Mixin
.element {
.clearfix();
}
{% endhighlight %}
<h3>.sr-only</h3>
<p>Hide an element to all users <em>except</em> screen readers. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>.</p>
<h3 id="helper-classes-screen-readers">Screen reader content</h3>
<p>Hide an element to all users <em>except</em> screen readers with <code>.sr-only</code>. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
{% highlight html %}
<a class="sr-only" href="#content">Skip to content</a>
{% endhighlight %}
{% highlight css %}
// Usage as a Mixin
.skip-navigation {
.sr-only();
}
{% endhighlight %}
</div>
<!-- Responsive utilities
================================================== -->
<div class="bs-docs-section" id="responsive-utilities">