Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
css.html 127.52 KiB
1 
---
2 
layout: default
3 
title: CSS
4 
slug: css
5 
lead: "Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system."
6 
---
7
8
9 
<!-- Global Bootstrap settings
10 
================================================== -->
11 
<div class="bs-docs-section">
12 
  <h1 id="overview" class="page-header">Overview</h1>
13
14 
  <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
15
16 
  <h3 id="overview-doctype">HTML5 doctype</h3>
17 
  <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
18 
{% highlight html %}
19 
<!DOCTYPE html>
20 
<html lang="en">
21 
  ...
22 
</html>
23 
{% endhighlight %}
24
25 
  <h3 id="overview-mobile">Mobile first</h3>
26 
  <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
27 
  <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
28 
{% highlight html %}
29 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
30 
{% endhighlight %}
31 
  <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall we don't recommend this on every site, so use caution!</p>
32 
{% highlight html %}
33 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
34 
{% endhighlight %}
35
36 
  <h3 id="overview-responsive-images">Responsive images</h3>
37 
  <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
38 
{% highlight html %}
39 
<img src="..." class="img-responsive" alt="Responsive image">
40 
{% endhighlight %}
41
42 
  <h3 id="overview-type-links">Typography and links</h3>
43 
  <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
44 
  <ul>
45 
    <li>Set <code>background-color: #fff;</code> on the <code>body</code></li>
46 
    <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>
47 
    <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
48 
  </ul>
49 
  <p>These styles can be found within <code>scaffolding.less</code>.</p>
50
51 
  <h3 id="overview-normalize">Normalize</h3>
52 
  <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
53
54 
  <h3 id="overview-container">Containers</h3>
55 
  <p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>width</code> at various media query breakpoints to match our grid system.</p>
56 
  <p>Note that, due to <code>padding</code> and fixed widths, containers are not nestable by default.</p>
57 
{% highlight html %}
58 
<div class="container">
59 
  ...
60 
</div>
61 
{% endhighlight %}
62 
</div>
63
64
65
66 
<!-- Grid system
67 
================================================== -->
68 
<div class="bs-docs-section">
69 
  <h1 id="grid" class="page-header">Grid system</h1>
70
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<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> (fixed-width) or <code>.container-fluid</code> (full-width) 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 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 */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... } {% endhighlight %} <p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p> {% highlight css %} @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... } {% endhighlight %} <h3 id="grid-options">Grid options</h3> <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> <tr> <th></th> <th> Extra small devices <small>Phones (&lt;768px)</small> </th> <th> Small devices <small>Tablets (&ge;768px)</small> </th> <th> Medium devices <small>Desktops (&ge;992px)</small> </th> <th> Large devices <small>Desktops (&ge;1200px)</small> </th> </tr> </thead> <tbody> <tr> <th>Grid behavior</th>