Bootstrap
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>