Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
css.html 100.71 KiB
1 
---
2 
layout: default
3 
title: CSS
4 
---
5
6 
<!-- Subhead
7 
================================================== -->
8 
<header class="bs-docs-jumbotron subhead">
9 
  <div class="container">
10 
    <h1>CSS</h1>
11 
    <p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
12 
  </div>
13 
</header>
14
15
16 
  <div class="container bs-docs-container">
17
18 
    <!-- Docs nav
19 
    ================================================== -->
20 
    <div class="row">
21 
      <div class="col-span-3 bs-docs-sidebar">
22 
        <ul class="nav nav-list bs-docs-sidenav">
23 
          <li><a href="#global"><i class="glyphicon glyphicon-chevron-right"></i> Global settings</a></li>
24 
          <li><a href="#grid"><i class="glyphicon glyphicon-chevron-right"></i> Grid system</a></li>
25 
          <li><a href="#typography"><i class="glyphicon glyphicon-chevron-right"></i> Typography</a></li>
26 
          <li><a href="#code"><i class="glyphicon glyphicon-chevron-right"></i> Code</a></li>
27 
          <li><a href="#tables"><i class="glyphicon glyphicon-chevron-right"></i> Tables</a></li>
28 
          <li><a href="#forms"><i class="glyphicon glyphicon-chevron-right"></i> Forms</a></li>
29 
          <li><a href="#buttons"><i class="glyphicon glyphicon-chevron-right"></i> Buttons</a></li>
30 
          <li><a href="#images"><i class="glyphicon glyphicon-chevron-right"></i> Images</a></li>
31 
          <li><a href="#icons"><i class="glyphicon glyphicon-chevron-right"></i> Glyphicons</a></li>
32 
          <li><a href="#responsive-utilities"><i class="glyphicon glyphicon-chevron-right"></i> Responsive utilities</a></li>
33 
        </ul>
34 
      </div>
35 
      <div class="col-span-9">
36
37
38
39 
        <!-- Global Bootstrap settings
40 
        ================================================== -->
41 
        <section id="global">
42 
          <div class="page-header">
43 
            <h1>Global settings</h1>
44 
          </div>
45 
          <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
46
47 
          <h3>Requires HTML5 doctype</h3>
48 
          <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>
49
50 
{% highlight html linenos %}
51 
<!DOCTYPE html>
52 
<html lang="en">
53 
  ...
54 
</html>
55 
{% endhighlight %}
56
57 
          <h3>Mobile first</h3>
58 
          <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>
59 
          <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
60
61 
{% highlight html linenos %}
62 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
63 
{% endhighlight %}
64
65 
          <h3>Typography and links</h3>
66 
          <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
67 
          <ul>
68 
            <li>Remove <code>margin</code> on the body</li>
69 
            <li>Set <code>background-color: white;</code> on the <code>body</code></li>
70 
            <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>