diff options
Diffstat (limited to 'css.html')
| -rw-r--r-- | css.html | 219 |
1 files changed, 133 insertions, 86 deletions
@@ -44,8 +44,7 @@ base_url: "../" <h3 id="overview-type-links">Typography and links</h3> <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p> <ul> - <li>Remove <code>margin</code> on the body</li> - <li>Set <code>background-color: white;</code> on the <code>body</code></li> + <li>Set <code>background-color: #fff;</code> on the <code>body</code></li> <li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li> <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li> </ul> @@ -73,8 +72,25 @@ base_url: "../" </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> + <h3 id="grid-intro">Introduction</h3> + <p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p> + <ul> + <li>Rows must be placed within a <code>.container</code> for proper alignment and padding.</li> + <li>Use rows to create horizontal groups of columns.</li> + <li>Content should be placed within columns, and only columns may be immediate children of rows.</li> + <li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.</li> + <li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li> + <li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li> + </ul> + <p>Look to the examples for applying these principles to your code.</p> + + <div class="bs-callout bs-callout-info"> + <h4>Grids and full-width layouts</h4> + <p>Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with <code>padding: 0 15px;</code> to offset the <code>margin: 0 -15px;</code> used on <code>.row</code>s.</p> + </div> + <h3 id="grid-media-queries">Media queries</h3> - <p>We use the following media queries 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 %} /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ @@ -173,9 +189,10 @@ base_url: "../" </tbody> </table> </div> + <p>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</p> <h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3> - <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p> + <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p> <div class="bs-docs-grid"> <div class="row show-grid"> <div class="col-md-1">.col-md-1</div> @@ -278,32 +295,48 @@ base_url: "../" <div class="bs-docs-grid"> <div class="row show-grid"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> - <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div> + <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row show-grid"> - <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> - <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> + <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> + <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs"></div> - <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> + <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div> </div> {% highlight html %} <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> - <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div> + <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> - <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> - <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> + <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> + <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs"></div> - <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> + <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div> {% endhighlight %} <h3 id="grid-responsive-resets">Responsive column resets</h3> <p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="../css#responsive-utilities">responsive utility classes</a>.</p> +<div class="bs-docs-grid"> + <div class="row show-grid"> + <div class="col-xs-6 col-sm-3"> + .col-xs-6 .col-sm-3 + <br> + Resize your viewport or check it out on your phone for an example. + </div> + <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> + + <!-- Add the extra clearfix for only the required viewport --> + <div class="clearfix visible-xs"></div> + + <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> + <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> + </div> +</div> {% highlight html %} <div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> @@ -424,7 +457,7 @@ base_url: "../" // Then clear the floated columns .clearfix(); - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } @@ -462,7 +495,7 @@ base_url: "../" padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { float: left; width: percentage((@columns / @grid-columns)); } @@ -470,17 +503,17 @@ base_url: "../" // Generate the small column offsets .make-sm-column-offset(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-sm-column-push(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { left: percentage((@columns / @grid-columns)); } } .make-sm-column-pull(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { right: percentage((@columns / @grid-columns)); } } @@ -495,7 +528,7 @@ base_url: "../" padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-medium) { + @media (min-width: @screen-md-min) { float: left; width: percentage((@columns / @grid-columns)); } @@ -503,17 +536,17 @@ base_url: "../" // Generate the medium column offsets .make-md-column-offset(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-md-column-push(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md-min) { left: percentage((@columns / @grid-columns)); } } .make-md-column-pull(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md-min) { right: percentage((@columns / @grid-columns)); } } @@ -528,7 +561,7 @@ base_url: "../" padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-large) { + @media (min-width: @screen-lg-min) { float: left; width: percentage((@columns / @grid-columns)); } @@ -536,17 +569,17 @@ base_url: "../" // Generate the large column offsets .make-lg-column-offset(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-lg-column-push(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg-min) { left: percentage((@columns / @grid-columns)); } } .make-lg-column-pull(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg-min) { right: percentage((@columns / @grid-columns)); } } @@ -587,7 +620,7 @@ base_url: "../" <!-- Headings --> <h2 id="type-headings">Headings</h2> - <p>All HTML headings, <code><h1></code> through <code><h6></code> are available.</p> + <p>All HTML headings, <code><h1></code> through <code><h6></code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.</p> <div class="bs-example bs-example-type"> <table class="table"> <tbody> @@ -627,7 +660,7 @@ base_url: "../" <h6>h6. Bootstrap heading</h6> {% endhighlight %} - <p>Also included with headings is an autoscaling <code><small></code> element. Use it for smaller, gray secondary text in any heading.</p> + <p>Create lighter, secondary text in any heading with a generic <code><small></code> tag or the <code>.small</code> class.</p> <div class="bs-example bs-example-type"> <table class="table"> <tbody> @@ -695,6 +728,7 @@ base_url: "../" <h3>Small text</h3> <p>For de-emphasizing inline or blocks of text, use the <code><small></code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code><small></code> elements.</p> + <p>You may alternatively use an inline element with <code>.small</code> in place of any <code><small></code></p> <div class="bs-example"> <p><small>This line of text is meant to be treated as fine print.</small></p> </div> @@ -1260,8 +1294,8 @@ For example, <code><section></code> should be wrapped as inline. <div class="table-responsive"> <table class="table table-bordered table-striped"> <colgroup> - <col class="col-lg-1"> - <col class="col-lg-7"> + <col class="col-xs-1"> + <col class="col-xs-7"> </colgroup> <thead> <tr> @@ -1661,6 +1695,10 @@ For example, <code><section></code> should be wrapped as inline. {% highlight html %} <input type="text" class="form-control" placeholder="Text input"> {% endhighlight %} + <div class="bs-callout bs-callout-info"> + <h4>Input groups</h4> + <p>To add integrated text or buttons before and/or after any text-based <code><input></code>, <a href="../components/#input-groups">check out the input group component</a>.</p> + </div> <h3>Textarea</h3> <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p> @@ -1793,14 +1831,14 @@ For example, <code><section></code> should be wrapped as inline. <div class="bs-example"> <form class="form-horizontal" role="form"> <div class="form-group"> - <label class="col-lg-2 control-label">Email</label> - <div class="col-lg-10"> + <label class="col-sm-2 control-label">Email</label> + <div class="col-sm-10"> <p class="form-control-static">[email protected]</p> </div> </div> <div class="form-group"> - <label for="inputPassword" class="col-lg-2 control-label">Password</label> - <div class="col-lg-10"> + <label for="inputPassword" class="col-sm-2 control-label">Password</label> + <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> @@ -1809,14 +1847,14 @@ For example, <code><section></code> should be wrapped as inline. {% highlight html %} <form class="form-horizontal" role="form"> <div class="form-group"> - <label class="col-lg-2 control-label">Email</label> - <div class="col-lg-10"> + <label class="col-sm-2 control-label">Email</label> + <div class="col-sm-10"> <p class="form-control-static">[email protected]</p> </div> </div> <div class="form-group"> - <label for="inputPassword" class="col-lg-2 control-label">Password</label> - <div class="col-lg-10"> + <label for="inputPassword" class="col-sm-2 control-label">Password</label> + <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> @@ -1981,28 +2019,28 @@ For example, <code><section></code> should be wrapped as inline. <div class="bs-example"> <form role="form"> <div class="row"> - <div class="col-lg-2"> - <input type="text" class="form-control" placeholder=".col-lg-2"> + <div class="col-xs-2"> + <input type="text" class="form-control" placeholder=".col-xs-2"> </div> - <div class="col-lg-3"> - <input type="text" class="form-control" placeholder=".col-lg-3"> + <div class="col-xs-3"> + <input type="text" class="form-control" placeholder=".col-xs-3"> </div> - <div class="col-lg-4"> - <input type="text" class="form-control" placeholder=".col-lg-4"> + <div class="col-xs-4"> + <input type="text" class="form-control" placeholder=".col-xs-4"> </div> </div> </form> </div><!-- /.bs-example --> {% highlight html %} <div class="row"> - <div class="col-lg-2"> - <input type="text" class="form-control" placeholder=".col-lg-2"> + <div class="col-xs-2"> + <input type="text" class="form-control" placeholder=".col-xs-2"> </div> - <div class="col-lg-3"> - <input type="text" class="form-control" placeholder=".col-lg-3"> + <div class="col-xs-3"> + <input type="text" class="form-control" placeholder=".col-xs-3"> </div> - <div class="col-lg-4"> - <input type="text" class="form-control" placeholder=".col-lg-4"> + <div class="col-xs-4"> + <input type="text" class="form-control" placeholder=".col-xs-4"> </div> </div> {% endhighlight %} @@ -2178,6 +2216,10 @@ For example, <code><section></code> should be wrapped as inline. <h4>Link functionality not impacted</h4> <p>This class will only change the <code><a></code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p> </div> + <div class="bs-callout bs-callout-warning"> + <h4>Context-specific usage</h4> + <p>While button classes can be used on <code><a></code> and <code><button></code> elements, only <code><button></code> elements are supported within our nav and navbar components.</p> + </div> <h2 id="buttons-tags">Button tags</h2> @@ -2254,6 +2296,16 @@ For example, <code><section></code> should be wrapped as inline. {% 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> <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 %} @@ -2332,18 +2384,24 @@ For example, <code><section></code> should be wrapped as inline. <h3 id="helper-classes-show-hide">Showing and hiding content</h3> - <p>Force an element to be shown or hidden via <code>display</code> with the use of <code>.show</code> and <code>.hide</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="../css/#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p> + <p>Force an element to be shown or hidden (<strong>including for screen readers</strong>) with the use of <code>.show</code> and <code>.hidden</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="../css/#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p> + <p><code>.hide</code> is available, but it does not always affect screen readers and is <strong>deprecated</strong> as of v3.0.1. Use <code>.hidden</code> or <code>.sr-only</code> instead.</p> + <p>Furthermore, <code>.invisible</code> can be used to toggle only the visibility of an element, meaning its <code>display</code> is not modified and the element can still affect the flow of the document.</p> {% highlight html %} <div class="show">...</div> -<div class="hide">...</div> +<div class="hidden">...</div> {% endhighlight %} {% highlight css %} // Classes .show { display: block !important; } -.hide { +.hidden { display: none !important; + visibility: hidden !important; +} +.invisible { + visibility: hidden; } // Usage as mixins @@ -2351,26 +2409,15 @@ For example, <code><section></code> should be wrapped as inline. .show(); } .another-element { - .hide(); + .hidden(); } {% endhighlight %} <h3 id="helper-classes-screen-readers">Screen reader content</h3> - <p>Hide an element everywhere, <strong>including screen readers</strong>, with <code>.hidden</code>. Can also be used as a mixin.</p> -{% highlight html %} -<div class="hidden"></div> -{% endhighlight %} -{% highlight css %} -// Usage as a Mixin -.example { - .hidden(); -} -{% endhighlight %} - <p>Hide an element to all devices <strong>except screen readers</strong> 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> +<a class="sr-only" href="#content">Skip to main content</a> {% endhighlight %} {% highlight css %} // Usage as a Mixin @@ -2575,52 +2622,52 @@ For example, <code><section></code> should be wrapped as inline. </div> <h3>Hidden on...</h3> - <p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p> + <p>Here, green checkmarks also indicate the element <strong>is hidden</strong> in your current viewport.</p> <div class="row responsive-utilities-test hidden-on"> <div class="col-xs-6 col-sm-3"> - <span class="visible-xs">Extra small</span> - <span class="hidden-xs">✔ Hidden on x-small</span> + <span class="hidden-xs">Extra small</span> + <span class="visible-xs">✔ Hidden on x-small</span> </div> <div class="col-xs-6 col-sm-3"> - <span class="visible-sm">Small</span> - <span class="hidden-sm">✔ Hidden on small</span> + <span class="hidden-sm">Small</span> + <span class="visible-sm">✔ Hidden on small</span> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3"> - <span class="visible-md">Medium</span> - <span class="hidden-md">✔ Hidden on medium</span> + <span class="hidden-md">Medium</span> + <span class="visible-md">✔ Hidden on medium</span> </div> <div class="col-xs-6 col-sm-3"> - <span class="visible-lg">Large</span> - <span class="hidden-lg">✔ Hidden on large</span> + <span class="hidden-lg">Large</span> + <span class="visible-lg">✔ Hidden on large</span> </div> </div> <div class="row responsive-utilities-test hidden-on"> <div class="col-xs-6 col-sm-6"> - <span class="visible-xs visible-sm">Extra small and small</span> - <span class="hidden-xs hidden-sm">✔ Hidden on x-small and small</span> + <span class="hidden-xs hidden-sm">Extra small and small</span> + <span class="visible-xs visible-sm">✔ Hidden on x-small and small</span> </div> <div class="col-xs-6 col-sm-6"> - <span class="visible-md visible-lg">Medium and large</span> - <span class="hidden-md hidden-lg">✔ Hidden on medium and large</span> + <span class="hidden-md hidden-lg">Medium and large</span> + <span class="visible-md visible-lg">✔ Hidden on medium and large</span> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-6"> - <span class="visible-xs visible-md">Extra small and medium</span> - <span class="hidden-xs hidden-md">✔ Hidden on x-small and medium</span> + <span class="hidden-xs hidden-md">Extra small and medium</span> + <span class="visible-xs visible-md">✔ Hidden on x-small and medium</span> </div> <div class="col-xs-6 col-sm-6"> - <span class="visible-sm visible-lg">Small and large</span> - <span class="hidden-sm hidden-lg">✔ Hidden on small and large</span> + <span class="hidden-sm hidden-lg">Small and large</span> + <span class="visible-sm visible-lg">✔ Hidden on small and large</span> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-6"> - <span class="visible-xs visible-lg">Extra small and large</span> - <span class="hidden-xs hidden-lg">✔ Hidden on x-small and large</span> + <span class="hidden-xs hidden-lg">Extra small and large</span> + <span class="visible-xs visible-lg">✔ Hidden on x-small and large</span> </div> <div class="col-xs-6 col-sm-6"> - <span class="visible-sm visible-md">Small and medium</span> - <span class="hidden-sm hidden-md">✔ Hidden on small and medium</span> + <span class="hidden-sm hidden-md">Small and medium</span> + <span class="visible-sm visible-md">✔ Hidden on small and medium</span> </div> </div> |