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>
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li> </ul> <p>These styles can be found within <strong>scaffolding.less</strong>.</p> <h3>Normalize reset</h3> <p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/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> </section> <!-- Grid system ================================================== --> <section id="grid"> <div class="page-header"> <h1>Grid system</h1> </div> <p class="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases&mdash;in other words, it's mobile first. It includes <a href="#grid-example">predefined classes</a> for this, as well as powerful <a href="#grid-less">mixins for generating semantic layouts</a>.</p> <h3 id="grid-example">Grid example</h3> <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p> <div class="bs-docs-grid"> <div class="row show-grid"> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> </div> <div class="row show-grid"> <div class="col-span-4">4</div> <div class="col-span-4">4</div> <div class="col-span-4">4</div> </div> <div class="row show-grid"> <div class="col-span-6">6</div> <div class="col-span-6">6</div> </div> </div> {% highlight html linenos %} <div class="row"> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> <div class="col-span-1">1</div> </div> <div class="row"> <div class="col-span-4">4</div> <div class="col-span-4">4</div> <div class="col-span-4">4</div> </div> <div class="row"> <div class="col-span-6">6</div> <div class="col-span-6">6</div> </div>