Bootstrap

From Omnia
Jump to navigation Jump to search

Twitter Bootstrap CSS Framework

Bootstrap (front-end framework) - Wikipedia - http://getbootstrap.com/

"Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It is the most popular project on GitHub and has been used by NASA and MSNBC among others."

"Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden."

Written in: HTML, CSS, LESS and JavaScript

Install

VERSION=3.3.7
wget https://github.com/twbs/bootstrap/releases/download/v${VERSION}/bootstrap-${VERSION}-dist.zip -O bootstrap-${VERSION}-dist.zip
unzip bootstrap-${VERSION}-dist.zip
ln -s bootstrap-${VERSION}-dist bootstrap
#wget https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip -O bootstrap-3.3.6-dist.zip
#unzip bootstrap-3.3.6-dist.zip
#ln -s bootstrap-3.3.6-dist bootstrap

Usage

<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
# OR
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css" />

Bootstrap Getting Started

Getting started · Bootstrap - http://getbootstrap.com/getting-started/

CSS · Bootstrap - http://getbootstrap.com/css/


--

Precompiled Bootstrap

Bootstrap CDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Bootstrap Examples - http://getbootstrap.com/getting-started#examples

Minimal Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

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

Customizing Bootstrap - http://getbootstrap.com/getting-started/#customizing

Code

div - scaffolding

Note: The default Bootstrap grid system utilizes 12 columns

Basic grid:

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

center container

Easily center a page's contents by wrapping its contents in a .container. Note that, due to padding and fixed widths, containers are not nestable by default.

<div class="container">
  ...
</div>

text alignment

  <p class="text-left">Left aligned text.</p>
  <p class="text-center">Center aligned text.</p>
  <p class="text-right">Right aligned text.</p>

pre

Pre auto wraps long text.

For vertical scrolling: (max height 340px)

<pre class="pre-scrollable">
...
</pre>

To enable horizontal scrolling create a new class: [1]

.pre-x-scrollable {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

or just override the base (bad idea)

pre {
    overflow-x: auto;
}
pre code {
    overflow-wrap: normal;
    white-space: pre;
}

tables

Add .table class to <table> and add .table-striped to get row stripping.

<table class="table table-striped">
  <thead>
    <tr>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr class=".table-striped">
      <td>...</td>
    </tr>
  </tbody>

Button

 <input type="submit" value="Search" class="btn btn-success"/>

Input Box

  <label><input type="text" class="form-control"></label>

Example of Twitter Bootstrap

Example of Twitter Bootstrap - http://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

<!DOCTYPE html>
<html>
  <head>
    <title>Example of Twitter Bootstrap</title>
    <!-- Include the bootstrap stylesheets -->
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  </head>
 
  <body>
    <div class="container">
      <h1>Search</h1>
      <label>Example for a simple search form.</label>
 
      <!-- Search form with input field and button -->
      <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Search</button>
      </form>
 
      <h2>Results</h2>
 
      <!-- Table with alternating cell background color and outer frame -->
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Lorem ipsum dolor ...</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Ut enim ad minim veniam, ...</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Duis aute irure dolor ...</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- JavaScript placed at the end of the document so the pages load faster -->
    <!-- Optional: Include the jQuery library -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
    <!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  </body>
</html>

Creating a fixed layout grid

<div class="row">
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
  <div class="col-md-1">1 Column </div>
</div>
<div class="row">
  <div class="col-md-8">8 Column </div>
  <div class="col-md-4">4 Column </div>
</div>
<div class="row">
  <div class="col-md-4">4 Column</div>
  <div class="col-md-4">4 Column</div>
  <div class="col-md-4">4 Column</div>
</div>
<div class="row">
  <div class="col-md-6">6 Column</div>
  <div class="col-md-6">6 Column</div>
</div>

Fluid grid:

    <div class="row">
      <div class="span4">
        <div class="row-fluid">
          <div class="4">...</div>
          <div class="4">...</div>
          <div class="4">...</div>
        </div>
      </div>
      <div class="span8">...</div>
    </div>

keywords