Kenneth: /* Install */

2016-12-20T15:42:36Z

Install

New page

== 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:
<pre>

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


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


<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</pre>

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

Minimal Example:
<pre>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

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




</head>
<body>
<h1>Hello, world!</h1>


<script src="https://code.jquery.com/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>
</pre>

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

== Code ==

=== div - scaffolding ===

Note: The default Bootstrap grid system utilizes 12 columns

Basic grid:
<pre>
<div class="row">
<div class="col-md-6">...</div>
<div class="col-md-6">...</div>
</div>
</pre>

=== 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.
<pre>
<div class="container">
...
</div>
</pre>

=== text alignment ===

<pre>
<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 ===

Pre auto wraps long text.

For vertical scrolling: (max height 340px)
<pre>
<pre class="pre-scrollable">
...
</pre>
</pre>

To enable horizontal scrolling create a new class: [http://stackoverflow.com/questions/10374171/how-to-make-twitter-bootstraps-pre-blocks-scroll-horizontally]
<pre>
.pre-x-scrollable {
overflow: auto;
word-wrap: normal;
white-space: pre;
}
</pre>

or just override the base (bad idea)
<pre>
pre {
overflow-x: auto;
}
pre code {
overflow-wrap: normal;
white-space: pre;
}
</pre>

=== tables ===

Add .table class to <table> and add .table-striped to get row stripping.
<pre>
<table class="table table-striped">
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tbody>
<tr class=".table-striped">
<td>...</td>
</tr>
</tbody>
</pre>

=== Button ===

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

=== Input Box ===

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

== Example of Twitter Bootstrap ==

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

<pre>
<!DOCTYPE html>
<html>
<head>
<title>Example of Twitter Bootstrap</title>

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


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


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>
</pre>

Creating a fixed layout grid
<pre>
<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>
</pre>

Fluid grid:
<pre>
<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>
</pre>

== keywords ==

[[Category:Web Development]]

Bootstrap - Revision history

Kenneth: /* Install */