Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
css.html 78.75 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" id="overview">
12 
    <div class="page-header">
13 
      <h1>Overview</h1>
14 
    </div>
15 
    <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
16
17 
    <h3 id="overview-doctype">HTML5 doctype required</h3>
18 
    <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>
19 
{% highlight html %}
20 
<!DOCTYPE html>
21 
<html lang="en">
22 
  ...
23 
</html>
24 
{% endhighlight %}
25
26 
    <h3 id="overview-mobile">Mobile first</h3>
27 
    <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>
28 
    <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
29 
{% highlight html %}
30 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
31 
{% endhighlight %}
32
33 
    <h3 id="overview-type-links">Typography and links</h3>
34 
    <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
35 
    <ul>
36 
      <li>Remove <code>margin</code> on the body</li>
37 
      <li>Set <code>background-color: white;</code> on the <code>body</code></li>
38 
      <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>
39 
      <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
40 
    </ul>
41 
    <p>These styles can be found within <strong>scaffolding.less</strong>.</p>
42
43 
    <h3 id="overview-normalize">Normalize reset</h3>
44 
    <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>
45
46 
    <h3 id="overview-container">Centering with container</h3>
47 
    <p>Easily center a page's contents by wrapping its contents in a container. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p>
48 
{% highlight html %}
49 
<div class="container">
50 
  ...
51 
</div>
52 
{% endhighlight %}
53 
  </div>
54
55
56
57 
  <!-- Glyphicons icon font
58 
  ================================================== -->
59 
  <div class="bs-docs-section" id="glyphicons">
60 
    <div class="page-header">
61 
      <h1>Glyphicons</h1>
62 
    </div>
63 
    <p class="lead">With the launch of Bootstrap 3, icons have been moved to a <a href="https://github.com/twbs/bootstrap-glyphicons">separate repository</a>. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.</p>
64 
    <p class="lead">
65 
      <a href="http://glyphicons.getbootstrap.com/" class="btn btn-default btn-large">Visit Glyphicons for Bootstrap</a> or <a href="https://github.com/twbs/bootstrap-glyphicons">download from GitHub</a>
66 
    </p>
67 
  </div>
68
69
70