Bootstrap - Cheat Sheet

2016-06-29

Bootstrap is a popular HTML, CSS, and JS framework for developing responsive, mobile first project on the web.

Basic template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Overview

HTML5 doctype

<!DOCTYPE HTML>
<html lang="en">
  ...
</html>

Mobile first

1
2
3

<meta name="viewport" content="width=device-width, initial-scale=1">
  OR disable zooming
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Containers

responsive fixed width container
<div class="container">
  ...
</div>

full width container, spanning the entire width of your viewport
<div class="container-fluid">
  ...
</div>

Grid system

Example: Mobile,tablet,desktop

<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-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <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-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Fluid container

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Offsetting columns

<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>

Typography

Headings

1 2	<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h4>h4. Bootstrap heading <small>Secondary text</small></h4>

Lead body copy

1	<p class="lead">...</p>

Inline text elements

Marked text
You can use the mark tag to <mark>highlight</mark> text.

Deleted text
<del>This line of text is meant to be treated as deleted text.</del>

Strikethrough text
<s>This line of text is meant to be treated as no longer accurate.</s>

Inserted text
<ins>This line of text is meant to be treated as an addition to the document.</ins>

Underlined text
<u>This line of text will render as underlined</u>

Small text
<small>This line of text is meant to be treated as fine print.</small>

Bold or <b>
<strong>rendered as bold text</strong>

Italics or <i>
<em>rendered as italicized text</em>

Alignment classes

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Transformation classes

1
2
3

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Abbreviations

1
2
3

<abbr title="attribute">attr</abbr>

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Address

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Blockquotes

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lists

Unstyled
<ul class="list-unstyled">
  <li>...</li>
</ul>

Inline
<ul class="list-inline">
  <li>...</li>
</ul>

Horizontal description
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Code

Inline

1	For example, <code><section></code> should be wrapped as inline.

User input

1 2	To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Basic block

1
2
3

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

<pre class="pre-scrollabe"></pre>

Variables

1	<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Sample output

1	<samp>This text is meant to be treated as sample output from a computer program.</samp>

Forms

Basic example

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Tables

Striped rows

1
2
3

<table class="table table-striped">
  ...
</table>

Hover rows

<table class="table table-hover">
  ...
  <tr>
    <td class="info">...</td>
  </tr>
</table>

Buttons

Button tags: <a>,<button>,<input>

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Options & Sizes

<p>
  <button type="button" class="btn btn-primary btn-sm">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>

<button type="button" class="btn btn-info btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>

Images

Responsive images

1	<img src="..." class="img-responsive" alt="Responsive image">

Image shapes

1
2
3

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Helper classes

Contextual colors & Contextual backgrounds

<p class="text-muted">...</p>
<p class="text-primary">...</p>

<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Close icon

1	<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

Carets

1	<span class="caret"></span>

Showing and hiding content

1 2	<div class="show">...</div> <div class="hidden">...</div>

Responsive utilities

.visible-sm-*,.hidden-md,visible-*-inline

日課書