diff --git a/.gitignore b/.gitignore
index 496ee2ca6a2f08396a4076fe43dedf3dc0da8b6d..38ad09099226bb6e730cb9c6083ba8a32ab6e4e3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-.DS_Store
\ No newline at end of file
+.DS_Store
+js/min
\ No newline at end of file
diff --git a/Makefile b/Makefile
index b3dce89ac40fc7764a632ccf5f7f96ce5e39a0b1..e5c083ae6f0a89f0c068e340f1bce225023195ef 100644
--- a/Makefile
+++ b/Makefile
@@ -1,9 +1,10 @@
-VERSION=1.2.0
+VERSION=2.0.0
DATE=$(shell DATE)
BOOTSTRAP = ./bootstrap.css
BOOTSTRAP_MIN = ./bootstrap.min.css
BOOTSTRAP_LESS = ./lib/bootstrap.less
LESS_COMPESSOR ?= `which lessc`
+UGLIFY_JS ?= `which uglifyjs`
WATCHR ?= `which watchr`
build:
@@ -18,6 +19,24 @@ build:
echo "You can install it by running: npm install less -g"; \
fi
+uglify:
+ @@if test ! -z ${UGLIFY_JS}; then \
+ mkdir -p js/min; \
+ uglifyjs -o js/min/bootstrap-accordion.js js/bootstrap-accordion.js;\
+ uglifyjs -o js/min/bootstrap-alerts.js js/bootstrap-alerts.js;\
+ uglifyjs -o js/min/bootstrap-buttons.js js/bootstrap-buttons.js;\
+ uglifyjs -o js/min/bootstrap-dropdown.js js/bootstrap-dropdown.js;\
+ uglifyjs -o js/min/bootstrap-modal.js js/bootstrap-modal.js;\
+ uglifyjs -o js/min/bootstrap-popover.js js/bootstrap-popover.js;\
+ uglifyjs -o js/min/bootstrap-scrollspy.js js/bootstrap-scrollspy.js;\
+ uglifyjs -o js/min/bootstrap-tabs.js js/bootstrap-tabs.js;\
+ uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transitions.js;\
+ uglifyjs -o js/min/bootstrap-twipsy.js js/bootstrap-twipsy.js;\
+ else \
+ echo "You must have the UGLIFYJS minifier installed in order to minify Bootstrap's js."; \
+ echo "You can install it by running: npm install uglify-js -g"; \
+ fi
+
watch:
@@if test ! -z ${WATCHR}; then \
echo "Watching less files..."; \
diff --git a/README.md b/README.md
index ad51b16fc163fc6ac491f0d98c74ba236785e41d..fd97265840b9704b7690c647efe48a2ca3c16a0d 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ Here's what the LESS version looks like:
<script src="less.js" type="text/javascript"></script>
```
-Or if you prefer, the standard css way:
+Or if you prefer, the standard CSS way:
``` html
<link rel="stylesheet" type="text/css" href="bootstrap.css">
@@ -72,7 +72,7 @@ http://groups.google.com/group/twitter-bootstrap
Developers
----------
-We have included a makefile with convenience methods for working with the bootstrap library.
+We have included a makefile with convenience methods for working with the Bootstrap library.
+ **build** - `make build`
This will run the less compiler on the bootstrap lib and generate a bootstrap.css and bootstrap.min.css file.
diff --git a/bootstrap.css b/bootstrap.css
index 8b6fe3eb42c6cf55897124d66ecdc9b95b4d64f9..f57423b0c79a858c067b6eba5f05b3a7850c8d8a 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -1,16 +1,13 @@
/*!
- * Bootstrap v1.2.0
+ * Bootstrap v2.0.0
*
* Copyright 2011 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Fri Sep 16 14:07:03 PDT 2011
+ * Date: Mon Dec 19 22:58:34 PST 2011
*/
-/* Reset.less
- * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
- * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
html, body {
margin: 0;
padding: 0;
@@ -73,6 +70,7 @@ td {
font-family: inherit;
}
table {
+ max-width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
@@ -118,9 +116,9 @@ audio:not([controls]) {
display: none;
}
sub, sup {
+ position: relative;
font-size: 75%;
line-height: 0;
- position: relative;
vertical-align: baseline;
}
sup {
@@ -130,6 +128,8 @@ sub {
bottom: -0.25em;
}
img {
+ max-width: 100%;
+ height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
}
@@ -137,18 +137,18 @@ button,
input,
select,
textarea {
- font-size: 100%;
margin: 0;
+ font-size: 100%;
vertical-align: baseline;
*vertical-align: middle;
}
button, input {
- line-height: normal;
*overflow: visible;
+ line-height: normal;
}
button::-moz-focus-inner, input::-moz-focus-inner {
- border: 0;
padding: 0;
+ border: 0;
}
button,
input[type="button"],
@@ -170,26 +170,13 @@ textarea {
overflow: auto;
vertical-align: top;
}
-/* Variables.less
- * Variables to customize the look and feel of Bootstrap
- * ----------------------------------------------------- */
-/* Variables.less
- * Snippets of reusable CSS to develop faster and keep code readable
- * ----------------------------------------------------------------- */
-/*
- * Scaffolding
- * Basic and global styles for generating a grid system, structural layout, and page templates
- * ------------------------------------------------------------------------------------------- */
-html, body {
- background-color: #ffffff;
-}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
- font-weight: normal;
line-height: 18px;
color: #404040;
+ background-color: #ffffff;
}
.container {
width: 940px;
@@ -199,41 +186,50 @@ body {
}
.container:before, .container:after {
display: table;
+ *display: inline;
content: "";
zoom: 1;
- *display: inline;
}
.container:after {
clear: both;
}
-.container-fluid {
+.fluid-container {
position: relative;
min-width: 940px;
padding-left: 20px;
padding-right: 20px;
zoom: 1;
}
-.container-fluid:before, .container-fluid:after {
+.fluid-container:before, .fluid-container:after {
display: table;
+ *display: inline;
content: "";
zoom: 1;
- *display: inline;
}
-.container-fluid:after {
+.fluid-container:after {
clear: both;
}
-.container-fluid > .sidebar {
- float: left;
+.fluid-sidebar-left, .fluid-sidebar-right {
width: 220px;
}
-.container-fluid > .content {
+.fluid-sidebar-left {
+ float: left;
+}
+.fluid-sidebar-right {
+ float: right;
+}
+.fluid-content {
margin-left: 240px;
}
+.fluid-container.reverse .fluid-content {
+ margin-left: 0;
+ margin-right: 240px;
+}
a {
+ font-weight: inherit;
+ line-height: inherit;
color: #0069d6;
text-decoration: none;
- line-height: inherit;
- font-weight: inherit;
}
a:hover {
color: #00438a;
@@ -252,14 +248,14 @@ a:hover {
display: block;
}
.row {
- zoom: 1;
margin-left: -20px;
+ zoom: 1;
}
.row:before, .row:after {
display: table;
+ *display: inline;
content: "";
zoom: 1;
- *display: inline;
}
.row:after {
clear: both;
@@ -270,133 +266,79 @@ a:hover {
margin-left: 20px;
}
.span1 {
- width: 40px;
+ width: 60px;
}
.span2 {
- width: 100px;
+ width: 140px;
}
.span3 {
- width: 160px;
+ width: 220px;
}
.span4 {
- width: 220px;
+ width: 300px;
}
.span5 {
- width: 280px;
+ width: 380px;
}
.span6 {
- width: 340px;
+ width: 460px;
}
.span7 {
- width: 400px;
+ width: 540px;
}
.span8 {
- width: 460px;
+ width: 620px;
}
.span9 {
- width: 520px;
+ width: 700px;
}
.span10 {
- width: 580px;
+ width: 780px;
}
.span11 {
- width: 640px;
+ width: 860px;
}
.span12 {
- width: 700px;
-}
-.span13 {
- width: 760px;
-}
-.span14 {
- width: 820px;
-}
-.span15 {
- width: 880px;
-}
-.span16 {
width: 940px;
}
-.span17 {
- width: 1000px;
-}
-.span18 {
- width: 1060px;
-}
-.span19 {
- width: 1120px;
-}
-.span20 {
- width: 1180px;
-}
-.span21 {
- width: 1240px;
-}
-.span22 {
- width: 1300px;
-}
-.span23 {
- width: 1360px;
-}
-.span24 {
- width: 1420px;
-}
.offset1 {
- margin-left: 80px;
+ margin-left: 100px;
}
.offset2 {
- margin-left: 140px;
+ margin-left: 180px;
}
.offset3 {
- margin-left: 200px;
+ margin-left: 260px;
}
.offset4 {
- margin-left: 260px;
+ margin-left: 340px;
}
.offset5 {
- margin-left: 320px;
+ margin-left: 420px;
}
.offset6 {
- margin-left: 380px;
+ margin-left: 500px;
}
.offset7 {
- margin-left: 440px;
+ margin-left: 580px;
}
.offset8 {
- margin-left: 500px;
+ margin-left: 660px;
}
.offset9 {
- margin-left: 560px;
+ margin-left: 740px;
}
.offset10 {
- margin-left: 620px;
+ margin-left: 820px;
}
.offset11 {
- margin-left: 680px;
+ margin-left: 900px;
}
-.offset12 {
- margin-left: 740px;
-}
-.span-one-third {
- width: 300px;
-}
-.span-two-thirds {
- width: 620px;
-}
-.offset-one-third {
- margin-left: 340px;
-}
-.offset-two-thirds {
- margin-left: 660px;
-}
-/* Typography.less
- * Headings, body text, lists, code, and more for a versatile and durable typography system
- * ---------------------------------------------------------------------------------------- */
p {
+ margin-bottom: 9px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
- font-weight: normal;
line-height: 18px;
- margin-bottom: 9px;
}
p small {
font-size: 11px;
@@ -410,6 +352,7 @@ h5,
h6 {
font-weight: bold;
color: #404040;
+ text-rendering: optimizelegibility;
}
h1 small,
h2 small,
@@ -420,7 +363,6 @@ h6 small {
color: #bfbfbf;
}
h1 {
- margin-bottom: 18px;
font-size: 30px;
line-height: 36px;
}
@@ -432,15 +374,10 @@ h2 {
line-height: 36px;
}
h2 small {
- font-size: 14px;
-}
-h3,
-h4,
-h5,
-h6 {
- line-height: 36px;
+ font-size: 18px;
}
h3 {
+ line-height: 27px;
font-size: 18px;
}
h3 small {
@@ -448,20 +385,23 @@ h3 small {
}
h4 {
font-size: 16px;
+ line-height: 36px;
}
h4 small {
font-size: 12px;
}
h5 {
font-size: 14px;
+ line-height: 18px;
}
h6 {
font-size: 13px;
+ line-height: 18px;
color: #bfbfbf;
text-transform: uppercase;
}
ul, ol {
- margin: 0 0 18px 25px;
+ margin: 0 0 9px 25px;
}
ul ul,
ul ol,
@@ -477,11 +417,11 @@ ol {
}
li {
line-height: 18px;
- color: #808080;
+ color: #404040;
}
ul.unstyled {
- list-style: none;
margin-left: 0;
+ list-style: none;
}
dl {
margin-bottom: 18px;
@@ -496,9 +436,10 @@ dl dd {
margin-left: 9px;
}
hr {
- margin: 20px 0 19px;
+ margin: 27px 0;
border: 0;
- border-bottom: 1px solid #eee;
+ border-top: 1px solid #e5e5e5;
+ border-bottom: 1px solid #fff;
}
strong {
font-style: inherit;
@@ -512,52 +453,62 @@ em {
.muted {
color: #bfbfbf;
}
+abbr {
+ font-size: 90%;
+ text-transform: uppercase;
+ border-bottom: 1px dotted #ddd;
+ cursor: help;
+}
blockquote {
+ padding-left: 15px;
margin-bottom: 18px;
border-left: 5px solid #eee;
- padding-left: 15px;
}
blockquote p {
- font-size: 14px;
- font-weight: 300;
- line-height: 18px;
margin-bottom: 0;
+ font-size: 300;
+ font-weight: 16px;
+ line-height: 22.5px;
}
blockquote small {
display: block;
- font-size: 12px;
- font-weight: 300;
line-height: 18px;
color: #bfbfbf;
}
blockquote small:before {
content: '\2014 \00A0';
}
+blockquote.pull-right {
+ float: right;
+}
+blockquote.pull-right p, blockquote.pull-right small {
+ text-align: right;
+}
address {
display: block;
- line-height: 18px;
margin-bottom: 18px;
+ line-height: 18px;
}
code, pre {
padding: 0 3px 2px;
- font-family: Monaco, Andale Mono, Courier New, monospace;
+ font-family: "Menlo", Monaco, Courier New, monospace;
font-size: 12px;
+ color: #404040;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
code {
- background-color: #fee9cc;
- color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
+ background-color: #fee9cc;
}
pre {
- background-color: #f5f5f5;
display: block;
padding: 8.5px;
- margin: 0 0 18px;
- line-height: 18px;
+ margin: 0 0 9px;
font-size: 12px;
+ line-height: 18px;
+ background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
@@ -565,68 +516,41 @@ pre {
border-radius: 3px;
white-space: pre;
white-space: pre-wrap;
- word-wrap: break-word;
+ word-break: break-all;
}
-/* Forms.less
- * Base styles for various input types, form layouts, and states
- * ------------------------------------------------------------- */
-form {
+pre.prettyprint {
margin-bottom: 18px;
}
-fieldset {
+pre code {
+ padding: 0;
+ background-color: transparent;
+}
+form {
margin-bottom: 18px;
- padding-top: 18px;
}
-fieldset legend {
+legend {
display: block;
- padding-left: 150px;
+ width: 100%;
+ margin-bottom: 27px;
font-size: 19.5px;
- line-height: 1;
+ line-height: 36px;
color: #404040;
- *padding: 0 0 5px 145px;
- /* IE6-7 */
-
- *line-height: 1.5;
- /* IE6-7 */
-
-}
-form .clearfix {
- margin-bottom: 18px;
- zoom: 1;
-}
-form .clearfix:before, form .clearfix:after {
- display: table;
- content: "";
- zoom: 1;
- *display: inline;
-}
-form .clearfix:after {
- clear: both;
+ border-bottom: 1px solid #eee;
}
label,
input,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 13px;
- font-weight: normal;
- line-height: normal;
+ font-size: normal;
+ font-weight: 13px;
+ line-height: 18px;
}
label {
- padding-top: 6px;
- font-size: 13px;
- line-height: 18px;
- float: left;
- width: 130px;
- text-align: right;
+ display: block;
+ margin-bottom: 5px;
color: #404040;
}
-form .input {
- margin-left: 150px;
-}
-input[type=checkbox], input[type=radio] {
- cursor: pointer;
-}
input,
textarea,
select,
@@ -643,8 +567,7 @@ select,
-moz-border-radius: 3px;
border-radius: 3px;
}
-/* mini reset for non-html5 file types */
-input[type=checkbox], input[type=radio] {
+input[type=image], input[type=checkbox], input[type=radio] {
width: auto;
height: auto;
padding: 0;
@@ -654,12 +577,14 @@ input[type=checkbox], input[type=radio] {
line-height: normal;
border: none;
+ cursor: pointer;
}
input[type=file] {
- background-color: #ffffff;
padding: initial;
- border: initial;
line-height: initial;
+ border: initial;
+ background-color: #ffffff;
+ background-color: initial;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
@@ -670,48 +595,41 @@ input[type=button], input[type=reset], input[type=submit] {
}
select, input[type=file] {
height: 27px;
- line-height: 27px;
*margin-top: 4px;
/* For IE7, add top margin to align select with labels */
+ line-height: 27px;
+}
+select {
+ background-color: #ffffff;
}
select[multiple] {
height: inherit;
}
+input[type=image] {
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
textarea {
height: auto;
}
-.uneditable-input {
- background-color: #ffffff;
- display: block;
- border-color: #eee;
- -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
- -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
- cursor: not-allowed;
-}
-:-moz-placeholder {
- color: #bfbfbf;
-}
-::-webkit-input-placeholder {
- color: #bfbfbf;
-}
input, textarea {
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
input:focus, textarea:focus {
- outline: 0;
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+ outline: 0;
}
input[type=file]:focus, input[type=checkbox]:focus, select:focus {
-webkit-box-shadow: none;
@@ -719,167 +637,166 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
box-shadow: none;
outline: 1px dotted #666;
}
-form div.clearfix.error {
- background: #fae5e3;
- padding: 10px 0;
- margin: -10px 0 10px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
-}
-form div.clearfix.error > label, form div.clearfix.error span.help-inline, form div.clearfix.error span.help-block {
- color: #9d261d;
-}
-form div.clearfix.error input, form div.clearfix.error textarea {
- border-color: #c87872;
- -webkit-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
- -moz-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
- box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
-}
-form div.clearfix.error input:focus, form div.clearfix.error textarea:focus {
- border-color: #b9554d;
- -webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
- -moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
- box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
-}
-form div.clearfix.error .input-prepend span.add-on, form div.clearfix.error .input-append span.add-on {
- background: #f4c8c5;
- border-color: #c87872;
- color: #b9554d;
-}
-.input-mini,
-input.mini,
-textarea.mini,
-select.mini {
+.input-mini {
width: 60px;
}
-.input-small,
-input.small,
-textarea.small,
-select.small {
+.input-small {
width: 90px;
}
-.input-medium,
-input.medium,
-textarea.medium,
-select.medium {
+.input-medium {
width: 150px;
}
-.input-large,
-input.large,
-textarea.large,
-select.large {
+.input-large {
width: 210px;
}
-.input-xlarge,
-input.xlarge,
-textarea.xlarge,
-select.xlarge {
+.input-xlarge {
width: 270px;
}
-.input-xxlarge,
-input.xxlarge,
-textarea.xxlarge,
-select.xxlarge {
+.input-xxlarge {
width: 530px;
}
-textarea.xxlarge {
- overflow-y: auto;
-}
-input.span1, textarea.span1, select.span1 {
+input.span1,
+textarea.span1,
+select.span1,
+.uneditable-input.span1 {
display: inline-block;
float: none;
- width: 30px;
+ width: 50px;
margin-left: 0;
}
-input.span2, textarea.span2, select.span2 {
+input.span2,
+textarea.span2,
+select.span2,
+.uneditable-input.span2 {
display: inline-block;
float: none;
- width: 90px;
+ width: 130px;
margin-left: 0;
}
-input.span3, textarea.span3, select.span3 {
+input.span3,
+textarea.span3,
+select.span3,
+.uneditable-input.span3 {
display: inline-block;
float: none;
- width: 150px;
+ width: 210px;
margin-left: 0;
}
-input.span4, textarea.span4, select.span4 {
+input.span4,
+textarea.span4,
+select.span4,
+.uneditable-input.span4 {
display: inline-block;
float: none;
- width: 210px;
+ width: 290px;
margin-left: 0;
}
-input.span5, textarea.span5, select.span5 {
+input.span5,
+textarea.span5,
+select.span5,
+.uneditable-input.span5 {
display: inline-block;
float: none;
- width: 270px;
+ width: 370px;
margin-left: 0;
}
-input.span6, textarea.span6, select.span6 {
+input.span6,
+textarea.span6,
+select.span6,
+.uneditable-input.span6 {
display: inline-block;
float: none;
- width: 330px;
+ width: 450px;
margin-left: 0;
}
-input.span7, textarea.span7, select.span7 {
+input.span7,
+textarea.span7,
+select.span7,
+.uneditable-input.span7 {
display: inline-block;
float: none;
- width: 390px;
+ width: 530px;
margin-left: 0;
}
-input.span8, textarea.span8, select.span8 {
+input.span8,
+textarea.span8,
+select.span8,
+.uneditable-input.span8 {
display: inline-block;
float: none;
- width: 450px;
+ width: 610px;
margin-left: 0;
}
-input.span9, textarea.span9, select.span9 {
+input.span9,
+textarea.span9,
+select.span9,
+.uneditable-input.span9 {
display: inline-block;
float: none;
- width: 510px;
+ width: 690px;
margin-left: 0;
}
-input.span10, textarea.span10, select.span10 {
+input.span10,
+textarea.span10,
+select.span10,
+.uneditable-input.span10 {
display: inline-block;
float: none;
- width: 570px;
+ width: 770px;
margin-left: 0;
}
-input.span11, textarea.span11, select.span11 {
+input.span11,
+textarea.span11,
+select.span11,
+.uneditable-input.span11 {
display: inline-block;
float: none;
- width: 630px;
+ width: 850px;
margin-left: 0;
}
-input.span12, textarea.span12, select.span12 {
+input.span12,
+textarea.span12,
+select.span12,
+.uneditable-input.span12 {
display: inline-block;
float: none;
- width: 690px;
+ width: 930px;
margin-left: 0;
}
-input.span13, textarea.span13, select.span13 {
+input.span13,
+textarea.span13,
+select.span13,
+.uneditable-input.span13 {
display: inline-block;
float: none;
- width: 750px;
+ width: 1010px;
margin-left: 0;
}
-input.span14, textarea.span14, select.span14 {
+input.span14,
+textarea.span14,
+select.span14,
+.uneditable-input.span14 {
display: inline-block;
float: none;
- width: 810px;
+ width: 1090px;
margin-left: 0;
}
-input.span15, textarea.span15, select.span15 {
+input.span15,
+textarea.span15,
+select.span15,
+.uneditable-input.span15 {
display: inline-block;
float: none;
- width: 870px;
+ width: 1170px;
margin-left: 0;
}
-input.span16, textarea.span16, select.span16 {
+input.span16,
+textarea.span16,
+select.span16,
+.uneditable-input.span16 {
display: inline-block;
float: none;
- width: 930px;
+ width: 1250px;
margin-left: 0;
}
input[disabled],
@@ -892,38 +809,96 @@ textarea[readonly] {
border-color: #ddd;
cursor: not-allowed;
}
-.actions {
- background: #f5f5f5;
+.control-group.error > label, .control-group.error .help-block, .control-group.error .help-inline {
+ color: #b94a48;
+}
+.control-group.error input, .control-group.error textarea {
+ color: #b94a48;
+ border-color: #ee5f5b;
+}
+.control-group.error input:focus, .control-group.error textarea:focus {
+ border-color: #e9322d;
+ -webkit-box-shadow: 0 0 6px #f8b9b7;
+ -moz-box-shadow: 0 0 6px #f8b9b7;
+ box-shadow: 0 0 6px #f8b9b7;
+}
+.control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on {
+ color: #b94a48;
+ background-color: #fce6e6;
+ border-color: #b94a48;
+}
+.control-group.warning > label, .control-group.warning .help-block, .control-group.warning .help-inline {
+ color: #c09853;
+}
+.control-group.warning input, .control-group.warning textarea {
+ color: #c09853;
+ border-color: #ccae64;
+}
+.control-group.warning input:focus, .control-group.warning textarea:focus {
+ border-color: #be9a3f;
+ -webkit-box-shadow: 0 0 6px #e5d6b1;
+ -moz-box-shadow: 0 0 6px #e5d6b1;
+ box-shadow: 0 0 6px #e5d6b1;
+}
+.control-group.warning .input-prepend .add-on, .control-group.warning .input-append .add-on {
+ color: #c09853;
+ background-color: #d2b877;
+ border-color: #c09853;
+}
+.control-group.success > label, .control-group.success .help-block, .control-group.success .help-inline {
+ color: #468847;
+}
+.control-group.success input, .control-group.success textarea {
+ color: #468847;
+ border-color: #57a957;
+}
+.control-group.success input:focus, .control-group.success textarea:focus {
+ border-color: #458845;
+ -webkit-box-shadow: 0 0 6px #9acc9a;
+ -moz-box-shadow: 0 0 6px #9acc9a;
+ box-shadow: 0 0 6px #9acc9a;
+}
+.control-group.success .input-prepend .add-on, .control-group.success .input-append .add-on {
+ color: #468847;
+ background-color: #bcddbc;
+ border-color: #468847;
+}
+.form-actions {
+ padding: 17px 20px 18px;
margin-top: 18px;
margin-bottom: 18px;
- padding: 17px 20px 18px 150px;
+ background-color: #f5f5f5;
border-top: 1px solid #ddd;
- -webkit-border-radius: 0 0 3px 3px;
- -moz-border-radius: 0 0 3px 3px;
- border-radius: 0 0 3px 3px;
}
-.actions .secondary-action {
- float: right;
+.uneditable-input {
+ display: block;
+ background-color: #ffffff;
+ border-color: #eee;
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+ cursor: not-allowed;
}
-.actions .secondary-action a {
- line-height: 30px;
+:-moz-placeholder {
+ color: #bfbfbf;
}
-.actions .secondary-action a:hover {
- text-decoration: underline;
+::-webkit-input-placeholder {
+ color: #bfbfbf;
}
-.help-inline, .help-block {
- font-size: 11px;
- line-height: 18px;
+.help-text {
+ margin-top: 5px;
+ margin-bottom: 0;
color: #bfbfbf;
}
.help-inline {
- padding-left: 5px;
*position: relative;
/* IE6-7 */
*top: -5px;
/* IE6-7 */
+ display: inline;
+ padding-left: 5px;
}
.help-block {
display: block;
@@ -951,27 +926,27 @@ textarea[readonly] {
}
.input-prepend .add-on, .input-append .add-on {
position: relative;
- background: #f5f5f5;
- border: 1px solid #ccc;
z-index: 2;
float: left;
display: block;
width: auto;
min-width: 16px;
height: 18px;
- padding: 4px 4px 4px 5px;
margin-right: -1px;
+ padding: 4px 4px 4px 5px;
font-weight: normal;
line-height: 18px;
color: #bfbfbf;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-prepend .active, .input-append .active {
- background: #a9dba9;
+ background-color: #a9dba9;
border-color: #46a546;
}
.input-prepend .add-on {
@@ -986,447 +961,404 @@ textarea[readonly] {
border-radius: 3px 0 0 3px;
}
.input-append .add-on {
+ margin-right: 0;
+ margin-left: -1px;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
- margin-right: 0;
- margin-left: -1px;
}
-.inputs-list {
- margin: 0 0 5px;
- width: 100%;
+.search-form .search-query {
+ -webkit-border-radius: 14px;
+ -moz-border-radius: 14px;
+ border-radius: 14px;
}
-.inputs-list li {
- display: block;
- padding: 0;
- width: 100%;
+.control-group {
+ margin-bottom: 18px;
}
-.inputs-list label {
- display: block;
- float: none;
- width: auto;
- padding: 0;
- line-height: 18px;
- text-align: left;
- white-space: normal;
-}
-.inputs-list label strong {
- color: #808080;
+.control-group > label {
+ font-weight: bold;
}
-.inputs-list label small {
- font-size: 11px;
- font-weight: normal;
+.horizontal-form .control-group > label {
+ float: left;
+ width: 130px;
+ padding-top: 5px;
+ text-align: right;
}
-.inputs-list .inputs-list {
- margin-left: 25px;
- margin-bottom: 10px;
- padding-top: 0;
+.horizontal-form .controls {
+ margin-left: 150px;
}
-.inputs-list:first-child {
+.horizontal-form .control-list {
padding-top: 6px;
}
-.inputs-list li + li {
- padding-top: 2px;
-}
-.inputs-list input[type=radio], .inputs-list input[type=checkbox] {
- margin-bottom: 0;
-}
-.form-stacked {
- padding-left: 20px;
-}
-.form-stacked fieldset {
- padding-top: 9px;
+.horizontal-form .form-actions {
+ padding-left: 150px;
}
-.form-stacked legend {
- padding-left: 0;
+table {
+ width: 100%;
+ margin-bottom: 18px;
}
-.form-stacked label {
- display: block;
- float: none;
- width: auto;
- font-weight: bold;
+th, td {
+ padding: 8px;
+ line-height: 18px;
text-align: left;
- line-height: 20px;
- padding-top: 0;
-}
-.form-stacked .clearfix {
- margin-bottom: 9px;
-}
-.form-stacked .clearfix div.input {
- margin-left: 0;
-}
-.form-stacked .inputs-list {
- margin-bottom: 0;
+ border-bottom: 1px solid #ddd;
}
-.form-stacked .inputs-list li {
- padding-top: 0;
+th {
+ font-weight: bold;
+ vertical-align: bottom;
}
-.form-stacked .inputs-list li label {
- font-weight: normal;
- padding-top: 0;
+td {
+ vertical-align: top;
}
-.form-stacked div.clearfix.error {
- padding-top: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
- margin-top: 0;
- margin-left: -10px;
+tbody tr:last-child th, tbody tr:last-child td {
+ border-bottom: 0;
}
-.form-stacked .actions {
- margin-left: -20px;
- padding-left: 20px;
+.condensed-table th, .condensed-table td {
+ padding: 4px 5px;
}
-/*
- * Tables.less
- * Tables for, you guessed it, tabular data
- * ---------------------------------------- */
-table {
- width: 100%;
- margin-bottom: 18px;
- padding: 0;
- border-collapse: separate;
- *border-collapse: collapse;
- /* IE7, collapse table to remove spacing */
-
- font-size: 13px;
+.bordered-table {
border: 1px solid #ddd;
+ border-collapse: separate;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
-table th, table td {
- padding: 10px 10px 9px;
- line-height: 18px;
- text-align: left;
-}
-table th {
- padding-top: 9px;
- font-weight: bold;
- vertical-align: middle;
- border-bottom: 1px solid #ddd;
-}
-table td {
- vertical-align: top;
-}
-table th + th, table td + td {
+.bordered-table th + th,
+.bordered-table td + td,
+.bordered-table th + td,
+.bordered-table td + th {
border-left: 1px solid #ddd;
}
-table tr + tr td {
- border-top: 1px solid #ddd;
-}
-table tbody tr:first-child td:first-child {
+.bordered-table thead:first-child tr:first-child th:first-child, .bordered-table tbody:first-child tr:first-child td:first-child {
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
}
-table tbody tr:first-child td:last-child {
+.bordered-table thead:first-child tr:first-child th:last-child, .bordered-table tbody:first-child tr:first-child td:last-child {
-webkit-border-radius: 0 4px 0 0;
-moz-border-radius: 0 4px 0 0;
border-radius: 0 4px 0 0;
}
-table tbody tr:last-child td:first-child {
+.bordered-table thead:last-child tr:last-child th:first-child, .bordered-table tbody:last-child tr:last-child td:first-child {
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
}
-table tbody tr:last-child td:last-child {
+.bordered-table thead:last-child tr:last-child th:last-child, .bordered-table tbody:last-child tr:last-child td:last-child {
-webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0;
}
-.zebra-striped tbody tr:nth-child(odd) td {
+.striped-table tbody tr:nth-child(odd) td, .striped-table tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
-.zebra-striped tbody tr:hover td {
- background-color: #f5f5f5;
-}
-.zebra-striped .header {
- cursor: pointer;
-}
-.zebra-striped .header:after {
- content: "";
- float: right;
- margin-top: 7px;
- border-width: 0 4px 4px;
- border-style: solid;
- border-color: #000 transparent;
- visibility: hidden;
-}
-.zebra-striped .headerSortUp, .zebra-striped .headerSortDown {
- background-color: rgba(141, 192, 219, 0.25);
- text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-}
-.zebra-striped .header:hover:after {
- visibility: visible;
-}
-.zebra-striped .headerSortDown:after, .zebra-striped .headerSortDown:hover:after {
- visibility: visible;
- filter: alpha(opacity=60);
- -khtml-opacity: 0.6;
- -moz-opacity: 0.6;
- opacity: 0.6;
-}
-.zebra-striped .headerSortUp:after {
- border-bottom: none;
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- border-top: 4px solid #000;
- visibility: visible;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
- filter: alpha(opacity=60);
- -khtml-opacity: 0.6;
- -moz-opacity: 0.6;
- opacity: 0.6;
-}
-table .blue {
- color: #049cdb;
- border-bottom-color: #049cdb;
-}
-table .headerSortUp.blue, table .headerSortDown.blue {
- background-color: #ade6fe;
-}
-table .green {
- color: #46a546;
- border-bottom-color: #46a546;
-}
-table .headerSortUp.green, table .headerSortDown.green {
- background-color: #cdeacd;
-}
-table .red {
- color: #9d261d;
- border-bottom-color: #9d261d;
-}
-table .headerSortUp.red, table .headerSortDown.red {
- background-color: #f4c8c5;
-}
-table .yellow {
- color: #ffc40d;
- border-bottom-color: #ffc40d;
-}
-table .headerSortUp.yellow, table .headerSortDown.yellow {
- background-color: #fff6d9;
-}
-table .orange {
- color: #f89406;
- border-bottom-color: #f89406;
-}
-table .headerSortUp.orange, table .headerSortDown.orange {
- background-color: #fee9cc;
-}
-table .purple {
- color: #7a43b6;
- border-bottom-color: #7a43b6;
+/*
+// ----------------
+
+// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
+.tableColumns(@columnSpan: 1) {
+ width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
}
-table .headerSortUp.purple, table .headerSortDown.purple {
- background-color: #e2d5f0;
+table {
+ // Default columns
+ .span1 { .tableColumns(1); }
+ .span2 { .tableColumns(2); }
+ .span3 { .tableColumns(3); }
+ .span4 { .tableColumns(4); }
+ .span5 { .tableColumns(5); }
+ .span6 { .tableColumns(6); }
+ .span7 { .tableColumns(7); }
+ .span8 { .tableColumns(8); }
+ .span9 { .tableColumns(9); }
+ .span10 { .tableColumns(10); }
+ .span11 { .tableColumns(11); }
+ .span12 { .tableColumns(12); }
+ .span13 { .tableColumns(13); }
+ .span14 { .tableColumns(14); }
+ .span15 { .tableColumns(15); }
+ .span16 { .tableColumns(16); }
}
-/* Patterns.less
- * Repeatable UI elements outside the base styles provided from the scaffolding
- * ---------------------------------------------------------------------------- */
-.topbar {
- height: 40px;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 10000;
+
+
+// TABLESORTER
+// -----------
+
+table {
+ // Tablesorting styles w/ jQuery plugin
+ .header {
+ cursor: pointer;
+ &:after {
+ float: right;
+ margin-top: 7px;
+ border-width: 0 4px 4px;
+ border-style: solid;
+ border-color: #000 transparent;
+ content: "";
+ visibility: hidden;
+ }
+ }
+ // Style the sorted column headers (THs)
+ .headerSortUp,
+ .headerSortDown {
+ text-shadow: 0 1px 1px rgba(255,255,255,.75);
+ background-color: rgba(141,192,219,.25);
+ }
+ // Style the ascending (reverse alphabetical) column header
+ .header:hover {
+ &:after {
+ visibility: visible;
+ }
+ }
+ // Style the descending (alphabetical) column header
+ .headerSortDown,
+ .headerSortDown:hover {
+ &:after {
+ visibility: visible;
+ .opacity(60);
+ }
+ }
+ // Style the ascending (reverse alphabetical) column header
+ .headerSortUp {
+ &:after {
+ border-bottom: none;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid #000;
+ visibility:visible;
+ .box-shadow(none); //can't add boxshadow to downward facing arrow :(
+ .opacity(60);
+ }
+ }
+ // Blue Table Headings
+ .blue {
+ color: @blue;
+ border-bottom-color: @blue;
+ }
+ .headerSortUp.blue,
+ .headerSortDown.blue {
+ background-color: lighten(@blue, 40%);
+ }
+ // Green Table Headings
+ .green {
+ color: @green;
+ border-bottom-color: @green;
+ }
+ .headerSortUp.green,
+ .headerSortDown.green {
+ background-color: lighten(@green, 40%);
+ }
+ // Red Table Headings
+ .red {
+ color: @red;
+ border-bottom-color: @red;
+ }
+ .headerSortUp.red,
+ .headerSortDown.red {
+ background-color: lighten(@red, 50%);
+ }
+ // Yellow Table Headings
+ .yellow {
+ color: @yellow;
+ border-bottom-color: @yellow;
+ }
+ .headerSortUp.yellow,
+ .headerSortDown.yellow {
+ background-color: lighten(@yellow, 40%);
+ }
+ // Orange Table Headings
+ .orange {
+ color: @orange;
+ border-bottom-color: @orange;
+ }
+ .headerSortUp.orange,
+ .headerSortDown.orange {
+ background-color: lighten(@orange, 40%);
+ }
+ // Purple Table Headings
+ .purple {
+ color: @purple;
+ border-bottom-color: @purple;
+ }
+ .headerSortUp.purple,
+ .headerSortDown.purple {
+ background-color: lighten(@purple, 40%);
+ }
+}*/
+.navbar {
overflow: visible;
}
-.topbar a {
+.navbar-inner {
+ background-color: #222222;
+ background-color: #222222;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
+ background-image: -moz-linear-gradient(top, #333333, #222222);
+ background-image: -ms-linear-gradient(top, #333333, #222222);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
+ background-image: -webkit-linear-gradient(top, #333333, #222222);
+ background-image: -o-linear-gradient(top, #333333, #222222);
+ background-image: linear-gradient(top, #333333, #222222);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+.navbar a {
color: #bfbfbf;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
-.topbar h3 a:hover, .topbar .brand a:hover, .topbar ul .active > a {
- background-color: #333;
- background-color: rgba(255, 255, 255, 0.05);
+.navbar .brand a:hover, .navbar ul .active > a {
color: #ffffff;
text-decoration: none;
+ background-color: #333333;
+ background-color: rgba(255, 255, 255, 0.05);
}
-.topbar h3 {
- position: relative;
-}
-.topbar h3 a, .topbar .brand {
+.navbar .brand {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px;
- color: #ffffff;
font-size: 20px;
font-weight: 200;
line-height: 1;
+ color: #ffffff;
}
-.topbar p {
+.navbar p {
margin: 0;
line-height: 40px;
}
-.topbar p a:hover {
- background-color: transparent;
+.navbar p a:hover {
color: #ffffff;
+ background-color: transparent;
}
-.topbar form {
- float: left;
- margin: 5px 0 0 0;
+.navbar-search {
position: relative;
- filter: alpha(opacity=100);
- -khtml-opacity: 1;
- -moz-opacity: 1;
- opacity: 1;
-}
-.topbar form.pull-right {
- float: right;
+ float: left;
+ margin-top: 6px;
+ margin-bottom: 0;
}
-.topbar input {
- background-color: #444;
- background-color: rgba(255, 255, 255, 0.3);
+.navbar-search .search-query {
+ padding: 4px 9px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: normal;
- font-weight: 13px;
+ font-size: 13px;
+ font-weight: normal;
line-height: 1;
- padding: 4px 9px;
color: #ffffff;
color: rgba(255, 255, 255, 0.75);
+ background-color: #444;
+ background-color: rgba(255, 255, 255, 0.3);
border: 1px solid #111;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
- -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
-.topbar input:-moz-placeholder {
+.navbar-search .search-query:-moz-placeholder {
color: #e6e6e6;
}
-.topbar input::-webkit-input-placeholder {
+.navbar-search .search-query::-webkit-input-placeholder {
color: #e6e6e6;
}
-.topbar input:hover {
+.navbar-search .search-query:hover {
+ color: #ffffff;
background-color: #bfbfbf;
background-color: rgba(255, 255, 255, 0.5);
- color: #ffffff;
}
-.topbar input:focus, .topbar input.focused {
- outline: 0;
- background-color: #ffffff;
+.navbar-search .search-query:focus, .navbar-search .search-query.focused {
+ padding: 5px 10px;
color: #404040;
text-shadow: 0 1px 0 #ffffff;
+ background-color: #ffffff;
border: 0;
- padding: 5px 10px;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+ outline: 0;
}
-.topbar-inner, .topbar .fill {
- background-color: #222;
- background-color: #222222;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
- background-image: -moz-linear-gradient(top, #333333, #222222);
- background-image: -ms-linear-gradient(top, #333333, #222222);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
- background-image: -webkit-linear-gradient(top, #333333, #222222);
- background-image: -o-linear-gradient(top, #333333, #222222);
- background-image: linear-gradient(top, #333333, #222222);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+.navbar-static {
+ margin-bottom: 18px;
+}
+.navbar-static .navbar-inner {
+ padding-left: 20px;
+ padding-right: 20px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.navbar-fixed {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 10000;
}
-.topbar div > ul, .nav {
+.nav {
+ position: relative;
+ left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
- position: relative;
- left: 0;
}
-.topbar div > ul > li, .nav > li {
+.nav > li {
display: block;
float: left;
}
-.topbar div > ul a, .nav a {
+.nav a {
display: block;
float: none;
padding: 10px 10px 11px;
line-height: 19px;
text-decoration: none;
}
-.topbar div > ul a:hover, .nav a:hover {
+.nav a:hover {
color: #ffffff;
text-decoration: none;
}
-.topbar div > ul .active > a, .nav .active > a {
+.nav .active > a {
background-color: #222;
background-color: rgba(0, 0, 0, 0.5);
}
-.topbar div > ul.secondary-nav, .nav.secondary-nav {
+.nav .divider {
+ height: 40px;
+ width: 1px;
+ margin: 0 5px;
+ overflow: hidden;
+ background-color: #222;
+ border-right: 1px solid #444;
+}
+.nav.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
}
-.topbar div > ul.secondary-nav .menu-dropdown,
-.nav.secondary-nav .menu-dropdown,
-.topbar div > ul.secondary-nav .dropdown-menu,
.nav.secondary-nav .dropdown-menu {
right: 0;
border: 0;
}
-.topbar div > ul a.menu:hover,
-.nav a.menu:hover,
-.topbar div > ul li.open .menu,
-.nav li.open .menu,
-.topbar div > ul .dropdown-toggle:hover,
-.nav .dropdown-toggle:hover,
-.topbar div > ul .dropdown.open .dropdown-toggle,
-.nav .dropdown.open .dropdown-toggle {
+.nav .dropdown-toggle:hover, .nav .dropdown.open .dropdown-toggle {
background: #444;
background: rgba(255, 255, 255, 0.05);
}
-.topbar div > ul .menu-dropdown,
-.nav .menu-dropdown,
-.topbar div > ul .dropdown-menu,
.nav .dropdown-menu {
background-color: #333;
}
-.topbar div > ul .menu-dropdown a.menu,
-.nav .menu-dropdown a.menu,
-.topbar div > ul .dropdown-menu a.menu,
-.nav .dropdown-menu a.menu,
-.topbar div > ul .menu-dropdown .dropdown-toggle,
-.nav .menu-dropdown .dropdown-toggle,
-.topbar div > ul .dropdown-menu .dropdown-toggle,
.nav .dropdown-menu .dropdown-toggle {
color: #ffffff;
}
-.topbar div > ul .menu-dropdown a.menu.open,
-.nav .menu-dropdown a.menu.open,
-.topbar div > ul .dropdown-menu a.menu.open,
-.nav .dropdown-menu a.menu.open,
-.topbar div > ul .menu-dropdown .dropdown-toggle.open,
-.nav .menu-dropdown .dropdown-toggle.open,
-.topbar div > ul .dropdown-menu .dropdown-toggle.open,
.nav .dropdown-menu .dropdown-toggle.open {
background: #444;
background: rgba(255, 255, 255, 0.05);
}
-.topbar div > ul .menu-dropdown li a,
-.nav .menu-dropdown li a,
-.topbar div > ul .dropdown-menu li a,
.nav .dropdown-menu li a {
color: #999;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
-.topbar div > ul .menu-dropdown li a:hover,
-.nav .menu-dropdown li a:hover,
-.topbar div > ul .dropdown-menu li a:hover,
.nav .dropdown-menu li a:hover {
background-color: #191919;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
background-image: -moz-linear-gradient(top, #292929, #191919);
background-image: -ms-linear-gradient(top, #292929, #191919);
@@ -1434,59 +1366,57 @@ table .headerSortUp.purple, table .headerSortDown.purple {
background-image: -webkit-linear-gradient(top, #292929, #191919);
background-image: -o-linear-gradient(top, #292929, #191919);
background-image: linear-gradient(top, #292929, #191919);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
color: #ffffff;
}
-.topbar div > ul .menu-dropdown .active a,
-.nav .menu-dropdown .active a,
-.topbar div > ul .dropdown-menu .active a,
.nav .dropdown-menu .active a {
color: #ffffff;
}
-.topbar div > ul .menu-dropdown .divider,
-.nav .menu-dropdown .divider,
-.topbar div > ul .dropdown-menu .divider,
.nav .dropdown-menu .divider {
background-color: #222;
border-color: #444;
}
-.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a {
+.topbar ul .dropdown-menu li a {
padding: 4px 15px;
}
-li.menu, .dropdown {
+.dropdown {
position: relative;
}
-a.menu:after, .dropdown-toggle:after {
+.dropdown-toggle:after {
+ display: inline-block;
width: 0;
height: 0;
- display: inline-block;
- content: "↓";
+ margin-top: 8px;
+ margin-left: 6px;
text-indent: -99999px;
vertical-align: top;
- margin-top: 8px;
- margin-left: 4px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #ffffff;
- filter: alpha(opacity=50);
- -khtml-opacity: 0.5;
- -moz-opacity: 0.5;
- opacity: 0.5;
+ filter: alpha(opacity=30);
+ -moz-opacity: 0.3;
+ opacity: 0.3;
+ content: "↓";
}
-.menu-dropdown, .dropdown-menu {
- background-color: #ffffff;
- float: left;
- display: none;
+.dropdown:hover .dropdown-toggle:after {
+ filter: alpha(opacity=100);
+ -moz-opacity: 1;
+ opacity: 1;
+}
+.dropdown-menu {
position: absolute;
top: 40px;
z-index: 900;
+ float: left;
+ display: none;
min-width: 160px;
max-width: 220px;
_width: 160px;
+ padding: 6px 0;
margin-left: 0;
margin-right: 0;
- padding: 6px 0;
- zoom: 1;
+ background-color: #ffffff;
border-color: #999;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
@@ -1500,13 +1430,14 @@ a.menu:after, .dropdown-toggle:after {
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
+ zoom: 1;
}
-.menu-dropdown li, .dropdown-menu li {
+.dropdown-menu li {
float: none;
display: block;
background-color: none;
}
-.menu-dropdown .divider, .dropdown-menu .divider {
+.dropdown-menu .divider {
height: 1px;
margin: 5px 0;
overflow: hidden;
@@ -1523,8 +1454,9 @@ a.menu:after, .dropdown-toggle:after {
text-shadow: 0 1px 0 #ffffff;
}
.topbar .dropdown-menu a:hover, .dropdown-menu a:hover {
+ color: #404040;
+ text-decoration: none;
background-color: #dddddd;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
@@ -1532,192 +1464,53 @@ a.menu:after, .dropdown-toggle:after {
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(top, #eeeeee, #dddddd);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
- color: #404040;
- text-decoration: none;
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
}
-.open .menu,
-.dropdown.open .menu,
-.open .dropdown-toggle,
.dropdown.open .dropdown-toggle {
color: #ffffff;
background: #ccc;
background: rgba(0, 0, 0, 0.3);
}
-.open .menu-dropdown,
-.dropdown.open .menu-dropdown,
-.open .dropdown-menu,
.dropdown.open .dropdown-menu {
display: block;
}
-.tabs, .pills {
- margin: 0 0 20px;
- padding: 0;
- list-style: none;
- zoom: 1;
-}
-.tabs:before,
-.pills:before,
-.tabs:after,
-.pills:after {
- display: table;
- content: "";
- zoom: 1;
- *display: inline;
+.hero-unit {
+ padding: 60px;
+ margin-bottom: 30px;
+ background-color: #f5f5f5;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
}
-.tabs:after, .pills:after {
- clear: both;
+.hero-unit h1 {
+ margin-bottom: 0;
+ font-size: 60px;
+ line-height: 1;
+ letter-spacing: -1px;
}
-.tabs > li, .pills > li {
- float: left;
-}
-.tabs > li > a, .pills > li > a {
- display: block;
-}
-.tabs {
- float: left;
- width: 100%;
- border-bottom: 1px solid #ddd;
-}
-.tabs > li {
- position: relative;
- top: 1px;
-}
-.tabs > li > a {
- padding: 0 15px;
- margin-right: 2px;
- line-height: 36px;
- border: 1px solid transparent;
- -webkit-border-radius: 4px 4px 0 0;
- -moz-border-radius: 4px 4px 0 0;
- border-radius: 4px 4px 0 0;
-}
-.tabs > li > a:hover {
- text-decoration: none;
- background-color: #eee;
- border-color: #eee #eee #ddd;
-}
-.tabs > li.active > a {
- color: #808080;
- background-color: #ffffff;
- border: 1px solid #ddd;
- border-bottom-color: transparent;
-}
-.tabs .menu-dropdown, .tabs .dropdown-menu {
- top: 35px;
- border-width: 1px;
- -webkit-border-radius: 0 6px 6px 6px;
- -moz-border-radius: 0 6px 6px 6px;
- border-radius: 0 6px 6px 6px;
-}
-.tabs a.menu:after, .tabs .dropdown-toggle:after {
- border-top-color: #999;
- margin-top: 15px;
- margin-left: 5px;
-}
-.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
- border-color: #999;
-}
-.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
- border-top-color: #555;
-}
-.tab-content {
- clear: both;
-}
-.pills a {
- margin: 5px 3px 5px 0;
- padding: 0 15px;
- text-shadow: 0 1px 1px #ffffff;
- line-height: 30px;
- -webkit-border-radius: 15px;
- -moz-border-radius: 15px;
- border-radius: 15px;
-}
-.pills a:hover {
- background: #00438a;
- color: #ffffff;
- text-decoration: none;
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-}
-.pills .active a {
- background: #0069d6;
- color: #ffffff;
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-}
-.tab-content > *, .pill-content > * {
- display: none;
-}
-.tab-content > .active, .pill-content > .active {
- display: block;
-}
-.breadcrumb {
- margin: 0 0 18px;
- padding: 7px 14px;
- background-color: #f5f5f5;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
- background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
- background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
- background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
- background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
- background-image: linear-gradient(top, #ffffff, #f5f5f5);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
- border: 1px solid #ddd;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- -webkit-box-shadow: inset 0 1px 0 #ffffff;
- -moz-box-shadow: inset 0 1px 0 #ffffff;
- box-shadow: inset 0 1px 0 #ffffff;
-}
-.breadcrumb li {
- display: inline;
- text-shadow: 0 1px 0 #ffffff;
-}
-.breadcrumb .divider {
- padding: 0 5px;
- color: #bfbfbf;
-}
-.breadcrumb .active a {
- color: #404040;
-}
-.hero-unit {
- background-color: #f5f5f5;
- margin-bottom: 30px;
- padding: 60px;
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
- border-radius: 6px;
-}
-.hero-unit h1 {
- margin-bottom: 0;
- font-size: 60px;
- line-height: 1;
- letter-spacing: -1px;
-}
-.hero-unit p {
- font-size: 18px;
- font-weight: 200;
- line-height: 27px;
+.hero-unit p {
+ font-size: 18px;
+ font-weight: 200;
+ line-height: 27px;
}
footer {
- margin-top: 17px;
padding-top: 17px;
+ margin-top: 17px;
border-top: 1px solid #eee;
}
.page-header {
- margin-bottom: 17px;
- border-bottom: 1px solid #ddd;
+ margin-bottom: 27px;
+ border-bottom: 1px solid #eee;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.page-header h1 {
- margin-bottom: 8px;
+ margin-bottom: 13.5px;
}
.btn.danger,
.alert-message.danger,
@@ -1741,8 +1534,8 @@ footer {
.alert-message.danger,
.btn.error,
.alert-message.error {
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #c43c35;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
@@ -1750,14 +1543,14 @@ footer {
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #c43c35 #c43c35 #882a25;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.success, .alert-message.success {
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #57a957;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -ms-linear-gradient(top, #62c462, #57a957);
@@ -1765,14 +1558,14 @@ footer {
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
background-image: -o-linear-gradient(top, #62c462, #57a957);
background-image: linear-gradient(top, #62c462, #57a957);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #57a957 #57a957 #3d773d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.info, .alert-message.info {
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #339bb9;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
@@ -1780,28 +1573,27 @@ footer {
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
background-image: linear-gradient(top, #5bc0de, #339bb9);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #339bb9 #339bb9 #22697d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn {
- cursor: pointer;
display: inline-block;
+ padding: 5px 14px 6px;
+ font-size: 13px;
+ line-height: normal;
+ color: #333;
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #e6e6e6;
- background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+ background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
- padding: 5px 14px 6px;
- text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
- color: #333;
- font-size: 13px;
- line-height: normal;
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
@@ -1810,6 +1602,7 @@ footer {
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ cursor: pointer;
-webkit-transition: 0.1s linear all;
-moz-transition: 0.1s linear all;
-ms-transition: 0.1s linear all;
@@ -1817,17 +1610,17 @@ footer {
transition: 0.1s linear all;
}
.btn:hover {
- background-position: 0 -15px;
color: #333;
text-decoration: none;
+ background-position: 0 -15px;
}
.btn:focus {
outline: 1px dotted #666;
}
.btn.primary {
color: #ffffff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0064cd;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
@@ -1835,12 +1628,12 @@ footer {
background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
background-image: -o-linear-gradient(top, #049cdb, #0064cd);
background-image: linear-gradient(top, #049cdb, #0064cd);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #0064cd #0064cd #003f81;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
-.btn:active {
+.btn.active, .btn:active {
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -1850,7 +1643,6 @@ footer {
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter: alpha(opacity=65);
- -khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65;
-webkit-box-shadow: none;
@@ -1862,7 +1654,6 @@ footer {
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter: alpha(opacity=65);
- -khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65;
-webkit-box-shadow: none;
@@ -1870,9 +1661,9 @@ footer {
box-shadow: none;
}
.btn.large {
+ padding: 9px 14px 9px;
font-size: 15px;
line-height: normal;
- padding: 9px 14px 9px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
@@ -1888,112 +1679,548 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
+.btn-toolbar {
+ zoom: 1;
+}
+.btn-toolbar:before, .btn-toolbar:after {
+ display: table;
+ *display: inline;
+ content: "";
+ zoom: 1;
+}
+.btn-toolbar:after {
+ clear: both;
+}
+.btn-toolbar .btn-group {
+ float: left;
+ margin-right: 10px;
+}
+.btn-group {
+ zoom: 1;
+}
+.btn-group:before, .btn-group:after {
+ display: table;
+ *display: inline;
+ content: "";
+ zoom: 1;
+}
+.btn-group:after {
+ clear: both;
+}
+.btn-group .btn {
+ position: relative;
+ float: left;
+ margin-left: -1px;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
+.btn-group .btn:first-child {
+ margin-left: 0;
+ -webkit-border-top-left-radius: 4px;
+ -moz-border-radius-topleft: 4px;
+ border-top-left-radius: 4px;
+ -webkit-border-bottom-left-radius: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ border-bottom-left-radius: 4px;
+}
+.btn-group .btn:last-child {
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ border-top-right-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ -moz-border-radius-bottomright: 4px;
+ border-bottom-right-radius: 4px;
+}
+.btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active {
+ z-index: 2;
+}
.close {
float: right;
- color: #000000;
font-size: 20px;
font-weight: bold;
line-height: 13.5px;
+ color: #000000;
text-shadow: 0 1px 0 #ffffff;
filter: alpha(opacity=20);
- -khtml-opacity: 0.2;
-moz-opacity: 0.2;
opacity: 0.2;
}
-.close:hover {
- color: #000000;
+.close:hover {
+ color: #000000;
+ text-decoration: none;
+ filter: alpha(opacity=40);
+ -moz-opacity: 0.4;
+ opacity: 0.4;
+}
+.alert-message {
+ position: relative;
+ padding: 7px 15px;
+ margin-bottom: 18px;
+ color: #404040;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ background-color: #eedc94;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
+ background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
+ background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
+ background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
+ background-image: -o-linear-gradient(top, #fceec1, #eedc94);
+ background-image: linear-gradient(top, #fceec1, #eedc94);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
+ border-color: #eedc94 #eedc94 #e4c652;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ border-width: 1px;
+ border-style: solid;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+.alert-message .close {
+ *margin-top: 3px;
+ /* IE7 spacing */
+
+}
+.alert-message h5 {
+ line-height: 18px;
+}
+.alert-message p {
+ margin-bottom: 0;
+}
+.alert-message div {
+ margin-top: 5px;
+ margin-bottom: 2px;
+ line-height: 28px;
+}
+.alert-message .btn {
+ -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+ -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+.alert-message.block-message {
+ padding: 14px;
+ background-image: none;
+ background-color: #fdf5d9;
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+ border-color: #fceec1;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
+.alert-message.block-message ul, .alert-message.block-message p {
+ margin-right: 30px;
+}
+.alert-message.block-message ul {
+ margin-bottom: 0;
+}
+.alert-message.block-message li {
+ color: #404040;
+}
+.alert-message.block-message .alert-actions {
+ margin-top: 5px;
+}
+.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
+ color: #404040;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+.alert-message.block-message.error {
+ background-color: #fddfde;
+ border-color: #fbc7c6;
+}
+.alert-message.block-message.success {
+ background-color: #d1eed1;
+ border-color: #bfe7bf;
+}
+.alert-message.block-message.info {
+ background-color: #ddf4fb;
+ border-color: #c6edf9;
+}
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
+ border: 1px solid #eee;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+.well blockquote {
+ border-color: #ddd;
+ border-color: rgba(0, 0, 0, 0.15);
+}
+.fade {
+ -webkit-transition: opacity 0.15s linear;
+ -moz-transition: opacity 0.15s linear;
+ -ms-transition: opacity 0.15s linear;
+ -o-transition: opacity 0.15s linear;
+ transition: opacity 0.15s linear;
+ opacity: 0;
+}
+.fade.in {
+ opacity: 1;
+}
+.collapse {
+ -webkit-transition: height 0.35s ease;
+ -moz-transition: height 0.35s ease;
+ -ms-transition: height 0.35s ease;
+ -o-transition: height 0.35s ease;
+ transition: height 0.35s ease;
+ position: relative;
+ overflow: hidden;
+ height: 0;
+}
+.collapse.in {
+ height: auto;
+}
+.label {
+ padding: 1px 3px 2px;
+ font-size: 9.75px;
+ font-weight: bold;
+ color: #ffffff;
+ text-transform: uppercase;
+ background-color: #bfbfbf;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+}
+.label.important {
+ background-color: #c43c35;
+}
+.label.warning {
+ background-color: #f89406;
+}
+.label.success {
+ background-color: #46a546;
+}
+.label.notice {
+ background-color: #62cffc;
+}
+.tabs, .pills {
+ padding: 0;
+ margin: 0 0 20px;
+ list-style: none;
+ zoom: 1;
+}
+.tabs:before,
+.pills:before,
+.tabs:after,
+.pills:after {
+ display: table;
+ *display: inline;
+ content: "";
+ zoom: 1;
+}
+.tabs:after, .pills:after {
+ clear: both;
+}
+.tabs > li, .pills > li {
+ float: left;
+}
+.tabs > li > a, .pills > li > a {
+ display: block;
+}
+.tabs {
+ border-color: #ddd;
+ border-style: solid;
+ border-width: 0 0 1px;
+}
+.tabs > li {
+ position: relative;
+ margin-bottom: -1px;
+}
+.tabs > li > a {
+ padding: 0 15px;
+ margin-right: 2px;
+ line-height: 36px;
+ border: 1px solid transparent;
+ -webkit-border-radius: 4px 4px 0 0;
+ -moz-border-radius: 4px 4px 0 0;
+ border-radius: 4px 4px 0 0;
+}
+.tabs > li > a:hover {
+ text-decoration: none;
+ background-color: #eee;
+ border-color: #eee #eee #ddd;
+}
+.tabs .active > a, .tabs .active > a:hover {
+ color: #808080;
+ background-color: #ffffff;
+ border: 1px solid #ddd;
+ border-bottom-color: transparent;
+ cursor: default;
+}
+.tabbable {
+ margin-bottom: 18px;
+}
+.tabbable .tabs {
+ margin-bottom: 0;
+ border-bottom: 0;
+}
+.tabbable .tab-content {
+ padding: 19px;
+ border: 1px solid #ddd;
+}
+.tabbable.tabs-bottom .tabs > li {
+ margin-top: -1px;
+ margin-bottom: 0;
+}
+.tabbable.tabs-bottom .tabs > li > a {
+ -webkit-border-radius: 0 0 4px 4px;
+ -moz-border-radius: 0 0 4px 4px;
+ border-radius: 0 0 4px 4px;
+}
+.tabbable.tabs-bottom .tabs > li > a:hover {
+ border-bottom-color: transparent;
+ border-top-color: #ddd;
+}
+.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover {
+ border-color: transparent #ddd #ddd #ddd;
+}
+.tabbable.tabs-left, .tabbable.tabs-right {
+ zoom: 1;
+}
+.tabbable.tabs-left:before,
+.tabbable.tabs-right:before,
+.tabbable.tabs-left:after,
+.tabbable.tabs-right:after {
+ display: table;
+ *display: inline;
+ content: "";
+ zoom: 1;
+}
+.tabbable.tabs-left:after, .tabbable.tabs-right:after {
+ clear: both;
+}
+.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs {
+ width: 100px;
+}
+.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li {
+ float: none;
+ margin-bottom: -1px;
+}
+.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a {
+ margin-bottom: 2px;
+}
+.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover {
+ border-color: transparent;
+}
+.tabbable.tabs-left .tab-content {
+ margin-left: 100px;
+}
+.tabbable.tabs-left .tabs {
+ float: left;
+}
+.tabbable.tabs-left .tabs > li {
+ margin-right: -1px;
+}
+.tabbable.tabs-left .tabs > li > a {
+ margin-right: 0;
+ -webkit-border-radius: 4px 0 0 4px;
+ -moz-border-radius: 4px 0 0 4px;
+ border-radius: 4px 0 0 4px;
+}
+.tabbable.tabs-left .tabs > li > a:hover {
+ border-right-color: #ddd;
+}
+.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover {
+ border-color: #ddd;
+ border-right-color: transparent;
+}
+.tabbable.tabs-right .tab-content {
+ margin-right: 100px;
+}
+.tabbable.tabs-right .tabs {
+ float: right;
+}
+.tabbable.tabs-right .tabs > li {
+ margin-left: -1px;
+}
+.tabbable.tabs-right .tabs > li > a {
+ margin-left: 0;
+ -webkit-border-radius: 0 4px 4px 0;
+ -moz-border-radius: 0 4px 4px 0;
+ border-radius: 0 4px 4px 0;
+}
+.tabbable.tabs-right .tabs > li > a:hover {
+ border-left-color: #ddd;
+}
+.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover {
+ border-color: #ddd;
+ border-left-color: transparent;
+}
+.tabs .menu-dropdown, .tabs .dropdown-menu {
+ top: 35px;
+ border-width: 1px;
+ -webkit-border-radius: 0 6px 6px 6px;
+ -moz-border-radius: 0 6px 6px 6px;
+ border-radius: 0 6px 6px 6px;
+}
+.tabs a.menu:after, .tabs .dropdown-toggle:after {
+ border-top-color: #999;
+ margin-top: 15px;
+ margin-left: 5px;
+}
+.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
+ border-color: #999;
+}
+.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
+ border-top-color: #555;
+}
+.pills > li > a {
+ padding: 0 15px;
+ margin: 5px 3px 5px 0;
+ line-height: 30px;
+ text-shadow: 0 1px 1px #ffffff;
+ -webkit-border-radius: 15px;
+ -moz-border-radius: 15px;
+ border-radius: 15px;
+}
+.pills > li > a:hover {
+ color: #ffffff;
text-decoration: none;
- filter: alpha(opacity=40);
- -khtml-opacity: 0.4;
- -moz-opacity: 0.4;
- opacity: 0.4;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+ background-color: #00438a;
}
-.alert-message {
- position: relative;
- padding: 7px 15px;
- margin-bottom: 18px;
- color: #404040;
- background-color: #eedc94;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
- background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
- background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
- background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
- background-image: -o-linear-gradient(top, #fceec1, #eedc94);
- background-image: linear-gradient(top, #fceec1, #eedc94);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
- border-color: #eedc94 #eedc94 #e4c652;
- border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
- border-width: 1px;
- border-style: solid;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
- -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+.pills .active > a {
+ color: #ffffff;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+ background-color: #0069d6;
}
-.alert-message .close {
- *margin-top: 3px;
- /* IE7 spacing */
-
+.pills-vertical > li {
+ float: none;
}
-.alert-message h5 {
- line-height: 18px;
+.tab-content > .tab-pane, .pill-content > .pill-pane {
+ display: none;
}
-.alert-message p {
- margin-bottom: 0;
+.tab-content > .active, .pill-content > .active {
+ display: block;
}
-.alert-message div {
- margin-top: 5px;
- margin-bottom: 2px;
- line-height: 28px;
+.step-nav {
+ position: relative;
+ margin: 0 0 18px;
+ list-style: none;
+ line-height: 30px;
+ text-align: center;
+ background-color: #f5f5f5;
+ -webkit-border-radius: 15px;
+ -moz-border-radius: 15px;
+ border-radius: 15px;
}
-.alert-message .btn {
- -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
- -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
- box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+.step-nav li {
+ display: inline;
+ color: #bfbfbf;
}
-.alert-message.block-message {
- background-image: none;
- background-color: #fdf5d9;
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
- padding: 14px;
- border-color: #fceec1;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
+.step-nav .prev, .step-nav .next {
+ position: absolute;
+ top: 6px;
}
-.alert-message.block-message ul, .alert-message.block-message p {
- margin-right: 30px;
+.step-nav .prev {
+ left: 15px;
}
-.alert-message.block-message ul {
- margin-bottom: 0;
+.step-nav .next {
+ right: 15px;
}
-.alert-message.block-message li {
- color: #404040;
+.step-nav .dot {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin: 0 3px;
+ text-indent: -999em;
+ background-color: #bfbfbf;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
+}
+.step-nav .dot:hover, .step-nav .active .dot {
+ background-color: #404040;
+}
+.subnav {
+ background-color: #eeeeee;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));
+ background-image: -moz-linear-gradient(top, #f5f5f5, #eeeeee);
+ background-image: -ms-linear-gradient(top, #f5f5f5, #eeeeee);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));
+ background-image: -webkit-linear-gradient(top, #f5f5f5, #eeeeee);
+ background-image: -o-linear-gradient(top, #f5f5f5, #eeeeee);
+ background-image: linear-gradient(top, #f5f5f5, #eeeeee);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);
+ -webkit-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5);
+ box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5);
}
-.alert-message.block-message .alert-actions {
- margin-top: 5px;
+.subnav a {
+ padding: 8px 10px;
+ font-size: 12px;
+ color: #0069d6;
+ text-shadow: 0 1px 0 #fff;
+ border-left: 1px solid #f9f9f9;
+ border-right: 1px solid #e5e5e5;
}
-.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
+.subnav a:hover {
+ color: #00438a;
+ background-color: #eee;
+}
+.subnav li:first-child a {
+ border-left: 0;
+ -webkit-border-radius: 6px 0 0 6px;
+ -moz-border-radius: 6px 0 0 6px;
+ border-radius: 6px 0 0 6px;
+}
+.subnav li:last-child a {
+ border-right: 0;
+ -webkit-border-radius: 0 6px 6px 0;
+ -moz-border-radius: 0 6px 6px 0;
+ border-radius: 0 6px 6px 0;
+}
+.subnav ul .active > a {
color: #404040;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ background-color: #eee;
}
-.alert-message.block-message.error {
- background-color: #fddfde;
- border-color: #fbc7c6;
+.breadcrumb {
+ padding: 7px 14px;
+ margin: 0 0 18px;
+ background-color: #f5f5f5;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
+ background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
+ background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
+ background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
+ background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
+ background-image: linear-gradient(top, #ffffff, #f5f5f5);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
+ border: 1px solid #ddd;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-box-shadow: inset 0 1px 0 #ffffff;
+ -moz-box-shadow: inset 0 1px 0 #ffffff;
+ box-shadow: inset 0 1px 0 #ffffff;
}
-.alert-message.block-message.success {
- background-color: #d1eed1;
- border-color: #bfe7bf;
+.breadcrumb li {
+ display: inline;
+ text-shadow: 0 1px 0 #ffffff;
}
-.alert-message.block-message.info {
- background-color: #ddf4fb;
- border-color: #c6edf9;
+.breadcrumb .divider {
+ padding: 0 5px;
+ color: #bfbfbf;
+}
+.breadcrumb .active a {
+ color: #404040;
}
.pagination {
height: 36px;
@@ -2018,57 +2245,38 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
float: left;
padding: 0 14px;
line-height: 34px;
+ text-decoration: none;
border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0, 0, 0, 0.15);
*border-right-color: #ddd;
/* IE6-7 */
- text-decoration: none;
}
.pagination a:hover, .pagination .active a {
background-color: #c7eefe;
}
.pagination .disabled a, .pagination .disabled a:hover {
- background-color: transparent;
color: #bfbfbf;
+ background-color: transparent;
}
.pagination .next a {
border: 0;
}
-.well {
- background-color: #f5f5f5;
- margin-bottom: 20px;
- padding: 19px;
- min-height: 20px;
- border: 1px solid #eee;
- border: 1px solid rgba(0, 0, 0, 0.05);
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
- -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-.well blockquote {
- border-color: #ddd;
- border-color: rgba(0, 0, 0, 0.15);
-}
.modal-backdrop {
- background-color: #000000;
position: fixed;
top: 0;
- left: 0;
right: 0;
bottom: 0;
+ left: 0;
z-index: 10000;
+ background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop, .modal-backdrop.fade.in {
filter: alpha(opacity=80);
- -khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
@@ -2110,15 +2318,16 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
top: 50%;
}
.modal-header {
- border-bottom: 1px solid #eee;
padding: 5px 15px;
+ border-bottom: 1px solid #eee;
}
.modal-body {
padding: 15px;
}
.modal-footer {
- background-color: #f5f5f5;
padding: 14px 15px 15px;
+ margin-bottom: 0;
+ background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
@@ -2127,13 +2336,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
zoom: 1;
- margin-bottom: 0;
}
.modal-footer:before, .modal-footer:after {
display: table;
+ *display: inline;
content: "";
zoom: 1;
- *display: inline;
}
.modal-footer:after {
clear: both;
@@ -2143,20 +2351,18 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
margin-left: 5px;
}
.twipsy {
- display: block;
position: absolute;
+ z-index: 1000;
+ display: block;
visibility: visible;
padding: 5px;
font-size: 11px;
- z-index: 1000;
- filter: alpha(opacity=80);
- -khtml-opacity: 0.8;
- -moz-opacity: 0.8;
- opacity: 0.8;
+ filter: alpha(opacity=0);
+ -moz-opacity: 0;
+ opacity: 0;
}
-.twipsy.fade.in {
+.twipsy.in {
filter: alpha(opacity=80);
- -khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
@@ -2193,12 +2399,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
border-right: 5px solid #000000;
}
.twipsy-inner {
+ max-width: 200px;
padding: 3px 8px;
- background-color: #000000;
color: white;
text-align: center;
- max-width: 200px;
text-decoration: none;
+ background-color: #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
@@ -2213,8 +2419,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
top: 0;
left: 0;
z-index: 1000;
- padding: 5px;
display: none;
+ padding: 5px;
}
.popover.above .arrow {
bottom: 0;
@@ -2254,11 +2460,11 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
height: 0;
}
.popover .inner {
- background-color: #000000;
- background-color: rgba(0, 0, 0, 0.8);
padding: 3px;
- overflow: hidden;
width: 280px;
+ overflow: hidden;
+ background-color: #000000;
+ background-color: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
@@ -2267,17 +2473,17 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.popover .title {
- background-color: #f5f5f5;
padding: 9px 15px;
line-height: 1;
+ background-color: #f5f5f5;
+ border-bottom: 1px solid #eee;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
- border-bottom: 1px solid #eee;
}
.popover .content {
- background-color: #ffffff;
padding: 14px;
+ background-color: #ffffff;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
@@ -2288,61 +2494,28 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.popover .content p, .popover .content ul, .popover .content ol {
margin-bottom: 0;
}
-.fade {
- -webkit-transition: opacity 0.15s linear;
- -moz-transition: opacity 0.15s linear;
- -ms-transition: opacity 0.15s linear;
- -o-transition: opacity 0.15s linear;
- transition: opacity 0.15s linear;
- opacity: 0;
-}
-.fade.in {
- opacity: 1;
-}
-.label {
- padding: 1px 3px 2px;
- background-color: #bfbfbf;
- font-size: 9.75px;
- font-weight: bold;
- color: #ffffff;
- text-transform: uppercase;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
-}
-.label.important {
- background-color: #c43c35;
-}
-.label.warning {
- background-color: #f89406;
-}
-.label.success {
- background-color: #46a546;
-}
-.label.notice {
- background-color: #62cffc;
-}
-.media-grid {
+.thumbnails {
margin-left: -20px;
margin-bottom: 0;
+ list-style: none;
zoom: 1;
}
-.media-grid:before, .media-grid:after {
+.thumbnails:before, .thumbnails:after {
display: table;
+ *display: inline;
content: "";
zoom: 1;
- *display: inline;
}
-.media-grid:after {
+.thumbnails:after {
clear: both;
}
-.media-grid li {
- display: inline;
-}
-.media-grid a {
+.thumbnails > li {
float: left;
- padding: 4px;
margin: 0 0 20px 20px;
+}
+.thumbnail {
+ display: block;
+ line-height: 1;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
@@ -2351,12 +2524,236 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
-.media-grid a img {
- display: block;
-}
-.media-grid a:hover {
+a.thumbnail:hover {
border-color: #0069d6;
-webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
+.thumbnail > img {
+ display: block;
+ margin: 4px;
+}
+.thumbnail .caption {
+ padding: 9px;
+}
+.hidden {
+ display: none;
+ visibility: hidden;
+}
+@media (max-width: 480px) {
+ .modal {
+ width: auto;
+ margin: 0;
+ }
+ .horizontal-form .control-group > label {
+ float: none;
+ width: auto;
+ padding-top: 0;
+ text-align: left;
+ }
+ .horizontal-form .controls {
+ margin-left: 0;
+ }
+ .horizontal-form .control-list {
+ padding-top: 0;
+ }
+ .horizontal-form .form-actions {
+ padding-left: 0;
+ }
+}
+@media (max-width: 768px) {
+ .container {
+ width: auto;
+ padding: 0 20px;
+ }
+ .row {
+ margin-left: 0;
+ }
+ [class*="span"] {
+ float: none;
+ display: block;
+ width: auto;
+ margin: 0;
+ }
+ .nav {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 180px;
+ padding-top: 40px;
+ list-style: none;
+ }
+ .nav, .nav > li:last-child a {
+ -webkit-border-radius: 0 0 4px 0;
+ -moz-border-radius: 0 0 4px 0;
+ border-radius: 0 0 4px 0;
+ }
+ .nav > li {
+ float: none;
+ display: none;
+ }
+ .nav > li > a {
+ float: none;
+ background-color: #222;
+ }
+ .nav > .active {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ .navbar ul .active > a {
+ background-color: transparent;
+ }
+ .nav > .active a:after {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-top: 8px;
+ margin-left: 6px;
+ text-indent: -99999px;
+ vertical-align: top;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid #ffffff;
+ filter: alpha(opacity=100);
+ -moz-opacity: 1;
+ opacity: 1;
+ content: "↓";
+ }
+ .nav > .active a:hover {
+ background-color: rgba(255, 255, 255, 0.05);
+ }
+}
+@media (min-width: 768px) and (max-width: 940px) {
+ .container {
+ width: 748px;
+ }
+ .span1 {
+ width: 44px;
+ }
+ .span2 {
+ width: 108px;
+ }
+ .span3 {
+ width: 172px;
+ }
+ .span4 {
+ width: 236px;
+ }
+ .span5 {
+ width: 300px;
+ }
+ .span6 {
+ width: 364px;
+ }
+ .span7 {
+ width: 428px;
+ }
+ .span8 {
+ width: 492px;
+ }
+ .span9 {
+ width: 556px;
+ }
+ .span10 {
+ width: 620px;
+ }
+ .span11 {
+ width: 684px;
+ }
+ .span12 {
+ width: 748px;
+ }
+ .offset1 {
+ margin-left: 64px;
+ }
+ .offset2 {
+ margin-left: 128px;
+ }
+ .offset3 {
+ margin-left: 192px;
+ }
+ .offset4 {
+ margin-left: 256px;
+ }
+ .offset5 {
+ margin-left: 320px;
+ }
+ .offset6 {
+ margin-left: 384px;
+ }
+ .offset7 {
+ margin-left: 448px;
+ }
+ .offset8 {
+ margin-left: 512px;
+ }
+ .offset9 {
+ margin-left: 576px;
+ }
+ .offset10 {
+ margin-left: 640px;
+ }
+ .offset11 {
+ margin-left: 704px;
+ }
+ .offset12 {
+ margin-left: 768px;
+ }
+}
+/*
+@media (min-width: 1210px) {
+
+ // Reset grid variables
+ @gridColumns: 12;
+ @gridColumnWidth: 70px;
+ @gridGutterWidth: 30px;
+ @siteWidth: 1170px;
+
+ // Bring grid mixins to recalculate widths
+ .columns(@columnSpan: 1) {
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+ }
+ .offset(@columnOffset: 1) {
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
+ }
+
+ .container {
+ width: @siteWidth;
+ }
+ [class*="span"] {
+ margin-left: @gridGutterWidth;
+ }
+
+ // Default columns
+ .span1 { .columns(1); }
+ .span2 { .columns(2); }
+ .span3 { .columns(3); }
+ .span4 { .columns(4); }
+ .span5 { .columns(5); }
+ .span6 { .columns(6); }
+ .span7 { .columns(7); }
+ .span8 { .columns(8); }
+ .span9 { .columns(9); }
+ .span10 { .columns(10); }
+ .span11 { .columns(11); }
+ .span12 { .columns(12); }
+
+ // Offset column options
+ .offset1 { .offset(1); }
+ .offset2 { .offset(2); }
+ .offset3 { .offset(3); }
+ .offset4 { .offset(4); }
+ .offset5 { .offset(5); }
+ .offset6 { .offset(6); }
+ .offset7 { .offset(7); }
+ .offset8 { .offset(8); }
+ .offset9 { .offset(9); }
+ .offset10 { .offset(10); }
+ .offset11 { .offset(11); }
+ .offset12 { .offset(12); }
+
+}
+*/
diff --git a/bootstrap.min.css b/bootstrap.min.css
index aabdf2428b30d9932a884c217d76dacef29f230e..4bb1adc5c0db2269c7d57277c0af8062c6eca42a 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -1,6 +1,6 @@
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;}
-table{border-collapse:collapse;border-spacing:0;}
+table{max-width:100%;border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
q:before,q:after,blockquote:before,blockquote:after{content:"";}
html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
@@ -9,276 +9,237 @@ a:hover,a:active{outline:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
-sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
+sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
-img{border:0;-ms-interpolation-mode:bicubic;}
-button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}
-button,input{line-height:normal;*overflow:visible;}
-button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+img{max-width:100%;height:auto;border:0;-ms-interpolation-mode:bicubic;}
+button,input,select,textarea{margin:0;font-size:100%;vertical-align:baseline;*vertical-align:middle;}
+button,input{*overflow:visible;line-height:normal;}
+button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;}
input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
-html,body{background-color:#ffffff;}
-body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#404040;}
-.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;}
+body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;background-color:#ffffff;}
+.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;*display:inline;content:"";zoom:1;}
.container:after{clear:both;}
-.container-fluid{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";zoom:1;*display:inline;}
-.container-fluid:after{clear:both;}
-.container-fluid>.sidebar{float:left;width:220px;}
-.container-fluid>.content{margin-left:240px;}
-a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#00438a;text-decoration:underline;}
+.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;*display:inline;content:"";zoom:1;}
+.fluid-container:after{clear:both;}
+.fluid-sidebar-left,.fluid-sidebar-right{width:220px;}
+.fluid-sidebar-left{float:left;}
+.fluid-sidebar-right{float:right;}
+.fluid-content{margin-left:240px;}
+.fluid-container.reverse .fluid-content{margin-left:0;margin-right:240px;}
+a{font-weight:inherit;line-height:inherit;color:#0069d6;text-decoration:none;}a:hover{color:#00438a;text-decoration:underline;}
.pull-right{float:right;}
.pull-left{float:left;}
.hide{display:none;}
.show{display:block;}
-.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
+.row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;*display:inline;content:"";zoom:1;}
.row:after{clear:both;}
[class*="span"]{display:inline;float:left;margin-left:20px;}
-.span1{width:40px;}
-.span2{width:100px;}
-.span3{width:160px;}
-.span4{width:220px;}
-.span5{width:280px;}
-.span6{width:340px;}
-.span7{width:400px;}
-.span8{width:460px;}
-.span9{width:520px;}
-.span10{width:580px;}
-.span11{width:640px;}
-.span12{width:700px;}
-.span13{width:760px;}
-.span14{width:820px;}
-.span15{width:880px;}
-.span16{width:940px;}
-.span17{width:1000px;}
-.span18{width:1060px;}
-.span19{width:1120px;}
-.span20{width:1180px;}
-.span21{width:1240px;}
-.span22{width:1300px;}
-.span23{width:1360px;}
-.span24{width:1420px;}
-.offset1{margin-left:80px;}
-.offset2{margin-left:140px;}
-.offset3{margin-left:200px;}
-.offset4{margin-left:260px;}
-.offset5{margin-left:320px;}
-.offset6{margin-left:380px;}
-.offset7{margin-left:440px;}
-.offset8{margin-left:500px;}
-.offset9{margin-left:560px;}
-.offset10{margin-left:620px;}
-.offset11{margin-left:680px;}
-.offset12{margin-left:740px;}
-.span-one-third{width:300px;}
-.span-two-thirds{width:620px;}
-.offset-one-third{margin-left:340px;}
-.offset-two-thirds{margin-left:660px;}
-p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
-h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
-h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
-h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
-h3,h4,h5,h6{line-height:36px;}
-h3{font-size:18px;}h3 small{font-size:14px;}
-h4{font-size:16px;}h4 small{font-size:12px;}
-h5{font-size:14px;}
-h6{font-size:13px;color:#bfbfbf;text-transform:uppercase;}
-ul,ol{margin:0 0 18px 25px;}
+.span1{width:60px;}
+.span2{width:140px;}
+.span3{width:220px;}
+.span4{width:300px;}
+.span5{width:380px;}
+.span6{width:460px;}
+.span7{width:540px;}
+.span8{width:620px;}
+.span9{width:700px;}
+.span10{width:780px;}
+.span11{width:860px;}
+.span12{width:940px;}
+.offset1{margin-left:100px;}
+.offset2{margin-left:180px;}
+.offset3{margin-left:260px;}
+.offset4{margin-left:340px;}
+.offset5{margin-left:420px;}
+.offset6{margin-left:500px;}
+.offset7{margin-left:580px;}
+.offset8{margin-left:660px;}
+.offset9{margin-left:740px;}
+.offset10{margin-left:820px;}
+.offset11{margin-left:900px;}
+p{margin-bottom:9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;}p small{font-size:11px;color:#bfbfbf;}
+h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
+h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;}
+h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;}
+h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;}
+h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
+h5{font-size:14px;line-height:18px;}
+h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;}
+ul,ol{margin:0 0 9px 25px;}
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
ul{list-style:disc;}
ol{list-style:decimal;}
-li{line-height:18px;color:#808080;}
-ul.unstyled{list-style:none;margin-left:0;}
+li{line-height:18px;color:#404040;}
+ul.unstyled{margin-left:0;list-style:none;}
dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
dl dt{font-weight:bold;}
dl dd{margin-left:9px;}
-hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;}
+hr{margin:27px 0;border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #fff;}
strong{font-style:inherit;font-weight:bold;}
em{font-style:italic;font-weight:inherit;line-height:inherit;}
.muted{color:#bfbfbf;}
-blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
-blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
-address{display:block;line-height:18px;margin-bottom:18px;}
-code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
-code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
-pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
+abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;}
+blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}blockquote p{margin-bottom:0;font-size:300;font-weight:16px;line-height:22.5px;}
+blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
+blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
+address{display:block;margin-bottom:18px;line-height:18px;}
+code,pre{padding:0 3px 2px;font-family:"Menlo",Monaco,Courier New,monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+code{padding:1px 3px;background-color:#fee9cc;}
+pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
+pre code{padding:0;background-color:transparent;}
form{margin-bottom:18px;}
-fieldset{margin-bottom:18px;padding-top:18px;}fieldset legend{display:block;padding-left:150px;font-size:19.5px;line-height:1;color:#404040;*padding:0 0 5px 145px;*line-height:1.5;}
-form .clearfix{margin-bottom:18px;zoom:1;}form .clearfix:before,form .clearfix:after{display:table;content:"";zoom:1;*display:inline;}
-form .clearfix:after{clear:both;}
-label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;}
-label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;}
-form .input{margin-left:150px;}
-input[type=checkbox],input[type=radio]{cursor:pointer;}
+legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;}
+label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;}
+label{display:block;margin-bottom:5px;color:#404040;}
input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
-input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;}
-input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
+input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;}
+input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
-select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;}
+select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;}
+select{background-color:#ffffff;}
select[multiple]{height:inherit;}
+input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
textarea{height:auto;}
-.uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
-:-moz-placeholder{color:#bfbfbf;}
-::-webkit-input-placeholder{color:#bfbfbf;}
-input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
-input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
+input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;}
+input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;}
input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;}
-form div.clearfix.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.clearfix.error>label,form div.clearfix.error span.help-inline,form div.clearfix.error span.help-block{color:#9d261d;}
-form div.clearfix.error input,form div.clearfix.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form div.clearfix.error input:focus,form div.clearfix.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
-form div.clearfix.error .input-prepend span.add-on,form div.clearfix.error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
-.input-mini,input.mini,textarea.mini,select.mini{width:60px;}
-.input-small,input.small,textarea.small,select.small{width:90px;}
-.input-medium,input.medium,textarea.medium,select.medium{width:150px;}
-.input-large,input.large,textarea.large,select.large{width:210px;}
-.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
-.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
-textarea.xxlarge{overflow-y:auto;}
-input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:30px;margin-left:0;}
-input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:90px;margin-left:0;}
-input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:150px;margin-left:0;}
-input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:210px;margin-left:0;}
-input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:270px;margin-left:0;}
-input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:330px;margin-left:0;}
-input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:390px;margin-left:0;}
-input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:450px;margin-left:0;}
-input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:510px;margin-left:0;}
-input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:570px;margin-left:0;}
-input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:630px;margin-left:0;}
-input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:690px;margin-left:0;}
-input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:750px;margin-left:0;}
-input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:810px;margin-left:0;}
-input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;}
-input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;}
+.input-mini{width:60px;}
+.input-small{width:90px;}
+.input-medium{width:150px;}
+.input-large{width:210px;}
+.input-xlarge{width:270px;}
+.input-xxlarge{width:530px;}
+input.span1,textarea.span1,select.span1,.uneditable-input.span1{display:inline-block;float:none;width:50px;margin-left:0;}
+input.span2,textarea.span2,select.span2,.uneditable-input.span2{display:inline-block;float:none;width:130px;margin-left:0;}
+input.span3,textarea.span3,select.span3,.uneditable-input.span3{display:inline-block;float:none;width:210px;margin-left:0;}
+input.span4,textarea.span4,select.span4,.uneditable-input.span4{display:inline-block;float:none;width:290px;margin-left:0;}
+input.span5,textarea.span5,select.span5,.uneditable-input.span5{display:inline-block;float:none;width:370px;margin-left:0;}
+input.span6,textarea.span6,select.span6,.uneditable-input.span6{display:inline-block;float:none;width:450px;margin-left:0;}
+input.span7,textarea.span7,select.span7,.uneditable-input.span7{display:inline-block;float:none;width:530px;margin-left:0;}
+input.span8,textarea.span8,select.span8,.uneditable-input.span8{display:inline-block;float:none;width:610px;margin-left:0;}
+input.span9,textarea.span9,select.span9,.uneditable-input.span9{display:inline-block;float:none;width:690px;margin-left:0;}
+input.span10,textarea.span10,select.span10,.uneditable-input.span10{display:inline-block;float:none;width:770px;margin-left:0;}
+input.span11,textarea.span11,select.span11,.uneditable-input.span11{display:inline-block;float:none;width:850px;margin-left:0;}
+input.span12,textarea.span12,select.span12,.uneditable-input.span12{display:inline-block;float:none;width:930px;margin-left:0;}
+input.span13,textarea.span13,select.span13,.uneditable-input.span13{display:inline-block;float:none;width:1010px;margin-left:0;}
+input.span14,textarea.span14,select.span14,.uneditable-input.span14{display:inline-block;float:none;width:1090px;margin-left:0;}
+input.span15,textarea.span15,select.span15,.uneditable-input.span15{display:inline-block;float:none;width:1170px;margin-left:0;}
+input.span16,textarea.span16,select.span16,.uneditable-input.span16{display:inline-block;float:none;width:1250px;margin-left:0;}
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
-.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
-.help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
-.help-inline{padding-left:5px;*position:relative;*top:-5px;}
+.control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;}
+.control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#ee5f5b;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}
+.control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on{color:#b94a48;background-color:#fce6e6;border-color:#b94a48;}
+.control-group.warning>label,.control-group.warning .help-block,.control-group.warning .help-inline{color:#c09853;}
+.control-group.warning input,.control-group.warning textarea{color:#c09853;border-color:#ccae64;}.control-group.warning input:focus,.control-group.warning textarea:focus{border-color:#be9a3f;-webkit-box-shadow:0 0 6px #e5d6b1;-moz-box-shadow:0 0 6px #e5d6b1;box-shadow:0 0 6px #e5d6b1;}
+.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#d2b877;border-color:#c09853;}
+.control-group.success>label,.control-group.success .help-block,.control-group.success .help-inline{color:#468847;}
+.control-group.success input,.control-group.success textarea{color:#468847;border-color:#57a957;}.control-group.success input:focus,.control-group.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;}
+.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;}
+.form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}
+.uneditable-input{display:block;background-color:#ffffff;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
+:-moz-placeholder{color:#bfbfbf;}
+::-webkit-input-placeholder{color:#bfbfbf;}
+.help-text{margin-top:5px;margin-bottom:0;color:#bfbfbf;}
+.help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;}
.help-block{display:block;max-width:600px;}
.inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;}
.inline-inputs input.mini{width:60px;}
.inline-inputs input.small{width:90px;}
.inline-inputs span{padding:0 2px 0 1px;}
.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
-.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
-.input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;}
+.input-prepend .add-on,.input-append .add-on{position:relative;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
+.input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;}
.input-prepend .add-on{*margin-top:1px;}
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
-.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;}
-.inputs-list{margin:0 0 5px;width:100%;}.inputs-list li{display:block;padding:0;width:100%;}
-.inputs-list label{display:block;float:none;width:auto;padding:0;line-height:18px;text-align:left;white-space:normal;}.inputs-list label strong{color:#808080;}
-.inputs-list label small{font-size:11px;font-weight:normal;}
-.inputs-list .inputs-list{margin-left:25px;margin-bottom:10px;padding-top:0;}
-.inputs-list:first-child{padding-top:6px;}
-.inputs-list li+li{padding-top:2px;}
-.inputs-list input[type=radio],.inputs-list input[type=checkbox]{margin-bottom:0;}
-.form-stacked{padding-left:20px;}.form-stacked fieldset{padding-top:9px;}
-.form-stacked legend{padding-left:0;}
-.form-stacked label{display:block;float:none;width:auto;font-weight:bold;text-align:left;line-height:20px;padding-top:0;}
-.form-stacked .clearfix{margin-bottom:9px;}.form-stacked .clearfix div.input{margin-left:0;}
-.form-stacked .inputs-list{margin-bottom:0;}.form-stacked .inputs-list li{padding-top:0;}.form-stacked .inputs-list li label{font-weight:normal;padding-top:0;}
-.form-stacked div.clearfix.error{padding-top:10px;padding-bottom:10px;padding-left:10px;margin-top:0;margin-left:-10px;}
-.form-stacked .actions{margin-left:-20px;padding-left:20px;}
-table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
-table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;}
-table td{vertical-align:top;}
-table th+th,table td+td{border-left:1px solid #ddd;}
-table tr+tr td{border-top:1px solid #ddd;}
-table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
-table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
-table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
-table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
-.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;}
-.zebra-striped tbody tr:hover td{background-color:#f5f5f5;}
-.zebra-striped .header{cursor:pointer;}.zebra-striped .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
-.zebra-striped .headerSortUp,.zebra-striped .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
-.zebra-striped .header:hover:after{visibility:visible;}
-.zebra-striped .headerSortDown:after,.zebra-striped .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
-.zebra-striped .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
-table .blue{color:#049cdb;border-bottom-color:#049cdb;}
-table .headerSortUp.blue,table .headerSortDown.blue{background-color:#ade6fe;}
-table .green{color:#46a546;border-bottom-color:#46a546;}
-table .headerSortUp.green,table .headerSortDown.green{background-color:#cdeacd;}
-table .red{color:#9d261d;border-bottom-color:#9d261d;}
-table .headerSortUp.red,table .headerSortDown.red{background-color:#f4c8c5;}
-table .yellow{color:#ffc40d;border-bottom-color:#ffc40d;}
-table .headerSortUp.yellow,table .headerSortDown.yellow{background-color:#fff6d9;}
-table .orange{color:#f89406;border-bottom-color:#f89406;}
-table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc;}
-table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
-table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
-.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
-.topbar h3 a:hover,.topbar .brand a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
-.topbar h3{position:relative;}
-.topbar h3 a,.topbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
-.topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;color:#ffffff;}
-.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
-.topbar form.pull-right{float:right;}
-.topbar input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#e6e6e6;}
-.topbar input::-webkit-input-placeholder{color:#e6e6e6;}
-.topbar input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
-.topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#404040;text-shadow:0 1px 0 #ffffff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
-.topbar-inner,.topbar .fill{background-color:#222;background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
-.topbar div>ul,.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.topbar div>ul>li,.nav>li{display:block;float:left;}
-.topbar div>ul a,.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.topbar div>ul a:hover,.nav a:hover{color:#ffffff;text-decoration:none;}
-.topbar div>ul .active>a,.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
-.topbar div>ul.secondary-nav,.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.topbar div>ul.secondary-nav .menu-dropdown,.nav.secondary-nav .menu-dropdown,.topbar div>ul.secondary-nav .dropdown-menu,.nav.secondary-nav .dropdown-menu{right:0;border:0;}
-.topbar div>ul a.menu:hover,.nav a.menu:hover,.topbar div>ul li.open .menu,.nav li.open .menu,.topbar div>ul .dropdown-toggle:hover,.nav .dropdown-toggle:hover,.topbar div>ul .dropdown.open .dropdown-toggle,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
-.topbar div>ul .menu-dropdown,.nav .menu-dropdown,.topbar div>ul .dropdown-menu,.nav .dropdown-menu{background-color:#333;}.topbar div>ul .menu-dropdown a.menu,.nav .menu-dropdown a.menu,.topbar div>ul .dropdown-menu a.menu,.nav .dropdown-menu a.menu,.topbar div>ul .menu-dropdown .dropdown-toggle,.nav .menu-dropdown .dropdown-toggle,.topbar div>ul .dropdown-menu .dropdown-toggle,.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.topbar div>ul .menu-dropdown a.menu.open,.nav .menu-dropdown a.menu.open,.topbar div>ul .dropdown-menu a.menu.open,.nav .dropdown-menu a.menu.open,.topbar div>ul .menu-dropdown .dropdown-toggle.open,.nav .menu-dropdown .dropdown-toggle.open,.topbar div>ul .dropdown-menu .dropdown-toggle.open,.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
-.topbar div>ul .menu-dropdown li a,.nav .menu-dropdown li a,.topbar div>ul .dropdown-menu li a,.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.topbar div>ul .menu-dropdown li a:hover,.nav .menu-dropdown li a:hover,.topbar div>ul .dropdown-menu li a:hover,.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
-.topbar div>ul .menu-dropdown .active a,.nav .menu-dropdown .active a,.topbar div>ul .dropdown-menu .active a,.nav .dropdown-menu .active a{color:#ffffff;}
-.topbar div>ul .menu-dropdown .divider,.nav .menu-dropdown .divider,.topbar div>ul .dropdown-menu .divider,.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
-.topbar ul .menu-dropdown li a,.topbar ul .dropdown-menu li a{padding:4px 15px;}
-li.menu,.dropdown{position:relative;}
-a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
-.menu-dropdown,.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.menu-dropdown li,.dropdown-menu li{float:none;display:block;background-color:none;}
-.menu-dropdown .divider,.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
-.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
-.open .menu,.dropdown.open .menu,.open .dropdown-toggle,.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
-.open .menu-dropdown,.dropdown.open .menu-dropdown,.open .dropdown-menu,.dropdown.open .dropdown-menu{display:block;}
-.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
-.tabs:after,.pills:after{clear:both;}
-.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
-.tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
-.tabs>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
-.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
-.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
-.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
-.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
-.tab-content{clear:both;}
-.pills a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #ffffff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{background:#00438a;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
-.pills .active a{background:#0069d6;color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
-.tab-content>*,.pill-content>*{display:none;}
-.tab-content>.active,.pill-content>.active{display:block;}
-.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
-.breadcrumb .divider{padding:0 5px;color:#bfbfbf;}
-.breadcrumb .active a{color:#404040;}
-.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
+.input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
+.search-form .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
+.control-group{margin-bottom:18px;}
+.control-group>label{font-weight:bold;}
+.horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
+.horizontal-form .controls{margin-left:150px;}
+.horizontal-form .control-list{padding-top:6px;}
+.horizontal-form .form-actions{padding-left:150px;}
+table{width:100%;margin-bottom:18px;}
+th,td{padding:8px;line-height:18px;text-align:left;border-bottom:1px solid #ddd;}
+th{font-weight:bold;vertical-align:bottom;}
+td{vertical-align:top;}
+tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}
+.condensed-table th,.condensed-table td{padding:4px 5px;}
+.bordered-table{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td,.bordered-table td+th{border-left:1px solid #ddd;}
+.bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
+.bordered-table thead:first-child tr:first-child th:last-child,.bordered-table tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
+.bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
+.bordered-table thead:last-child tr:last-child th:last-child,.bordered-table tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
+.striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
+.navbar{overflow:visible;}
+.navbar-inner{background-color:#222222;background-color:#222222;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
+.navbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
+.navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);}
+.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;}
+.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;}
+.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#e6e6e6;}
+.navbar-search .search-query::-webkit-input-placeholder{color:#e6e6e6;}
+.navbar-search .search-query:hover{color:#ffffff;background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);}
+.navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#404040;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;}
+.navbar-static{margin-bottom:18px;}
+.navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
+.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:10000;}
+.nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;}
+.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.nav a:hover{color:#ffffff;text-decoration:none;}
+.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
+.nav .divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;}
+.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.nav.secondary-nav .dropdown-menu{right:0;border:0;}
+.nav .dropdown-toggle:hover,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
+.nav .dropdown-menu{background-color:#333;}.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
+.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
+.nav .dropdown-menu .active a{color:#ffffff;}
+.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
+.topbar ul .dropdown-menu li a{padding:4px 15px;}
+.dropdown{position:relative;}
+.dropdown-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"↓";}
+.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
+.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:6px 0;margin-left:0;margin-right:0;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;zoom:1;}.dropdown-menu li{float:none;display:block;background-color:none;}
+.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
+.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{color:#404040;text-decoration:none;background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
+.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
+.dropdown.open .dropdown-menu{display:block;}
+.hero-unit{padding:60px;margin-bottom:30px;background-color:#f5f5f5;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
-footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
-.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;}
+footer{padding-top:17px;margin-top:17px;border-top:1px solid #eee;}
+.page-header{margin-bottom:27px;border-bottom:1px solid #eee;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:13.5px;}
.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
-.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn.info,.alert-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
+.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.success,.alert-message.success{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.info,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333;text-decoration:none;background-position:0 -15px;}
.btn:focus{outline:1px dotted #666;}
-.btn.primary{color:#ffffff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}
-.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
-.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
-.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
+.btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.active,.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}
+.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
+.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
+.btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.btn.small{padding:7px 9px 7px;font-size:11px;}
:root .alert-message,:root .btn{border-radius:0 \0;}
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
-.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
-.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
+.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;*display:inline;content:"";zoom:1;}
+.btn-toolbar:after{clear:both;}
+.btn-toolbar .btn-group{float:left;margin-right:10px;}
+.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;*display:inline;content:"";zoom:1;}
+.btn-group:after{clear:both;}
+.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
+.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
+.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
+.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;}
+.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
.alert-message h5{line-height:18px;}
.alert-message p{margin-bottom:0;}
.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);}
-.alert-message.block-message{background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;}
+.alert-message.block-message{padding:14px;background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;}
.alert-message.block-message ul{margin-bottom:0;}
.alert-message.block-message li{color:#404040;}
.alert-message.block-message .alert-actions{margin-top:5px;}
@@ -286,45 +247,91 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
+.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
+.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}
+.collapse{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;position:relative;overflow:hidden;height:0;}.collapse.in{height:auto;}
+.label{padding:1px 3px 2px;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;background-color:#bfbfbf;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
+.label.warning{background-color:#f89406;}
+.label.success{background-color:#46a546;}
+.label.notice{background-color:#62cffc;}
+.tabs,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;}
+.tabs:after,.pills:after{clear:both;}
+.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
+.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
+.tabs .active>a,.tabs .active>a:hover{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;}
+.tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;}
+.tabbable .tab-content{padding:19px;border:1px solid #ddd;}
+.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;}
+.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;}
+.tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;}
+.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;*display:inline;content:"";zoom:1;}
+.tabbable.tabs-left:after,.tabbable.tabs-right:after{clear:both;}
+.tabbable.tabs-left .tabs,.tabbable.tabs-right .tabs{width:100px;}.tabbable.tabs-left .tabs>li,.tabbable.tabs-right .tabs>li{float:none;margin-bottom:-1px;}.tabbable.tabs-left .tabs>li>a,.tabbable.tabs-right .tabs>li>a{margin-bottom:2px;}.tabbable.tabs-left .tabs>li>a:hover,.tabbable.tabs-right .tabs>li>a:hover{border-color:transparent;}
+.tabbable.tabs-left .tab-content{margin-left:100px;}
+.tabbable.tabs-left .tabs{float:left;}.tabbable.tabs-left .tabs>li{margin-right:-1px;}.tabbable.tabs-left .tabs>li>a{margin-right:0;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}.tabbable.tabs-left .tabs>li>a:hover{border-right-color:#ddd;}
+.tabbable.tabs-left .tabs .active>a,.tabbable.tabs-left .tabs .active>a:hover{border-color:#ddd;border-right-color:transparent;}
+.tabbable.tabs-right .tab-content{margin-right:100px;}
+.tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;}
+.tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-color:transparent;}
+.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
+.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
+.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
+.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
+.pills>li>a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills>li>a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;}
+.pills .active>a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;}
+.pills-vertical>li{float:none;}
+.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;}
+.tab-content>.active,.pill-content>.active{display:block;}
+.step-nav{position:relative;margin:0 0 18px;list-style:none;line-height:30px;text-align:center;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.step-nav li{display:inline;color:#bfbfbf;}
+.step-nav .prev,.step-nav .next{position:absolute;top:6px;}
+.step-nav .prev{left:15px;}
+.step-nav .next{right:15px;}
+.step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#bfbfbf;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);}
+.step-nav .dot:hover,.step-nav .active .dot{background-color:#404040;}
+.subnav{background-color:#eeeeee;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);-webkit-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);-moz-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);}.subnav a{padding:8px 10px;font-size:12px;color:#0069d6;text-shadow:0 1px 0 #fff;border-left:1px solid #f9f9f9;border-right:1px solid #e5e5e5;}.subnav a:hover{color:#00438a;background-color:#eee;}
+.subnav li:first-child a{border-left:0;-webkit-border-radius:6px 0 0 6px;-moz-border-radius:6px 0 0 6px;border-radius:6px 0 0 6px;}
+.subnav li:last-child a{border-right:0;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;}
+.subnav ul .active>a{color:#404040;background-color:#eee;}
+.breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
+.breadcrumb .divider{padding:0 5px;color:#bfbfbf;}
+.breadcrumb .active a{color:#404040;}
.pagination{height:36px;margin:18px 0;}.pagination ul{float:left;margin:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}
.pagination li{display:inline;}
-.pagination a{float:left;padding:0 14px;line-height:34px;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;text-decoration:none;}
+.pagination a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;}
.pagination a:hover,.pagination .active a{background-color:#c7eefe;}
-.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;}
+.pagination .disabled a,.pagination .disabled a:hover{color:#bfbfbf;background-color:transparent;}
.pagination .next a{border:0;}
-.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
-.modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;}
-.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
+.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;}
+.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
.modal.fade.in{top:50%;}
-.modal-header{border-bottom:1px solid #eee;padding:5px 15px;}
+.modal-header{padding:5px 15px;border-bottom:1px solid #eee;}
.modal-body{padding:15px;}
-.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;}
+.modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;}
.modal-footer:after{clear:both;}
.modal-footer .btn{float:right;margin-left:5px;}
-.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
+.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
-.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
+.twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.twipsy-arrow{position:absolute;width:0;height:0;}
-.popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
+.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
.popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
.popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
.popover .arrow{position:absolute;width:0;height:0;}
-.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
-.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
-.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
-.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}
-.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
-.label.warning{background-color:#f89406;}
-.label.success{background-color:#46a546;}
-.label.notice{background-color:#62cffc;}
-.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;}
-.media-grid:after{clear:both;}
-.media-grid li{display:inline;}
-.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
-.media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
+.popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
+.popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}
+.popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
+.thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;}
+.thumbnails:after{clear:both;}
+.thumbnails>li{float:left;margin:0 0 20px 20px;}
+.thumbnail{display:block;line-height:1;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}
+a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
+.thumbnail>img{display:block;margin:4px;}
+.thumbnail .caption{padding:9px;}
+.hidden{display:none;visibility:hidden;}
+@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index fb727a900ac53ccd86ed60afed5426a2f68de6e4..8432f92ea7b0db13e8aeb2e17274863d0422fcd0 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -5,175 +5,197 @@
Special styles for presenting Bootstrap's documentation and examples
*/
+
/* Body and structure
-------------------------------------------------- */
body {
- background-color: #fff;
position: relative;
+ padding-top: 90px;
+ background-color: #fff;
+ background-image: url(../img/grid-18px-masked.png);
+ background-repeat: repeat-x;
+}
+
+
+/* Tweak navbar brand link to be super sleek
+-------------------------------------------------- */
+body > .navbar-fixed .brand {
+ padding-right: 0;
+ padding-left: 0;
+ float: right;
+ font-weight: bold;
+ color: #000;
+ text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
}
-section {
- padding-top: 60px;
+body > .navbar-fixed .brand:hover {
+ text-decoration: none;
}
-section > .row {
- margin-bottom: 10px;
+
+
+/* Space out sub-sections more
+-------------------------------------------------- */
+.page-header {
+ margin-top: 36px;
}
/* Jumbotrons
-------------------------------------------------- */
.jumbotron {
- min-width: 940px;
- padding-top: 40px;
-}
-.jumbotron .inner {
- background: transparent url(../img/grid-18px.png) top center;
- padding: 45px 0;
- -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
- -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
-/* box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
-*/}
-.jumbotron h1,
-.jumbotron p {
- margin-bottom: 9px;
- color: #fff;
- text-align: center;
- text-shadow: 0 1px 1px rgba(0,0,0,.3);
+ position: relative;
+ text-shadow: 0 1px 0 #fff;
}
.jumbotron h1 {
- font-size: 54px;
+ margin-right: 40%;
+ margin-bottom: 9px;
+ font-size: 90px;
+ letter-spacing: -1px;
line-height: 1;
- text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.jumbotron p {
+ margin-right: 32%;
+ margin-bottom: 20px;
+ font-size: 25px;
font-weight: 300;
+ line-height: 36px;
}
-.jumbotron .lead {
+.jumbotron .btn-large {
font-size: 20px;
- line-height: 27px;
+ padding: 14px 24px;
+ margin-right: 5px;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
}
-.jumbotron p a {
- color: #fff;
- font-weight: bold;
+.jumbotron .download-info {
+ font-size: 16px;
+ color: #999;
+}
+
+/* Benefits list in masthead */
+.benefits {
+ width: 250px;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+}
+.benefits ul {
+ list-style: none;
+ margin: 0;
+}
+.benefits li {
+ font-size: 16px;
+ font-weight: 300;
+ line-height: 35px;
+ color: #555;
+}
+.benefits li + li {
+ border-top: 1px solid #f5f5f5;
+}
+.benefits h4 {
+ color: #555;
+}
+.benefits span {
+ position: relative;
+ top: -2px;
+ padding-right: 5px;
+ color: #999;
}
/* Specific jumbotrons
------------------------- */
-/* main docs page */
-.masthead {
- background-color: #049cd9;
- background-repeat: no-repeat;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
- background-image: -webkit-linear-gradient(#004D9F, #049cd9);
- background-image: -moz-linear-gradient(#004D9F, #049cd9);
- background-image: -o-linear-gradient(top, #004D9F, #049cd9);
- background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */
-}
/* supporting docs pages */
.subhead {
- background-color: #767d80;
- background-repeat: no-repeat;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#565d60), to(#767d80));
- background-image: -webkit-linear-gradient(#565d60, #767d80);
- background-image: -moz-linear-gradient(#565d60, #767d80);
- background-image: -o-linear-gradient(top, #565d60, #767d80);
- background-image: -khtml-gradient(linear, left top, left bottom, from(#565d60), to(#767d80));
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565d60', endColorstr='#767d80', GradientType=0); /* IE8 and down */
-}
-.subhead .inner {
- padding: 36px 0 27px;
+ padding-bottom: 14px;
+ margin-bottom: 45px;
+ border-bottom: 3px solid #e5e5e5;
}
.subhead h1,
.subhead p {
- text-align: left;
+ margin-right: 0;
}
.subhead h1 {
- font-size: 40px;
-}
-.subhead p a {
- font-weight: normal;
+ font-size: 45px;
}
-/* Footer
+/* Quick links
-------------------------------------------------- */
-.footer {
+.quick-links {
+ padding: 5px 20px;
+ margin: 45px 0;
+ list-style: none;
+ text-align: center;
background-color: #eee;
- min-width: 940px;
- padding: 30px 0;
- text-shadow: 0 1px 0 #fff;
- border-top: 1px solid #e5e5e5;
- -webkit-box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
- -moz-box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
-/* box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
-*/}
-.footer p {
- color: #555;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
+ -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
+ box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
+}
+.quick-links li {
+ display: inline;
+ margin: 0 5px;
+ line-height: 30px;
+}
+.quick-links .divider {
+ color: #999;
+}
+.quick-links strong {
+ font-weight: normal;
+ color: #999;
+}
+.quick-links .github-btn,
+.quick-links .tweet-btn,
+.quick-links .follow-btn {
+ position: relative;
+ top: 5px;
}
-/* Quickstart section for getting le code
+/* Marketing section of Overview
-------------------------------------------------- */
-.quickstart {
- background-color: #f5f5f5;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5));
- background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5);
- background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5));
- background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5);
- background-image: -o-linear-gradient(#f9f9f9, #f5f5f5);
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)";
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0);
- background-image: linear-gradient(#f9f9f9, #f5f5f5);
- border-top: 1px solid #fff;
- border-bottom: 1px solid #eee;
-}
-.quickstart .container {
- margin-bottom: 0;
+.marketing .row {
+ margin-bottom: 18px;
}
-.quickstart .row {
- margin: 0 -20px;
- -webkit-box-shadow: 1px 0 0 #f9f9f9;
- -moz-box-shadow: 1px 0 0 #f9f9f9;
- box-shadow: 1px 0 0 #f9f9f9;
-}
-.quickstart [class*="span"] {
- width: 285px;
- height: 117px;
- margin-left: 0;
- padding: 17px 20px 26px;
- border-left: 1px solid #eee;
- -webkit-box-shadow: inset 1px 0 0 #f9f9f9;
- -moz-box-shadow: inset 1px 0 0 #f9f9f9;
- box-shadow: inset 1px 0 0 #f9f9f9;
-}
-.quickstart [class*="span"]:last-child {
- border-right: 1px solid #eee;
- width: 286px;
-}
-.quickstart h6,
-.quickstart p {
- line-height: 18px;
+.marketing h1 {
+ margin: 36px 0 27px;
+ font-size: 36px;
+ font-weight: 300;
text-align: center;
+}
+.marketing h2,
+.marketing h3 {
+ font-weight: 300;
+}
+.marketing h2 {
margin-bottom: 9px;
- color: #333;
}
-.quickstart .current-version,
-.quickstart .current-version a {
- color: #999;
+.marketing p {
+ margin-right: 10px;
}
-.quickstart h6 {
- color: #999;
+.marketing .icon {
+ float: left;
+ margin: 7px 10px 0 0;
+ opacity: .8;
}
-.quickstart textarea {
- display: block;
- width: 275px;
- height: auto;
- margin: 0 0 9px;
- line-height: 21px;
- white-space: nowrap;
- overflow: hidden;
+.marketing .small-icon {
+ float: left;
+ margin: 4px 5px 0 0;
+}
+
+
+/* Footer
+-------------------------------------------------- */
+.footer {
+ margin-top: 45px;
+ padding: 35px 0 36px;
+ border-top: 1px solid #e5e5e5;
+}
+.footer p {
+ margin-bottom: 0;
+ color: #555;
}
@@ -181,10 +203,10 @@ section > .row {
-------------------------------------------------- */
.show-grid {
margin-top: 10px;
- margin-bottom: 10px;
+ margin-bottom: 20px;
}
.show-grid [class*="span"] {
- background: #eee;
+ background-color: #eee;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@@ -228,7 +250,7 @@ section > .row {
.mini-layout .mini-layout-body {
background-color: #dceaf4;
margin: 0 auto;
- width: 240px;
+ width: 70%;
height: 240px;
}
.mini-layout.fluid .mini-layout-sidebar,
@@ -238,55 +260,15 @@ section > .row {
}
.mini-layout.fluid .mini-layout-sidebar {
background-color: #bbd8e9;
- width: 90px;
+ width: 20%;
height: 240px;
}
.mini-layout.fluid .mini-layout-body {
- width: 300px;
+ width: 60%;
margin-left: 10px;
}
-/* Topbar special styles
--------------------------------------------------- */
-.topbar-wrapper {
- position: relative;
- height: 40px;
- margin: 5px 0 15px;
-}
-.topbar-wrapper .topbar {
- position: absolute;
- margin: 0 -20px;
-}
-.topbar-wrapper .topbar .topbar-inner {
- padding-left: 20px;
- padding-right: 20px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
-}
-
-/* Topbar in js docs
-------------------------- */
-#bootstrap-js .topbar-wrapper {
- z-index: 1;
-}
-#bootstrap-js .topbar-wrapper .topbar {
- position: absolute;
- margin: 0 -20px;
-}
-#bootstrap-js .topbar-wrapper .topbar .topbar-inner {
- padding-left: 20px;
- padding-right: 20px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
-}
-#bootstrap-js .topbar-wrapper .container {
- width: auto;
-}
-
-
/* Popover docs
-------------------------------------------------- */
.popover-well {
@@ -310,8 +292,170 @@ img.large-bird {
opacity: .1;
}
-/* Pretty Print
+
+/* Misc
-------------------------------------------------- */
+
pre.prettyprint {
overflow: hidden;
-}
\ No newline at end of file
+}
+
+.well form {
+ margin-bottom: 0;
+}
+
+.browser-support {
+ max-width: 100%;
+}
+
+/* Make tables spaced out a bit more */
+h2 + table {
+ margin-top: 5px;
+}
+
+/* Example sites showcase */
+.example-sites img {
+ width: 290px;
+}
+
+.scrollspy-example {
+ height: 200px;
+ overflow: auto;
+ position: relative;
+}
+
+
+/* Responsive Docs
+-------------------------------------------------- */
+@media (max-width: 480px) {
+
+ /* Reduce padding above jumbotron */
+ body {
+ padding-top: 70px;
+ }
+
+ /* Change up some type stuff */
+ h1 small {
+ display: block;
+ line-height: 20px;
+ }
+ /* More space between sections */
+ h2 {
+ margin-top: 27px;
+ }
+ h3 {
+ margin-top: 18px;
+ }
+
+ /* Adjust the jumbotron */
+ .jumbotron h1,
+ .jumbotron p {
+ text-align: center;
+ margin-right: 0;
+ }
+ .jumbotron h1 {
+ font-size: 45px;
+ margin-right: 0;
+ }
+ .jumbotron p {
+ margin-right: 0;
+ font-size: 18px;
+ line-height: 24px;
+ }
+ .jumbotron .btn {
+ display: block;
+ font-size: 18px;
+ padding: 10px 14px;
+ margin: 0 auto 10px;
+ }
+
+ /* Don't space out quick links so much */
+ .quick-links {
+ margin: 40px 0 0;
+ }
+ /* hide the bullets on mobile since our horizontal space is limited */
+ .quick-links .divider {
+ display: none;
+ }
+
+ /* center example sites */
+ .example-sites {
+ margin-left: 0;
+ }
+ .example-sites a {
+ float: none;
+ display: block;
+ max-width: 300px;
+ margin: 0 auto 18px;
+ }
+
+ table code {
+ white-space: normal;
+ word-wrap: break-word;
+ word-break: break-all;
+ }
+}
+
+
+@media (max-width: 768px) {
+
+ /* Adjust the jumbotron */
+ .jumbotron .benefits {
+ position: relative;
+ width: auto;
+ margin: 36px 0;
+ }
+
+ /* Popovers */
+ .large-bird {
+ display: none;
+ }
+ .popover-well .popover-wrapper {
+ margin-left: 0;
+ }
+
+ /* Space out the show-grid examples */
+ .show-grid [class*="span"] {
+ margin-bottom: 5px;
+ }
+
+ /* Unfloat the back to top link in footer */
+ .footer .pull-right {
+ float: none;
+ }
+ .footer p {
+ margin-bottom: 9px;
+ }
+
+}
+
+
+@media (min-width: 480px) and (max-width: 768px) {
+
+ /* Scale down the jumbotron content */
+ .jumbotron h1 {
+ font-size: 54px;
+ }
+
+ .jumbotron h1,
+ .jumbotron p {
+ margin-right: 0;
+ }
+
+}
+
+
+@media (min-width: 768px) and (max-width: 940px) {
+
+ /* Scale down the jumbotron content */
+ .jumbotron h1 {
+ font-size: 72px;
+ }
+
+ /* Provide enough space on right-hand side for benefits list */
+ .jumbotron h1,
+ .jumbotron p {
+ margin-right: 40%;
+ }
+}
+
diff --git a/docs/assets/img/example-sites/bartop.png b/docs/assets/img/example-sites/bartop.png
new file mode 100644
index 0000000000000000000000000000000000000000..9628516367fcc933e1285e727d0b888da68d82c5
Binary files /dev/null and b/docs/assets/img/example-sites/bartop.png differ
diff --git a/docs/assets/img/example-sites/fleetio.png b/docs/assets/img/example-sites/fleetio.png
new file mode 100644
index 0000000000000000000000000000000000000000..b48d6f010475d1620c5fa40c93e6fccc87073782
Binary files /dev/null and b/docs/assets/img/example-sites/fleetio.png differ
diff --git a/docs/assets/img/example-sites/jshint.png b/docs/assets/img/example-sites/jshint.png
new file mode 100644
index 0000000000000000000000000000000000000000..e532320a3ca4ecef52a3a34fe9a690b2a4619657
Binary files /dev/null and b/docs/assets/img/example-sites/jshint.png differ
diff --git a/docs/assets/img/example-sites/kippt.png b/docs/assets/img/example-sites/kippt.png
new file mode 100644
index 0000000000000000000000000000000000000000..af15baa115fe37f40f92390a9d72c03ca3246be4
Binary files /dev/null and b/docs/assets/img/example-sites/kippt.png differ
diff --git a/docs/assets/img/example-sites/railwayjs.png b/docs/assets/img/example-sites/railwayjs.png
new file mode 100644
index 0000000000000000000000000000000000000000..2480dd68e7208a42842dc85615641691ce17262a
Binary files /dev/null and b/docs/assets/img/example-sites/railwayjs.png differ
diff --git a/docs/assets/img/example-sites/totalwireframe.png b/docs/assets/img/example-sites/totalwireframe.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6256138e58df4ca43b4fd3bb8eab75cd044d7bc
Binary files /dev/null and b/docs/assets/img/example-sites/totalwireframe.png differ
diff --git a/docs/assets/img/github-16px.png b/docs/assets/img/github-16px.png
new file mode 100644
index 0000000000000000000000000000000000000000..c99ab237a7e77fd149fba63e15e3463b387c0689
Binary files /dev/null and b/docs/assets/img/github-16px.png differ
diff --git a/docs/assets/img/glyphicons/glyphicons_009_magic.png b/docs/assets/img/glyphicons/glyphicons_009_magic.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef048aaaae38a1a4758df72aaaf87f33d13e2be5
Binary files /dev/null and b/docs/assets/img/glyphicons/glyphicons_009_magic.png differ
diff --git a/docs/assets/img/glyphicons/glyphicons_042_group.png b/docs/assets/img/glyphicons/glyphicons_042_group.png
new file mode 100644
index 0000000000000000000000000000000000000000..29393dda1da3e71e88b4b44f2acc77a634076590
Binary files /dev/null and b/docs/assets/img/glyphicons/glyphicons_042_group.png differ
diff --git a/docs/assets/img/glyphicons/glyphicons_079_podium.png b/docs/assets/img/glyphicons/glyphicons_079_podium.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5544545182313acaad4c785762642963b357ac8
Binary files /dev/null and b/docs/assets/img/glyphicons/glyphicons_079_podium.png differ
diff --git a/docs/assets/img/glyphicons/glyphicons_082_roundabout.png b/docs/assets/img/glyphicons/glyphicons_082_roundabout.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbda0935c54e2601092be9ad2619ecb658b8dcef
Binary files /dev/null and b/docs/assets/img/glyphicons/glyphicons_082_roundabout.png differ
diff --git a/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png b/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png
new file mode 100644
index 0000000000000000000000000000000000000000..1062f4844e326ad2ebe81ee5eb0edab6d99d6c3e
Binary files /dev/null and b/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png differ
diff --git a/docs/assets/img/glyphicons/glyphicons_163_iphone.png b/docs/assets/img/glyphicons/glyphicons_163_iphone.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbb71dceb17f06c6de5a51ae65d0f8dd3af28174
Binary files /dev/null and b/docs/assets/img/glyphicons/glyphicons_163_iphone.png differ
diff --git a/docs/assets/img/glyphicons/glyphicons_214_resize_small.png b/docs/assets/img/glyphicons/glyphicons_214_resize_small.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ecaa72b2f363bd51d4f83670acce3fd30aed692
Binary files /dev/null and b/docs/assets/img/glyphicons/glyphicons_214_resize_small.png differ
diff --git a/docs/assets/img/glyphicons/glyphicons_266_book_open.png b/docs/assets/img/glyphicons/glyphicons_266_book_open.png
new file mode 100644
index 0000000000000000000000000000000000000000..de084d47227396df76e176a105008f69a94bdb78
Binary files /dev/null and b/docs/assets/img/glyphicons/glyphicons_266_book_open.png differ
diff --git a/docs/assets/img/grid-18px-masked.png b/docs/assets/img/grid-18px-masked.png
new file mode 100644
index 0000000000000000000000000000000000000000..e531d5bc47b957b0ec8618482b27c1df0563188c
Binary files /dev/null and b/docs/assets/img/grid-18px-masked.png differ
diff --git a/docs/assets/img/icon-css3.png b/docs/assets/img/icon-css3.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb3651bacd68575d4a5be5bd3e098031f3e4aed3
Binary files /dev/null and b/docs/assets/img/icon-css3.png differ
diff --git a/docs/assets/img/icon-github.png b/docs/assets/img/icon-github.png
new file mode 100644
index 0000000000000000000000000000000000000000..8afcce9cbad95d92521ac14da65ded7f6d8aa232
Binary files /dev/null and b/docs/assets/img/icon-github.png differ
diff --git a/docs/assets/img/icon-html5.png b/docs/assets/img/icon-html5.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9066c67268f25a393cfb2add703aaaac755c09c
Binary files /dev/null and b/docs/assets/img/icon-html5.png differ
diff --git a/docs/assets/img/icon-twitter.png b/docs/assets/img/icon-twitter.png
new file mode 100644
index 0000000000000000000000000000000000000000..98241d098d9f021642f1ecda4b115bb411a4a70c
Binary files /dev/null and b/docs/assets/img/icon-twitter.png differ
diff --git a/docs/assets/img/less-logo-large.png b/docs/assets/img/less-logo-large.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a739b3e9903d8c023ade58af038277b60719d5a
Binary files /dev/null and b/docs/assets/img/less-logo-large.png differ
diff --git a/docs/assets/img/less-small.png b/docs/assets/img/less-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..763b847e85440003b1fcf6d20cb83a89b21de707
Binary files /dev/null and b/docs/assets/img/less-small.png differ
diff --git a/docs/assets/img/responsive-illustrations.png b/docs/assets/img/responsive-illustrations.png
new file mode 100644
index 0000000000000000000000000000000000000000..c980da77addecefd57a8294a828fdae2370d1d2e
Binary files /dev/null and b/docs/assets/img/responsive-illustrations.png differ
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 16a20e068e235f8fc7bfa94e9f8403687b68418a..74024caa1d8fab6e8fd06c8540af44023b2d049c 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -1,4 +1,4 @@
-$(document).ready(function(){
+$(function(){
// table sort example
// ==================
diff --git a/docs/base-css.html b/docs/base-css.html
new file mode 100644
index 0000000000000000000000000000000000000000..2098974027487b3762836fecd0e469ebad27b52f
--- /dev/null
+++ b/docs/base-css.html
@@ -0,0 +1,1134 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le styles -->
+ <link href="../bootstrap.css" rel="stylesheet">
+ <link href="assets/css/docs.css" rel="stylesheet">
+ <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
+ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ </head>
+
+ <body>
+
+ <!-- Navbar
+ ================================================== -->
+ <div class="navbar navbar-fixed">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="./index.html">Bootstrap</a>
+ <ul class="nav">
+ <li><a href="./index.html">Overview</a></li>
+ <li><a href="./scaffolding.html">Scaffolding</a></li>
+ <li class="active"><a href="./base-css.html">Base CSS</a></li>
+ <li><a href="./components.html">Components</a></li>
+ <li><a href="./javascript.html">Javascript plugins</a></li>
+ <li><a href="./less.html">Using LESS</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron subhead" id="overview">
+ <h1>Base CSS</h1>
+ <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
+ </header>
+
+
+<!-- Typography
+================================================== -->
+<section id="typography">
+ <div class="page-header">
+ <h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
+ </div>
+
+ <h2>Headings & body copy</h2>
+
+ <!-- Headings & Paragraph Copy -->
+ <div class="row">
+ <div class="span4">
+ <h3>Typographic scale</h3>
+ <p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
+ <p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
+ </div>
+ <div class="span4">
+ <h3>Example body text</h3>
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
+ </div>
+ <div class="span4">
+ <div class="well">
+ <h1>h1. Heading 1</h1>
+ <h2>h2. Heading 2</h2>
+ <h3>h3. Heading 3</h3>
+ <h4>h4. Heading 4</h4>
+ <h5>h5. Heading 5</h5>
+ <h6>h6. Heading 6</h6>
+ </div>
+ </div>
+ </div>
+
+ <!-- Misc Elements -->
+ <h2>Emphasis, address, and abbreviation</h2>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th>Element</th>
+ <th>Usage</th>
+ <th>Optional</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <code><strong></code>
+ </td>
+ <td>
+ For emphasizing a snippet of text with <strong>important</strong>
+ </td>
+ <td>
+ <span class="muted">None</span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><em></code>
+ </td>
+ <td>
+ For emphasizing a snippet of text with <em>stress</em>
+ </td>
+ <td>
+ <span class="muted">None</span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><abbr></code>
+ </td>
+ <td>
+ Wraps abbreviations and acronyms to show the expanded version on hover
+ </td>
+ <td>
+ Include optional <code>title</code> for expanded text
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><address></code>
+ </td>
+ <td>
+ For contact information for its nearest ancestor or the entire body of work
+ </td>
+ <td>
+ Preserve formatting by ending all lines with <code><br></code>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <div class="row">
+ <div class="span4">
+ <h3>Using emphasis</h3>
+ <p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
+ <p><strong>Note:</strong> Feel free to use <code><b></code> and <code><i></code> in HTML5, but their usage has changed a bit. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
+ </div>
+ <div class="span4">
+ <h3>Example addresses</h3>
+ <p>Here are two examples of how the <code><address></code> tag can be used:</p>
+ <address>
+ <strong>Twitter, Inc.</strong><br>
+ 795 Folsom Ave, Suite 600<br>
+ San Francisco, CA 94107<br>
+ <abbr title="Phone">P:</abbr> (123) 456-7890
+ </address>
+ <address>
+ <strong>Full Name</strong><br>
+ <a mailto="#">first.last@gmail.com</a>
+ </address>
+ </div>
+ <div class="span4">
+ <h3>Example abbreviations</h3>
+ <p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p>
+ <p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p>
+ <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
+ </div>
+ </div>
+
+
+ <!-- Blockquotes -->
+ <h2>Blockquotes</h2>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th>Element</th>
+ <th>Usage</th>
+ <th>Optional</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <code><blockquote></code>
+ </td>
+ <td>
+ Block-level element for quoting content from another source
+ </td>
+ <td>
+ <p>Add <code>cite</code> attribute for source URL</p>
+ Use <code>.pull-left</code> and <code>.pull-right</code> classes for floated options
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><small></code>
+ </td>
+ <td>
+ Optional element for adding a user-facing citation, typically an author with title of work
+ </td>
+ <td>
+ Place the <code><cite></code> around the title or name of source
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="row">
+ <div class="span4">
+ <p>To include a blockquote, wrap <code><blockquote></code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code><p></code>.</p>
+ <p>Include an optional <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it for styling purposes.</p>
+ </div>
+ <div class="span8">
+<pre class="prettyprint linenums">
+<blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
+ <small>Someone famous</small>
+</blockquote>
+</pre>
+ </div>
+ </div><!--/row-->
+
+ <h3>Example blockquotes</h3>
+ <div class="row">
+ <div class="span6">
+ <p>Default blockquotes are styled as such:</p>
+ <blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
+ <small>Someone famous in <cite title="">Body of work</cite></small>
+ </blockquote>
+ </div>
+ <div class="span6">
+ <p>To float your blockquote to the right, add <code>class="pull-right"</code>:</p>
+ <blockquote class="pull-right">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
+ <small>Someone famous in <cite title="">Body of work</cite></small>
+ </blockquote>
+ </div>
+ </div>
+
+
+ <!-- Lists -->
+ <h2>Lists</h2>
+ <div class="row">
+ <div class="span3">
+ <h4>Unordered</h4>
+ <p><code><ul></code></p>
+ <ul>
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit
+ <ul>
+ <li>Phasellus iaculis neque</li>
+ <li>Purus sodales ultricies</li>
+ <li>Vestibulum laoreet porttitor sem</li>
+ <li>Ac tristique libero volutpat at</li>
+ </ul>
+ </li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+ </ul>
+ </div>
+ <div class="span3">
+ <h4>Unstyled</h4>
+ <p><code><ul class="unstyled"></code></p>
+ <ul class="unstyled">
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit
+ <ul>
+ <li>Phasellus iaculis neque</li>
+ <li>Purus sodales ultricies</li>
+ <li>Vestibulum laoreet porttitor sem</li>
+ <li>Ac tristique libero volutpat at</li>
+ </ul>
+ </li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+ </ul>
+ </div>
+ <div class="span3">
+ <h4>Ordered</h4>
+ <p><code><ol></code></p>
+ <ol>
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit</li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+ </ol>
+ </div>
+ <div class="span3">
+ <h4>Description</h4>
+ <p><code><dl></code></p>
+ <dl>
+ <dt>Description lists</dt>
+ <dd>A description list is perfect for defining terms.</dd>
+ <dt>Euismod</dt>
+ <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+ <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+ <dt>Malesuada porta</dt>
+ <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+ </dl>
+ </div>
+ </div><!-- /row -->
+
+
+ <!-- Code -->
+
+ <h2>Code <small>Inline and block</small></h2>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th style="width: 190px;">Element</th>
+ <th>Result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code><code></code></td>
+ <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td>
+ </tr>
+ <tr>
+ <td><code><pre></code></td>
+ <td>
+<pre><div>
+ <h1>Heading</h1>
+ <p>Something right here...</p>
+</div></pre>
+ <p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code><pre class="prettyprint"></code></td>
+ <td>
+ <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
+<pre class="prettyprint"><div>
+ <h1>Heading</h1>
+ <p>Something right here...</p>
+</div></pre>
+<pre class="prettyprint linenums"><div>
+ <h1>Heading</h1>
+ <p>Something right here...</p>
+</div></pre>
+ <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- Labels -->
+ <h2>Inline labels <small>for special attention</small></h2>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th style="width: 190px;">Labels</th>
+ <th>Markup</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <span class="label">Default</span>
+ </td>
+ <td>
+ <code><span class="label">Default</span></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span class="label success">New</span>
+ </td>
+ <td>
+ <code><span class="label success">New</span></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span class="label warning">Warning</span>
+ </td>
+ <td>
+ <code><span class="label warning">Warning</span></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span class="label important">Important</span>
+ </td>
+ <td>
+ <code><span class="label important">Important</span></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span class="label notice">Notice</span>
+ </td>
+ <td>
+ <code><span class="label notice">Notice</span></code>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+</section>
+
+
+
+<!-- Tables
+================================================== -->
+<section id="tables">
+ <div class="page-header">
+ <h1>Tables <small>For, you guessed it, tabular data</small></h1>
+ </div>
+
+ <h2>Table markup</h2>
+ <div class="row">
+ <div class="span8">
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th>Tag</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <code><table></code>
+ </td>
+ <td>
+ Wrapping element for displaying data in a tabular format
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><thead></code>
+ </td>
+ <td>
+ Container element for table header rows (<code><tr></code>) to label table columns
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><tbody></code>
+ </td>
+ <td>
+ Container element for table rows (<code><tr></code>) in the body of the table
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><tr></code>
+ </td>
+ <td>
+ Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><td></code>
+ </td>
+ <td>
+ Default table cell
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><th></code>
+ </td>
+ <td>
+ Special table cell for column (or row, depending on scope and placement) labels<br>
+ Must be used within a <code><thead></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><caption></code>
+ </td>
+ <td>
+ Description or summary of what the table holds, especially useful for screen readers
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="span4">
+<pre class="prettyprint linenums">
+<table>
+ <thead>
+ <tr>
+ <th>...</th>
+ <th>...</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>...</td>
+ <td>...</td>
+ </tr>
+ </tbody>
+</table>
+</pre>
+ </div>
+ </div>
+
+ <h2>Table options</h2>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Class</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Default</td>
+ <td class="muted">None</td>
+ <td>Only horizontal lines between rows</td>
+ </tr>
+ <tr>
+ <td>Bordered</td>
+ <td>
+ <code>.bordered-table</code>
+ </td>
+ <td>Rounds corners and adds outter border</td>
+ </tr>
+ <tr>
+ <td>Zebra-stripe</td>
+ <td>
+ <code>.striped-table</code>
+ </td>
+ <td>Adds light gray background color to odd rows (1, 3, 5, etc)</td>
+ </tr>
+ <tr>
+ <td>Condensed</td>
+ <td>
+ <code>.condensed-table</code>
+ </td>
+ <td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2>Example tables</h2>
+ <h3>1. Default table styles</h3>
+ <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
+ <table>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Some</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
+<pre class="prettyprint linenums">
+<table>
+ ...
+</table></pre>
+ <h3>2. Striped table</h3>
+ <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.striped-table</code> class.</p>
+ <table class="striped-table">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Some</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
+ <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
+<pre class="prettyprint linenums">
+<table class="striped-table">
+ ...
+</table></pre>
+ <h3>3. Bordered table</h3>
+ <p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p>
+ <p><span class="label">Note</span> Bordered tables do not work well with <code>rowspan</code> due to somewhat hacky CSS applied to the tables. Sorry about that!</p>
+ <table class="bordered-table">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td colspan="2">Some One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ </tr>
+ <td>3</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
+<pre class="prettyprint linenums">
+<table class="bordered-table">
+ ...
+</table></pre>
+ <h3>4. Condensed table</h3>
+ <p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p>
+ <table class="condensed-table">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Some</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
+<pre class="prettyprint linenums">
+<table class="condensed-table">
+ ...
+</table></pre>
+ <h3>5. Striped table w/ TableSorter.js</h3>
+ <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
+ <table class="striped-table" id="sortTableExample">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th class="yellow">First Name</th>
+ <th class="blue">Last Name</th>
+ <th class="green">Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Your</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
+<pre class="prettyprint linenums">
+<script src="js/jquery/jquery.tablesorter.min.js"></script>
+<script >
+ $(function() {
+ $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
+ });
+</script>
+<table class="striped-table">
+ ...
+</table></pre>
+
+</section>
+
+
+
+<!-- Forms
+================================================== -->
+<section id="forms">
+ <div class="page-header">
+ <h1>Forms</h1>
+ </div>
+
+ <h2>Four types of forms</h2>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Class</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>Vertical (default)</th>
+ <td><code>.vertical-form</code> <span class="muted">(not required)</span></td>
+ <td>Stacked, left-aligned labels over controls</td>
+ </tr>
+ <tr>
+ <th>Horiztonal</th>
+ <td><code>.horizontal-form</code></td>
+ <td>Float left, right-aligned labels on same line as controls</td>
+ </tr>
+ <tr>
+ <th>Inline</th>
+ <td><code>.inline-form</code></td>
+ <td>Left-aligned label and inline-block controls for compact style</td>
+ </tr>
+ <tr>
+ <th>Search</th>
+ <td><code>.search-form</code></td>
+ <td>Extra-rounded text input for a typical search aesthetic</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <div class="row">
+ <div class="span4">
+ <h3>Why four types</h3>
+ <p>With Bootstrap 2, we completely recoded our forms to allow for simple base styles and improved namespacing on labels and controls. To address the many uses of forms, we've included some base styles to help get you started.</p>
+ </div>
+ <div class="span4">
+ <h3>Vertical or horizontal</h3>
+ <p>Our default form styles are now vertical, not horizontal. This makes it easier to customize bare-bones forms, as well as forms in tricker situations like sign-up, modals, etc. <strong>They share the same exact markup; just swap the class.</strong></p>
+ </div>
+ </div><!-- /row -->
+ <div class="row">
+ <div class="span3">
+ <h2>Search form</h2>
+ </div>
+ <div class="span9">
+ <div class="well">
+ <form class="search-form">
+ <input type="text" class="search-query">
+ <button type="submit" class="btn">Search</button>
+ </form>
+ </div><!--/well-->
+ </div>
+ </div><!-- /row -->
+ <div class="row">
+ <div class="span3">
+ <h2>Inline form</h2>
+ </div>
+ <div class="span9">
+ <div class="well">
+ <form class="inline-form">
+ <h4>Some directional text</h4>
+ <p>And maybe some kind of optional supporting text right here.</p>
+ <input type="text" class="input-medium">
+ <input type="text" class="input-medium">
+ <input type="text" class="input-medium">
+ <button type="submit" class="btn">Search</button>
+ </form>
+ </div><!--/well-->
+ </div>
+ </div><!-- /row -->
+ <div class="row">
+ <div class="span3">
+ <h2>Horizontal form</h2>
+ </div>
+ <div class="span9">
+ <form class="horizontal-form">
+ <legend>Example form</legend>
+ <fieldset class="control-group">
+ <label class="control-label" for="input01">Text input</label>
+ <div class="controls">
+ <input type="text" class="xlarge" name="input01">
+ <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="select01">Select list</label>
+ <div class="controls">
+ <select name="select01">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="multiSelect">Multi-select</label>
+ <div class="controls">
+ <select multiple="multiple" name="multiSelect">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </div>
+ </fieldset>
+ <legend>Example form</legend>
+ <fieldset class="control-group">
+ <label class="control-label" for="fileInput">File input</label>
+ <div class="controls">
+ <input class="input-file" id="fileInput" name="fileInput" type="file">
+ </div>
+ </fieldset>
+ <fieldset class="control-group has-error">
+ <label class="control-label" for="inputError">Input with error</label>
+ <div class="controls">
+ <input type="text" name="inputError">
+ </div>
+ </fieldset>
+ <fieldset class="control-group has-error">
+ <label class="control-label" for="textareaError">Textarea with error</label>
+ <div class="controls">
+ <textarea class="input-xlarge" rows="3"></textarea>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="optionsCheckboxes">Checkboxes</label>
+ <div class="controls">
+ <div class="control-list">
+ <label class="checkbox">
+ <input type="checkbox" name="optionsCheckboxes" value="option1">
+ Option one is this and that—be sure to include why it’s great
+ </label>
+ <label class="checkbox">
+ <input type="checkbox" name="optionsCheckboxes" value="option2">
+ Option two can also be checked and included in form results
+ </label>
+ <label class="checkbox">
+ <input type="checkbox" name="optionsCheckboxes" value="option3">
+ Option three can—yes, you guessed it—also be checked and included in form results
+ </label>
+ <label class="checkbox">
+ <input type="checkbox" name="optionsCheckboxes" value="option4">
+ Option four cannot be checked as it is disabled
+ </label>
+ </div>
+ <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="optionsRadios">Radio buttons</label>
+ <div class="controls">
+ <div class="control-list">
+ <label>
+ <input type="radio" checked name="optionsRadios" value="option1">
+ <span>Option one is this and that—be sure to include why it’s great</span>
+ </label>
+ <label>
+ <input type="radio" name="optionsRadios" value="option2">
+ <span>Option two can is something else and selecting it will deselect options 1</span>
+ </label>
+ </div>
+ <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
+ </div>
+ </fieldset>
+ <fieldset class="form-actions">
+ <button type="submit" class="btn primary">Save changes</button>
+ <button type="reset" class="btn">Cancel</button>
+ </fieldset>
+ </form>
+ </div>
+ </div><!-- /row -->
+ <div class="row">
+ <div class="span3">
+ <h2>Vertical form</h2>
+ </div>
+ <div class="span9">
+ <form class="vertical-form">
+ <legend>Example form</legend>
+ <fieldset class="control-group">
+ <label class="control-label" for="input01">Label</label>
+ <div class="controls">
+ <input type="text" class="xlarge" name="input01">
+ <p class="help-text">Be sure to fill this out like so, or else!</p>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="select01">Label</label>
+ <div class="controls">
+ <select name="select01"></select>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="input02">Label</label>
+ <div class="controls">
+ <div class="control-list">
+ <label class="checkbox">
+ <input type="checkbox"> Something something something something something
+ </label>
+ <label class="checkbox">
+ <input type="checkbox"> Something something something something
+ </label>
+ <label class="checkbox">
+ <input type="checkbox"> Something something something
+ </label>
+ </div>
+ </div>
+ </fieldset>
+ <fieldset class="form-actions">
+ <button type="submit" class="btn primary">Save changes</button>
+ <button type="reset" class="btn">Cancel</button>
+ </fieldset>
+ </form>
+ </div>
+ </div><!-- /row -->
+
+
+
+ <h2>Buttons</h2>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th>Button</th>
+ <th>Class</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><a class="btn" href="#">Default</a></td>
+ <td><code>.btn</code></td>
+ <td>Standard gray button with gradient</td>
+ </tr>
+ <tr>
+ <td><a class="btn primary" href="#">Primary</a></td>
+ <td><code>.primary</code></td>
+ <td>Makes button blue for more visual weight to indicate the primary action in a set of buttons</td>
+ </tr>
+ <tr>
+ <td><a class="btn info" href="#">Info</a></td>
+ <td><code>.info</code></td>
+ <td>Used as an alternate to the default styles</td>
+ </tr>
+ <tr>
+ <td><a class="btn success" href="#">Success</a></td>
+ <td><code>.success</code></td>
+ <td>Used to indicate a successful or positive action will be taken</td>
+ </tr>
+ <tr>
+ <td><a class="btn danger" href="#">Danger</a></td>
+ <td><code>.danger</code></td>
+ <td>Used to indicate a dangerous or potentially negative action will be taken</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <div class="row">
+ <div class="span4">
+ <h3>Buttons for actions</h3>
+ <p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p>
+ </div>
+ <div class="span4">
+ <h3>For anchors and forms</h3>
+ <p>Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you’ll want to apply these to only <code><a></code> and <code><button></code> elements.</p>
+ </div>
+ <div class="span4">
+ <p><strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code><button></code> and <code><a></code> elements for consistency.</p>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span4">
+ <h3>Multiple sizes</h3>
+ <p>Fancy larger or smaller buttons? Have at it!</p>
+ <p>
+ <a href="#" class="btn large primary">Primary action</a>
+ <a href="#" class="btn large">Action</a>
+ </p>
+ <p>
+ <a href="#" class="btn small primary">Primary action</a>
+ <a href="#" class="btn small">Action</a>
+ </p>
+ </div>
+ <div class="span8">
+ <h3>Disabled state</h3>
+ <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
+ <p>
+ <a href="#" class="btn large primary disabled">Primary action</a>
+ <a href="#" class="btn large disabled">Action</a>
+ </p>
+ <p>
+ <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button>
+ </p>
+ </div>
+ </div>
+
+ <h2>Button groups</h2>
+ <div class="well">
+ <div class="btn-group">
+ <a class="btn" href="#">Left</a>
+ <a class="btn" href="#">Middle</a>
+ <a class="btn" href="#">Right</a>
+ </div>
+ </div>
+ <div class="well">
+ <div class="btn-toolbar">
+ <div class="btn-group">
+ <a class="btn" href="#">1</a>
+ <a class="btn" href="#">2</a>
+ <a class="btn" href="#">3</a>
+ <a class="btn" href="#">4</a>
+ <a class="btn" href="#">5</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">6</a>
+ <a class="btn" href="#">7</a>
+ <a class="btn" href="#">8</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">9</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">10</a>
+ </div>
+ </div>
+ </div>
+
+</section>
+
+
+ <!-- Footer
+ ================================================== -->
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+ <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ </footer>
+ </div><!-- /container -->
+
+ <!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+
+ <script type="text/javascript">
+ // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
+ $(document).ready(function() {
+ $('.nav .active').click(function(e) {
+ e.preventDefault();
+ $(this).siblings().toggle();
+ });
+ });
+ </script>
+
+ <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-transitions.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="assets/js/application.js"></script>
+ </body>
+</html>
diff --git a/docs/components.html b/docs/components.html
new file mode 100644
index 0000000000000000000000000000000000000000..56e71b0f7ff562a1c9b3d44e89ad8bd8739cffdb
--- /dev/null
+++ b/docs/components.html
@@ -0,0 +1,757 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le styles -->
+ <link href="../bootstrap.css" rel="stylesheet">
+ <link href="assets/css/docs.css" rel="stylesheet">
+ <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
+ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ </head>
+
+ <body>
+
+ <!-- Navbar
+ ================================================== -->
+ <div class="navbar navbar-fixed">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="./index.html">Bootstrap</a>
+ <ul class="nav">
+ <li><a href="./index.html">Overview</a></li>
+ <li><a href="./scaffolding.html">Scaffolding</a></li>
+ <li><a href="./base-css.html">Base CSS</a></li>
+ <li class="active"><a href="./components.html">Components</a></li>
+ <li><a href="./javascript.html">Javascript plugins</a></li>
+ <li><a href="./less.html">Using LESS</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron subhead" id="overview">
+ <h1>Components</h1>
+ <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
+ </header>
+
+
+<!-- Media
+================================================== -->
+<section id="media">
+ <div class="page-header">
+ <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>
+ </div>
+
+ <div class="row">
+ <div class="span6">
+ <h2>Default thumbnails</h2>
+ <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
+ <ul class="thumbnails">
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ </ul>
+ </div>
+ <div class="span6">
+ <h2>Highly customizable</h2>
+ <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
+ <ul class="thumbnails">
+ <li class="span3">
+ <div class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ <div class="caption">
+ <h5>Thumbnail label</h5>
+ <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
+ </div>
+ </div>
+ </li>
+ <li class="span3">
+ <div class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ <div class="caption">
+ <h5>Thumbnail label</h5>
+ <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span4">
+ <h3>Why use thumbnails</h3>
+ <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p>
+ </div>
+ <div class="span4">
+ <h3>Simple, flexible markup</h3>
+ <p>Thumbnail markup is simple—a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p>
+ </div>
+ <div class="span4">
+ <h3>Uses grid column sizes</h3>
+ <p>Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.</p>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span6">
+ <h2>The markup</h2>
+ <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
+<pre class="prettyprint linenums">
+<ul class="thumbnails">
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ ...
+</ul>
+</pre>
+ <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code><a></code> for a <code><div></code> like so:</p>
+<pre class="prettyprint linenums">
+<ul class="thumbnails">
+ <li class="span3">
+ <div class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ <h5>Thumbnail label</h5>
+ <p>Thumbnail caption right here...</p>
+ </div>
+ </li>
+ ...
+</ul>
+</pre>
+ </div>
+ <div class="span6">
+ <h2>More examples</h2>
+ <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p>
+ <ul class="thumbnails">
+ <li class="span4">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/290x230" alt="">
+ </a>
+ </li>
+ <li class="span2">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/130x100" alt="">
+ </a>
+ </li>
+ <li class="span2">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/130x100" alt="">
+ </a>
+ </li>
+ <li class="span2">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/130x100" alt="">
+ </a>
+ </li>
+ <li class="span2">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/130x100" alt="">
+ </a>
+ </li>
+ <li class="span2">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/130x100" alt="">
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+</section>
+
+
+
+<!-- Navigation
+================================================== -->
+<section id="navigation">
+ <div class="page-header">
+ <h1>Navigation</h1>
+ </div>
+ <h2>Fixed navbar</h2>
+ <div class="navbar navbar-static" data-dropdown="dropdown">
+ <div class="navbar-inner">
+ <div class="container" style="width: auto;">
+ <a class="brand" href="#">Project Name</a>
+ <ul class="nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="form-search navbar-search pull-left" action="">
+ <input type="text" class="search-query span2" placeholder="Search">
+ </form>
+ <ul class="nav secondary-nav">
+ <li class="divider"></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div><!-- /navbar-inner -->
+ </div><!-- /navbar -->
+
+ <div class="row">
+ <div class="span4">
+ <h4>What is it</h4>
+ <p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
+ </div>
+ <div class="span4">
+ <h4>Customizable</h4>
+ <p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
+ </div>
+ <div class="span4">
+ <h4>Dropdowns included</h4>
+ <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p>
+ </div>
+ </div>
+ <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
+
+ <br>
+
+ <div class="row">
+ <div class="span3">
+ <h2>Tabs and pills</h2>
+ <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
+ <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
+ </div>
+ <div class="span9">
+ <h3>Basic tabs example</h3>
+ <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p>
+ <ul class="tabs">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
+ <li class="dropdown" data-dropdown="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
+ </ul>
+<pre class="prettyprint linenums">
+<ul class="tabs">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
+</ul>
+</pre>
+ <h3>Tabbable tabs</h3>
+ <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p>
+
+ <div class="tabbable">
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#1">Section 1</a></li>
+ <li><a href="#2">Section 2</a></li>
+ <li><a href="#3">Section 3</a></li>
+ <li><a href="#4">Section 4</a></li>
+ </ul>
+ <div class="tab-content">
+ <div class="tab-pane active" id="1">
+ <p>Oh hai #1!</p>
+ </div>
+ <div class="tab-pane" id="2">
+ <p>Oh hai #2!</p>
+ </div>
+ <div class="tab-pane" id="3">
+ <p>Oh hai #3!</p>
+ </div>
+ <div class="tab-pane" id="4">
+ <p>Oh hai #4!</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span4">
+ <div class="tabbable tabs-left">
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#1">Section 1</a></li>
+ <li><a href="#2">Section 2</a></li>
+ <li><a href="#3">Section 3</a></li>
+ </ul>
+ <div class="tab-content" id="myTabContent2">
+ <div class="tab-pane active" id="1">
+ <h4>Section 1</h4>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
+ </div>
+ <div class="tab-pane" id="2">
+ <h4>Section 2</h4>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
+ </div>
+ <div class="tab-pane" id="3">
+ <h4>Section 3</h4>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="span4 offset1">
+ <div class="tabbable tabs-right">
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#1">Section 1</a></li>
+ <li><a href="#2">Section 2</a></li>
+ <li><a href="#3">Section 3</a></li>
+ </ul>
+ <div class="tab-content" id="myTabContent3">
+ <div class="tab-pane active" id="1">
+ <h4>Section 1</h4>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
+ </div>
+ <div class="tab-pane" id="2">
+ <h4>Section 2</h4>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
+ </div>
+ <div class="tab-pane" id="3">
+ <h4>Section 3</h4>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="tabbable tabs-bottom">
+ <div class="tab-content">
+ <div class="tab-pane active" id="1">
+ <p>Oh hai #1!</p>
+ </div>
+ <div class="tab-pane" id="2">
+ <p>Oh hai #2!</p>
+ </div>
+ <div class="tab-pane" id="3">
+ <p>Oh hai #3!</p>
+ </div>
+ <div class="tab-pane" id="4">
+ <p>Oh hai #4!</p>
+ </div>
+ </div>
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#1">Section 1</a></li>
+ <li><a href="#2">Section 2</a></li>
+ <li><a href="#3">Section 3</a></li>
+ <li><a href="#4">Section 4</a></li>
+ </ul>
+ </div>
+
+
+ <p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p>
+ <hr>
+ <h3>Basic pills example</h3>
+ <ul class="pills">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+<pre class="prettyprint linenums">
+<ul class="pills">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
+</ul>
+</pre>
+ <h3>Vertical pill nav</h3>
+ <p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
+ <ul class="pills pills-vertical span4">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </div>
+ </div><!-- /row -->
+
+ <!-- Breadcrumbs -->
+ <div class="row">
+ <div class="span3">
+ <h2>Breadcrumbs</h2>
+ <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
+ </div>
+ <div class="span9">
+ <ul class="breadcrumb">
+ <li class="active">Home</li>
+ </ul>
+ <ul class="breadcrumb">
+ <li><a href="#">Home</a> <span class="divider">/</span></li>
+ <li class="active">Middle page</li>
+ </ul>
+ <ul class="breadcrumb">
+ <li><a href="#">Home</a> <span class="divider">/</span></li>
+ <li><a href="#">Middle page</a> <span class="divider">/</span></li>
+ <li class="active">Another one</li>
+ </ul>
+ <ul class="breadcrumb">
+ <li><a href="#">Home</a> <span class="divider">/</span></li>
+ <li><a href="#">Middle page</a> <span class="divider">/</span></li>
+ <li><a href="#">Another one</a> <span class="divider">/</span></li>
+ <li class="active">You are here</li>
+ </ul>
+<pre class="prettyprint linenums">
+<ul class="breadcrumb">
+ <li><a href="#">Home</a> <span class="divider">/</span></li>
+ <li><a href="#">Middle page</a> <span class="divider">/</span></li>
+ <li><a href="#">Another one</a> <span class="divider">/</span></li>
+ <li class="active">You are here</li>
+</ul>
+</pre>
+ </div>
+ </div>
+
+ <!-- Step nav -->
+ <div class="row">
+ <div class="span3">
+ <h2>Step nav</h2>
+ <p>Placeholder for now!</p>
+ </div>
+ <div class="span9">
+ <br>
+ <ul class="step-nav">
+ <li class="prev"><a href="#">« Overview</a></li>
+ <li class="active"><a class="dot" href="#">1</a></li>
+ <li><a class="dot" href="#">2</a></li>
+ <li><a class="dot" href="#">3</a></li>
+ <li><a class="dot" href="#">4</a></li>
+ <li><a class="dot" href="#">5</a></li>
+ <li class="next"><a href="#">Base CSS »</a></li>
+ </ul>
+ <br>
+ <br>
+ </div>
+ </div>
+
+ <!-- Pagination -->
+ <div class="row">
+ <div class="span3">
+ <h2>Pagination</h2>
+ <p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
+ </div>
+ <div class="span9">
+ <div class="pagination">
+ <ul>
+ <li class="prev disabled"><a href="#">← Previous</a></li>
+ <li class="active"><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ <li class="next"><a href="#">Next →</a></li>
+ </ul>
+ </div>
+ <div class="pagination">
+ <ul>
+ <li class="prev"><a href="#">←</a></li>
+ <li class="active"><a href="#">10</a></li>
+ <li><a href="#">11</a></li>
+ <li class="disabled"><a href="#">…</a></li>
+ <li><a href="#">20</a></li>
+ <li><a href="#">21</a></li>
+ <li class="next"><a href="#">→</a></li>
+ </ul>
+ </div>
+ <div class="pagination">
+ <ul>
+ <li class="prev"><a href="#">←</a></li>
+ <li><a href="#">10</a></li>
+ <li><a href="#">11</a></li>
+ <li class="active"><a href="#">12</a></li>
+ <li><a href="#">13</a></li>
+ <li><a href="#">14</a></li>
+ <li class="next"><a href="#">→</a></li>
+ </ul>
+ </div>
+<pre class="prettyprint linenums">
+<div class="pagination">
+ <ul>
+ <li class="prev disabled"><a href="#">&larr; Previous</a></li>
+ <li class="active"><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ <li><a href="#">5</a></li>
+ <li class="next"><a href="#">Next &rarr;</a></li>
+ </ul>
+</div>
+</pre>
+ </div>
+ </div><!-- /row -->
+
+</section>
+
+
+
+<!-- Alerts & Messages
+================================================== -->
+<section id="alerts">
+ <div class="page-header">
+ <h1>Alerts & Errors <small>Styles for success, warning, and error messages or alerts</small></h1>
+ </div>
+ <!-- Basic alert messages -->
+ <div class="row">
+ <div class="span3">
+ <h2>Basic alerts</h2>
+ <p><code>.alert-message</code></p>
+ <p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
+ <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
+ </div>
+ <div class="span9">
+ <div class="alert-message warning">
+ <a class="close" href="#">×</a>
+ <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+ </div>
+ <div class="alert-message error">
+ <a class="close" href="#">×</a>
+ <p><strong>Oh snap!</strong> Change this and that and try again.</p>
+ </div>
+ <div class="alert-message success">
+ <a class="close" href="#">×</a>
+ <p><strong>Well done!</strong> You successfully read this alert message.</p>
+ </div>
+ <div class="alert-message info">
+ <a class="close" href="#">×</a>
+ <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
+ </div>
+
+ <h4>Example code</h4>
+<pre class="prettyprint linenums">
+<div class="alert-message warning">
+ <a class="close" href="#">×</a>
+ <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+</div>
+</pre>
+ </div>
+ </div><!-- /row -->
+ <!-- Block messages -->
+ <div class="row">
+ <div class="span3">
+ <h2>Block messages</h2>
+ <p><code><div class="alert-message block-message"></code></p>
+ <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
+ <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
+ </div>
+ <div class="span9">
+ <div class="alert-message block-message warning">
+ <a class="close" href="#">×</a>
+ <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+ <div class="alert-actions">
+ <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ </div>
+ </div>
+ <div class="alert-message block-message error">
+ <a class="close" href="#">×</a>
+ <p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p>
+ <ul>
+ <li>Duis mollis est non commodo luctus</li>
+ <li>Nisi erat porttitor ligula</li>
+ <li>Eget lacinia odio sem nec elit</li>
+ </ul>
+ <div class="alert-actions">
+ <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ </div>
+ </div>
+ <div class="alert-message block-message success">
+ <a class="close" href="#">×</a>
+ <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
+ <div class="alert-actions">
+ <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ </div>
+ </div>
+ <div class="alert-message block-message info">
+ <a class="close" href="#">×</a>
+ <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
+ <div class="alert-actions">
+ <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ </div>
+ </div>
+
+ <h4>Example code</h4>
+<pre class="prettyprint linenums">
+<div class="alert-message block-message warning">
+ <a class="close" href="#">×</a>
+ <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+ <div class="alert-actions">
+ <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ </div>
+</div>
+</pre>
+ </div>
+ </div><!-- /row -->
+</section>
+
+
+<!-- Popovers
+================================================== -->
+<section id="popovers">
+ <div class="page-header">
+ <h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1>
+ </div>
+ <div class="row">
+ <div class="span3">
+ <h2>Modals</h2>
+ <p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p>
+ <p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p>
+ </div>
+ <div class="span9">
+ <div class="well" style="background-color: #888; border: none; padding: 40px;">
+ <!-- Modal -->
+ <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
+ <div class="modal-header">
+ <a href="#" class="close js-dismiss">×</a>
+ <h3>Modal Heading</h3>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn primary">Primary</a>
+ <a href="#" class="btn">Secondary</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><!-- /row -->
+
+ <!-- Tooltips -->
+ <div class="row">
+ <div class="span3">
+ <h2>Tooltips</h2>
+ <p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
+ <p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p>
+ </div>
+ <div class="span9">
+ <div class="twipsies well">
+ <div style="position: relative">
+ <p class="muted" style="margin-bottom: 0">
+Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div><!-- /row -->
+
+ <!-- Popovers -->
+ <div class="row">
+ <div class="span3">
+ <h2>Popovers</h2>
+ <p>Use popovers to provide subtextual information to a page without affecting layout.</p>
+ <p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p>
+ </div>
+ <div class="span9">
+ <div class="well popover-well">
+ <div class="popover-wrapper">
+ <div class="popover left">
+ <div class="arrow"></div>
+ <div class="inner">
+ <h3 class="title">Popover Title</h3>
+ <div class="content">
+ <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ </div>
+ </div>
+ </div>
+ <img class="large-bird" src="assets/img/bird.png" >
+ </div>
+ </div>
+ </div>
+ </div><!-- /row -->
+</section>
+
+
+ <!-- Footer
+ ================================================== -->
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+ <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ </footer>
+ </div><!-- /container -->
+
+ <!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+
+ <script type="text/javascript">
+ // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
+ $(document).ready(function() {
+ $('.nav .active').click(function(e) {
+ e.preventDefault();
+ $(this).siblings().toggle();
+ });
+ });
+ </script>
+
+ <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-transitions.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="assets/js/application.js"></script>
+ </body>
+</html>
diff --git a/docs/index.html b/docs/index.html
index f99b756fe1fad3f7189bcec98b6f12fb66c57f37..6f3a53b25eb5b523f6582dc714f936faf2482408 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,10 +3,12 @@
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="description" content="">
<meta name="author" content="">
- <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
@@ -16,16 +18,6 @@
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
- <!-- Le javascript -->
- <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
- <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
- <script src="assets/js/google-code-prettify/prettify.js"></script>
- <script>$(function () { prettyPrint() })</script>
- <script src="../js/bootstrap-dropdown.js"></script>
- <script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
- <script src="assets/js/application.js"></script>
-
<!-- Le fav and touch icons -->
<link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
@@ -35,1898 +27,241 @@
<body>
- <!-- Topbar
+ <!-- Navbar
================================================== -->
- <div class="topbar" data-scrollspy="scrollspy" >
- <div class="topbar-inner">
+ <div class="navbar navbar-fixed" data-scrollspy="scrollspy">
+ <div class="navbar-inner">
<div class="container">
- <a class="brand" href="#">Bootstrap</a>
+ <a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
- <li class="active"><a href="#overview">Overview</a></li>
- <li><a href="#about">About</a></li>
- <li><a href="#grid-system">Grid</a></li>
- <li><a href="#layouts">Layouts</a></li>
- <li><a href="#typography">Type</a></li>
- <li><a href="#media">Media</a></li>
- <li><a href="#tables">Tables</a></li>
- <li><a href="#forms">Forms</a></li>
- <li><a href="#navigation">Navigation</a></li>
- <li><a href="#alerts">Alerts</a></li>
- <li><a href="#popovers">Popovers</a></li>
- <li><a href="#javascript">Javascript</a></li>
- <li><a href="#less">Less</a></li>
+ <li class="active"><a href="./index.html">Overview</a></li>
+ <li><a href="./scaffolding.html">Scaffolding</a></li>
+ <li><a href="./base-css.html">Base CSS</a></li>
+ <li><a href="./components.html">Components</a></li>
+ <li><a href="./javascript.html">Javascript plugins</a></li>
+ <li><a href="./less.html">Using LESS</a></li>
</ul>
</div>
</div>
</div>
- <!-- Masthead (blueprinty thing)
- ================================================== -->
- <header class="jumbotron masthead" id="overview">
- <div class="inner">
- <div class="container">
- <h1>Bootstrap, from Twitter</h1>
- <p class="lead">
- Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br />
- It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />
- </p>
- <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
- </div><!-- /container -->
- </div>
- </header>
-
- <!-- Quickstart options
- ================================================== -->
- <div class="quickstart">
- <div class="container">
- <div class="row">
- <div class="span5">
- <h6>Hotlink the CSS</h6>
- <p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
- <form>
- <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
- </form>
- </div>
- <div class="span5">
- <h6>Use it with Less</h6>
- <p>A fan of using Less? No problem, just clone the repo and add these lines:</p>
- <form>
- <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less">
-<script src="/path/to/less.js"></script></textarea>
- </form>
- </div>
- <div class="span5">
- <h6>Fork on GitHub</h6>
- <p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p>
- <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p>
- <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v1.3.0</a></p>
- </div>
- </div><!-- /row -->
- </div>
- </div>
-
<div class="container">
-
-
-<!-- About Bootstrap
-================================================== -->
-<section id="about">
- <div class="page-header">
- <h1>About Bootstrap <small>Brief history, browser support, and more</small></h1>
- </div>
- <div class="row">
- <div class="span-one-third">
- <h3>History</h3>
- <p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
- <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
- <p>
- <a href="http://twitter.com/twbootstrap" class="twitter-follow-button">Follow @twbootstrap</a>
- <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
- </p>
- </div>
- <div class="span-one-third">
- <h3>Browser support</h3>
- <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
- <img src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
- <ul>
- <li>Latest Safari</li>
- <li>Latest Google Chrome</li>
- <li>Firefox 4+</li>
- <li>Internet Explorer 7+</li>
- <li>Opera 11</li>
- </ul>
- </div>
- <div class="span-one-third">
- <h3>What's included</h3>
- <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
- <ul>
- <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li>
- <li>All original .less files</li>
- <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li>
- <li>Complete styleguide documentation</li>
- <li>Three example pages with different layouts</li>
- </ul>
- </div>
- </div><!-- /row -->
-
- <div class="row">
- <div class="span12">
- <h3>Quick-start examples</h3>
- <p>Need some quick templates? Check out these basic examples we've put together:</p>
- <ul class="media-grid">
- <li>
- <a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" alt="Simple three-column layout with hero unit"></a>
- </li>
- <li>
- <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" alt="Fluid layout with static sidebar"></a>
- </li>
- <li>
- <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a>
- </li>
- </ul>
- </div>
- </div><!-- /row -->
-</section>
-
-
-
-<!-- Grid system
-================================================== -->
-<section id="grid-system">
- <div class="page-header">
- <h1>Grid system <small>Rock the standard 940px or roll your own</small></h1>
- </div>
- <div class="row">
- <div class="span4">
- <h2>Default grid</h2>
- <p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p>
- </div>
- <div class="span12">
- <h3>Example grid markup</h3>
- <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p>
-<pre class="prettyprint linenums">
-<div class="row">
- <div class="span6">
- ...
- </div>
- <div class="span10">
- ...
- </div>
-</div>
-</pre>
- </div>
- </div><!-- /row -->
- <div class="row show-grid" title="16 column layout">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div><!-- /row -->
- <div class="row show-grid" title="8 column layout">
- <div class="span2">2</div>
- <div class="span2">2</div>
- <div class="span2">2</div>
- <div class="span2">2</div>
- <div class="span2">2</div>
- <div class="span2">2</div>
- <div class="span2">2</div>
- <div class="span2">2</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Example uncommon layout">
- <div class="span3">3</div>
- <div class="span3">3</div>
- <div class="span3">3</div>
- <div class="span3">3</div>
- <div class="span3">3</div>
- <div class="span1 column">1</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Four column layout">
- <div class="span4">4</div>
- <div class="span4">4</div>
- <div class="span4">4</div>
- <div class="span4">4</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Default three column layout">
- <div class="span-one-third">1/3</div>
- <div class="span-one-third">1/3</div>
- <div class="span-one-third">1/3</div>
- </div><!-- /row -->
- <div class="row show-grid" title="One-third and two-thirds layout">
- <div class="span-one-third">1/3</div>
- <div class="span-two-thirds">2/3</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Irregular three column layout">
- <div class="span4">4</div>
- <div class="span6">6</div>
- <div class="span6">6</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Half and half">
- <div class="span8">8</div>
- <div class="span8">8</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Example uncommon two-column layout">
- <div class="span5">5</div>
- <div class="span11">11</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Unnecessary single column layout">
- <div class="span16">16</div>
- </div><!-- /row -->
-
- <br>
-
- <h2>Offsetting columns</h2>
- <div class="row show-grid">
- <div class="span4">4</div>
- <div class="span8 offset4">8 offset 4</div>
- </div><!-- /row -->
- <div class="row show-grid">
- <div class="span-one-third offset-two-thirds">1/3 offset 2/3s</div>
- </div><!-- /row -->
- <div class="row show-grid">
- <div class="span4 offset4">4 offset 4</div>
- <div class="span4 offset4">4 offset 4</div>
- </div><!-- /row -->
- <div class="row show-grid">
- <div class="span5 offset3">5 offset 3</div>
- <div class="span5 offset3">5 offset 3</div>
- </div><!-- /row -->
- <div class="row show-grid">
- <div class="span10 offset6">10 offset 6</div>
- </div><!-- /row -->
-
- <br>
-
- <div class="row">
- <div class="span4">
- <h2>Nesting columns</h2>
- <p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p>
- </div>
- <div class="span12">
- <h4>Example of nested columns</h4>
- <div class="row show-grid">
- <div class="span12">
- Level 1 of column
- <div class="row show-grid">
- <div class="span6">
- Level 2
- </div>
- <div class="span6">
- Level 2
+ <div id="overview">
+
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron masthead">
+ <div class="inner">
+ <h1>Bootstrap,<br> from Twitter</h1>
+ <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.</p>
+ <p class="download-info">
+ <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">Download on GitHub</a>
+ <a href="./scaffolding.html" class="btn btn-large">Get started →</a>
+ Currently v2.0.0
+ </p>
+
+ <div class="benefits">
+ <h4>Feature highlights</h4>
+ <ul>
+ <li><span>×</span> Built on LESS</li>
+ <li><span>×</span> Complete styleguide docs</li>
+ <li><span>×</span> Fully responsive design</li>
+ <li><span>×</span> Small footprint (7kb gzipped)</li>
+ <li><span>×</span> Support for IE7 and up</li>
+ <li><span>×</span> Custom jQuery plugins</li>
+ <li><span>×</span> Dozens of components</li>
+ </ul>
</div>
</div>
- </div>
- </div>
-<pre class="prettyprint linenums">
-<div class="row">
- <div class="span12">
- Level 1 of column
- <div class="row">
- <div class="span6">
- Level 2
- </div>
- <div class="span6">
- Level 2
- </div>
- </div>
- </div>
-</div>
-</pre>
- </div>
- </div>
-
- <br>
-
- <div class="row">
- <div class="span4">
- <h2>Roll your own grid</h2>
- <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system. With a bit of customization, you can modify the size of columns, their gutters, and the container they reside in.</p>
- </div>
- <div class="span12">
- <h3>Inside the grid</h3>
- <p>The variables needed to modify the grid system currently all reside in <code>preboot.less</code>.</p>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th>Variable</th>
- <th>Default value</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>@gridColumns</code></td>
- <td>16</td>
- <td>The number of columns within the grid</td>
- </tr>
- <tr>
- <td><code>@gridColumnWidth</code></td>
- <td>40px</td>
- <td>The width of each column within the grid</td>
- </tr>
- <tr>
- <td><code>@gridGutterWidth</code></td>
- <td>20px</td>
- <td>The negative space between each column</td>
- </tr>
- <tr>
- <td><code>@siteWidth</code></td>
- <td><em>Computed sum of all columns and gutters</em></td>
- <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
- </tr>
- </tbody>
- </table>
- <h3>Now to customize</h3>
- <p>Modifying the grid means changing the three <code>@grid-*</code> variables and recompiling the Less files.</p>
- <p>Bootstrap comes equipped to handle a grid system with up to 24 columns; the default is just 16. Here's how your grid variables would look customized to a 24-column grid.</p>
- <pre class="prettyprint linenums">@gridColumns: 24;
-@gridColumnWidth: 20px;
-@gridGutterWidth: 20px;</pre>
- <p>Once recompiled, you'll be set!</p>
- </div>
- </div>
-</section>
-
-
-
-<!-- Layouts (Default and fluid)
-================================================== -->
-<section id="layouts">
- <div class="page-header">
- <h1>Layouts <small>Basic templates to create webpages</small></h1>
- </div>
-
- <div class="row">
- <div class="span8">
- <h2>Fixed layout</h2>
- <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p>
- <div class="mini-layout">
- <div class="mini-layout-body"></div>
- </div>
-<pre class="prettyprint linenums">
-<body>
- <div class="container">
- ...
- </div>
-</body>
-</pre>
- </div><!-- /col -->
- <div class="span8">
- <h2>Fluid layout</h2>
- <p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
- <div class="mini-layout fluid">
- <div class="mini-layout-sidebar"></div>
- <div class="mini-layout-body"></div>
- </div>
-<pre class="prettyprint linenums">
-<body>
- <div class="container-fluid">
- <div class="sidebar">
- ...
- </div>
- <div class="content">
- ...
- </div>
- </div>
-</body>
-</pre>
- </div><!-- /col -->
- </div><!-- /row -->
-</section>
-
-
-
-<!-- Typography
-================================================== -->
-<section id="typography">
- <div class="page-header">
- <h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
- </div>
-
- <!-- Headings & Paragraph Copy -->
- <div class="row">
- <div class="span4">
- <h2>Headings & copy</h2>
- <p>A standard typographic hierarchy for structuring your webpages.</p>
- <p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@basefont</code> and <code>@baseline</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
- <p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
- </div>
- <div class="span4">
- <h1>h1. Heading 1</h1>
- <h2>h2. Heading 2</h2>
- <h3>h3. Heading 3</h3>
- <h4>h4. Heading 4</h4>
- <h5>h5. Heading 5</h5>
- <h6>h6. Heading 6</h6>
- </div>
- <div class="span8">
- <h3>Example paragraph</h3>
- <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
- <h1>Example heading <small>Has sub-heading…</small></h1>
- </div>
- </div>
-
- <!-- Misc Elements -->
- <div class="row">
- <div class="span4">
- <h2>Misc. elements</h2>
- <p>Using emphasis, addresses, & abbreviations</p>
- <p>
- <code><strong></code>
- <code><em></code>
- <code><address></code>
- <code><abbr></code>
- </p>
- </div>
- <div class="span12">
- <h3>When to use</h3>
- <p>Emphasis tags (<code><strong></code> and <code><em></code>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <code><strong></code> for importance and <code><em></code> for <em>stress</em> emphasis.</p>
- <h3>Emphasis in a paragraph</h3>
- <p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
- <p><strong>Note:</strong> It's still okay to use <code><b></code> and <code><i></code> tags in HTML5 and they don't have to be styled bold and italic, respectively (although if there is a more semantic element, use it). <code><b></code> is meant to highlight words or phrases without conveying additional importance, while <code><i></code> is mostly for voice, technical terms, etc.</p>
- <h3>Addresses</h3>
- <p>The <code><address></code> element is used for contact information for its nearest ancestor, or the entire body of work. Here are two examples of how it could be used:</p>
-
- <div class="row">
- <div class="span4">
- <address>
- <strong>Twitter, Inc.</strong><br />
- 795 Folsom Ave, Suite 600<br />
- San Francisco, CA 94107<br />
- <abbr title="Phone">P:</abbr> (123) 456-7890
- </address>
- </div>
- <div class="span4">
- <address>
- <strong>Full Name</strong><br />
- <a mailto="">first.last@gmail.com</a>
- </address>
- </div>
- </div>
-
- <p><strong>Note:</strong> Each line in an <code><address></code> must end with a line-break (<code><br /></code>) or be wrapped in a block-level tag (e.g., <code><p></code>) to properly structure the content.</p>
- <h3>Abbreviations</h3>
- <p>For abbreviations and acronyms, use the <code><abbr></code> tag (<code><acronym></code> is deprecated in <abbr title="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p>
- </div>
- </div><!-- /row -->
+ </header>
+
+ <ul class="quick-links">
+ <li><strong>Quick links</strong></li>
+ <li><a href="https://github.com/twitter/bootstrap/">GitHub</a></li>
+ <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
+ <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li>
+ <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li>
+ <li class="divider">·</li>
+ <li>
+ <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
+ </li>
+ <li>
+ <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="94px" height="20px"></iframe>
+ </li>
+<!--
+ <li><strong>Authors</strong></li>
+ <li><a href="http://twitter.com/mdo">@mdo</a></li>
+ <li><a href="http://twitter.com/fat">@fat</a></li>
+ -->
+
+ <li class="divider">·</li>
+ <li class="follow-btn">
+ <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </li>
+ <li class="tweet-btn">
+ <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+ </li>
+ </ul>
- <!-- Blockquotes -->
- <div class="row">
- <div class="span4">
- <h2>Blockquotes</h2>
- <p>
- <code><blockquote></code>
- <code><p></code>
- <code><small></code>
- </p>
- </div>
- <div class="span12">
- <h3>How to quote</h3>
- <p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p>
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
- <small>Dr. Julius Hibbert</small>
- </blockquote>
-<pre class="prettyprint linenums">
-<blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
- <small>Dr. Julius Hibbert</small>
-</blockquote>
-</pre>
- </div>
- </div><!-- /row -->
- <h2>Lists</h2>
- <div class="row">
- <div class="span4">
- <h4>Unordered <code><ul></code></h4>
- <ul>
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit
- <ul>
- <li>Phasellus iaculis neque</li>
- <li>Purus sodales ultricies</li>
- <li>Vestibulum laoreet porttitor sem</li>
- <li>Ac tristique libero volutpat at</li>
- </ul>
- </li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
- </ul>
- </div>
- <div class="span4">
- <h4>Unstyled <code><ul.unstyled></code></h4>
- <ul class="unstyled">
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit
- <ul>
- <li>Phasellus iaculis neque</li>
- <li>Purus sodales ultricies</li>
- <li>Vestibulum laoreet porttitor sem</li>
- <li>Ac tristique libero volutpat at</li>
+ <div class="marketing">
+ <h1>Built with Bootstrap</h1>
+ <ul class="thumbnails example-sites">
+ <li>
+ <a href="http://kippt.com/" target="_blank">
+ <img src="assets/img/example-sites/kippt.png" alt="Kippt">
+ </a>
+ </li>
+ <li>
+ <a href="http://www.fleetio.com/" target="_blank">
+ <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
+ </a>
+ </li>
+ <li>
+ <a href="http://www.jshint.com/" target="_blank">
+ <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
+ </a>
+ </li>
+<!--
+ <li>
+ <a href="http://bartop.co/" target="_blank">
+ <img src="assets/img/example-sites/bartop.png" alt="Bartop.co">
+ </a>
+ </li>
+ <li>
+ <a href="http://railwayjs.com/" target="_blank">
+ <img src="assets/img/example-sites/railwayjs.png" alt="RailwayJS">
+ </a>
+ </li>
+ <li>
+ <a href="http://www.totalwireframe.com/" target="_blank">
+ <img src="assets/img/example-sites/totalwireframe.png" alt="Total Wireframe">
+ </a>
+ </li>
+ -->
</ul>
- </li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
- </ul>
- </div>
- <div class="span4">
- <h4>Ordered <code><ol></code></h4>
- <ol>
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit</li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
- </ol>
- </div>
- <div class="span4">
- <h4>Description <code>dl</code></h4>
- <dl>
- <dt>Description lists</dt>
- <dd>A description list is perfect for defining terms.</dd>
- <dt>Euismod</dt>
- <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
- <dd>Donec id elit non mi porta gravida at eget metus.</dd>
- <dt>Malesuada porta</dt>
- <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
- </dl>
- </div>
- </div><!-- /row -->
-
-
- <!-- Code -->
- <div class="row">
- <div class="span4">
- <h2>Code</h2>
- <p>
- <code><code></code>
- <code><pre></code>
- </p>
- <p>Pimp your code in style with two simple tags. For even more awesomeness through javascript, drop in Google's code prettify library and you're set.</p>
- </div>
- <div class="span12">
- <h3>Presenting code</h3>
- <p>Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <code><pre></code> element. For inline code, use the <code><code></code> element.</p>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th style="width: 190px;">Element</th>
- <th>Result</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code><code></code></td>
- <td>In a line of text like this, your wrapped code will look like this <code>>html<</code> element.</td>
- </tr>
- <tr>
- <td><code><pre></code></td>
- <td>
-<pre><div>
- <h1>Heading</h1>
- <p>Something right here...</p>
-</div></pre>
- <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p>
- </td>
- </tr>
- <tr>
- <td><code><pre class="prettyprint"></code></td>
- <td>
- <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.</p>
-<pre class="prettyprint"><div>
- <h1>Heading</h1>
- <p>Something right here...</p>
-</div></pre>
- <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div><!-- /row -->
-
- <!-- Labels -->
- <div class="row">
- <div class="span4">
- <h2>Inline labels</h2>
- <p>
- <code><span class="label"></code>
- </p>
- <p>Call attention to or flag any phrase in your body text.</p>
- </div>
- <div class="span12">
- <h3>Label anything</h3>
- <p>Ever needed one of those fancy <span class="label success">New!</span> or <span class="label important">Important</span> flags when writing code? Well, now you have them. Here's what's included by default:</p>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th style="width: 50%;">Label</th>
- <th>Result</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <code><span class="label">Default</span></code>
- </td>
- <td>
- <span class="label">Default</span>
- </td>
- </tr>
- <tr>
- <td>
- <code><span class="label success">New</span></code>
- </td>
- <td>
- <span class="label success">New</span>
- </td>
- </tr>
- <tr>
- <td>
- <code><span class="label warning">Warning</span></code>
- </td>
- <td>
- <span class="label warning">Warning</span>
- </td>
- </tr>
- <tr>
- <td>
- <code><span class="label important">Important</span></code>
- </td>
- <td>
- <span class="label important">Important</span>
- </td>
- </tr>
- <tr>
- <td>
- <code><span class="label notice">Notice</span></code>
- </td>
- <td>
- <span class="label notice">Notice</span>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div><!-- /row -->
-</section>
-
-
-
-<!-- Media
-================================================== -->
-<section id="media">
- <div class="page-header">
- <h1>Media <small>Displaying images and videos</small></h1>
- </div>
- <!-- Table structure -->
- <div class="row">
- <div class="span4">
- <h2>Media grid</h2>
- <p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
- </div>
- <div class="span12">
- <h3>Example thumbnails</h3>
- <p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
- <h4>Large</h4>
- <ul class="media-grid">
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/330x230" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/330x230" alt="">
- </a>
- </li>
- </ul>
- <h4>Medium</h4>
- <ul class="media-grid">
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- </ul>
- <h4>Small</h4>
- <ul class="media-grid">
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/90x90" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/90x90" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/90x90" alt="">
- </a>
- </li>
- </ul>
- <h4>Coding them</h4>
- <p>Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.</p>
-<pre class="prettyprint linenums">
-<ul class="media-grid">
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/330x230" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/330x230" alt="">
- </a>
- </li>
-</ul>
-</pre>
- </div>
- </div><!-- /row -->
-</section>
-
-
-
-<!-- Tables
-================================================== -->
-<section id="tables">
- <div class="page-header">
- <h1>Tables <small>For, you guessed it, tabular data</small></h1>
- </div>
- <!-- Table structure -->
- <div class="row">
- <div class="span4">
- <h2>Building tables</h2>
- <p>
- <code><table></code>
- <code><thead></code>
- <code><tbody></code>
- <code><tr></code>
- <code><th></code>
- <code><td></code>
- <code><colspan></code>
- <code><caption></code>
- </p>
- <p>Tables are great—for a lot of things. Great tables, however, need a bit of markup love to be useful, scalable, and readable (at the code level). Here are a few tips to help.</p>
- <p>Always wrap your column headers in a <code><thead></code> such that hierarchy is <code><thead></code> > <code><tr></code> > <code><th></code>.</p>
- <p>Similar to the column headers, all your table’s body content should be wrapped in a <code><tbody></code> so your hierarchy is <code><tbody></code> > <code><tr></code> > <code><td></code>.</p>
- </div>
- <div class="span12">
- <h3>Example: Default table styles</h3>
- <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
- <table>
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Language</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Some</td>
- <td>One</td>
- <td>English</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Joe</td>
- <td>Sixpack</td>
- <td>English</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>Code</td>
- </tr>
- </tbody>
- </table>
-<pre class="prettyprint linenums">
-<table>
- ...
-</table></pre>
- <h3>Example: Zebra-striped</h3>
- <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Language</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Some</td>
- <td>One</td>
- <td>English</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Joe</td>
- <td>Sixpack</td>
- <td>English</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>Code</td>
- </tr>
- </tbody>
- </table>
- <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
-<pre class="prettyprint linenums">
-<table class="zebra-striped">
-...
-</table></pre>
- <h3>Example: Zebra-striped w/ TableSorter.js</h3>
- <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
- <table class="zebra-striped" id="sortTableExample">
- <thead>
- <tr>
- <th>#</th>
- <th class="yellow">First Name</th>
- <th class="blue">Last Name</th>
- <th class="green">Language</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Your</td>
- <td>One</td>
- <td>English</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Joe</td>
- <td>Sixpack</td>
- <td>English</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>Code</td>
- </tr>
- </tbody>
- </table>
-<pre class="prettyprint linenums">
-<script src="js/jquery/jquery.tablesorter.min.js"></script>
-<script >
- $(function() {
- $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
- });
-</script>
-<table class="zebra-striped">
- ...
-</table></pre>
- </div>
- </div><!-- /row -->
-</section>
-
-
-
-<!-- Forms
-================================================== -->
-<section id="forms">
- <div class="page-header">
- <h1>Forms</h1>
- </div>
- <div class="row">
- <div class="span4">
- <h2>Default styles</h2>
- <p>All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.</p>
- </div>
- <div class="span12">
- <form>
- <fieldset>
- <legend>Example form legend</legend>
- <div class="clearfix">
- <label for="xlInput">X-Large input</label>
- <div class="input">
- <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
+ <h1>Designed for everyone, everywhere</h1>
+ <div class="row">
+ <div class="span4">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_042_group.png">
+ <h2>Built for and by nerds</h2>
+ <p>Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.</p>
</div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="normalSelect">Select</label>
- <div class="input">
- <select name="normalSelect" id="normalSelect">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
+ <div class="span4">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
+ <h2>For all skill levels</h2>
+ <p>Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p>
</div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="mediumSelect">Select</label>
- <div class="input">
- <select class="medium" name="mediumSelect" id="mediumSelect">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
+ <div class="span4">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
+ <h2>Cross-everything</h2>
+ <p>Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.</p>
</div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="multiSelect">Multiple select</label>
- <div class="input">
- <select class="medium" multiple="multiple" name="multiSelect" id="multiSelect">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
+ </div><!--/row-->
+ <div class="row">
+ <div class="span4">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
+ <h2>12-column grid</h2>
+ <p>Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.</p>
</div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label>Uneditable input</label>
- <div class="input">
- <span class="uneditable-input">Some value here</span>
+ <div class="span4">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
+ <h2>Responsive design</h2>
+ <p>With Bootstrap 2, we've gone fully responsive. Our components are flexible enough to scale according to whatever resolution or device you're using to provide a consistent experience, no matter what.</p>
</div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="disabledInput">Disabled input</label>
- <div class="input">
- <input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled />
+ <div class="span4">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
+ <h2>Styleguide docs</h2>
+ <p>Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.</p>
</div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="disabledInput">Disabled textarea</label>
- <div class="input">
- <textarea class="xxlarge" name="textarea" id="textarea" rows="3" disabled></textarea>
+ </div><!--/row-->
+ <div class="row">
+ <div class="span4">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_082_roundabout.png">
+ <h2>Growing library</h2>
+ <p>Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.</p>
</div>
- </div><!-- /clearfix -->
- <div class="clearfix error">
- <label for="xlInput2">X-Large input</label>
- <div class="input">
- <input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
- <span class="help-inline">Small snippet of help text</span>
+ <div class="span4">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_009_magic.png">
+ <h2>Custom jQuery plugins</h2>
+ <p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p>
</div>
- </div><!-- /clearfix -->
- </fieldset>
- <fieldset>
- <legend>Example form legend</legend>
- <div class="clearfix">
- <label for="prependedInput">Prepended text</label>
- <div class="input">
- <div class="input-prepend">
- <span class="add-on">@</span>
- <input class="medium" id="prependedInput" name="prependedInput" size="16" type="text" />
- </div>
+ <div class="span4">
+ <img class="icon" src="assets/img/less-small.png">
+ <h2>Built on LESS</h2>
+ <p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
</div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="prependedInput2">Prepended checkbox</label>
- <div class="input">
- <div class="input-prepend">
- <label class="add-on"><input type="checkbox" name="" id="" value="" /></label>
- <input class="mini" id="prependedInput2" name="prependedInput2" size="16" type="text" />
- </div>
+ </div><!--/row-->
+ <div class="row">
+ <div class="span3">
+ <img class="small-icon" src="assets/img/icon-html5.png">
+ <h3>HTML5</h3>
+ <p>Built to support new HTML5 elements and syntax.</p>
</div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="appendedInput">Appended checkbox</label>
- <div class="input">
- <div class="input-append">
- <input class="mini" id="appendedInput" name="appendedInput" size="16" type="text" />
- <label class="add-on active"><input type="checkbox" name="" id="" value="" checked="checked" /></label>
- </div>
+ <div class="span3">
+ <img class="small-icon" src="assets/img/icon-css3.png">
+ <h3>CSS3</h3>
+ <p>Progressively enhanced components for ultimate style.</p>
</div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="fileInput">File input</label>
- <div class="input">
- <input class="input-file" id="fileInput" name="fileInput" type="file" />
+ <div class="span3">
+ <img class="small-icon" src="assets/img/icon-github.png">
+ <h3>Open-source</h3>
+ <p>Built for and maintained by the community via <a href="https://github.com">GitHub</a>.</p>
</div>
- </div><!-- /clearfix -->
- </fieldset>
- <fieldset>
- <legend>Example form legend</legend>
- <div class="clearfix">
- <label id="optionsCheckboxes">List of options</label>
- <div class="input">
- <ul class="inputs-list">
- <li>
- <label>
- <input type="checkbox" name="optionsCheckboxes" value="option1" />
- <span>Option one is this and that—be sure to include why it’s great</span>
- </label>
- </li>
- <li>
- <label>
- <input type="checkbox" name="optionsCheckboxes" value="option2" />
- <span>Option two can also be checked and included in form results</span>
- </label>
- </li>
- <li>
- <label>
- <input type="checkbox" name="optionsCheckboxes" value="option2" />
- <span>Option three can—yes, you guessed it—also be checked and included in form results</span>
- </label>
- </li>
- <li>
- <label class="disabled">
- <input type="checkbox" name="optionsCheckboxes" value="option2" disabled />
- <span>Option four cannot be checked as it is disabled.</span>
- </label>
- </li>
- </ul>
- <span class="help-block">
- <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
- </span>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label>Date range</label>
- <div class="input">
- <div class="inline-inputs">
- <input class="small" type="text" value="May 1, 2011" />
- <input class="mini" type="text" value="12:00am" />
- to
- <input class="small" type="text" value="May 8, 2011" />
- <input class="mini" type="text" value="11:59pm" />
- <span class="help-inline">All times are shown as Pacific Standard Time (GMT -08:00).</span>
- </div>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="textarea">Textarea</label>
- <div class="input">
- <textarea class="xxlarge" id="textarea2" name="textarea2" rows="3"></textarea>
- <span class="help-block">
- Block of help text to describe the field above if need be.
- </span>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label id="optionsRadio">List of options</label>
- <div class="input">
- <ul class="inputs-list">
- <li>
- <label>
- <input type="radio" checked name="optionsRadios" value="option1" />
- <span>Option one is this and that—be sure to include why it’s great</span>
- </label>
- </li>
- <li>
- <label>
- <input type="radio" name="optionsRadios" value="option2" />
- <span>Option two can is something else and selecting it will deselect options 1</span>
- </label>
- </li>
- </ul>
- </div>
- </div><!-- /clearfix -->
- <div class="actions">
- <input type="submit" class="btn primary" value="Save changes"> <button type="reset" class="btn">Cancel</button>
- </div>
- </fieldset>
- </form>
- </div>
- </div><!-- /row -->
-
- <br />
-
- <div class="row">
- <div class="span4">
- <h2>Stacked forms</h2>
- <p>Add <code>.form-stacked</code> to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.</p>
- </div>
- <div class="span12">
- <form action="" class="form-stacked">
- <fieldset>
- <legend>Example form legend</legend>
- <div class="clearfix">
- <label for="xlInput3">X-Large input</label>
- <div class="input">
- <input class="xlarge" id="xlInput3" name="xlInput3" size="30" type="text" />
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="stackedSelect">Select</label>
- <div class="input">
- <select name="stackedSelect" id="stackedSelect">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
- </div>
- </div><!-- /clearfix -->
- </fieldset>
- <fieldset>
- <legend>Example form legend</legend>
- <div class="clearfix error">
- <label for="xlInput4">X-Large input</label>
- <div class="input">
- <input class="xlarge error" id="xlInput4" name="xlInput4" size="30" type="text" />
- <span class="help-inline">Small snippet of help text</span>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label id="optionsCheckboxes">List of options</label>
- <div class="input">
- <ul class="inputs-list">
- <li>
- <label>
- <input type="checkbox" name="optionsCheckboxes" value="option1" />
- <span>Option one is this and that—be sure to include why it’s great</span>
- </label>
- </li>
- <li>
- <label>
- <input type="checkbox" name="optionsCheckboxes" value="option2" />
- <span>Option two can also be checked and included in form results</span>
- </label>
- </li>
- </ul>
- <span class="help-block">
- <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
- </span>
+ <div class="span3">
+ <img class="small-icon" src="assets/img/icon-twitter.png">
+ <h3>Made at Twitter</h3>
+ <p>Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.</p>
</div>
- </div><!-- /clearfix -->
- </fieldset>
- <div class="actions">
- <button type="submit" class="btn primary">Save changes</button> <button type="reset" class="btn">Cancel</button>
+ </div><!--/row-->
</div>
- </form>
- </div>
- </div><!-- /row -->
-
- <div class="row">
- <div class="span4">
- <h2>Form field sizes</h2>
- <p>Customize any form <code>input</code>, <code>select</code>, or <code>textarea</code> width by adding just a few classes to your markup.</p>
- <p>As of v1.3.0, we have added the grid-based sizing classes for form elements. <strong>Please use the these over the existing <code>.mini</code>, <code>.small</code>, etc classes.</strong></p>
- </div>
- <div class="span12">
- <form action="">
- <div class="clearfix"><input class="span2" id="" name="" type="text" placeholder=".span2" /></div>
- <div class="clearfix"><input class="span3" id="" name="" type="text" placeholder=".span3" /></div>
- <div class="clearfix"><input class="span4" id="" name="" type="text" placeholder=".span4" /></div>
- <div class="clearfix"><input class="span5" id="" name="" type="text" placeholder=".span5" /></div>
- <div class="clearfix"><input class="span6" id="" name="" type="text" placeholder=".span6" /></div>
- <div class="clearfix"><input class="span7" id="" name="" type="text" placeholder=".span7" /></div>
- <div class="clearfix"><input class="span8" id="" name="" type="text" placeholder=".span8" /></div>
- <div class="clearfix"><input class="span9" id="" name="" type="text" placeholder=".span9" /></div>
- <div class="clearfix"><input class="span10" id="" name="" type="text" placeholder=".span10" /></div>
- <div class="clearfix"><input class="span11" id="" name="" type="text" placeholder=".span11" /></div>
- <div class="clearfix"><input class="span12" id="" name="" type="text" placeholder=".span12" /></div>
- </form>
- </div>
- </div>
-
- <div class="row">
- <div class="span4">
- <h2>Buttons</h2>
- <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
- <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
- </div>
- <div class="span12">
- <h3>Example buttons</h3>
- <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
- <div class="well" style="padding: 14px 19px;">
- <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button>
- </div>
- <h3>Alternate sizes</h3>
- <p>Fancy larger or smaller buttons? Have at it!</p>
- <div class="well">
- <a href="#" class="btn large primary">Primary action</a>
- <a href="#" class="btn large">Action</a>
- </div>
- <div class="well" style="padding: 16px 19px;">
- <a href="#" class="btn small primary">Primary action</a>
- <a href="#" class="btn small">Action</a>
- </div>
- <h3>Disabled state</h3>
- <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
- <h4>Links</h4>
- <div class="well">
- <a href="#" class="btn large primary disabled">Primary action</a>
- <a href="#" class="btn large disabled">Action</a>
- </div>
- <h4>Buttons</h4>
- <div class="well">
- <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button>
- </div>
- </div>
- </div><!-- /row -->
-</section>
-
-
-
-<!-- Navigation
-================================================== -->
-<section id="navigation">
- <div class="page-header">
- <h1>Navigation</h1>
- </div>
- <h2>Fixed topbar</h2>
- <div class="topbar-wrapper" style="z-index: 5;">
- <div class="topbar" data-dropdown="dropdown" >
- <div class="topbar-inner">
- <div class="container">
- <h3><a href="#">Project Name</a></h3>
- <ul class="nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown</a>
- <ul class="dropdown-menu">
- <li><a href="#">Secondary link</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
- </li>
- </ul>
- <form class="pull-left" action="">
- <input type="text" placeholder="Search" />
- </form>
- <ul class="nav secondary-nav">
- <li class="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown</a>
- <ul class="dropdown-menu">
- <li><a href="#">Secondary link</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div><!-- /topbar-inner -->
- </div><!-- /topbar -->
- </div><!-- /topbar-wrapper -->
-
- <div class="row">
- <div class="span5">
- <h4>What is it</h4>
- <p>Our topbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
- </div>
- <div class="span5">
- <h4>Customizable</h4>
- <p>All elements within, and the entire topbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
- </div>
- <div class="span6">
- <h4>Dropdowns included</h4>
- <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code>li</code> tags also support <code>.active</code> for showing current page selection.</p>
- </div>
- </div>
- <p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>body</code>.</p>
-
- <br />
-
- <div class="row">
- <div class="span4">
- <h2>Tabs and pills</h2>
- <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
- <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
- </div>
- <div class="span12">
- <ul class="tabs">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
- <li class="dropdown" data-dropdown="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown</a>
- <ul class="dropdown-menu">
- <li><a href="#">Secondary link</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
- </li>
- </ul>
-<pre class="prettyprint linenums">
-<ul class="tabs">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
-</ul>
-</pre>
- <ul class="pills">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
-<pre class="prettyprint linenums">
-<ul class="pills">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
-</ul>
-</pre>
- </div>
- </div><!-- /row -->
-
- <!-- Breadcrumbs -->
- <div class="row">
- <div class="span4">
- <h2>Breadcrumbs</h2>
- <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
- </div>
- <div class="span12">
- <ul class="breadcrumb">
- <li class="active">Home</li>
- </ul>
- <ul class="breadcrumb">
- <li><a href="#">Home</a> <span class="divider">/</span></li>
- <li class="active">Middle page</li>
- </ul>
- <ul class="breadcrumb">
- <li><a href="#">Home</a> <span class="divider">/</span></li>
- <li><a href="#">Middle page</a> <span class="divider">/</span></li>
- <li class="active">Another one</li>
- </ul>
- <ul class="breadcrumb">
- <li><a href="#">Home</a> <span class="divider">/</span></li>
- <li><a href="#">Middle page</a> <span class="divider">/</span></li>
- <li><a href="#">Another one</a> <span class="divider">/</span></li>
- <li class="active">You are here</li>
- </ul>
-<pre class="prettyprint linenums">
-<ul class="breadcrumb">
- <li><a href="#">Home</a> <span class="divider">/</span></li>
- <li><a href="#">Middle page</a> <span class="divider">/</span></li>
- <li><a href="#">Another one</a> <span class="divider">/</span></li>
- <li class="active">You are here</li>
-</ul>
-</pre>
- </div>
- </div>
-
- <!-- Pagination -->
- <div class="row">
- <div class="span4">
- <h2>Pagination</h2>
- <p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
- </div>
- <div class="span12">
- <div class="pagination">
- <ul>
- <li class="prev disabled"><a href="#">← Previous</a></li>
- <li class="active"><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li class="next"><a href="#">Next »</a></li>
- </ul>
- </div>
- <div class="pagination">
- <ul>
- <li class="prev"><a href="#">← Previous</a></li>
- <li class="active"><a href="#">10</a></li>
- <li><a href="#">11</a></li>
- <li><a href="#">12</a></li>
- <li class="disabled"><a href="#">…</a></li>
- <li><a href="#">19</a></li>
- <li><a href="#">20</a></li>
- <li><a href="#">21</a></li>
- <li class="next"><a href="#">Next »</a></li>
- </ul>
- </div>
- <div class="pagination">
- <ul>
- <li class="prev"><a href="#">← Previous</a></li>
- <li><a href="#">10</a></li>
- <li><a href="#">11</a></li>
- <li><a href="#">12</a></li>
- <li><a href="#">13</a></li>
- <li><a href="#">14</a></li>
- <li class="active"><a href="#">15</a></li>
- <li><a href="#">16</a></li>
- <li><a href="#">17</a></li>
- <li><a href="#">18</a></li>
- <li><a href="#">19</a></li>
- <li><a href="#">20</a></li>
- <li class="next"><a href="#">Next »</a></li>
- </ul>
- </div>
-<pre class="prettyprint linenums">
-<div class="pagination">
- <ul>
- <li class="prev disabled"><a href="#">&larr; Previous</a></li>
- <li class="active"><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li class="next"><a href="#">Next &rarr;</a></li>
- </ul>
-</div>
-</pre>
- </div>
- </div><!-- /row -->
-
-</section>
-
-
-
-<!-- Alerts & Messages
-================================================== -->
-<section id="alerts">
- <div class="page-header">
- <h1>Alerts & Errors <small>Styles for success, warning, and error messages or alerts</small></h1>
- </div>
- <!-- Basic alert messages -->
- <div class="row">
- <div class="span4">
- <h2>Basic alerts</h2>
- <p><code>.alert-message</code></p>
- <p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
- <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
- </div>
- <div class="span12">
- <div class="alert-message warning">
- <a class="close" href="#">×</a>
- <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
- </div>
- <div class="alert-message error">
- <a class="close" href="#">×</a>
- <p><strong>Oh snap!</strong> Change this and that and try again.</p>
- </div>
- <div class="alert-message success">
- <a class="close" href="#">×</a>
- <p><strong>Well done!</strong> You successfully read this alert message.</p>
- </div>
- <div class="alert-message info">
- <a class="close" href="#">×</a>
- <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
- </div>
-
- <h4>Example code</h4>
-<pre class="prettyprint linenums">
-<div class="alert-message warning">
- <a class="close" href="#">×</a>
- <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
-</div>
-</pre>
- </div>
- </div><!-- /row -->
- <!-- Block messages -->
- <div class="row">
- <div class="span4">
- <h2>Block messages</h2>
- <p><code>.alert-message.block-message</code></p>
- <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
- <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
- </div>
- <div class="span12">
- <div class="alert-message block-message warning">
- <a class="close" href="#">×</a>
- <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
- <div class="alert-actions">
- <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
- </div>
- </div>
- <div class="alert-message block-message error">
- <a class="close" href="#">×</a>
- <p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p>
- <ul>
- <li>Duis mollis est non commodo luctus</li>
- <li>Nisi erat porttitor ligula</li>
- <li>Eget lacinia odio sem nec elit</li>
- </ul>
- <div class="alert-actions">
- <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
- </div>
- </div>
- <div class="alert-message block-message success">
- <a class="close" href="#">×</a>
- <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
- <div class="alert-actions">
- <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
- </div>
- </div>
- <div class="alert-message block-message info">
- <a class="close" href="#">×</a>
- <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
- <div class="alert-actions">
- <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
- </div>
- </div>
-
- <h4>Example code</h4>
-<pre class="prettyprint linenums">
-<div class="alert-message block-message warning">
- <a class="close" href="#">×</a>
- <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
- <div class="alert-actions">
- <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
- </div>
-</div>
-</pre>
- </div>
- </div><!-- /row -->
-</section>
-
-
-<!-- Popovers
-================================================== -->
-<section id="popovers">
- <div class="page-header">
- <h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1>
- </div>
- <div class="row">
- <div class="span4">
- <h2>Modals</h2>
- <p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p>
- <p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p>
- </div>
- <div class="span12">
- <div class="well" style="background-color: #888; border: none; padding: 40px;">
- <!-- Modal -->
- <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
- <div class="modal-header">
- <a href="#" class="close">×</a>
- <h3>Modal Heading</h3>
- </div>
- <div class="modal-body">
- <p>One fine body…</p>
- </div>
- <div class="modal-footer">
- <a href="#" class="btn primary">Primary</a>
- <a href="#" class="btn secondary">Secondary</a>
- </div>
- </div>
- </div>
- </div>
- </div><!-- /row -->
-
- <!-- Tooltips -->
- <div class="row">
- <div class="span4">
- <h2>Tooltips</h2>
- <p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
- <p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p>
- </div>
- <div class="span12">
- <div class="twipsies well">
- <div style="position: relative">
- <p class="muted" style="margin-bottom: 0">
-Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae.
- </p>
- </div>
- </div>
- </div>
- </div><!-- /row -->
-
- <!-- Popovers -->
- <div class="row">
- <div class="span4">
- <h2>Popovers</h2>
- <p>Use popovers to provide subtextual information to a page without affecting layout.</p>
- <p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p>
- </div>
- <div class="span12">
- <div class="well popover-well">
- <div class="popover-wrapper">
- <div class="popover left">
- <div class="arrow"></div>
- <div class="inner">
- <h3 class="title">Popover Title</h3>
- <div class="content">
- <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
- </div>
- </div>
- </div>
- <img class="large-bird" src="assets/img/bird.png" >
- </div>
- </div>
- </div>
- </div><!-- /row -->
-</section>
-
-
-<!-- Using Javascript w/ Bootstrap
- ================================================== -->
-
- <section id="javascript">
- <div class="page-header">
- <h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1>
- </div>
- <div class="row">
- <div class="span4">
- <h2>Getting started</h2>
- <p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p>
- <p><a class="btn primary" href="./javascript.html">View javascript docs »</a></p>
- </div>
- <div class="span12">
- <h3>What's included</h3>
- <p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th style="width: 150px;">File</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><a href="./javascript.html#modal">bootstrap-modal.js</a></td>
- <td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td>
- </tr>
- <tr>
- <td><a href="./javascript.html#alerts">bootstrap-alerts.js</a></td>
- <td>The alert plugin is a super tiny class for adding close functionality to alerts.</td>
- </tr>
- <tr>
- <td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
- <td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td>
- </tr>
- <tr>
- <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
- <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td>
- </tr>
- <tr>
- <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
- <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
- </tr>
- <tr>
- <td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
- <td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td>
- </tr>
- <tr>
- <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
- <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
- </tr>
- </tbody>
- </table>
- <h3>Is javascript necessary?</h3>
- <p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p>
- <p>However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.</p>
- <p>For more information and to see some live demos, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p>
- </div>
- </div>
-
-
-<!-- Using Bootstrap w/ Less
-================================================== -->
-<section id="less">
-<div class="page-header">
- <h1>Using Bootstrap with Less <small>Supercharge your CSS with variables, mixins, and functions</small></h1>
-</div>
-<div class="row">
- <div class="span4">
- <p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">Less</a>, a CSS preprocessor for faster and easier web development.</p>
- <p>Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.</p>
- </div>
- <div class="span12">
- <h2>How to use it</h2>
- <p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p>
-<pre class="prettyprint linenums">
-<link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
-<script src="js/less-1.1.3.min.js"></script></pre>
-<p>Not feeling the .js solution? <a href="http://incident57.com/less" target="_blank">Try the Less Mac app</a> or <a href="http://lesscss.org/#-client-side-usage" target="_blank">use Node.js</a> to compile when you deploy your code.</p>
-
- <h2>What’s included</h2>
- <p>Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p>
- <h3>Variables</h3>
- <p>Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.</p>
-<pre class="prettyprint linenums">
-// Links
-@linkColor: #8b59c2;
-@linkColorHover: darken(@linkColor, 10);
-
-// Grays
-@black: #000;
-@grayDark: lighten(@black, 25%);
-@gray: lighten(@black, 50%);
-@grayLight: lighten(@black, 70%);
-@grayLighter: lighten(@black, 90%);
-@white: #fff;
-
-// Accent Colors
-@blue: #08b5fb;
-@green: #46a546;
-@red: #9d261d;
-@yellow: #ffc40d;
-@orange: #f89406;
-@pink: #c3325f;
-@purple: #7a43b6;
-
-// Baseline grid
-@basefont: 13px;
-@baseline: 18px;
-</pre>
-
-<h3>Commenting</h3>
-<p>Less also provides another style of commenting in addition to CSS’s normal <code>/* ... */</code> syntax.</p>
-<pre class="prettyprint linenums">
-// This is a comment
-/* This is also a comment */
-</pre>
-
-<h3>Mixins up the wazoo</h3>
-<p>Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.</p>
-<h4>Font stacks</h4>
-<pre class="prettyprint linenums">
-#font {
- .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- ...
-}
-</pre>
-<h4>Gradients</h4>
-<pre class="prettyprint linenums">
-#gradient {
- ...
- .vertical (@startColor: #555, @endColor: #333) {
- background-color: @endColor;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
- background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
- background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(@startColor, @endColor); // The standard
- }
- ...
-}
-</pre>
-
-<h3>Operations</h3>
-<p>Get fancy and perform some math to generate flexible and powerful mixins like the one below.</p>
-<pre class="prettyprint linenums">
-// Griditude
-@gridColumns: 16;
-@gridColumnWidth: 40px;
-@gridGutterWidth: 20px;
-@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-
-// Make some columns
-.columns(@columnSpan: 1) {
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
-}
-</pre>
-
- <h2>Compiling Less</h2>
- <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
- <h3>Ways to compile</h3>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th style="width: 120px;">Method</th>
- <th>Steps</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Node with makefile</td>
- <td>
- <p>Install the less command line compiler with npm by running the following command:</p>
- <pre>$ npm install lessc</pre>
- <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
- <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
- </td>
- </tr>
- <td>Javascript</td>
- <td>
- <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p>
-<pre class="prettyprint linenums">
-<link rel="stylesheet/less" href="/path/to/bootstrap.less">
-<script src="/path/to/less.js"></script>
-</pre>
- <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
- </td>
- </tr>
- <tr>
- <td>Command line</td>
- <td>
- <p>If you already have the less command line tool installed, simply run the following command:</p>
- <pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
- <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
- </td>
- </tr>
- <tr>
- <td>Less Mac app</td>
- <td>
- <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
- <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
-</div>
-
-</section>
+ </div><!-- /#overview -->
+ <!-- Footer
+ ================================================== -->
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+ <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ </footer>
</div><!-- /container -->
- <footer class="footer">
- <div class="container">
- <p class="pull-right"><a href="#">Back to top</a></p>
- <p>
- Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
- Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
- </p>
- </div>
- </footer>
+ <!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
+
+ <script type="text/javascript">
+ // When ready...
+ window.addEventListener("load",function() {
+ // Set a timeout...
+ setTimeout(function(){
+ // Hide the address bar!
+ window.scrollTo(0, 1);
+ }, 0);
+ });
+
+ // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
+ $(document).ready(function() {
+ $('.nav .active').click(function(e) {
+ e.preventDefault();
+ $(this).siblings().toggle();
+ });
+ });
+ </script>
+
+ <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-transitions.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="assets/js/application.js"></script>
</body>
</html>
diff --git a/docs/javascript.html b/docs/javascript.html
index f001ad80834a2ef3de5030c7a9bf015d28f70a82..568991969b6517d01cc3a12ff868f7a38bdb01da 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
@@ -11,18 +12,6 @@
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
- <!-- Le javascript -->
- <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
- <script src="assets/js/google-code-prettify/prettify.js"></script>
- <script>$(function () { prettyPrint() })</script>
- <script src="../js/bootstrap-modal.js"></script>
- <script src="../js/bootstrap-alerts.js"></script>
- <script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-popover.js"></script>
- <script src="../js/bootstrap-dropdown.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
- <script src="../js/bootstrap-tabs.js"></script>
-
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
@@ -33,45 +22,151 @@
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+
+ <!-- Le javascript -->
+ <!-- placed up here so that the inline demos can be next to their markup -->
+ <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
+
+ <script type="text/javascript">
+ // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
+ $(document).ready(function() {
+ $('.nav .active').click(function(e) {
+ e.preventDefault();
+ $(this).siblings().toggle();
+ });
+ });
+ </script>
+
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-transition.js"></script>
+ <script src="../js/bootstrap-alert.js"></script>
+ <script src="../js/bootstrap-modal.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="../js/bootstrap-tab.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-popover.js"></script>
+ <script src="../js/bootstrap-button.js"></script>
+ <script src="../js/bootstrap-collapse.js"></script>
+ <script>
+ $(function () {
+ // twipsy demo
+ $("a[rel=twipsy]").twipsy({
+ live: true
+ })
+
+ //popover demo
+ $("a[rel=popover]")
+ .popover({
+ offset: 10
+ })
+ .click(function(e) {
+ e.preventDefault()
+ })
+ })
+ </script>
+
</head>
<body id="bootstrap-js">
- <!-- Topbar
+ <!-- Navbar
================================================== -->
- <div class="topbar" data-scrollspy="scrollspy" >
- <div class="fill">
+ <div class="navbar navbar-fixed">
+ <div class="navbar-inner">
<div class="container">
- <h3><a href="#">Bootstrap JS</a></h3>
- <ul>
- <li><a href="#overview">Overview</a></li>
- <li><a href="#modal">Modals</a></li>
- <li><a href="#dropdown">Dropdown</a></li>
- <li><a href="#scrollspy">ScrollSpy</a></li>
- <li><a href="#tabs">Tabs</a></li>
- <li><a href="#twipsy">Twipsy</a></li>
- <li><a href="#popover">Popover</a></li>
- <li><a href="#alerts">Alerts</a></li>
+ <a class="brand" href="./index.html">Bootstrap</a>
+ <ul class="nav">
+ <li><a href="./index.html">Overview</a></li>
+ <li><a href="./scaffolding.html">Scaffolding</a></li>
+ <li><a href="./base-css.html">Base CSS</a></li>
+ <li><a href="./components.html">Components</a></li>
+ <li class="active"><a href="./javascript.html">Javascript plugins</a></li>
+ <li><a href="./less.html">Using LESS</a></li>
</ul>
</div>
</div>
</div>
- <!-- Masthead (blueprinty thing)
- ================================================== -->
- <header class="jumbotron subhead" id="overview">
- <div class="inner">
- <div class="container">
- <h1>Javascript for Bootstrap</h1>
- <p class="lead">
- Bring Bootstrap's components to life with new, custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.
- </p>
- <p><a href="./index.html">← Back to Bootstrap home</a></p>
- </div><!-- /container -->
- </div>
- </header>
-
<div class="container">
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron subhead" id="overview">
+ <h1>Javascript for Bootstrap</h1>
+ <p class="lead">Bring Bootstrap's components to life with flexible, custom javascript plugins for many of our custom components that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.</p>
+ </header>
+
+
+<!-- Using Javascript w/ Bootstrap
+ ================================================== -->
+
+ <section id="javascript">
+ <div class="page-header">
+ <h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1>
+ </div>
+ <div class="row">
+ <div class="span3">
+ <h2>Getting started</h2>
+ <p>Integrating javascript with the Bootstrap library is super easy. Here we go over the basics and provide you with some awesome plugins to get you started!</p>
+ </div>
+ <div class="span9">
+ <h3>What's included</h3>
+ <p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
+ <table class="striped-table">
+ <thead>
+ <tr>
+ <th style="width: 150px;">File</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><a href="./javascript.html#modal">bootstrap-modal.js</a></td>
+ <td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#alert">bootstrap-alert.js</a></td>
+ <td>The alert plugin is a super tiny class for adding close functionality to alerts.</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#dropdown">bootstrap-dropdown.js</a></td>
+ <td>This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
+ <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#tabs">bootstrap-tab.js</a></td>
+ <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
+ <td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
+ <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#button">bootstrap-button.js</a></td>
+ <td>This plugin offers additional functionality for managing button state.</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td>
+ <td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td>
+ </tr>
+ </tbody>
+ </table>
+ <h3>Is javascript necessary?</h3>
+ <p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p>
+ <p>However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.</p>
+ <p>For more information and to see some live demos, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p>
+ </div>
+ </div>
+</section>
+
<!-- Modal
================================================== -->
@@ -81,15 +176,15 @@
<h1>Modals <small>bootstrap-modal.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
+ <div class="span3 columns">
<p>Our Modal plugin is a super slim take on the traditional modal js plugin, taking special care to include only the bare functionality that we require here at twitter.</p>
<a href="../js/bootstrap-modal.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h3>Using bootstrap-modal</h3>
- <pre class="prettyprint linenums">$('#my-modal').modal(options)</pre>
+ <pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
<h3>Options</h3>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@@ -102,52 +197,48 @@
<tr>
<td>backdrop</td>
<td>boolean</td>
- <td>false</td>
+ <td>true</td>
<td>Includes a modal-backdrop element</td>
</tr>
<tr>
<td>keyboard</td>
<td>boolean</td>
- <td>false</td>
+ <td>true</td>
<td>Closes the modal when escape key is pressed</td>
</tr>
<tr>
<td>show</td>
<td>boolean</td>
- <td>false</td>
+ <td>true</td>
<td>Opens modal on class initialization</td>
</tr>
</tbody>
</table>
<h3>Markup</h3>
- <p>You can activate modals on your page easily without having to write a single line of javascript. Just give an element a <code>data-controls-modal</code> attribute which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes as well.</p>
+ <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p>
<pre class="prettyprint linenums">
-<a class="btn" data-controls-modal="my-modal" data-backdrop="true" >Launch Modal</a>
+<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
</pre>
- <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to your <code>.modal</code> element (refer to the demo to see this in action).</p>
+ <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p>
<h3>Methods</h3>
<h4>.modal(options)</h4>
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.
<pre class="prettyprint linenums">
-$('#my-modal').modal({
- closeOnEscape: true
+$('#myModal').modal({
+ keyboard: false
})</pre>
<h4>.modal('toggle')</h4>
<p>Manually toggles a modal.</p>
- <pre class="prettyprint linenums">$('#my-modal').modal('toggle')</pre>
+ <pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
<h4>.modal('show')</h4>
<p>Manually opens a modal.</p>
- <pre class="prettyprint linenums">$('#my-modal').modal('show')</pre>
+ <pre class="prettyprint linenums">$('#myModal').modal('show')</pre>
<h4>.modal('hide')</h4>
<p>Manually hides a modal.</p>
- <pre class="prettyprint linenums">$('#my-modal').modal('hide')</pre>
- <h4>.modal(true)</h4>
- <p>Returns an elements modal class instance.</p>
- <pre class="prettyprint linenums">$('#my-modal').modal(true)</pre>
- <p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('modal')</code>.</p>
+ <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
<h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th style="width: 150px;">Event</th>
@@ -175,27 +266,28 @@ $('#my-modal').modal({
</table>
<pre class="prettyprint linenums">
-$('#my-modal').bind('hidden', function () {
+$('#myModal').bind('hidden', function () {
// do something ...
})</pre>
<h3>Demo</h3>
<!-- sample modal content -->
- <div id="modal-from-dom" class="modal hide fade">
+ <div id="myModal" class="modal hide fade">
<div class="modal-header">
- <a href="#" class="close">×</a>
+ <a href="#" class="close" data-dismiss="modal" >×</a>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
- <a href="#" class="btn primary">Primary</a>
- <a href="#" class="btn secondary">Secondary</a>
+ <a href="#" class="btn primary">Save changes</a>
+ <a href="#" class="btn" data-dismiss="modal" >Close</a>
</div>
</div>
- <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Launch Modal</button>
-
+ <a data-toggle="modal" href="#myModal" class="btn danger">
+ Launch Modal
+ </a>
</div>
</div>
</section>
@@ -209,20 +301,20 @@ $('#my-modal').bind('hidden', function () {
<h1>Dropdown <small>bootstrap-dropdown.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
- <p>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</p>
+ <div class="span3 columns">
+ <p>This plugin is for adding dropdown interaction to the Bootstrap navbar or tabbed navigations.</p>
<a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h3>Using boostrap-dropdown.js</h3>
- <pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
+ <pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre>
<h3>Markup</h3>
- <p>To quickly add dropdown functionality to any nav element, use the <code>data-dropdown</code> attribute. Any valid bootstrap dropdown will automatically be activated.</p>
+ <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code>. Any valid bootstrap dropdown will automatically be activated.</p>
<pre class="prettyprint linenums">
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
- <li class="dropdown" data-dropdown="dropdown" >
- <a href="#" class="dropdown-toggle">Dropdown</a>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
@@ -231,46 +323,43 @@ $('#my-modal').bind('hidden', function () {
</ul>
</li>
</ul></pre>
- <p><span class="label notice">Notice</span> If your ui has several dropdowns, consider adding the <code>data-dropdown</code> attribute to a more significant container element like <code>.tabs</code> or <code>.topbar</code>.
<h3>Methods</h3>
<h4>$().dropdown()</h4>
<p>
- A programatic api for activating menus for a given topbar or tabbed navigation.
+ A programatic api for activating menus for a given navbar or tabbed navigation.
</p>
<h3>Demo</h3>
- <div class="topbar-wrapper">
- <div id="topbar-example" class="topbar" data-dropdown="dropdown">
- <div class="topbar-inner">
- <div class="container">
- <h3><a href="#">Project Name</a></h3>
- <ul>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- </ul>
- <form action="">
- <input type="text" placeholder="Search" />
- </form>
- <ul class="nav secondary-nav">
- <li class="menu">
- <a href="#" class="menu">Dropdown 1</a>
- <ul class="menu-dropdown">
- <li><a href="#">Secondary link</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
- </li>
- <li class="menu">
- <a href="#" class="menu">Dropdown 2</a>
- <ul class="menu-dropdown">
- <li><a href="#">Secondary link</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
- </li>
- </ul>
- </div>
+ <div id="navbar-example" class="navbar navbar-static">
+ <div class="navbar-inner">
+ <div class="container" style="width: auto;">
+ <a class="brand" href="#">Project Name</a>
+ <ul class="nav">
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ </ul>
+ <form class="form-search navbar-search pull-left" action="">
+ <input type="text" class="search-query span2" placeholder="Search">
+ </form>
+ <ul class="nav secondary-nav">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
+ </ul>
</div>
</div>
</div>
@@ -286,29 +375,68 @@ $('#my-modal').bind('hidden', function () {
<h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
- <p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.</p>
+ <div class="span3 columns">
+ <p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap navbar.</p>
<a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h2>Using boostrap-scrollspy.js</h2>
- <pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
+ <pre class="prettyprint linenums">$('#navbar').dropdown()</pre>
<h3>Markup</h3>
- <p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.topbar</code>.
- <pre class="prettyprint linenums"><div class="topbar" data-scrollspy="scrollspy" >...</div></pre>
- <h3>Methods</h3>
- <h4>$().scrollspy()</h4>
- <p>
- Auto activates navigation buttons by users scroll position.
- </p>
- <pre class="prettyprint linenums">$('body > .topbar').scrollSpy()</pre>
- <p><span class="label notice">Notice</span> Topbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.
- </p>
- <h4>.scrollspy('refresh')</h4>
- <p>The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body.</p>
- <pre class="prettyprint linenums">$('body').scrollspy('refresh')</pre>
+ <p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body).
+ <pre class="prettyprint linenums"><body data-spy="scroll" >...</body></pre>
+ <p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.
<h3>Demo</h3>
- <p>Checkout the the topbar navigation on this page.</p>
+ <p>
+ Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p>
+ <p>
+
+ <div id="navbarExample" class="navbar navbar-static">
+ <div class="navbar-inner">
+ <div class="container" style="width: auto;">
+ <a class="brand" href="#">Project Name</a>
+ <ul class="nav">
+ <li><a href="#fat">@fat</a></li>
+ <li><a href="#mdo">@mdo</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#one">one</a></li>
+ <li><a href="#two">two</a></li>
+ <li class="divider"></li>
+ <li><a href="#three">three</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div data-spy="scroll" data-target="#navbarExample" class="scrollspy-example">
+ <h4 id="fat">@fat</h4>
+ <p>
+ Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
+ </p>
+ <h4 id="mdo">@mdo</h4>
+ <p>
+ Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
+ </p>
+ <h4 id="one">one</h4>
+ <p>
+ Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
+ </p>
+ <h4 id="two">two</h4>
+ <p>
+ In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
+ </p>
+ <h4 id="three">three</h4>
+ <p>
+ Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
+ </p>
+ <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
+ </p>
+ </div>
+
</div>
</div>
</section>
@@ -318,23 +446,28 @@ $('#my-modal').bind('hidden', function () {
<section id="tabs">
<div class="page-header">
- <h1>Tabs <small>bootstrap-tabs.js</small></h1>
+ <h1>Tabs <small>bootstrap-tab.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
+ <div class="span3 columns">
<p>This plugin adds quick, dynamic tab and pill functionality.</p>
- <a href="../js/bootstrap-tabs.js" target="_blank" class="btn primary">Download</a>
+ <a href="../js/bootstrap-tab.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
- <h3>Using boostrap-tabs.js</h3>
- <pre class="prettyprint linenums">$('.tabs').tabs()</pre>
+ <div class="span9 columns">
+ <h3>Using boostrap-tab.js</h3>
+ <pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
<h3>Markup</h3>
- <p>You can activate a tab or pill navigation without writing any javascript by simply giving them a <code>data-tabs</code> or <code>data-pills</code> attribute.</p>
- <pre class="prettyprint linenums"> <ul class="tabs" data-tabs="tabs" >...</ul></pre>
+ <p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
+<pre class="prettyprint linenums">
+<ul class="tabs">
+ <li><a href="#home" data-toggle="tab">Home</a></li>
+ <li><a href="#profile" data-toggle="tab">Profile</a></li>
+ <li><a href="http://twitter.com/fat">twitter</a></li>
+</ul></pre>
<h3>Methods</h3>
- <h4>$().tabs or $().pills</h4>
+ <h4>$().tab</h4>
<p>
- Activates tab and pill functionality for a given container. Tab links should reference id's in the document.
+ Activates tab functionality for a given element controller. Tab should have either a `data-target` or an `href` referencing a node in the dom.
</p>
<pre class="prettyprint linenums">
<ul class="tabs">
@@ -353,30 +486,68 @@ $('#my-modal').bind('hidden', function () {
<script>
$(function () {
- $('.tabs').tabs()
+ $('.tabs a:last').tab('show')
})
</script></pre>
</p>
+ <h3>Events</h3>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show</td>
+ <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
+ </tr>
+ <tr>
+ <td>show</td>
+ <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <pre class="prettyprint linenums">
+$('a[data-toggle="tab"]').bind('shown', function (e) {
+ e.target // activated tab
+ e.relatedTarget // previous tab
+})</pre>
<h3>Demo</h3>
- <ul class="tabs" data-tabs="tabs" >
- <li class="active"><a href="#home">Home</a></li>
- <li><a href="#profile">Profile</a></li>
- <li><a href="#messages">Messages</a></li>
- <li><a href="#settings">Settings</a></li>
+ <ul id="tab" class="tabs">
+ <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
+ <li><a href="#profile" data-toggle="tab">Profile</a></li>
+ <li><a href="#messages" data-toggle="tab">Messages</a></li>
+ <li><a href="#settings" data-toggle="tab">Settings</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
+ <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
+ </ul>
+ </li>
</ul>
- <div id="my-tab-content" class="tab-content">
- <div class="active" id="home">
+ <div id="myTabContent" class="tab-content">
+ <div class="active tab-pane" id="home">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
- <div id="profile">
+ <div class="tab-pane" id="profile">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
- <div id="messages">
+ <div class="tab-pane" id="messages">
<p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p>
</div>
- <div id="settings">
+ <div class="tab-pane" id="settings">
<p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p>
</div>
+ <div class="tab-pane" id="dropdown1">
+ <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
+ </div>
+ <div class="tab-pane" id="dropdown2">
+ <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
+ </div>
</div>
</div>
</div>
@@ -390,15 +561,15 @@ $('#my-modal').bind('hidden', function () {
<h1>Twipsy <small>bootstrap-twipsy.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
+ <div class="span3 columns">
<p>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!</p>
<a href="../js/bootstrap-twipsy.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h3>Using bootstrap-twipsy.js</h3>
<pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
<h3>Options</h3>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@@ -414,36 +585,12 @@ $('#my-modal').bind('hidden', function () {
<td>true</td>
<td>apply a css fade transition to the tooltip</td>
</tr>
- <tr>
- <td>delayIn</td>
- <td>number</td>
- <td>0</td>
- <td>delay before showing tooltip (ms)</td>
- </tr>
- <tr>
- <td>delayOut</td>
- <td>number</td>
- <td>0</td>
- <td>delay before hiding tooltip (ms)</td>
- </tr>
- <tr>
- <td>fallback</td>
- <td>string</td>
- <td>''</td>
- <td>text to use when no tooltip title is present</td>
- </tr>
<tr>
<td>placement</td>
<td>string</td>
<td>'above'</td>
<td>how to position the tooltip - above | below | left | right</td>
</tr>
- <tr>
- <td>html</td>
- <td>boolean</td>
- <td>false</td>
- <td>allows html content within tooltip</td>
- </tr>
<tr>
<td>live</td>
<td>boolean</td>
@@ -456,20 +603,27 @@ $('#my-modal').bind('hidden', function () {
<td>0</td>
<td>pixel offset of tooltip from target element</td>
</tr>
- <tr>
- <td>title</td>
- <td>string | function</td>
- <td>'title'</td>
- <td>attribute or method for retrieving title text</td>
- </tr>
<tr>
<td>trigger</td>
<td>string</td>
<td>'hover'</td>
<td>how tooltip is triggered - hover | focus | manual</td>
</tr>
+ <tr>
+ <td>delay</td>
+ <td>number | object</td>
+ <td>0</td>
+ <td>
+ <p>delay showing/hiding the tooltip (ms)</p>
+ <p>If a number is supplied, delay is applied to both hide/show</p>
+ <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+ </td>
+ </tr>
</tbody>
</table>
+ <p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p>
+ <h3>Markup</h3>
+ For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just set the live flag to true, however we recommend you know what you are doing if you do that. :)
<h3>Methods</h3>
<h4>$().twipsy(options)</h4>
<p>Attaches a twipsy handler to an element collection.</p>
@@ -479,22 +633,11 @@ $('#my-modal').bind('hidden', function () {
<h4>.twipsy('hide')</h4>
<p>Hides an elements twipsy.</p>
<pre class="prettyprint linenums">$('#element').twipsy('hide')</pre>
- <h4>.twipsy(true)</h4>
- <p>Returns an elements twipsy class instance.</p>
- <pre class="prettyprint linenums">$('#element').twipsy(true)</pre>
- <p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('twipsy')</code>.</p>
<h3>Demo</h3>
<div class="well">
<p class="muted">Tight pants next level keffiyeh <a href="#" rel='twipsy' title='Some title text'>you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
</div>
- <script>
- $(function () {
- $("a[rel=twipsy]").twipsy({
- live: true
- })
- })
- </script>
</div>
</div>
</section>
@@ -507,15 +650,15 @@ $('#my-modal').bind('hidden', function () {
<h1>Popovers <small>bootstrap-popover.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
+ <div class="span3 columns">
<p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p>
<a href="../js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h3>Using boostrap-popover.js</h3>
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
<h3>Options</h3>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@@ -532,34 +675,16 @@ $('#my-modal').bind('hidden', function () {
<td>apply a css fade transition to the tooltip</td>
</tr>
<tr>
- <td>delayIn</td>
- <td>number</td>
- <td>0</td>
- <td>delay before showing tooltip (ms)</td>
- </tr>
- <tr>
- <td>delayOut</td>
- <td>number</td>
+ <td>delay</td>
+ <td>number | object</td>
<td>0</td>
- <td>delay before hiding tooltip (ms)</td>
- </tr>
- <tr>
- <td>fallback</td>
- <td>string</td>
- <td>''</td>
- <td>text to use when no tooltip title is present</td>
+ <td>delay before showing/hiding the tooltip (ms)</td>
</tr>
<tr>
<td>placement</td>
<td>string</td>
<td>'right'</td>
- <td>how to position the tooltip - above | below | left | right</td>
- </tr>
- <tr>
- <td>html</td>
- <td>boolean</td>
- <td>false</td>
- <td>allows html content within tooltip</td>
+ <td>how to position the popover - above | below | left | right</td>
</tr>
<tr>
<td>live</td>
@@ -573,18 +698,6 @@ $('#my-modal').bind('hidden', function () {
<td>0</td>
<td>pixel offset of tooltip from target element</td>
</tr>
- <tr>
- <td>title</td>
- <td>string | function</td>
- <td>'title'</td>
- <td>attribute or method for retrieving title text</td>
- </tr>
- <tr>
- <td>content</td>
- <td>string | function</td>
- <td>'data-content'</td>
- <td>attribute or method for retrieving content text</td>
- </tr>
<tr>
<td>trigger</td>
<td>string</td>
@@ -593,6 +706,11 @@ $('#my-modal').bind('hidden', function () {
</tr>
</tbody>
</table>
+ <p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p>
+ <h3>Markup</h3>
+ <p>
+ For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just set the live flag to true, however we recommend you know what you are doing if you do that. :)
+ </p>
<h3>Methods</h3>
<h4>$().popover(options)</h4>
<p>Initializes popovers for an element collection.</p>
@@ -604,39 +722,29 @@ $('#my-modal').bind('hidden', function () {
<pre class="prettyprint linenums">$('#element').popover('hide')</pre>
<h3>Demo</h3>
<a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
- <script>
- $(function () {
- $("a[rel=popover]")
- .popover({
- offset: 10
- })
- .click(function(e) {
- e.preventDefault()
- })
- })
- </script>
</div>
</div>
</section>
- <!-- Alerts
+ <!-- Alert
================================================== -->
- <section id="alerts">
+ <section id="alert">
<div class="page-header">
- <h1>Alerts <small>bootstrap-alerts.js</small></h1>
+ <h1>Alert <small>bootstrap-alert.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
+ <div class="span3 columns">
<p>The alert plugin is a super tiny class for adding close functionality to alerts.</p>
<a href="../js/bootstrap-alerts.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h3>Using bootstrap-alerts.js</h3>
<pre class="prettyprint linenums">$(".alert-message").alert()</pre>
<h3>Markup</h3>
- <p>Just add a <code>data-alert</code> attribute to your alert messages to automatically give them close functionality.</p>
+ <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
+ <pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre>
<h3>Methods</h3>
<h4>$().alert()</h4>
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
@@ -644,12 +752,12 @@ $('#my-modal').bind('hidden', function () {
<p>Closes an alert.</p>
<pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
<h3>Demo</h3>
- <div class="alert-message warning fade in" data-alert="alert" >
- <a class="close" href="#">×</a>
+ <div class="alert-message warning fade in">
+ <a class="close" data-dismiss="alert" href="#">×</a>
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
</div>
- <div class="alert-message block-message error fade in" data-alert="alert" >
- <a class="close" href="#">×</a>
+ <div class="alert-message block-message error fade in">
+ <a class="close" data-dismiss="alert" href="#">×</a>
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
@@ -660,17 +768,267 @@ $('#my-modal').bind('hidden', function () {
</section>
- </div><!-- /container -->
+ <!-- Button
+ ================================================== -->
- <footer class="footer">
- <div class="container">
- <p class="pull-right"><a href="#">Back to top</a></p>
- <p>
- Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
- Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
- </p>
+ <section id="button">
+ <div class="page-header">
+ <h1>Button <small>bootstrap-button.js</small></h1>
</div>
- </footer>
+ <div class="row">
+ <div class="span3 columns">
+ <p>This plugin offers additional functionality for managing button state.</p>
+ <a href="../js/bootstrap-button.js" target="_blank" class="btn primary">Download</a>
+ </div>
+ <div class="span9 columns">
+ <h3>Using bootstrap-button.js</h3>
+ <pre class="prettyprint linenums">$('.tabs').button()</pre>
+ <h3>Markup</h3>
+ <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
+<pre class="prettyprint linenums">
+<!-- Add data-toggle="button" to activate toggling on a single button -->
+<button class="btn" data-toggle="button">Single Toggle</button>
+<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group -->
+<div class="btn-group" data-toggle="buttons-checkbox">
+ <button class="btn">Left</button>
+ <button class="btn">Middle</button>
+ <button class="btn">Right</button>
+</div>
+
+<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group -->
+<div class="btn-group" data-toggle="buttons-radio">
+ <button class="btn">Left</button>
+ <button class="btn">Middle</button>
+ <button class="btn">Right</button>
+</div>
+</pre>
+ <h3>Methods</h3>
+ <h4>$().button('toggle')</h4>
+ <p>Toggles push state. Gives btn the look that it's been activated.</p>
+ <p><span class="label notice">Notice</span> You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
+ <pre class="prettyprint linenums"><button class="btn" data-toggle="button" >...</button></pre>
+ <h4>$().button('loading')</h4>
+ <p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
+ </p>
+ <pre class="prettyprint linenums"><button class="btn" data-loading-text="loading stuff..." >...</button></pre>
+ <h4>$().button('reset')</h4>
+ <p>Resets button state - swaps text to original text.</p>
+ <h4>$().button(string)</h4>
+ <p>Resets button state - swaps text to any data defined text state.</p>
+<pre class="prettyprint linenums"><button class="btn" data-complete-text="finished!" >...</button>
+<script>
+ $('.btn').button('complete')
+</script></pre>
+ <h3>Demo</h3>
+ <table class="striped-table">
+ <tbody>
+ <tr>
+ <td>Stateful</td>
+ <td>
+ <button id="fat-btn" data-loading-text="loading..." class="btn">
+ Loading State
+ </button>
+ <script>
+ $(function() {
+ var btn = $('#fat-btn').click(function () {
+ btn.button('loading')
+ setTimeout(function () {
+ btn.button('reset')
+ }, 3000)
+ })
+ })
+ </script>
+ </td>
+ </tr>
+ <tr>
+ <td>Single Toggle</td>
+ <td>
+ <button class="btn" data-toggle="button">Single Toggle</button>
+ </td>
+ </tr>
+ <tr>
+ <td>Checkbox</td>
+ <td>
+ <div class="btn-group" data-toggle="buttons-checkbox">
+ <button class="btn">Left</button>
+ <button class="btn">Middle</button>
+ <button class="btn">Right</button>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Radio</td>
+ <td>
+ <div class="btn-group" data-toggle="buttons-radio">
+ <button class="btn">Left</button>
+ <button class="btn">Middle</button>
+ <button class="btn">Right</button>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </section>
+
+
+ <!-- Collapse
+ ================================================== -->
+
+ <section id="collapse">
+ <div class="page-header">
+ <h1>collapse <small>bootstrap-collapse.js</small></h1>
+ </div>
+ <div class="row">
+ <div class="span3 columns">
+ <p>The collapse plugin offers simple, flexible collapsible element support for making accordions and other collapsible ui components.</p>
+ <a href="../js/bootstrap-collapsible.js" target="_blank" class="btn primary">Download</a>
+ </div>
+ <div class="span9 columns">
+ <h3>Using bootstrap-collapse.js</h3>
+ <pre class="prettyprint linenums">$(".collapse").collapse()</pre>
+ <h3>Options</h3>
+ <table class="striped-table">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 50px;">type</th>
+ <th style="width: 50px;">default</th>
+ <th>description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>parent</td>
+ <td>selector</td>
+ <td>false</td>
+ <td>If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)</td>
+ </tr>
+ <tr>
+ <td>toggle</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Toggles the collapsible element on invocation</td>
+ </tr>
+ </tbody>
+ </table>
+ <h3>Markup</h3>
+ <p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
+ <pre class="prettyprint linenums">
+<button class="btn danger" data-toggle="collapse" data-target="#demo">
+ simple collapsible
+</button>
+
+<div id="demo" class="collapse in"> … </div></pre>
+ <p><span class="label notice">Notice</span> To add accordion like group management to a collapsible control just add the additional data attribute <code>data-parent="#selector"</code>. Refer to the demo below to see this in action.</p>
+ <h3>Methods</h3>
+ <h4>.collapse(options)</h4>
+ <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
+<pre class="prettyprint linenums">
+$('#myCollapsible').collapse({
+ toggle: false
+})</pre>
+ <h4>.collapse('toggle')</h4>
+ <p>Toggles a collapsible element to shown or hidden.</p>
+ <h4>.collapse('show')</h4>
+ <p>Shows a collapsible element.</p>
+ <h4>.collapse('hide')</h4>
+ <p>Hides a collapsible element.</p>
+ <h3>Events</h3>
+ <p>
+ Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
+ </p>
+ <table class="striped-table">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show</td>
+ <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+ </tr>
+ <tr>
+ <td>shown</td>
+ <td>This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).</td>
+ </tr>
+ <tr>
+ <td>hide</td>
+ <td>
+ This event is fired immediately when the <code>hide</code> method has been called.
+ </td>
+ </tr>
+ <tr>
+ <td>hidden</td>
+ <td>This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<pre class="prettyprint linenums">
+$('#myCollapsible').bind('hidden', function () {
+ // do something ...
+})</pre>
+ <h3>Demo</h3>
+
+ <!-- single collapse -->
+ <p>
+ <button class="btn danger" data-toggle="collapse" data-target="#collapseDemoWrap">
+ simple collapsible
+ </button>
+ </p>
+
+ <div id="collapseDemoWrap" class="collapse">
+ <!-- group collapse -->
+ <dl id="accordion" >
+ <dt>
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+ Collapsible Group Item #1
+ </a>
+ </dt>
+ <dd id="collapseOne" class="collapse in">
+ <p>
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </p>
+ </dd>
+ <dt>
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+ Collapsible Group Item #2
+ </a>
+ </dt>
+ <dd id="collapseTwo" class="collapse">
+ <p>
+ Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy.
+ </p>
+ </dd>
+ <dt>
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+ Collapsible Group Item #3
+ </a>
+ </dt>
+ <dd id="collapseThree" class="collapse">
+ <p>
+ Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY.
+ </p>
+ </dd>
+ </dl>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Footer
+ ================================================== -->
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+ <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ </footer>
+ </div><!-- /container -->
</body>
</html>
diff --git a/docs/less.html b/docs/less.html
new file mode 100644
index 0000000000000000000000000000000000000000..52de8b6aac85c26ff3dc1bb932058d5c8628a46b
--- /dev/null
+++ b/docs/less.html
@@ -0,0 +1,490 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le styles -->
+ <link href="../bootstrap.css" rel="stylesheet">
+ <link href="assets/css/docs.css" rel="stylesheet">
+ <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
+ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ </head>
+
+ <body>
+
+ <!-- Navbar
+ ================================================== -->
+ <div class="navbar navbar-fixed">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="./index.html">Bootstrap</a>
+ <ul class="nav">
+ <li><a href="./index.html">Overview</a></li>
+ <li><a href="./scaffolding.html">Scaffolding</a></li>
+ <li><a href="./base-css.html">Base CSS</a></li>
+ <li><a href="./components.html">Components</a></li>
+ <li><a href="./javascript.html">Javascript plugins</a></li>
+ <li class="active"><a href="./less.html">Using LESS</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron subhead" id="overview">
+ <h1>Using LESS with Bootstrap</h1>
+ <p class="lead">Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
+ </header>
+
+
+
+ <!-- BUILT WITH LESS
+ ================================================== -->
+ <div class="page-header">
+ <h1>Built with LESS</h1>
+ </div>
+ <div class="row">
+ <div class="span4">
+ <h3>Why LESS?</h3>
+ <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
+ </div>
+ <div class="span4">
+ <h3>What's included?</h3>
+ <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
+ </div>
+ <div class="span4">
+ <h3>Learn more</h3>
+ <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
+ <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="span4">
+ <h3>Variables</h3>
+ <p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.</p>
+ </div>
+ <div class="span4">
+ <h3>Mixins</h3>
+ <p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>
+ </div>
+ <div class="span4">
+ <h3>Operations</h3>
+ <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.</p>
+ </div>
+ </div>
+
+
+
+ <!-- VARIABLES
+ ================================================== -->
+ <div class="page-header" id="variables">
+ <h1>Variables <small>from variables.less</small></h1>
+ </div>
+
+ <h3>Hyperlinks</h3>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th>Variable</th>
+ <th>Value</th>
+ <th>Usage</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>@linkColor</code></td>
+ <td>#0069d6</td>
+ <td>Default link text color</td>
+ </tr>
+ <tr>
+ <td><code>@linkColorHover</code></td>
+ <td><code>darken(@linkColor, 15)</code></td>
+ <td>Default link text hover color</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <div class="row">
+ <div class="span6">
+ <h3>Grayscale colors</h3>
+ <table class="bordered-table striped-table">
+ <tbody>
+ <tr>
+ <td><code>@black</code></td>
+ <td>#000</td>
+ </tr>
+ <tr>
+ <td><code>@grayDark</code></td>
+ <td><code>lighten(@black, 25%)</code></td>
+ </tr>
+ <tr>
+ <td><code>@gray</code></td>
+ <td><code>lighten(@black, 50%)</code></td>
+ </tr>
+ <tr>
+ <td><code>@grayLight</code></td>
+ <td><code>lighten(@black, 75%)</code></td>
+ </tr>
+ <tr>
+ <td><code>@grayLighter</code></td>
+ <td><code>lighten(@black, 90%)</code></td>
+ </tr>
+ <tr>
+ <td><code>@white</code></td>
+ <td>#fff</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="span6">
+ <h3>Accent colors</h3>
+ <table class="bordered-table striped-table">
+ <tbody>
+ <tr>
+ <td><code>@blue</code></td>
+ <td>#049CDB</td>
+ </tr>
+ <tr>
+ <td><code>@green</code></td>
+ <td>#46a546</td>
+ </tr>
+ <tr>
+ <td><code>@red</code></td>
+ <td>#9d261d</td>
+ </tr>
+ <tr>
+ <td><code>@yellow</code></td>
+ <td>#ffc40d</td>
+ </tr>
+ <tr>
+ <td><code>@orange</code></td>
+ <td>#f89406</td>
+ </tr>
+ <tr>
+ <td><code>@pink</code></td>
+ <td>#c3325f</td>
+ </tr>
+ <tr>
+ <td><code>@purple</code></td>
+ <td>#7a43b6</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span6">
+ <h3>Grid system</h3>
+ <table class="bordered-table striped-table">
+ <tbody>
+ <tr>
+ <td><code>@gridColumns</code></td>
+ <td>12</td>
+ </tr>
+ <tr>
+ <td><code>@gridColumnWidth</code></td>
+ <td>60px</td>
+ </tr>
+ <tr>
+ <td><code>@gridGutterWidth</code></td>
+ <td>20px</td>
+ </tr>
+ <tr>
+ <td><code>@siteWidth</code></td>
+ <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="span6">
+ <h3>Typography</h3>
+ <table class="bordered-table striped-table">
+ <tbody>
+ <tr>
+ <td><code>@baseFontSize</code></td>
+ <td>13px</td>
+ </tr>
+ <tr>
+ <td><code>@baseFontFamily</code></td>
+ <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td><code>@baseLineHeight</code></td>
+ <td>18px</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span3">
+ <h3>Visuals</h3>
+ </div>
+ <div class="span9">
+ <table class="bordered-table striped-table">
+ <tbody>
+ <tr>
+ <td><code>@primaryButtonColor</code></td>
+ <td><code>@blue</code></td>
+ <td></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+
+ <!-- MIXINS
+ ================================================== -->
+ <div class="page-header" id="mixins">
+ <h1>Mixins <small>from mixins.less</small></h1>
+ </div>
+
+
+
+ <!-- OPERATIONS
+ ================================================== -->
+ <div class="page-header" id="operations">
+ <h1>Operations</h1>
+ </div>
+
+
+
+ <!-- COMPILING LESS AND BOOTSTRAP
+ ================================================== -->
+ <div class="page-header" id="compiling">
+ <h1>Compiling LESS and Bootstrap</h1>
+ </div>
+
+
+
+
+<!-- Using Bootstrap w/ Less
+================================================== -->
+<section id="less">
+<div class="page-header">
+ <h1>Using Bootstrap with Less <small>Supercharge your CSS with variables, mixins, and functions</small></h1>
+</div>
+<div class="row">
+ <div class="span3">
+ <p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">Less</a>, a CSS preprocessor for faster and easier web development.</p>
+ <p>Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.</p>
+ </div>
+ <div class="span9">
+ <h2>How to use it</h2>
+ <p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p>
+<pre class="prettyprint linenums">
+<link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
+<script src="js/less-1.1.3.min.js"></script></pre>
+<p>Not feeling the .js solution? <a href="http://incident57.com/less" target="_blank">Try the Less Mac app</a> or <a href="http://lesscss.org/#-client-side-usage" target="_blank">use Node.js</a> to compile when you deploy your code.</p>
+
+ <h2>What’s included</h2>
+ <p>Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p>
+ <h3>Variables</h3>
+ <p>Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.</p>
+<pre class="prettyprint linenums">
+// Links
+@linkColor: #8b59c2;
+@linkColorHover: darken(@linkColor, 10);
+
+// Grays
+@black: #000;
+@grayDark: lighten(@black, 25%);
+@gray: lighten(@black, 50%);
+@grayLight: lighten(@black, 70%);
+@grayLighter: lighten(@black, 90%);
+@white: #fff;
+
+// Accent Colors
+@blue: #08b5fb;
+@green: #46a546;
+@red: #9d261d;
+@yellow: #ffc40d;
+@orange: #f89406;
+@pink: #c3325f;
+@purple: #7a43b6;
+
+// Baseline grid
+@basefont: 13px;
+@baseline: 18px;
+</pre>
+
+<h3>Commenting</h3>
+<p>Less also provides another style of commenting in addition to CSS’s normal <code>/* ... */</code> syntax.</p>
+<pre class="prettyprint linenums">
+// This is a comment
+/* This is also a comment */
+</pre>
+
+<h3>Mixins up the wazoo</h3>
+<p>Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.</p>
+<h4>Font stacks</h4>
+<pre class="prettyprint linenums">
+#font {
+ .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+ .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+ ...
+}
+</pre>
+<h4>Gradients</h4>
+<pre class="prettyprint linenums">
+#gradient {
+ ...
+ .vertical (@startColor: #555, @endColor: #333) {
+ background-color: @endColor;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
+ background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
+ background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
+ background-image: linear-gradient(@startColor, @endColor); // The standard
+ }
+ ...
+}
+</pre>
+
+<h3>Operations</h3>
+<p>Get fancy and perform some math to generate flexible and powerful mixins like the one below.</p>
+<pre class="prettyprint linenums">
+// Griditude
+@gridColumns: 16;
+@gridColumnWidth: 40px;
+@gridGutterWidth: 20px;
+@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// Make some columns
+.columns(@columnSpan: 1) {
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+}
+</pre>
+
+ <h2 id="compiling">Compiling Less</h2>
+ <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
+ <h3>Ways to compile</h3>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th style="width: 120px;">Method</th>
+ <th>Steps</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Node with makefile</td>
+ <td>
+ <p>Install the less command line compiler with npm by running the following command:</p>
+ <pre>$ npm install lessc</pre>
+ <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
+ <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
+ </td>
+ </tr>
+ <td>Javascript</td>
+ <td>
+ <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.</p>
+<pre class="prettyprint">
+<link rel="stylesheet/less" href="/path/to/bootstrap.less">
+<script src="/path/to/less.js"></script>
+</pre>
+ <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>Command line</td>
+ <td>
+ <p>If you already have the less command line tool installed, simply run the following command:</p>
+ <pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
+ <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="http://incident57.com/less/" target="_blank">Unofficial Mac app</a></td>
+ <td>
+ <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
+ <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="http://crunchapp.net/" target="_blank">Crunch</a></td>
+ <td>Crunch is a great looking LESS editor and compiler built on Adobe Air.</td>
+ </tr>
+ <tr>
+ <td><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></td>
+ <td>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</td>
+ </tr>
+ <tr>
+ <td><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></td>
+ <td>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+
+</section>
+
+
+ <!-- Footer
+ ================================================== -->
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+ <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ </footer>
+ </div><!-- /container -->
+
+ <!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+
+ <script type="text/javascript">
+ // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
+ $(document).ready(function() {
+ $('.nav .active').click(function(e) {
+ e.preventDefault();
+ $(this).siblings().toggle();
+ });
+ });
+ </script>
+
+ <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-transitions.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="assets/js/application.js"></script>
+ </body>
+</html>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
new file mode 100644
index 0000000000000000000000000000000000000000..7431ae58b39c498573d6b3950ff8243189b77b01
--- /dev/null
+++ b/docs/scaffolding.html
@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le styles -->
+ <link href="../bootstrap.css" rel="stylesheet">
+ <link href="assets/css/docs.css" rel="stylesheet">
+ <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
+ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ </head>
+
+ <body>
+
+ <!-- Navbar
+ ================================================== -->
+ <div class="navbar navbar-fixed">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="./index.html">Bootstrap</a>
+ <ul class="nav">
+ <li><a href="./index.html">Overview</a></li>
+ <li class="active"><a href="./scaffolding.html">Scaffolding</a></li>
+ <li><a href="./base-css.html">Base CSS</a></li>
+ <li><a href="./components.html">Components</a></li>
+ <li><a href="./javascript.html">Javascript plugins</a></li>
+ <li><a href="./less.html">Using LESS</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron subhead" id="overview">
+ <h1>Scaffolding</h1>
+ <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
+ </header>
+
+
+
+<!-- Grid system
+================================================== -->
+<section id="grid-system">
+ <div class="page-header">
+ <h1>Grid system <small>12 columns with a responsive twist</small></h1>
+ </div>
+
+ <h2>Default 940px grid</h2>
+ <div class="row show-grid">
+ <div class="span1" title="60px">1</div>
+ <div class="span1" title="60px">1</div>
+ <div class="span1" title="60px">1</div>
+ <div class="span1" title="60px">1</div>
+ <div class="span1" title="60px">1</div>
+ <div class="span1" title="60px">1</div>
+ <div class="span1" title="60px">1</div>
+ <div class="span1" title="60px">1</div>
+ <div class="span1" title="60px">1</div>
+ <div class="span1" title="60px">1</div>
+ <div class="span1" title="60px">1</div>
+ <div class="span1" title="60px">1</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span4" title="300px">4</div>
+ <div class="span4" title="300px">4</div>
+ <div class="span4" title="300px">4</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span4" title="300px">4</div>
+ <div class="span8" title="620px">8</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span6" title="460px">6</div>
+ <div class="span6" title="460px">6</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span12" title="940px">12</div>
+ </div>
+
+ <div class="row">
+ <div class="span4">
+ <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
+ <p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p>
+ </div>
+ <div class="span4">
+<pre class="prettyprint linenums">
+<div class="row">
+ <div class="span4">...</div>
+ <div class="span8">...</div>
+</div>
+</pre>
+ </div>
+ <div class="span4">
+ <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
+ </div>
+ </div><!-- /row -->
+
+ <h2>Offsetting columns</h2>
+ <div class="row show-grid">
+ <div class="span4">4</div>
+ <div class="span4 offset4">4 offset 4</div>
+ </div><!-- /row -->
+ <div class="row show-grid">
+ <div class="span3 offset3">3 offset 3</div>
+ <div class="span3 offset3">3 offset 3</div>
+ </div><!-- /row -->
+ <div class="row show-grid">
+ <div class="span8 offset4">8 offset 4</div>
+ </div><!-- /row -->
+
+ <br>
+
+ <h2>Nesting columns</h2>
+ <div class="row">
+ <div class="span6">
+ <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
+ <h4>Example</h4>
+ <div class="row show-grid">
+ <div class="span6">
+ Level 1 of column
+ <div class="row show-grid">
+ <div class="span3">
+ Level 2
+ </div>
+ <div class="span3">
+ Level 2
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="span6">
+<pre class="prettyprint linenums">
+<div class="row">
+ <div class="span12">
+ Level 1 of column
+ <div class="row">
+ <div class="span6">Level 2</div>
+ <div class="span6">Level 2</div>
+ </div>
+ </div>
+</div>
+</pre>
+ </div>
+ </div>
+
+ <h2>Grid customization</h2>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th>Variable</th>
+ <th>Default value</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>@gridColumns</code></td>
+ <td>12</td>
+ <td>Number of columns</td>
+ </tr>
+ <tr>
+ <td><code>@gridColumnWidth</code></td>
+ <td>60px</td>
+ <td>Width of each column</td>
+ </tr>
+ <tr>
+ <td><code>@gridGutterWidth</code></td>
+ <td>20px</td>
+ <td>Negative space between columns</td>
+ </tr>
+ <tr>
+ <td><code>@siteWidth</code></td>
+ <td><em>Computed sum of all columns and gutters</em></td>
+ <td>Counts number of columns and gutters to set width of the <code>.fixed-container()</code> mixin</td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="row">
+ <div class="span4">
+ <h3>Variables in LESS</h3>
+ <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p>
+ </div>
+ <div class="span4">
+ <h3>How to customize</h3>
+ <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the <a href="#compiling">four ways documented to recompile</a>.</p>
+ </div>
+ <div class="span4">
+ <h3>Staying responsive</h3>
+ <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
+ </div>
+ </div><!-- /row -->
+
+</section>
+
+
+
+<!-- Layouts (Default and fluid)
+================================================== -->
+<section id="layouts">
+ <div class="page-header">
+ <h1>Layouts <small>Basic templates to create webpages</small></h1>
+ </div>
+
+ <div class="row">
+ <div class="span6">
+ <h2>Fixed layout</h2>
+ <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.</p>
+ <div class="mini-layout">
+ <div class="mini-layout-body"></div>
+ </div>
+<pre class="prettyprint linenums">
+<body>
+ <div class="container">
+ ...
+ </div>
+</body>
+</pre>
+ </div><!-- /col -->
+ <div class="span6">
+ <h2>Fluid layout</h2>
+ <p><code><div class="fluid-container"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
+ <div class="mini-layout fluid">
+ <div class="mini-layout-sidebar"></div>
+ <div class="mini-layout-body"></div>
+ </div>
+<pre class="prettyprint linenums">
+<body>
+ <div class="fluid-container">
+ <div class="sidebar">
+ ...
+ </div>
+ <div class="content">
+ ...
+ </div>
+ </div>
+</body>
+</pre>
+ </div><!-- /col -->
+ </div><!-- /row -->
+</section>
+
+
+
+
+<!-- Responsive design
+================================================== -->
+<section id="responsive">
+ <div class="page-header">
+ <h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
+ </div>
+ <!-- Supported devices -->
+ <div class="row">
+ <div class="span4">
+ <img src="assets/img/responsive-illustrations.png" alt="Responsive devices">
+ </div>
+ <div class="span8">
+ <h2>Supported devices</h2>
+ <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th>Label</th>
+ <th>Layout width</th>
+ <th>Column width</th>
+ <th>Gutter width</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Smartphones</td>
+ <td>480px and below</td>
+ <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
+ </tr>
+ <tr>
+ <td>Portrait tablets</td>
+ <td>480px to 768px</td>
+ <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
+ </tr>
+ <tr>
+ <td>Landscape tablets</td>
+ <td>768px to 940px</td>
+ <td>44px</td>
+ <td>20px</td>
+ </tr>
+ <tr>
+ <td>Default</td>
+ <td>940px and up</td>
+ <td>60px</td>
+ <td>20px</td>
+ </tr>
+ <tr>
+ <td>Large display</td>
+ <td>1210px and up</td>
+ <td>70px</td>
+ <td>30px</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h3>What they do</h3>
+ <p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
+ <ul>
+ <li>Modify the width of column in our grid</li>
+ <li>Stack elements instead of float wherever necessary</li>
+ <li>Resize headings and text to be more appropriate for devices</li>
+ </ul>
+ </div>
+ </div>
+
+ <br>
+
+ <!-- Media query code -->
+ <h2>Using the media queries</h2>
+ <div class="row">
+ <div class="span5">
+ <p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
+ <ol>
+ <li>Use the compiled responsive version, bootstrap.reponsive.css</li>
+ <li>Add @import "responsive.less" and recompile Bootstrap</li>
+ <li>Compile responsive.less as a separate file and include that</li>
+ </ol>
+ <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
+ </div>
+ <div class="span7">
+<pre class="prettyprint linenums">
+ // Landscape phones and down
+ @media (max-width: 480px) { ... }
+
+ // Landscape phone to portrait tablet
+ @media (min-width: 480px) and (max-width: 768px) { ... }
+
+ // Portrait tablet to landscape and desktop
+ @media (min-width: 768px) and (max-width: 940px) { ... }
+
+ // Large desktop
+ @media (min-width: 1210px) { .. }
+</pre>
+ </div>
+ </div>
+</section>
+
+
+
+ <!-- Footer
+ ================================================== -->
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+ <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ </footer>
+ </div><!-- /container -->
+
+ <!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+
+ <script type="text/javascript">
+ // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
+ $(document).ready(function() {
+ $('.nav .active').click(function(e) {
+ e.preventDefault();
+ $(this).siblings().toggle();
+ });
+ });
+ </script>
+
+ <script type="text/javascript">
+ // Show grid dimensions on hover
+ $(document).ready(function() {
+ $('.show-grid > div').hover(function() {
+ var width = $(this).width();
+ $(this).attr('title', width);
+ $(this).twipsy();
+ });
+ });
+ </script>
+
+ <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-transitions.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="assets/js/application.js"></script>
+ </body>
+</html>
diff --git a/docs/upgrading.html b/docs/upgrading.html
new file mode 100644
index 0000000000000000000000000000000000000000..cd0ca8e22d4a34ed08436d5979ac46c9ea4d4ffc
--- /dev/null
+++ b/docs/upgrading.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter: Upgrading from v1.4 to v2.0</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le styles -->
+ <link href="../bootstrap.css" rel="stylesheet">
+ <link href="assets/css/docs.css" rel="stylesheet">
+ <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
+ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ </head>
+
+ <body>
+
+ <!-- Navbar
+ ================================================== -->
+ <div class="navbar navbar-fixed">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="./index.html">Bootstrap</a>
+ <ul class="nav">
+ <li><a href="./index.html">Overview</a></li>
+ <li><a href="./scaffolding.html">Scaffolding</a></li>
+ <li><a href="./base-css.html">Base CSS</a></li>
+ <li><a href="./components.html">Components</a></li>
+ <li><a href="./javascript.html">Javascript plugins</a></li>
+ <li class="active"><a href="./less.html">Using LESS</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron subhead" id="overview">
+ <h1>Upgrading to Bootstrap 2</h1>
+ <p class="lead">Learn about significant changes and additions since v1.4 with this handy guide.</p>
+ </header>
+
+
+<h2>Rough outline</h2>
+<ul>
+ <li>Docs completely overhauled
+ <ul>
+ <li>Responsive thanks to new grid system</li>
+ <li>Now less marketing and more information</li>
+ <li>Extensive use of tables to share classes and elements of most components</li>
+ <li>Broken down into several pages for easier consumption</li>
+ </ul>
+ </li>
+ <li>Updated grid system, now only 12 columns
+ <ul>
+ <li>Same great classes, but now only 12 columns</li>
+ <li>Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more</li>
+ </ul>
+ </li>
+ <li>New thumbnails (previously media grids)
+ <ul>
+ <li><code>.media-grid</code> class has been changed to <code>.thumbnails</code></li>
+ <li>Individual thumbnails now require <code>.thumbnail</code> class</li>
+ </ul>
+ </li>
+ <li>Updated forms
+ <ul>
+ <li>Default form style is now stacked to use less CSS and add flexibility</li>
+ <li>Exact same markup is required for vertical or horizontal forms—just swap the classes</li>
+ <li>New form defaults for search, inline, vertical, and horizontal</li>
+ </ul>
+ </li>
+ <li>Updated tables
+ <ul>
+ <li>Table classes made more consistent</li>
+ <li>Removed unused table color options (too much code for such little impact)</li>
+ </ul>
+ </li>
+ <li>Typography
+ <ul>
+ <li>Right-aligned option for blockquotes if float: right;</li>
+ </ul>
+ </li>
+ <li>Buttons
+ <ul>
+ <li>Added button bar options</li>
+ </ul>
+ </li>
+ <li>
+ <ul>
+ <li></li>
+ </ul>
+ </li>
+</ul>
+
+<!--
+
+
+
+-->
+
+
+
+
+
+ <!-- Footer
+ ================================================== -->
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+ <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ </footer>
+ </div><!-- /container -->
+
+ <!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+
+ <script type="text/javascript">
+ // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
+ $(document).ready(function() {
+ $('.nav .active').click(function(e) {
+ e.preventDefault();
+ $(this).siblings().toggle();
+ });
+ });
+ </script>
+
+ <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-transitions.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="assets/js/application.js"></script>
+ </body>
+</html>
diff --git a/examples/container-app.html b/examples/container-app.html
index 75328e645f90c1e770ad91f59f1b2514f5b1084a..28807bb05e65dc79f8b09675c6cf6249404c8df3 100644
--- a/examples/container-app.html
+++ b/examples/container-app.html
@@ -75,8 +75,8 @@
<body>
- <div class="topbar">
- <div class="fill">
+ <div class="navbar">
+ <div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<ul class="nav">
@@ -84,7 +84,7 @@
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
- <form action="" class="pull-right">
+ <form action="" class="form-search navbar-form pull-right">
<input class="input-small" type="text" placeholder="Username">
<input class="input-small" type="password" placeholder="Password">
<button class="btn" type="submit">Sign in</button>
diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html
new file mode 100644
index 0000000000000000000000000000000000000000..a32291d46c67df047cf6ea29172cc0e514bc1167
--- /dev/null
+++ b/examples/fluid-reverse.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter</title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le styles -->
+ <link href="../bootstrap.css" rel="stylesheet">
+ <style type="text/css">
+ body {
+ padding-top: 60px;
+ }
+ </style>
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" href="images/favicon.ico">
+ <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+ </head>
+
+ <body>
+
+ <div class="navbar">
+ <div class="navbar-inner">
+ <div class="fluid-container">
+ <a class="brand" href="#">Project name</a>
+ <ul class="nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ <p class="pull-right">Logged in as <a href="#">username</a></p>
+ </div>
+ </div>
+ </div>
+
+ <div class="fluid-container reverse">
+ <div class="fluid-sidebar-right">
+ <div class="well">
+ <h5>Sidebar</h5>
+ <ul>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ </ul>
+ <h5>Sidebar</h5>
+ <ul>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ </ul>
+ <h5>Sidebar</h5>
+ <ul>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="fluid-content">
+ <!-- Main hero unit for a primary marketing message or call to action -->
+ <div class="hero-unit">
+ <h1>Hello, world!</h1>
+ <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+ <p><a class="btn primary large">Learn more »</a></p>
+ </div>
+
+ <!-- Example row of columns -->
+ <div class="row">
+ <div class="span6">
+ <h2>Heading</h2>
+ <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+ <p><a class="btn" href="#">View details »</a></p>
+ </div>
+ <div class="span5">
+ <h2>Heading</h2>
+ <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+ <p><a class="btn" href="#">View details »</a></p>
+ </div>
+ <div class="span5">
+ <h2>Heading</h2>
+ <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+ <p><a class="btn" href="#">View details »</a></p>
+ </div>
+ </div>
+
+ <hr>
+
+ <!-- Example row of columns -->
+ <div class="row">
+ <div class="span6">
+ <h2>Heading</h2>
+ <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+ <p><a class="btn" href="#">View details »</a></p>
+ </div>
+ <div class="span5">
+ <h2>Heading</h2>
+ <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+ <p><a class="btn" href="#">View details »</a></p>
+ </div>
+ <div class="span5">
+ <h2>Heading</h2>
+ <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+ <p><a class="btn" href="#">View details »</a></p>
+ </div>
+ </div>
+
+ <footer>
+ <p>© Company 2011</p>
+ </footer>
+ </div>
+ </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/examples/fluid.html b/examples/fluid.html
index eacb5c3d2d29d8de60397ac21cd92695168f3fcc..3b8bb46a8d8ca2dde133e8210d927a3df81cd38b 100644
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -28,9 +28,9 @@
<body>
- <div class="topbar">
- <div class="topbar-inner">
- <div class="container-fluid">
+ <div class="navbar">
+ <div class="navbar-inner">
+ <div class="fluid-container">
<a class="brand" href="#">Project name</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
@@ -42,8 +42,8 @@
</div>
</div>
- <div class="container-fluid">
- <div class="sidebar">
+ <div class="fluid-container">
+ <div class="fluid-sidebar-left">
<div class="well">
<h5>Sidebar</h5>
<ul>
@@ -68,7 +68,7 @@
</ul>
</div>
</div>
- <div class="content">
+ <div class="fluid-content">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
diff --git a/examples/hero.html b/examples/hero.html
index 6ded6e1e9539a43b19d7d9489516df8263374671..d84eb8843487308d2767ddd1353ea9da326c1b5d 100644
--- a/examples/hero.html
+++ b/examples/hero.html
@@ -28,8 +28,8 @@
<body>
- <div class="topbar">
- <div class="fill">
+ <div class="navbar">
+ <div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<ul class="nav">
diff --git a/js/README.md b/js/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..2eef9e735768390fd4e0de626851424bfb8d5cbd
--- /dev/null
+++ b/js/README.md
@@ -0,0 +1,88 @@
+## 2.0 BOOTSTRAP JS PHILOSOPHY
+These are the high-level design rules which guide the development of Bootstrap's JS plugins.
+
+---
+
+### DATA-ATTRIBUTE API
+
+We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript.
+
+We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
+
+ $('body').unbind('.data-api')
+
+To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:
+
+ $('body').unbind('.alert.data-api')
+
+---
+
+### PROGRAMATIC API
+
+We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API.
+
+All public APIs should be a single, chainable method, and return the collection acted upon.
+
+ $(".btn.danger").button("toggle").addClass("fat")
+
+All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior:
+
+ $("#myModal").modal() // initialized with defaults
+
+---
+
+### PLUGIN OPTIONS
+
+Options should be sparse and add universal value. We should pick the right defaults.
+
+All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`.
+
+ $.fn.modal.defaults = { … }
+
+An options definition should take the following form:
+
+ *noun*: *adjective* - describes or modifies a quality of an instance
+
+examples:
+
+ backdrop: true
+ keyboard: false
+ placement: 'above'
+
+---
+
+### PLUGIN EVENTS
+
+All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the past participle on completion of the action.
+
+ show | shown
+ hide | hidden
+
+---
+
+
+### DATA ATTRIBUTES
+
+Data attributes should take the following form:
+
+- data-*(verb)* - defines main interaction
+- data-target || href^=# - defined on controller element (if element interacts with an element other than self)
+- data-*(noun)* - defines options for element invocation
+
+examples:
+
+ // control other targets
+ data-toggle="modal" data-target="#foo"
+ data-toggle="collapse" data-target="#foo" data-parent="#foo"
+
+ // defined on element they control
+ data-spy="scroll"
+
+ data-dismiss="modal"
+ data-dismiss="alert"
+
+ data-toggle="dropdown"
+
+ data-toggle="button"
+ data-toggle="buttons-checkbox"
+ data-toggle="buttons-radio"
\ No newline at end of file
diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js
new file mode 100644
index 0000000000000000000000000000000000000000..06913008085bc1e0e811cb62676680d22ad54865
--- /dev/null
+++ b/js/bootstrap-alert.js
@@ -0,0 +1,78 @@
+/* ==========================================================
+ * bootstrap-alert.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html#alerts
+ * ==========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function( $ ){
+
+ "use strict"
+
+ /* ALERT CLASS DEFINITION
+ * ====================== */
+
+ var dismiss = '[data-dismiss="alert"]'
+ , Alert = function ( el ) {
+ $(el).delegate(dismiss, 'click', this.close)
+ }
+
+ Alert.prototype = {
+
+ constructor: Alert
+
+ , close: function ( e ) {
+ var $element = $(this)
+
+ $element = $element.hasClass('alert-message') ? $element : $element.parent()
+ e && e.preventDefault()
+ $element.removeClass('in')
+
+ function removeElement() {
+ $element.remove()
+ }
+
+ $.support.transition && $element.hasClass('fade') ?
+ $element.bind($.support.transition.end, removeElement) :
+ removeElement()
+ }
+
+ }
+
+
+ /* ALERT PLUGIN DEFINITION
+ * ======================= */
+
+ $.fn.alert = function ( option ) {
+ return this.each(function () {
+ var $this = $(this)
+ , data = $this.data('alert')
+ if (!data) $this.data('alert', (data = new Alert(this)))
+ if (typeof option == 'string') data[option].call($this)
+ })
+ }
+
+ $.fn.alert.Alert = Alert
+
+
+ /* ALERT DATA-API
+ * ============== */
+
+ $(function () {
+ $('body').delegate(dismiss, 'click.alert.data-api', Alert.prototype.close)
+ })
+
+}( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js
deleted file mode 100644
index 82bcac5246e3862f230447705cd2995d56e30ceb..0000000000000000000000000000000000000000
--- a/js/bootstrap-alerts.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/* ==========================================================
- * bootstrap-alerts.js v1.3.0
- * http://twitter.github.com/bootstrap/javascript.html#alerts
- * ==========================================================
- * Copyright 2011 Twitter, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ========================================================== */
-
-
-(function( $ ){
-
- /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
- * ======================================================= */
-
- var transitionEnd
-
- $(document).ready(function () {
-
- $.support.transition = (function () {
- var thisBody = document.body || document.documentElement
- , thisStyle = thisBody.style
- , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
- return support
- })()
-
- // set CSS transition event type
- if ( $.support.transition ) {
- transitionEnd = "TransitionEnd"
- if ( $.browser.webkit ) {
- transitionEnd = "webkitTransitionEnd"
- } else if ( $.browser.mozilla ) {
- transitionEnd = "transitionend"
- } else if ( $.browser.opera ) {
- transitionEnd = "oTransitionEnd"
- }
- }
-
- })
-
- /* ALERT CLASS DEFINITION
- * ====================== */
-
- var Alert = function ( content, selector ) {
- this.$element = $(content)
- .delegate(selector || '.close', 'click', this.close)
- }
-
- Alert.prototype = {
-
- close: function (e) {
- var $element = $(this).parent('.alert-message')
-
- e && e.preventDefault()
- $element.removeClass('in')
-
- function removeElement () {
- $element.remove()
- }
-
- $.support.transition && $element.hasClass('fade') ?
- $element.bind(transitionEnd, removeElement) :
- removeElement()
- }
-
- }
-
-
- /* ALERT PLUGIN DEFINITION
- * ======================= */
-
- $.fn.alert = function ( options ) {
-
- if ( options === true ) {
- return this.data('alert')
- }
-
- return this.each(function () {
- var $this = $(this)
-
- if ( typeof options == 'string' ) {
- return $this.data('alert')[options]()
- }
-
- $(this).data('alert', new Alert( this ))
-
- })
- }
-
- $(document).ready(function () {
- new Alert($('body'), '.alert-message[data-alert] .close')
- })
-
-})( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-button.js b/js/bootstrap-button.js
new file mode 100644
index 0000000000000000000000000000000000000000..4ed24d98b9d5de0af62a9dc374e471be56bdced8
--- /dev/null
+++ b/js/bootstrap-button.js
@@ -0,0 +1,98 @@
+/* ============================================================
+ * bootstrap-buttons.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html#buttons
+ * ============================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+!function( $ ){
+
+ "use strict"
+
+ /* BUTTON PUBLIC CLASS DEFINITION
+ * ============================== */
+
+ var Button = function (element, options) {
+ this.$element = $(element)
+ this.settings = $.extend({}, $.fn.button.defaults, options)
+ }
+
+ Button.prototype = {
+
+ constructor: Button
+
+ , setState: function (state) {
+ var d = 'disabled'
+ , $el = this.$element
+ , data = $el.data()
+ , val = $el.is('input') ? 'val' : 'html'
+
+ state = state + 'Text'
+ data.resetText || $el.data('resetText', $el[val]())
+
+ $el[val](data[state] || this.settings[state])
+
+ // push to event loop to allow forms to submit
+ setTimeout(function () {
+ state == 'loadingText' ?
+ $el.addClass(d).attr(d, d) :
+ $el.removeClass(d).removeAttr(d)
+ }, 0)
+ }
+
+ , toggle: function () {
+ var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
+
+ $parent && $parent
+ .find('.active')
+ .removeClass('active')
+
+ this.$element.toggleClass('active')
+ }
+
+ }
+
+
+ /* BUTTON PLUGIN DEFINITION
+ * ======================== */
+
+ $.fn.button = function ( option ) {
+ return this.each(function () {
+ var $this = $(this)
+ , data = $this.data('button')
+ , options = typeof option == 'object' && option
+ if (!data) $this.data('button', (data = new Button(this, options)))
+ if (option == 'toggle') data.toggle()
+ else if (option) data.setState(option)
+ })
+ }
+
+ $.fn.button.defaults = {
+ loadingText: 'loading...'
+ }
+
+ $.fn.button.Button = Button
+
+
+ /* BUTTON DATA-API
+ * =============== */
+
+ $(function () {
+ $('body').delegate('[data-toggle^=button]', 'click.button.data-api', function (e) {
+ $(e.srcElement).button('toggle')
+ })
+ })
+
+}( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js
new file mode 100644
index 0000000000000000000000000000000000000000..9513b4cd21d247e87f1c56f61100eb7515dc10b3
--- /dev/null
+++ b/js/bootstrap-carousel.js
@@ -0,0 +1,59 @@
+/* ==========================================================
+ * bootstrap-carousel.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html#alerts
+ * ==========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function( $ ){
+
+ "use strict"
+
+ /* CAROUSEL CLASS DEFINITION
+ * ========================= */
+
+ var Carousel = function ( el ) {
+ $(el).delegate(dismiss, 'click', this.close)
+ }
+
+ Carousel.prototype = {
+
+ }
+
+
+ /* CAROUSEL PLUGIN DEFINITION
+ * ========================== */
+
+ $.fn.carousel = function ( option ) {
+ return this.each(function () {
+ var $this = $(this)
+ , data = $this.data('alert')
+ if (!data) $this.data('alert', (data = new Alert(this)))
+ if (typeof option == 'string') data[option].call($this)
+ })
+ }
+
+ $.fn.carousel.Carousel = Carousel
+
+
+ /* CAROUSEL DATA-API
+ * ================= */
+
+ // $(function () {
+ // $('body').delegate(dismiss, 'click.alert.data-api', Alert.prototype.close)
+ // })
+
+}( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js
new file mode 100644
index 0000000000000000000000000000000000000000..f56f6c7050cd5ee9a95764e88a63fd8db0276ed5
--- /dev/null
+++ b/js/bootstrap-collapse.js
@@ -0,0 +1,135 @@
+/* =============================================================
+ * bootstrap-collapsible.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html#collapsible
+ * =============================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+(function( $ ){
+
+ "use strict"
+
+ var Collapse = function ( element, options ) {
+ this.$element = $(element)
+ this.settings = $.extend({}, $.fn.collapse.defaults, options)
+
+ if (this.settings["parent"]) {
+ this.$parent = $(this.settings["parent"])
+ }
+
+ this.settings.toggle && this.toggle()
+ }
+
+ Collapse.prototype = {
+
+ constructor: Collapse
+
+ , dimension: function () {
+ var hasWidth = this.$element.hasClass('width')
+ return hasWidth ? 'width' : 'height'
+ }
+
+ , show: function () {
+ var dimension = this.dimension()
+ , scroll = $.camelCase(['scroll', dimension].join('-'))
+ , actives = this.$parent && this.$parent.find('.in')
+ , hasData
+
+ if (actives && actives.length) {
+ hasData = actives.data('collapse')
+ actives.collapse('hide')
+ hasData || actives.data('collapse', null)
+ }
+
+ this.$element[dimension](0)
+ this.transition('addClass', 'show', 'shown')
+ this.$element[dimension](this.$element[0][scroll])
+
+ }
+
+ , hide: function () {
+ var dimension = this.dimension()
+ this.reset(this.$element[dimension]())
+ this.transition('removeClass', 'hide', 'hidden')
+ this.$element[dimension](0)
+ }
+
+ , reset: function ( size ) {
+ var dimension = this.dimension()
+
+ this.$element
+ .removeClass('collapse')
+ [dimension](size || '')
+ [0].offsetWidth
+
+ this.$element.addClass('collapse')
+ }
+
+ , transition: function ( method, startEvent, completeEvent ) {
+ var that = this
+ , complete = function () {
+ if (startEvent == 'show') that.reset()
+ that.$element.trigger(completeEvent)
+ }
+
+ this.$element
+ .trigger(startEvent)
+ [method]('in')
+
+ $.support.transition && this.$element.hasClass('collapse') ?
+ this.$element.one($.support.transition.end, complete) :
+ complete()
+ }
+
+ , toggle: function () {
+ this[this.$element.hasClass('in') ? 'hide' : 'show']()
+ }
+
+ }
+
+ /* COLLAPSIBLE PLUGIN DEFINITION
+ * ============================== */
+
+ $.fn.collapse = function ( option ) {
+ return this.each(function () {
+ var $this = $(this)
+ , data = $this.data('collapse')
+ , options = typeof option == 'object' && option
+ if (!data) $this.data('collapse', (data = new Collapse(this, options)))
+ if (typeof option == 'string') data[option]()
+ })
+ }
+
+ $.fn.collapse.defaults = {
+ toggle: true
+ }
+
+ $.fn.collapse.Collapse = Collapse
+
+
+ /* COLLAPSIBLE DATA-API
+ * ==================== */
+
+ $(function () {
+ $('body').delegate('[data-toggle=collapse]', 'click.collapse.data-api', function ( e ) {
+ var $this = $(this)
+ , target = $this.attr('data-target') || $this.attr('href')
+ , option = $(target).data('collapse') ? 'toggle' : $this.data()
+ e.preventDefault()
+ $(target).collapse(option)
+ })
+ })
+
+})( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js
index ca2daf1f5612c5faf71b92400f04de98196490c4..238a52e08607dbffb3db3c73afccc52470f5b2f1 100644
--- a/js/bootstrap-dropdown.js
+++ b/js/bootstrap-dropdown.js
@@ -1,5 +1,5 @@
/* ============================================================
- * bootstrap-dropdown.js v1.3.0
+ * bootstrap-dropdown.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#dropdown
* ============================================================
* Copyright 2011 Twitter, Inc.
@@ -18,33 +18,58 @@
* ============================================================ */
-(function( $ ){
+!function( $ ){
- var d = 'a.menu, .dropdown-toggle'
+ "use strict"
+
+ /* DROPDOWN CLASS DEFINITION
+ * ========================= */
+
+ var toggle = '[data-toggle="dropdown"]'
+ , Dropdown = function ( element ) {
+ $(element).bind('click', this.toggle)
+ }
+
+ Dropdown.prototype = {
+
+ constructor: Dropdown
+
+ , toggle: function ( e ) {
+ var li = $(this).parent('li')
+ , isActive = li.hasClass('open')
+
+ clearMenus()
+ !isActive && li.toggleClass('open')
+
+ return false
+ }
+
+ }
function clearMenus() {
- $(d).parent('li').removeClass('open')
+ $(toggle).parent('li').removeClass('open')
}
- $(function () {
- $('html').bind("click", clearMenus)
- $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' )
- })
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
- $.fn.dropdown = function ( selector ) {
+ $.fn.dropdown = function ( option ) {
return this.each(function () {
- $(this).delegate(selector || d, 'click', function (e) {
- var li = $(this).parent('li')
- , isActive = li.hasClass('open')
-
- clearMenus()
- !isActive && li.toggleClass('open')
- return false
- })
+ var $this = $(this)
+ , data = $this.data('dropdown')
+ if (!data) $this.data('dropdown', (data = new Dropdown(this)))
+ if (typeof option == 'string') data[option].call($this)
})
}
-})( window.jQuery || window.ender )
\ No newline at end of file
+
+ /* APPLY TO STANDARD DROPDOWN ELEMENTS
+ * =================================== */
+
+ $(function () {
+ $('html').bind('click.dropdown.data-api', clearMenus)
+ $('body').delegate(toggle, 'click.dropdown.data-api', Dropdown.prototype.toggle)
+ })
+
+}( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index da67060731c80cc8e624d5e0bb58ffd0fa0fdfdb..189bcf2acc35f1affbe7e0e5a95b75e3ac5a4bca 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -1,5 +1,5 @@
/* =========================================================
- * bootstrap-modal.js v1.3.0
+ * bootstrap-modal.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#modal
* =========================================================
* Copyright 2011 Twitter, Inc.
@@ -18,86 +18,62 @@
* ========================================================= */
-(function( $ ){
+!function( $ ){
- /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
- * ======================================================= */
+ "use strict"
- var transitionEnd
-
- $(document).ready(function () {
-
- $.support.transition = (function () {
- var thisBody = document.body || document.documentElement
- , thisStyle = thisBody.style
- , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
- return support
- })()
-
- // set CSS transition event type
- if ( $.support.transition ) {
- transitionEnd = "TransitionEnd"
- if ( $.browser.webkit ) {
- transitionEnd = "webkitTransitionEnd"
- } else if ( $.browser.mozilla ) {
- transitionEnd = "transitionend"
- } else if ( $.browser.opera ) {
- transitionEnd = "oTransitionEnd"
- }
- }
-
- })
-
-
- /* MODAL PUBLIC CLASS DEFINITION
- * ============================= */
+ /* MODAL CLASS DEFINITION
+ * ====================== */
var Modal = function ( content, options ) {
- this.settings = $.extend({}, $.fn.modal.defaults)
+ this.settings = $.extend({}, $.fn.modal.defaults, options)
this.$element = $(content)
- .delegate('.close', 'click.modal', $.proxy(this.hide, this))
-
- if ( options ) {
- $.extend( this.settings, options )
-
- if ( options.show ) {
- this.show()
- }
- }
-
- return this
+ .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
+ this.settings.show && this.show()
}
Modal.prototype = {
- toggle: function () {
+ constructor: Modal
+
+ , toggle: function () {
return this[!this.isShown ? 'show' : 'hide']()
}
, show: function () {
var that = this
+
+ if (this.isShown) return
+
this.isShown = true
this.$element.trigger('show')
escape.call(this)
backdrop.call(this, function () {
+ var transition = $.support.transition && that.$element.hasClass('fade')
+
that.$element
.appendTo(document.body)
.show()
- setTimeout(function () {
- that.$element
- .addClass('in')
- .trigger('shown')
- }, 1)
- })
+ if (transition) {
+ that.$element[0].offsetWidth // force reflow
+ }
+
+ that.$element.addClass('in')
- return this
+ transition ?
+ that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
+ that.$element.trigger('shown')
+
+ })
}
- , hide: function (e) {
+ , hide: function ( e ) {
e && e.preventDefault()
+ if (!this.isShown) return
+
var that = this
this.isShown = false
@@ -107,19 +83,9 @@
.trigger('hide')
.removeClass('in')
- function removeElement () {
- that.$element
- .hide()
- .trigger('hidden')
-
- backdrop.call(that)
- }
-
$.support.transition && this.$element.hasClass('fade') ?
- this.$element.one(transitionEnd, removeElement) :
- removeElement()
-
- return this
+ hideWithTransition.call(this) :
+ hideModal.call(this)
}
}
@@ -128,46 +94,74 @@
/* MODAL PRIVATE METHODS
* ===================== */
+ function hideWithTransition() {
+ var that = this
+ , timeout = setTimeout(function () {
+ that.$element.unbind($.support.transition.end)
+ hideModal.call(that)
+ }, 500)
+
+ this.$element.one($.support.transition.end, function () {
+ clearTimeout(timeout)
+ hideModal.call(that)
+ })
+ }
+
+ function hideModal (that) {
+ this.$element
+ .hide()
+ .trigger('hidden')
+
+ backdrop.call(this)
+ }
+
function backdrop ( callback ) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
- if ( this.isShown && this.settings.backdrop ) {
+
+ if (this.isShown && this.settings.backdrop) {
+ var doAnimate = $.support.transition && animate
+
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
- .click($.proxy(this.hide, this))
.appendTo(document.body)
- setTimeout(function () {
- that.$backdrop && that.$backdrop.addClass('in')
- $.support.transition && that.$backdrop.hasClass('fade') ?
- that.$backdrop.one(transitionEnd, callback) :
- callback()
- })
- } else if ( !this.isShown && this.$backdrop ) {
- this.$backdrop.removeClass('in')
-
- function removeElement() {
- that.$backdrop.remove()
- that.$backdrop = null
+ if (this.settings.backdrop != 'static') {
+ this.$backdrop.click($.proxy(this.hide, this))
}
+ if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
+
+ this.$backdrop.addClass('in')
+
+ doAnimate ?
+ this.$backdrop.one($.support.transition.end, callback) :
+ callback()
+
+ } else if (!this.isShown && this.$backdrop) {
+ this.$backdrop.removeClass('in')
+
$.support.transition && this.$element.hasClass('fade')?
- this.$backdrop.one(transitionEnd, removeElement) :
- removeElement()
- } else if ( callback ) {
- callback()
+ this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
+ removeBackdrop.call(this)
+
+ } else if (callback) {
+ callback()
}
}
+ function removeBackdrop() {
+ this.$backdrop.remove()
+ this.$backdrop = null
+ }
+
function escape() {
var that = this
- if ( this.isShown && this.settings.keyboard ) {
- $('body').bind('keyup.modal', function ( e ) {
- if ( e.which == 27 ) {
- that.hide()
- }
+ if (this.isShown && this.settings.keyboard) {
+ $(document).bind('keyup.dismiss.modal', function ( e ) {
+ e.which == 27 && that.hide()
})
- } else if ( !this.isShown ) {
- $('body').unbind('keyup.modal')
+ } else if (!this.isShown) {
+ $(document).unbind('keyup.dismiss.modal')
}
}
@@ -175,53 +169,36 @@
/* MODAL PLUGIN DEFINITION
* ======================= */
- $.fn.modal = function ( options ) {
- var modal = this.data('modal')
-
- if (!modal) {
-
- if (typeof options == 'string') {
- options = {
- show: /show|toggle/.test(options)
- }
- }
-
- return this.each(function () {
- $(this).data('modal', new Modal(this, options))
- })
- }
-
- if ( options === true ) {
- return modal
- }
-
- if ( typeof options == 'string' ) {
- modal[options]()
- } else if ( modal ) {
- modal.toggle()
- }
-
- return this
+ $.fn.modal = function ( option ) {
+ return this.each(function () {
+ var $this = $(this)
+ , data = $this.data('modal')
+ , options = typeof option == 'object' && option
+ if (!data) $this.data('modal', (data = new Modal(this, options)))
+ if (typeof option == 'string') data[option]()
+ })
}
- $.fn.modal.Modal = Modal
-
$.fn.modal.defaults = {
- backdrop: false
- , keyboard: false
- , show: true
+ backdrop: true
+ , keyboard: true
+ , show: true
}
+ $.fn.modal.Modal = Modal
+
- /* MODAL DATA- IMPLEMENTATION
- * ========================== */
+ /* MODAL DATA-API
+ * ============== */
$(document).ready(function () {
- $('body').delegate('[data-controls-modal]', 'click', function (e) {
+ $('body').delegate('[data-toggle="modal"]', 'click.modal.data-api', function ( e ) {
+ var $this = $(this)
+ , target = $this.attr('data-target') || $this.attr('href')
+ , option = $(target).data('modal') ? 'toggle' : $this.data()
e.preventDefault()
- var $this = $(this).data('show', true)
- $('#' + $this.attr('data-controls-modal')).modal( $this.data() )
+ $(target).modal(option)
})
})
-})( window.jQuery || window.ender )
\ No newline at end of file
+}( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js
index e41090a3b3274842c9196bd60b65ece34922e3d8..890f6efc0bec5b3123414aa37230eaafca1d4f66 100644
--- a/js/bootstrap-popover.js
+++ b/js/bootstrap-popover.js
@@ -1,5 +1,5 @@
/* ===========================================================
- * bootstrap-popover.js v1.3.0
+ * bootstrap-popover.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#popover
* ===========================================================
* Copyright 2011 Twitter, Inc.
@@ -18,7 +18,9 @@
* =========================================================== */
-(function( $ ) {
+!function( $ ) {
+
+ "use strict"
var Popover = function ( element, options ) {
this.$element = $(element)
@@ -32,30 +34,41 @@
Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, {
- setContent: function () {
+ constructor: Popover
+
+ , setContent: function () {
var $tip = this.tip()
- $tip.find('.title')[this.options.html ? 'html' : 'text'](this.getTitle())
- $tip.find('.content p')[this.options.html ? 'html' : 'text'](this.getContent())
+ , title = this.getTitle()
+ , content = this.getContent()
+
+ $tip.find('.title')[ $.type(title) == 'object' ? 'append' : 'html' ](title)
+ $tip.find('.content > *')[ $.type(content) == 'object' ? 'append' : 'html' ](content)
+
$tip[0].className = 'popover'
}
+ , hasContent: function () {
+ return this.getTitle() || this.getContent()
+ }
+
, getContent: function () {
- var contentvar
+ var content
, $e = this.$element
, o = this.options
if (typeof this.options.content == 'string') {
- content = $e.attr(o.content)
+ content = $e.attr(this.options.content)
} else if (typeof this.options.content == 'function') {
content = this.options.content.call(this.$element[0])
}
+
return content
}
, tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="popover" />')
- .html('<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>')
+ .html(this.options.template)
}
return this.$tip
}
@@ -72,6 +85,12 @@
return this
}
- $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { content: 'data-content', placement: 'right'})
+ $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, {
+ placement: 'right'
+ , content: 'data-content'
+ , template: '<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>'
+ })
+
+ $.fn.twipsy.rejectAttrOptions.push( 'content' )
-})( window.jQuery || window.ender )
\ No newline at end of file
+}( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js
index 4b146e58093666ab7eac3330b9c289e7887165dc..8248b6cbddb2a842d39c6635a5e7074cad803f21 100644
--- a/js/bootstrap-scrollspy.js
+++ b/js/bootstrap-scrollspy.js
@@ -1,5 +1,5 @@
/* =============================================================
- * bootstrap-scrollspy.js v1.3.0
+ * bootstrap-scrollspy.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
* =============================================================
* Copyright 2011 Twitter, Inc.
@@ -17,36 +17,45 @@
* limitations under the License.
* ============================================================== */
-
!function ( $ ) {
- var $window = $(window)
+ "use strict"
+
+ /* SCROLLSPY CLASS DEFINITION
+ * ========================== */
+
+ function ScrollSpy( element ) {
+ var process = $.proxy(this.process, this)
+
+ this.$scrollElement = $(element).bind('scroll.scroll.data-api', process)
+ this.selector = (this.$scrollElement.attr('data-target')
+ || this.$scrollElement.attr('href')
+ || '') + ' .nav li > a'
+ this.$body = $('body').delegate(this.selector, 'click.scroll.data-api', process)
- function ScrollSpy( topbar, selector ) {
- var processScroll = $.proxy(this.processScroll, this)
- this.$topbar = $(topbar)
- this.selector = selector || 'li > a'
this.refresh()
- this.$topbar.delegate(this.selector, 'click', processScroll)
- $window.scroll(processScroll)
- this.processScroll()
+ this.process()
}
ScrollSpy.prototype = {
- refresh: function () {
- this.targets = this.$topbar.find(this.selector).map(function () {
- var href = $(this).attr('href')
- return /^#\w/.test(href) && $(href).length ? href : null
- })
+ constructor: ScrollSpy
+
+ , refresh: function () {
+ this.targets = this.$body
+ .find(this.selector)
+ .map(function () {
+ var href = $(this).attr('href')
+ return /^#\w/.test(href) && $(href).length ? href : null
+ })
this.offsets = $.map(this.targets, function (id) {
- return $(id).offset().top
+ return $(id).position().top
})
}
- , processScroll: function () {
- var scrollTop = $window.scrollTop() + 10
+ , process: function () {
+ var scrollTop = this.$scrollElement.scrollTop() + 10
, offsets = this.offsets
, targets = this.targets
, activeTarget = this.activeTarget
@@ -56,50 +65,50 @@
activeTarget != targets[i]
&& scrollTop >= offsets[i]
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])
- && this.activateButton( targets[i] )
+ && this.activate( targets[i] )
}
}
- , activateButton: function (target) {
+ , activate: function (target) {
+ var active
+
this.activeTarget = target
- this.$topbar
+ this.$body
.find(this.selector).parent('.active')
.removeClass('active')
- this.$topbar
+ active = this.$body
.find(this.selector + '[href="' + target + '"]')
.parent('li')
.addClass('active')
+
+ if ( active.parent('.dropdown-menu') ) {
+ active.closest('li.dropdown').addClass('active')
+ }
}
}
- /* SCROLLSPY PLUGIN DEFINITION
- * =========================== */
- $.fn.scrollSpy = function( options ) {
- var scrollspy = this.data('scrollspy')
+ /* SCROLLSPY PLUGIN DEFINITION
+ * =========================== */
- if (!scrollspy) {
- return this.each(function () {
- $(this).data('scrollspy', new ScrollSpy( this, options ))
- })
- }
+ $.fn.scrollspy = function ( option ) {
+ return this.each(function () {
+ var $this = $(this)
+ , data = $this.data('scrollspy')
+ if (!data) $this.data('scrollspy', (data = new ScrollSpy(this)))
+ if (typeof option == 'string') data[option]()
+ })
+ }
- if ( options === true ) {
- return scrollspy
- }
+ $.fn.scrollspy.ScrollSpy = ScrollSpy
- if ( typeof options == 'string' ) {
- scrollspy[options]()
- }
- return this
- }
+ /* SCROLLSPY DATA-API
+ * ============== */
- $(document).ready(function () {
- $('body').scrollSpy('[data-scrollspy] li > a')
- })
+ $(function () { $('[data-spy="scroll"]').scrollspy() })
}( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js
new file mode 100644
index 0000000000000000000000000000000000000000..6aa8ae32cf8908d81b6c9fc13faecfb3650eec82
--- /dev/null
+++ b/js/bootstrap-tab.js
@@ -0,0 +1,104 @@
+/* ========================================================
+ * bootstrap-tabs.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html#tabs
+ * ========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================== */
+
+
+!function( $ ){
+
+ "use strict"
+
+ /* TAB CLASS DEFINITION
+ * ==================== */
+
+ var Tab = function ( element ) {
+ this.element = $(element)
+ }
+
+ Tab.prototype = {
+
+ constructor: Tab
+
+ , show: function () {
+ var $this = this.element
+ , $ul = $this.closest('ul:not(.dropdown-menu)')
+ , href = $this.attr('data-target') || $this.attr('href')
+ , previous
+ , $href
+
+ if ( $this.parent('li').hasClass('active') ) return
+
+ previous = $ul.find('.active a').last()[0]
+
+ $this.trigger({
+ type: 'show'
+ , relatedTarget: previous
+ })
+
+ $href = $(href)
+
+ this.activate($this.parent('li'), $ul)
+ this.activate($href, $href.parent())
+
+ $this.trigger({
+ type: 'shown'
+ , relatedTarget: previous
+ })
+ }
+
+ , activate: function ( element, container ) {
+ container
+ .find('> .active')
+ .removeClass('active')
+ .find('> .dropdown-menu > .active')
+ .removeClass('active')
+
+ element.addClass('active')
+
+ if ( element.parent('.dropdown-menu') ) {
+ element.closest('li.dropdown').addClass('active')
+ }
+ }
+ }
+
+
+ /* TAB PLUGIN DEFINITION
+ * ===================== */
+
+ $.fn.tab = function (option) {
+ return this.each(function () {
+ var $this = $(this)
+ , data = $this.data('tab')
+ if (!data) $this.data('tab', (data = new Tab(this)))
+ if (typeof option == 'string') data[option]()
+ })
+ }
+
+ $.fn.tab.Tab = Tab
+
+
+ /* TAB DATA-API
+ * ============ */
+
+ $(document).ready(function () {
+ $('body').delegate('[data-toggle="tab"], [data-toggle="pill"]', 'click.tab.data-api', function (e) {
+ e.preventDefault()
+ $(this).tab('show')
+ })
+ })
+
+}( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js
deleted file mode 100644
index 807b366a354de2f9ab5180b3619ee5d7095a715a..0000000000000000000000000000000000000000
--- a/js/bootstrap-tabs.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/* ========================================================
- * bootstrap-tabs.js v1.3.0
- * http://twitter.github.com/bootstrap/javascript.html#tabs
- * ========================================================
- * Copyright 2011 Twitter, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ======================================================== */
-
-
-(function( $ ){
-
- function activate ( element, container ) {
- container.find('.active').removeClass('active')
- element.addClass('active')
- }
-
- function tab( e ) {
- var $this = $(this)
- , href = $this.attr('href')
- , $ul = $(e.liveFired)
- , $controlled
-
- if (/^#\w+/.test(href)) {
- e.preventDefault()
-
- if ($this.hasClass('active')) {
- return
- }
-
- $href = $(href)
-
- activate($this.parent('li'), $ul)
- activate($href, $href.parent())
- }
- }
-
-
- /* TABS/PILLS PLUGIN DEFINITION
- * ============================ */
-
- $.fn.tabs = $.fn.pills = function ( selector ) {
- return this.each(function () {
- $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
- })
- }
-
- $(document).ready(function () {
- $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
- })
-
-})( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js
new file mode 100644
index 0000000000000000000000000000000000000000..25f8b111f1cd39ef3b374176177a679c603d205b
--- /dev/null
+++ b/js/bootstrap-transition.js
@@ -0,0 +1,45 @@
+/* ===================================================
+ * bootstrap-transitions.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html
+ * ===================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+$(function () {
+
+ /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+ * ======================================================= */
+
+ $.support.transition = (function () {
+ var thisBody = document.body || document.documentElement
+ , thisStyle = thisBody.style
+ , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+
+ return support && {
+ end: (function () {
+ var transitionEnd = "TransitionEnd"
+ if ( $.browser.webkit ) {
+ transitionEnd = "webkitTransitionEnd"
+ } else if ( $.browser.mozilla ) {
+ transitionEnd = "transitionend"
+ } else if ( $.browser.opera ) {
+ transitionEnd = "oTransitionEnd"
+ }
+ return transitionEnd
+ }())
+ }
+ })()
+
+})
\ No newline at end of file
diff --git a/js/bootstrap-transitions.js b/js/bootstrap-transitions.js
new file mode 100644
index 0000000000000000000000000000000000000000..25f8b111f1cd39ef3b374176177a679c603d205b
--- /dev/null
+++ b/js/bootstrap-transitions.js
@@ -0,0 +1,45 @@
+/* ===================================================
+ * bootstrap-transitions.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html
+ * ===================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+$(function () {
+
+ /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+ * ======================================================= */
+
+ $.support.transition = (function () {
+ var thisBody = document.body || document.documentElement
+ , thisStyle = thisBody.style
+ , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+
+ return support && {
+ end: (function () {
+ var transitionEnd = "TransitionEnd"
+ if ( $.browser.webkit ) {
+ transitionEnd = "webkitTransitionEnd"
+ } else if ( $.browser.mozilla ) {
+ transitionEnd = "transitionend"
+ } else if ( $.browser.opera ) {
+ transitionEnd = "oTransitionEnd"
+ }
+ return transitionEnd
+ }())
+ }
+ })()
+
+})
\ No newline at end of file
diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js
index bc92f97fe16d572d54e5d64ae78cc36b1845b3f1..ca8ac8800f675df68ed0141ae7ac7ec18d27992d 100644
--- a/js/bootstrap-twipsy.js
+++ b/js/bootstrap-twipsy.js
@@ -1,5 +1,5 @@
/* ==========================================================
- * bootstrap-twipsy.js v1.3.0
+ * bootstrap-twipsy.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#twipsy
* Adapted from the original jQuery.tipsy by Jason Frame
* ==========================================================
@@ -18,37 +18,9 @@
* limitations under the License.
* ========================================================== */
+!function( $ ) {
-(function( $ ) {
-
- /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
- * ======================================================= */
-
- var transitionEnd
-
- $(document).ready(function () {
-
- $.support.transition = (function () {
- var thisBody = document.body || document.documentElement
- , thisStyle = thisBody.style
- , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
- return support
- })()
-
- // set CSS transition event type
- if ( $.support.transition ) {
- transitionEnd = "TransitionEnd"
- if ( $.browser.webkit ) {
- transitionEnd = "webkitTransitionEnd"
- } else if ( $.browser.mozilla ) {
- transitionEnd = "transitionend"
- } else if ( $.browser.opera ) {
- transitionEnd = "oTransitionEnd"
- }
- }
-
- })
-
+ "use strict"
/* TWIPSY PUBLIC CLASS DEFINITION
* ============================== */
@@ -62,7 +34,9 @@
Twipsy.prototype = {
- show: function() {
+ constructor: Twipsy
+
+ , show: function() {
var pos
, actualWidth
, actualHeight
@@ -70,7 +44,7 @@
, $tip
, tp
- if (this.getTitle() && this.enabled) {
+ if (this.hasContent() && this.enabled) {
$tip = this.tip()
this.setContent()
@@ -90,7 +64,8 @@
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
- placement = _.maybeCall(this.options.placement, this.$element[0])
+
+ placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ])
switch (placement) {
case 'below':
@@ -116,7 +91,7 @@
, setContent: function () {
var $tip = this.tip()
- $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle())
+ $tip.find('.twipsy-inner').html(this.getTitle())
$tip[0].className = 'twipsy'
}
@@ -131,7 +106,7 @@
}
$.support.transition && this.$tip.hasClass('fade') ?
- $tip.bind(transitionEnd, removeElement) :
+ $tip.bind( $.support.transition.end, removeElement) :
removeElement()
}
@@ -142,6 +117,10 @@
}
}
+ , hasContent: function () {
+ return this.getTitle()
+ }
+
, getTitle: function() {
var title
, $e = this.$element
@@ -157,14 +136,11 @@
title = ('' + title).replace(/(^\s*|\s*$)/, "")
- return title || o.fallback
+ return title
}
, tip: function() {
- if (!this.$tip) {
- this.$tip = $('<div class="twipsy" />').html('<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>')
- }
- return this.$tip
+ return this.$tip = this.$tip || $('<div class="twipsy" />').html(this.options.template)
}
, validate: function() {
@@ -187,21 +163,20 @@
this.enabled = !this.enabled
}
+ , toggle: function () {
+ this[this.tip().hasClass('in') ? 'hide' : 'show']()
+ }
+
}
/* TWIPSY PRIVATE METHODS
* ====================== */
- var _ = {
-
- maybeCall: function ( thing, ctx ) {
- return (typeof thing == 'function') ? (thing.call(ctx)) : thing
- }
-
+ function maybeCall ( thing, ctx, args ) {
+ return typeof thing == 'function' ? thing.apply(ctx, args) : thing
}
-
/* TWIPSY PLUGIN DEFINITION
* ======================== */
@@ -210,29 +185,33 @@
return this
}
- $.fn.twipsy.initWith = function (options, Constructor, name) {
+ $.fn.twipsy.initWith = function (options, Base, name) {
var twipsy
, binder
, eventIn
, eventOut
- if (options === true) {
- return this.data(name)
- } else if (typeof options == 'string') {
- twipsy = this.data(name)
- if (twipsy) {
- twipsy[options]()
- }
- return this
+ if (typeof options == 'string') {
+ return this.each(function (){
+ twipsy = $.data(this, name)
+ if (twipsy) twipsy[options]()
+ })
}
options = $.extend({}, $.fn[name].defaults, options)
+ if (options.delay && typeof options.delay == 'number') {
+ options.delay = {
+ show: options.delay
+ , hide: options.delay
+ }
+ }
+
function get(ele) {
var twipsy = $.data(ele, name)
if (!twipsy) {
- twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options))
+ twipsy = new Base(ele, $.fn.twipsy.elementOptions(ele, options))
$.data(ele, name, twipsy)
}
@@ -243,7 +222,7 @@
var twipsy = get(this)
twipsy.hoverState = 'in'
- if (options.delayIn == 0) {
+ if (!options.delay || !options.delay.show) {
twipsy.show()
} else {
twipsy.fixTitle()
@@ -251,21 +230,21 @@
if (twipsy.hoverState == 'in') {
twipsy.show()
}
- }, options.delayIn)
+ }, options.delay.show)
}
}
function leave() {
var twipsy = get(this)
twipsy.hoverState = 'out'
- if (options.delayOut == 0) {
+ if (!options.delay || !options.delay.hide) {
twipsy.hide()
} else {
setTimeout(function() {
if (twipsy.hoverState == 'out') {
twipsy.hide()
}
- }, options.delayOut)
+ }, options.delay.hide)
}
}
@@ -289,19 +268,27 @@
$.fn.twipsy.defaults = {
animate: true
- , delayIn: 0
- , delayOut: 0
- , fallback: ''
+ , delay: 0
, placement: 'above'
- , html: false
, live: false
, offset: 0
- , title: 'title'
, trigger: 'hover'
+ , title: 'title'
+ , template: '<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>'
}
+ $.fn.twipsy.rejectAttrOptions = [ 'title' ]
+
$.fn.twipsy.elementOptions = function(ele, options) {
- return $.metadata ? $.extend({}, options, $(ele).metadata()) : options
+ var data = $(ele).data()
+ , rejects = $.fn.twipsy.rejectAttrOptions
+ , i = rejects.length
+
+ while (i--) {
+ delete data[rejects[i]]
+ }
+
+ return $.extend({}, options, data)
}
-})( window.jQuery || window.ender )
\ No newline at end of file
+}( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/tests/index.html b/js/tests/index.html
index 2ca94102ad32752ec1d4cb1809725454f9daeaf0..617fcd92abfd29a3d9cc6c4240b455758d951589 100644
--- a/js/tests/index.html
+++ b/js/tests/index.html
@@ -11,6 +11,7 @@
<script src="vendor/qunit.js"></script>
<!-- plugin sources -->
+ <script src="../../js/bootstrap-transitions.js"></script>
<script src="../../js/bootstrap-alerts.js"></script>
<script src="../../js/bootstrap-dropdown.js"></script>
<script src="../../js/bootstrap-modal.js"></script>
diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index 62f2ce916d5f2c4853ea897366127c0a66fc9062..ffad3591303003759fdf31d3cc8970e413cfd2e9 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -23,4 +23,17 @@
@import "type.less";
@import "forms.less";
@import "tables.less";
-@import "patterns.less";
\ No newline at end of file
+
+// Temp catchall for what's missing thus far
+@import "patterns.less";
+
+@import "tabs-pills.less";
+@import "breadcrumbs.less";
+@import "pagination.less";
+@import "modals.less";
+@import "twipsy.less";
+@import "popovers.less";
+@import "media-grids.less";
+
+// Responsive
+@import "responsive.less";
\ No newline at end of file
diff --git a/lib/breadcrumbs.less b/lib/breadcrumbs.less
new file mode 100644
index 0000000000000000000000000000000000000000..2fa9921ac8a172daebc78b61811ca5e0b463f023
--- /dev/null
+++ b/lib/breadcrumbs.less
@@ -0,0 +1,22 @@
+// BREADCRUMBS
+// -----------
+
+.breadcrumb {
+ padding: 7px 14px;
+ margin: 0 0 @baseLineHeight;
+ #gradient > .vertical(#ffffff, #f5f5f5);
+ border: 1px solid #ddd;
+ .border-radius(3px);
+ .box-shadow(inset 0 1px 0 @white);
+ li {
+ display: inline;
+ text-shadow: 0 1px 0 @white;
+ }
+ .divider {
+ padding: 0 5px;
+ color: @grayLight;
+ }
+ .active a {
+ color: @grayDark;
+ }
+}
diff --git a/lib/forms.less b/lib/forms.less
index 0da4037df7cf55d9d7b2060d7db2d2a829418401..a73e6f545fe00f0e60d8696c994436e83e858a25 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -1,34 +1,25 @@
-/* Forms.less
- * Base styles for various input types, form layouts, and states
- * ------------------------------------------------------------- */
+// Forms.less
+// Base styles for various input types, form layouts, and states
+// -------------------------------------------------------------
-// FORM STYLES
-// -----------
+// GENERAL STYLES
+// --------------
+// Make all forms have space below them
form {
- margin-bottom: @baseline;
+ margin-bottom: @baseLineHeight;
}
// Groups of fields with labels on top (legends)
-fieldset {
- margin-bottom: @baseline;
- padding-top: @baseline;
- legend {
- display: block;
- padding-left: 150px;
- font-size: @basefont * 1.5;
- line-height: 1;
- color: @grayDark;
- *padding: 0 0 5px 145px; /* IE6-7 */
- *line-height: 1.5; /* IE6-7 */
- }
-}
-
-// Parent element that clears floats and wraps labels and fields together
-form .clearfix {
- margin-bottom: @baseline;
- .clearfix()
+legend {
+ display: block;
+ width: 100%;
+ margin-bottom: @baseLineHeight * 1.5;
+ font-size: @baseFontSize * 1.5;
+ line-height: @baseLineHeight * 2;
+ color: @grayDark;
+ border-bottom: 1px solid #eee;
}
// Set font for forms
@@ -36,31 +27,16 @@ label,
input,
select,
textarea {
- #font > .sans-serif(normal,13px,normal);
+ #font > .sans-serif(normal,@baseFontSize,@baseLineHeight);
}
-// Float labels left
+// Identify controls by their labels
label {
- padding-top: 6px;
- font-size: @basefont;
- line-height: @baseline;
- float: left;
- width: 130px;
- text-align: right;
+ display: block;
+ margin-bottom: 5px;
color: @grayDark;
}
-// Shift over the inside div to align all label's relevant content
-form .input {
- margin-left: 150px;
-}
-
-// Checkboxs and radio buttons
-input[type=checkbox],
-input[type=radio] {
- cursor: pointer;
-}
-
// Inputs, Textareas, Selects
input,
textarea,
@@ -68,16 +44,17 @@ select,
.uneditable-input {
display: inline-block;
width: 210px;
- height: @baseline;
+ height: @baseLineHeight;
padding: 4px;
- font-size: @basefont;
- line-height: @baseline;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
color: @gray;
border: 1px solid #ccc;
.border-radius(3px);
}
-/* mini reset for non-html5 file types */
+// Mini reset for unique input types
+input[type=image],
input[type=checkbox],
input[type=radio] {
width: auto;
@@ -87,16 +64,20 @@ input[type=radio] {
*margin-top: 0; /* IE6-7 */
line-height: normal;
border: none;
+ cursor: pointer;
}
+// Reset the file input to browser defaults
input[type=file] {
- background-color: @white;
padding: initial;
- border: initial;
line-height: initial;
+ border: initial;
+ background-color: @white;
+ background-color: initial;
.box-shadow(none);
}
+// Help out input buttons
input[type=button],
input[type=reset],
input[type=submit] {
@@ -104,11 +85,17 @@ input[type=submit] {
height: auto;
}
+// Set the height of select and file controls to match text inputs
select,
input[type=file] {
- height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
- line-height: @baseline * 1.5;
+ height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
+ line-height: @baseLineHeight * 1.5;
+}
+
+// Chrome on Linux needs background color
+select {
+ background-color: @white;
}
// Make multiple select elements height not fixed
@@ -116,40 +103,32 @@ select[multiple] {
height: inherit;
}
+// Remove shadow from image inputs
+input[type=image] {
+ .box-shadow(none);
+}
+
textarea {
height: auto;
}
-// For text that needs to appear as an input but should not be an input
-.uneditable-input {
- background-color: @white;
- display: block;
- border-color: #eee;
- .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
- cursor: not-allowed;
-}
-// Placeholder text gets special styles; can't be bundled together though for some reason
-:-moz-placeholder {
- color: @grayLight;
-}
-::-webkit-input-placeholder {
- color: @grayLight;
-}
-// Focus states
+// FOCUS STATE
+// -----------
+
input,
textarea {
+ .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
@transition: border linear .2s, box-shadow linear .2s;
.transition(@transition);
- .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
}
input:focus,
textarea:focus {
- outline: 0;
border-color: rgba(82,168,236,.8);
@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
+ outline: 0;
}
input[type=file]:focus,
input[type=checkbox]:focus,
@@ -158,90 +137,31 @@ select:focus {
outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
}
-// Error styles
-form div.clearfix.error {
- background: lighten(@red, 57%);
- padding: 10px 0;
- margin: -10px 0 10px;
- .border-radius(4px);
- @error-text: desaturate(lighten(@red, 25%), 25%);
- > label,
- span.help-inline,
- span.help-block {
- color: @red;
- }
- input,
- textarea {
- border-color: @error-text;
- .box-shadow(0 0 3px rgba(171,41,32,.25));
- &:focus {
- border-color: darken(@error-text, 10%);
- .box-shadow(0 0 6px rgba(171,41,32,.5));
- }
- }
- .input-prepend,
- .input-append {
- span.add-on {
- background: lighten(@red, 50%);
- border-color: @error-text;
- color: darken(@error-text, 10%);
- }
- }
-}
-// Form element sizes
-// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
-.input-mini,
-input.mini,
-textarea.mini,
-select.mini {
- width: 60px;
-}
-.input-small,
-input.small,
-textarea.small,
-select.small {
- width: 90px;
-}
-.input-medium,
-input.medium,
-textarea.medium,
-select.medium {
- width: 150px;
-}
-.input-large,
-input.large,
-textarea.large,
-select.large {
- width: 210px;
-}
-.input-xlarge,
-input.xlarge,
-textarea.xlarge,
-select.xlarge {
- width: 270px;
-}
-.input-xxlarge,
-input.xxlarge,
-textarea.xxlarge,
-select.xxlarge {
- width: 530px;
-}
-textarea.xxlarge {
- overflow-y: auto;
-}
+
+// INPUT SIZES
+// -----------
+
+// General classes for quick sizes
+.input-mini { width: 60px; }
+.input-small { width: 90px; }
+.input-medium { width: 150px; }
+.input-large { width: 210px; }
+.input-xlarge { width: 270px; }
+.input-xxlarge { width: 530px; }
// Grid style input sizes
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
.formColumns(@columnSpan: 1) {
display: inline-block;
float: none;
- width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1));
+ width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
margin-left: 0;
}
input,
textarea,
-select {
+select,
+.uneditable-input {
// Default columns
&.span1 { .formColumns(1); }
&.span2 { .formColumns(2); }
@@ -261,6 +181,11 @@ select {
&.span16 { .formColumns(16); }
}
+
+
+// DISABLED STATE
+// --------------
+
// Disabled and read-only inputs
input[disabled],
select[disabled],
@@ -273,36 +198,96 @@ textarea[readonly] {
cursor: not-allowed;
}
-// Actions (the buttons)
-.actions {
- background: #f5f5f5;
- margin-top: @baseline;
- margin-bottom: @baseline;
- padding: (@baseline - 1) 20px @baseline 150px;
- border-top: 1px solid #ddd;
- .border-radius(0 0 3px 3px);
- .secondary-action {
- float: right;
- a {
- line-height: 30px;
- &:hover {
- text-decoration: underline;
- }
+
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// Mixin for form field states
+.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
+ // Set the text color
+ > label,
+ .help-block,
+ .help-inline {
+ color: @textColor;
+ }
+ // Style inputs accordingly
+ input,
+ textarea {
+ color: @textColor;
+ border-color: @borderColor;
+ &:focus {
+ border-color: darken(@borderColor, 10%);
+ .box-shadow(0 0 6px lighten(@borderColor, 20%);
}
}
+ // Give a small background color for input-prepend/-append
+ .input-prepend .add-on,
+ .input-append .add-on {
+ color: @textColor;
+ background-color: @backgroundColor;
+ border-color: @textColor;
+ }
+}
+// Error
+.control-group.error {
+ .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
+}
+// Warning
+.control-group.warning {
+ .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
+}
+// Success
+.control-group.success {
+ .formFieldState(#468847, #57a957, lighten(#57a957, 30%));
}
-// Help Text
-.help-inline,
-.help-block {
- font-size: @basefont - 2;
- line-height: @baseline;
+
+
+// FORM ACTIONS
+// ------------
+
+.form-actions {
+ padding: (@baseLineHeight - 1) 20px @baseLineHeight;
+ margin-top: @baseLineHeight;
+ margin-bottom: @baseLineHeight;
+ background-color: #f5f5f5;
+ border-top: 1px solid #ddd;
+}
+
+// For text that needs to appear as an input but should not be an input
+.uneditable-input {
+ display: block;
+ background-color: @white;
+ border-color: #eee;
+ .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+ cursor: not-allowed;
+}
+
+// Placeholder text gets special styles; can't be bundled together though for some reason
+:-moz-placeholder {
+ color: @grayLight;
+}
+::-webkit-input-placeholder {
+ color: @grayLight;
+}
+
+
+
+// HELP TEXT
+// ---------
+
+.help-text {
+ margin-top: 5px;
+ margin-bottom: 0;
color: @grayLight;
}
+
.help-inline {
- padding-left: 5px;
*position: relative; /* IE6-7 */
*top: -5px; /* IE6-7 */
+ display: inline;
+ padding-left: 5px;
}
// Big blocks of help text
@@ -311,7 +296,11 @@ textarea[readonly] {
max-width: 600px;
}
-// Inline Fields (input fields that appear as inline objects
+
+
+// INLINE FIELDS
+// -------------
+
.inline-inputs {
color: @gray;
span, input {
@@ -328,6 +317,11 @@ textarea[readonly] {
}
}
+
+
+// INPUT GROUPS
+// ------------
+
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
@@ -336,25 +330,25 @@ textarea[readonly] {
}
.add-on {
position: relative;
- background: #f5f5f5;
- border: 1px solid #ccc;
z-index: 2;
float: left;
display: block;
width: auto;
min-width: 16px;
- height: 18px;
- padding: 4px 4px 4px 5px;
+ height: @baseLineHeight;
margin-right: -1px;
+ padding: 4px 4px 4px 5px;
font-weight: normal;
- line-height: 18px;
+ line-height: @baseLineHeight;
color: @grayLight;
text-align: center;
text-shadow: 0 1px 0 @white;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
.border-radius(3px 0 0 3px);
}
.active {
- background: lighten(@green, 30);
+ background-color: lighten(@green, 30);
border-color: @green;
}
}
@@ -369,97 +363,59 @@ textarea[readonly] {
.border-radius(3px 0 0 3px);
}
.add-on {
- .border-radius(0 3px 3px 0);
margin-right: 0;
margin-left: -1px;
+ .border-radius(0 3px 3px 0);
}
}
-// Stacked options for forms (radio buttons or checkboxes)
-.inputs-list {
- margin: 0 0 5px;
- width: 100%;
- li {
- display: block;
- padding: 0;
- width: 100%;
- }
- label {
- display: block;
- float: none;
- width: auto;
- padding: 0;
- line-height: @baseline;
- text-align: left;
- white-space: normal;
- strong {
- color: @gray;
- }
- small {
- font-size: @basefont - 2;
- font-weight: normal;
- }
- }
- .inputs-list {
- margin-left: 25px;
- margin-bottom: 10px;
- padding-top: 0;
- }
- &:first-child {
- padding-top: 6px;
- }
- li + li {
- padding-top: 2px;
- }
- input[type=radio],
- input[type=checkbox] {
- margin-bottom: 0;
- }
+
+
+// SEARCH FORM
+// -----------
+
+.search-form .search-query {
+ .border-radius(14px);
}
-// Stacked forms
-.form-stacked {
- padding-left: 20px;
- fieldset {
- padding-top: @baseline / 2;
- }
- legend {
- padding-left: 0;
- }
- label {
- display: block;
- float: none;
- width: auto;
- font-weight: bold;
- text-align: left;
- line-height: 20px;
- padding-top: 0;
- }
- .clearfix {
- margin-bottom: @baseline / 2;
- div.input {
- margin-left: 0;
- }
+
+
+// HORIZONTAL & VERTICAL FORMS
+// ---------------------------
+
+// Common properties
+// -----------------
+
+// Margin to space out fieldsets
+.control-group {
+ margin-bottom: @baseLineHeight;
+}
+// Bold the labels so they stand out
+.control-group > label {
+ font-weight: bold;
+}
+
+// Horizontal-specific styles
+// --------------------------
+
+.horizontal-form {
+ // Float the labels left
+ .control-group > label {
+ float: left;
+ width: 130px;
+ padding-top: 5px;
+ text-align: right;
}
- .inputs-list {
- margin-bottom: 0;
- li {
- padding-top: 0;
- label {
- font-weight: normal;
- padding-top: 0;
- }
- }
+ // Move over all input controls and content
+ .controls {
+ margin-left: 150px;
}
- div.clearfix.error {
- padding-top: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
- margin-top: 0;
- margin-left: -10px;
+ // Move the options list down to align with labels
+ .control-list {
+ padding-top: 6px; // has to be padding because margin collaspes
}
- .actions {
- margin-left: -20px;
- padding-left: 20px;
+ // Move over buttons in .form-actions to align with .controls
+ .form-actions {
+ padding-left: 150px;
}
}
diff --git a/lib/media-grids.less b/lib/media-grids.less
new file mode 100644
index 0000000000000000000000000000000000000000..12626df3f1635ceab9c31b23f616cc2bc4418a9d
--- /dev/null
+++ b/lib/media-grids.less
@@ -0,0 +1,33 @@
+// THUMBNAILS
+// ----------
+
+.thumbnails {
+ margin-left: -20px;
+ margin-bottom: 0;
+ list-style: none;
+ .clearfix();
+}
+.thumbnails > li {
+ float: left;
+ margin: 0 0 20px 20px;
+}
+.thumbnail {
+ display: block;
+ line-height: 1;
+ border: 1px solid #ddd;
+ .border-radius(4px);
+ .box-shadow(0 1px 1px rgba(0,0,0,.075));
+}
+// Add a hover state for linked versions only
+a.thumbnail:hover {
+ border-color: @linkColor;
+ .box-shadow(0 1px 4px rgba(0,105,214,.25));
+}
+// Images and captions
+.thumbnail > img {
+ display: block;
+ margin: 4px;
+}
+.thumbnail .caption {
+ padding: 9px;
+}
diff --git a/lib/mixins.less b/lib/mixins.less
index ca7893dafea098a5fda162e82be4a7aa59f1f17a..0effdfa37ae5df0ad3dfaa4057111ae2e4cd68b2 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -1,37 +1,37 @@
-/* Variables.less
- * Snippets of reusable CSS to develop faster and keep code readable
- * ----------------------------------------------------------------- */
+// Mixins.less
+// Snippets of reusable CSS to develop faster and keep code readable
+// -----------------------------------------------------------------
// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix() {
zoom: 1;
- &:before,
+ &:before,
&:after {
display: table;
+ *display: inline;
content: "";
zoom: 1;
- *display: inline;
- }
- &:after {
+ }
+ &:after {
clear: both;
- }
+ }
}
// Center-align a block level element
.center-block() {
- display: block;
+ display: block;
margin-left: auto;
margin-right: auto;
}
// Sizing shortcuts
.size(@height: 5px, @width: 5px) {
- height: @height;
- width: @width;
+ width: @width;
+ height: @height;
}
.square(@size: 5px) {
- .size(@size, @size);
+ .size(@size, @size);
}
// Input placeholder text
@@ -46,28 +46,33 @@
// Font Stacks
#font {
- .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
+ #family {
+ .serif() {
+ font-family: "Georgia", Times New Roman, Times, serif;
+ }
+ .sans-serif() {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ }
+ .monospace() {
+ font-family: "Menlo", Monaco, Courier New, monospace;
+ }
}
- .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
- .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-family: "Georgia", Times New Roman, Times, serif;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
+ .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ #font > #family > .serif;
+ #font > .shorthand(@size, @weight, @lineHeight);
}
- .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
- font-family: "Monaco", Courier New, monospace;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
+ .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ #font > #family > .sans-serif;
+ #font > .shorthand(@size, @weight, @lineHeight);
+ }
+ .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ #font > #family > .monospace;
+ #font > .shorthand(@size, @weight, @lineHeight);
}
}
@@ -78,12 +83,13 @@
margin-right: auto;
.clearfix();
}
-.columns(@columnSpan: 1) {
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+.columns(@columns: 1) {
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
-.offset(@columnOffset: 1) {
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
+.offset(@columns: 1) {
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
+
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
display: inline;
@@ -102,6 +108,23 @@
-moz-border-radius: @radius;
border-radius: @radius;
}
+.border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) {
+ -webkit-border-top-left-radius: @topLeft;
+ -moz-border-radius-topleft: @topLeft;
+ border-top-left-radius: @topLeft;
+ -webkit-border-top-right-radius: @topRight;
+ -moz-border-radius-topright: @topRight;
+ border-top-right-radius: @topRight;
+ -webkit-border-bottom-right-radius: @bottomRight;
+ -moz-border-radius-bottomright: @bottomRight;
+ border-bottom-right-radius: @bottomRight;
+ -webkit-border-bottom-left-radius: @bottomLeft;
+ -moz-border-radius-bottomleft: @bottomLeft;
+ border-bottom-left-radius: @bottomLeft;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+}
// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
@@ -112,27 +135,58 @@
// Transitions
.transition(@transition) {
- -webkit-transition: @transition;
- -moz-transition: @transition;
- -ms-transition: @transition;
- -o-transition: @transition;
- transition: @transition;
+ -webkit-transition: @transition;
+ -moz-transition: @transition;
+ -ms-transition: @transition;
+ -o-transition: @transition;
+ transition: @transition;
+}
+
+// Transform for scale and rotate
+// translate, rotate, scale -- need to finalize
+.rotate(@degrees: 5deg) {
+ -webkit-transform: rotate(@degrees);
+ -moz-transform: rotate(@degrees);
+ -ms-transform: rotate(@degrees);
+ -o-transform: rotate(@degrees);
+ transform: rotate(@degrees);
+}
+.scale(@value: 1.5) {
+ -webkit-transform: scale(@value);
+ -moz-transform: scale(@value);
+ -ms-transform: scale(@value);
+ -o-transform: scale(@value);
+ transform: scale(@value);
+}
+.translate(@x: 0, @y: 0) {
+ -webkit-transform: translate(@x, @y);
+ -moz-transform: translate(@x, @y);
+ -ms-transform: translate(@x, @y);
+ -o-transform: translate(@x, @y);
+ transform: translate(@x, @y);
}
// Background clipping
+// Heads up: FF 3.6 and under need padding instead of padding-box
.background-clip(@clip) {
- -webkit-background-clip: @clip;
- -moz-background-clip: @clip;
- background-clip: @clip;
+ -webkit-background-clip: @clip;
+ -moz-background-clip: @clip;
+ background-clip: @clip;
+}
+
+// Resize anything
+.resizable(@direction: both) {
+ resize: @direction; // Options: horizontal, vertical, both
+ overflow: auto; // Safari fix
}
// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: 20px) {
- -webkit-column-count: @columnCount;
- -moz-column-count: @columnCount;
+ -webkit-column-count: @columnCount;
+ -moz-column-count: @columnCount;
column-count: @columnCount;
-webkit-column-gap: @columnGap;
- -moz-column-gap: @columnGap;
+ -moz-column-gap: @columnGap;
column-gap: @columnGap;
}
@@ -140,26 +194,27 @@
#translucent {
.background(@color: @white, @alpha: 1) {
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
- }
- .border(@color: @white, @alpha: 1) {
- border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
- background-clip: padding-box;
- }
+ }
+ .border(@color: @white, @alpha: 1) {
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+ }
}
-// Gradient Bar Colors for buttons and allerts
+// Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor) {
- #gradient > .vertical(@primaryColor, @secondaryColor);
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ #gradient > .vertical(@primaryColor, @secondaryColor);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}
// Gradients
#gradient {
- .horizontal (@startColor: #555, @endColor: #333) {
+ .horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
@@ -167,11 +222,11 @@
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+ background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
}
- .vertical (@startColor: #555, @endColor: #333) {
+ .vertical(@startColor: #555, @endColor: #333) {
background-color: @endColor;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
@@ -179,9 +234,10 @@
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor); // The standard
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
+ background-repeat: repeat-x;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}
- .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
+ .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
@@ -192,15 +248,24 @@
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: @endColor;
- background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
}
+ .radial(@centerColor: #555, @outsideColor: #333) {
+ background-color: @outsideColor;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@centerColor), to(@outsideColor));
+ background-image: -webkit-radial-gradient(circle, @centerColor, @outsideColor);
+ background-image: -moz-radial-gradient(circle, @centerColor, @outsideColor);
+ background-image: -ms-radial-gradient(circle, @centerColor, @outsideColor);
+ background-repeat: no-repeat;
+ // Opera cannot do radial gradients yet
+ }
}
// Reset filters for IE
@@ -210,8 +275,44 @@
// Opacity
.opacity(@opacity: 100) {
- filter: e(%("alpha(opacity=%d)", @opacity));
- -khtml-opacity: @opacity / 100;
- -moz-opacity: @opacity / 100;
- opacity: @opacity / 100;
-}
\ No newline at end of file
+ filter: e(%("alpha(opacity=%d)", @opacity));
+ -moz-opacity: @opacity / 100;
+ opacity: @opacity / 100;
+}
+
+// Popover arrows
+// For tipsies and popovers
+#popoverArrow {
+ .above(@arrowWidth: 5px) {
+ bottom: 0;
+ left: 50%;
+ margin-left: -@arrowWidth;
+ border-left: @arrowWidth solid transparent;
+ border-right: @arrowWidth solid transparent;
+ border-top: @arrowWidth solid @black;
+ }
+ .left(@arrowWidth: 5px) {
+ top: 50%;
+ right: 0;
+ margin-top: -@arrowWidth;
+ border-top: @arrowWidth solid transparent;
+ border-bottom: @arrowWidth solid transparent;
+ border-left: @arrowWidth solid @black;
+ }
+ .below(@arrowWidth: 5px) {
+ top: 0;
+ left: 50%;
+ margin-left: -@arrowWidth;
+ border-left: @arrowWidth solid transparent;
+ border-right: @arrowWidth solid transparent;
+ border-bottom: @arrowWidth solid @black;
+ }
+ .right(@arrowWidth: 5px) {
+ top: 50%;
+ left: 0;
+ margin-top: -@arrowWidth;
+ border-top: @arrowWidth solid transparent;
+ border-bottom: @arrowWidth solid transparent;
+ border-right: @arrowWidth solid @black;
+ }
+}
diff --git a/lib/modals.less b/lib/modals.less
new file mode 100644
index 0000000000000000000000000000000000000000..53d6cd40899ab0dc05b4afb2c51e8eb0fc365dab
--- /dev/null
+++ b/lib/modals.less
@@ -0,0 +1,60 @@
+// MODALS
+// ------
+
+.modal-backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 10000;
+ background-color: @black;
+ // Fade for backdrop
+ &.fade { opacity: 0; }
+}
+
+.modal-backdrop, .modal-backdrop.fade.in {
+ .opacity(80);
+}
+
+.modal {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ z-index: 11000;
+ width: 560px;
+ margin: -250px 0 0 -250px;
+ background-color: @white;
+ border: 1px solid #999;
+ border: 1px solid rgba(0,0,0,.3);
+ *border: 1px solid #999; /* IE6-7 */
+ .border-radius(6px);
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
+ .background-clip(padding-box);
+ .close { margin-top: 7px; }
+ &.fade {
+ .transition(e('opacity .3s linear, top .3s ease-out'));
+ top: -25%;
+ }
+ &.fade.in { top: 50%; }
+}
+.modal-header {
+ padding: 5px 15px;
+ border-bottom: 1px solid #eee;
+}
+.modal-body {
+ padding: 15px;
+}
+.modal-footer {
+ padding: 14px 15px 15px;
+ margin-bottom: 0;
+ background-color: #f5f5f5;
+ border-top: 1px solid #ddd;
+ .border-radius(0 0 6px 6px);
+ .box-shadow(inset 0 1px 0 @white);
+ .clearfix();
+ .btn {
+ float: right;
+ margin-left: 5px;
+ }
+}
diff --git a/lib/pagination.less b/lib/pagination.less
new file mode 100644
index 0000000000000000000000000000000000000000..d82a0bbd07db0cf98b1b17c0eabe0b67e56eae7f
--- /dev/null
+++ b/lib/pagination.less
@@ -0,0 +1,40 @@
+// PAGINATION
+// ----------
+
+.pagination {
+ height: @baseLineHeight * 2;
+ margin: @baseLineHeight 0;
+ ul {
+ float: left;
+ margin: 0;
+ border: 1px solid #ddd;
+ border: 1px solid rgba(0,0,0,.15);
+ .border-radius(3px);
+ .box-shadow(0 1px 2px rgba(0,0,0,.05));
+ }
+ li {
+ display: inline;
+ }
+ a {
+ float: left;
+ padding: 0 14px;
+ line-height: (@baseLineHeight * 2) - 2;
+ text-decoration: none;
+ border-right: 1px solid;
+ border-right-color: #ddd;
+ border-right-color: rgba(0,0,0,.15);
+ *border-right-color: #ddd; /* IE6-7 */
+ }
+ a:hover,
+ .active a {
+ background-color: lighten(@blue, 45%);
+ }
+ .disabled a,
+ .disabled a:hover {
+ color: @grayLight;
+ background-color: transparent;
+ }
+ .next a {
+ border: 0;
+ }
+}
diff --git a/lib/patterns.less b/lib/patterns.less
index ce387614e9a13d8f177ece609cab44efeca5b058..558f3ca45bc4259e7d072b4e246eb11136e69717 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -1,86 +1,79 @@
-/* Patterns.less
- * Repeatable UI elements outside the base styles provided from the scaffolding
- * ---------------------------------------------------------------------------- */
+// Patterns.less
+// Repeatable UI elements outside the base styles provided from the scaffolding
+// ----------------------------------------------------------------------------
-// TOPBAR
-// ------
+// NAVBAR (FIXED AND STATIC)
+// -------------------------
-// Topbar for Branding and Nav
-.topbar {
- height: 40px;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 10000;
- overflow: visible;
+// Navbar variables
+@navBarHeight: 40px;
+@navBarBgStart: #333;
+@navBarBgEnd: #222;
- // Links get text shadow
+// Common styles
+.navbar {
+ overflow: visible;
+}
+// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
+.navbar-inner {
+ background-color: @navBarBgEnd;
+ #gradient > .vertical(@navBarBgStart, @navBarBgEnd);
+ @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+ .box-shadow(@shadow);
+}
+// Text and links
+.navbar {
+ // Links get text-shadow
a {
color: @grayLight;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
-
// Hover and active states
- // h3 for backwards compatibility
- h3 a:hover,
.brand a:hover,
ul .active > a {
- background-color: #333;
- background-color: rgba(255,255,255,.05);
color: @white;
text-decoration: none;
+ background-color: @navBarBgStart;
+ background-color: rgba(255,255,255,.05);
}
-
- // Website name
- // h3 left for backwards compatibility
- h3 {
- position: relative;
- }
- h3 a,
+ // Website or project name
.brand {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px; // negative indent to left-align the text down the page
- color: @white;
font-size: 20px;
font-weight: 200;
line-height: 1;
+ color: @white;
}
-
// Plain text in topbar
p {
margin: 0;
line-height: 40px;
a:hover {
- background-color: transparent;
color: @white;
+ background-color: transparent;
}
}
+}
- // Search Form
- form {
- float: left;
- margin: 5px 0 0 0;
- position: relative;
- .opacity(100);
- }
- // Todo: remove from v2.0 when ready, added for legacy
- form.pull-right {
- float: right;
- }
- input {
- background-color: #444;
- background-color: rgba(255,255,255,.3);
- #font > .sans-serif(13px, normal, 1);
+// Navbar search
+.navbar-search {
+ position: relative;
+ float: left;
+ margin-top: 6px;
+ margin-bottom: 0;
+ .search-query {
padding: 4px 9px;
+ #font > .sans-serif(13px, normal, 1);
color: @white;
color: rgba(255,255,255,.75);
+ background-color: #444;
+ background-color: rgba(255,255,255,.3);
border: 1px solid #111;
- .border-radius(4px);
- @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
+ @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
.box-shadow(@shadow);
.transition(none);
@@ -93,48 +86,57 @@
}
// Hover states
&:hover {
+ color: @white;
background-color: @grayLight;
background-color: rgba(255,255,255,.5);
- color: @white;
}
// Focus states (we use .focused since IE8 and down doesn't support :focus)
&:focus,
&.focused {
- outline: 0;
- background-color: @white;
+ padding: 5px 10px;
color: @grayDark;
text-shadow: 0 1px 0 @white;
+ background-color: @white;
border: 0;
- padding: 5px 10px;
.box-shadow(0 0 3px rgba(0,0,0,.15));
+ outline: 0;
}
}
}
-// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
-// For backwards compatibility, include .topbar .fill
-.topbar-inner,
-.topbar .fill {
- background-color: #222;
- #gradient > .vertical(#333, #222);
- @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
- .box-shadow(@shadow);
+
+// Static navbar
+.navbar-static {
+ margin-bottom: @baseLineHeight;
+}
+.navbar-static .navbar-inner {
+ padding-left: 20px;
+ padding-right: 20px;
+ .border-radius(4px);
+}
+
+// Fixed navbar
+.navbar-fixed {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 10000;
}
+
// NAVIGATION
// ----------
-// Topbar Nav
+// Nav for navbar and topbar
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
-// For backwards compatibility, leave in .topbar div > ul
-.topbar div > ul,
.nav {
+ position: relative;
+ left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
- position: relative;
- left: 0;
> li {
display: block;
float: left;
@@ -154,34 +156,34 @@
background-color: #222;
background-color: rgba(0,0,0,.5);
}
+ // Dividers (basically a vertical hr)
+ .divider {
+ height: 40px;
+ width: 1px;
+ margin: 0 5px;
+ overflow: hidden;
+ background-color: #222;
+ border-right: 1px solid #444;
+ }
// Secondary (floated right) nav in topbar
&.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
- // backwards compatibility
- .menu-dropdown,
.dropdown-menu {
right: 0;
border: 0;
}
}
// Dropdowns within the .nav
- // a.menu:hover and li.open .menu for backwards compatibility
- a.menu:hover,
- li.open .menu,
.dropdown-toggle:hover,
.dropdown.open .dropdown-toggle {
background: #444;
background: rgba(255,255,255,.05);
}
- // .menu-dropdown for backwards compatibility
- .menu-dropdown,
.dropdown-menu {
background-color: #333;
- // a.menu for backwards compatibility
- a.menu,
.dropdown-toggle {
color: @white;
&.open {
@@ -207,53 +209,47 @@
}
}
-// For backwards compatibility with new dropdowns, redeclare dropdown link padding
-.topbar ul .menu-dropdown li a,
.topbar ul .dropdown-menu li a {
padding: 4px 15px;
}
// Dropdown Menus
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
-// li.menu for backwards compatibility
-li.menu,
.dropdown {
position: relative;
}
// The link that is clicked to toggle the dropdown
-// a.menu for backwards compatibility
-a.menu:after,
.dropdown-toggle:after {
+ display: inline-block;
width: 0;
height: 0;
- display: inline-block;
- content: "↓";
+ margin-top: 8px;
+ margin-left: 6px;
text-indent: -99999px;
vertical-align: top;
- margin-top: 8px;
- margin-left: 4px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid @white;
- .opacity(50);
+ .opacity(30);
+ content: "↓";
+}
+.dropdown:hover .dropdown-toggle:after {
+ .opacity(100);
}
// The dropdown menu (ul)
-// .menu-dropdown for backwards compatibility
-.menu-dropdown,
.dropdown-menu {
- background-color: @white;
- float: left;
- display: none; // None by default, but block on "open" of the menu
position: absolute;
top: 40px;
z-index: 900;
+ float: left;
+ display: none; // None by default, but block on "open" of the menu
min-width: 160px;
max-width: 220px;
_width: 160px;
+ padding: 6px 0;
margin-left: 0; // override default ul styles
margin-right: 0;
- padding: 6px 0;
- zoom: 1; // do we need this?
+ background-color: @white;
border-color: #999;
border-color: rgba(0,0,0,.2);
border-style: solid;
@@ -261,6 +257,7 @@ a.menu:after,
.border-radius(0 0 6px 6px);
.box-shadow(0 2px 4px rgba(0,0,0,.2));
.background-clip(padding-box);
+ zoom: 1; // do we need this?
// Unfloat any li's to make them stack
li {
@@ -290,9 +287,9 @@ a.menu:after,
text-shadow: 0 1px 0 @white;
// Hover state
&:hover {
- #gradient > .vertical(#eeeeee, #dddddd);
color: @grayDark;
text-decoration: none;
+ #gradient > .vertical(#eeeeee, #dddddd);
@shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
.box-shadow(@shadow);
}
@@ -300,161 +297,27 @@ a.menu:after,
}
// Open state for the dropdown
-// .open for backwards compatibility
-.open,
.dropdown.open {
- // .menu for backwards compatibility
- .menu,
.dropdown-toggle {
color: @white;
background: #ccc;
background: rgba(0,0,0,.3);
}
- // .menu-dropdown for backwards compatibility
- .menu-dropdown,
.dropdown-menu {
display: block;
}
}
-// Tabs and Pills
-.tabs,
-.pills {
- margin: 0 0 20px;
- padding: 0;
- list-style: none;
- .clearfix();
- > li {
- float: left;
- > a {
- display: block;
- }
- }
-}
-
-// Basic Tabs
-.tabs {
- float: left;
- width: 100%;
- border-bottom: 1px solid #ddd;
- > li {
- position: relative; // For the dropdowns mostly
- top: 1px;
- > a {
- padding: 0 15px;
- margin-right: 2px;
- line-height: @baseline * 2;
- border: 1px solid transparent;
- .border-radius(4px 4px 0 0);
- &:hover {
- text-decoration: none;
- background-color: #eee;
- border-color: #eee #eee #ddd;
- }
- }
- &.active > a {
- color: @gray;
- background-color: @white;
- border: 1px solid #ddd;
- border-bottom-color: transparent;
- }
- }
- // first one for backwards compatibility
- .menu-dropdown,
- .dropdown-menu {
- top: 35px;
- border-width: 1px;
- .border-radius(0 6px 6px 6px);
- }
- // first one for backwards compatibility
- a.menu:after,
- .dropdown-toggle:after {
- border-top-color: #999;
- margin-top: 15px;
- margin-left: 5px;
- }
- // first one for backwards compatibility
- li.open.menu .menu,
- .open.dropdown .dropdown-toggle {
- border-color: #999;
- }
- // first one for backwards compatibility
- li.open a.menu:after,
- .dropdown.open .dropdown-toggle:after {
- border-top-color: #555;
- }
-}
-.tab-content {
- clear: both;
-}
-
-// Basic pill nav
-.pills {
- a {
- margin: 5px 3px 5px 0;
- padding: 0 15px;
- text-shadow: 0 1px 1px @white;
- line-height: 30px;
- .border-radius(15px);
- &:hover {
- background: @linkColorHover;
- color: @white;
- text-decoration: none;
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
- }
- }
- .active a {
- background: @linkColor;
- color: @white;
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
- }
-}
-
-.tab-content > *,
-.pill-content > * {
- display: none;
-}
-
-.tab-content > .active,
-.pill-content > .active {
- display:block;
-}
-
-
-// BREADCRUMBS
-// -----------
-
-.breadcrumb {
- margin: 0 0 @baseline;
- padding: 7px 14px;
- #gradient > .vertical(#ffffff, #f5f5f5);
- border: 1px solid #ddd;
- .border-radius(3px);
- .box-shadow(inset 0 1px 0 @white);
- li {
- display: inline;
- text-shadow: 0 1px 0 @white;
- }
- .divider {
- padding: 0 5px;
- color: @grayLight;
- }
- a {
- }
- .active a {
- color: @grayDark;
- }
-}
// PAGE HEADERS
// ------------
.hero-unit {
- background-color: #f5f5f5;
- margin-bottom: 30px;
padding: 60px;
+ margin-bottom: 30px;
+ background-color: #f5f5f5;
.border-radius(6px);
h1 {
margin-bottom: 0;
@@ -465,12 +328,12 @@ a.menu:after,
p {
font-size: 18px;
font-weight: 200;
- line-height: @baseline * 1.5;
+ line-height: @baseLineHeight * 1.5;
}
}
footer {
- margin-top: @baseline - 1;
- padding-top: @baseline - 1;
+ padding-top: @baseLineHeight - 1;
+ margin-top: @baseLineHeight - 1;
border-top: 1px solid #eee;
}
@@ -479,11 +342,11 @@ footer {
// ------------
.page-header {
- margin-bottom: @baseline - 1;
- border-bottom: 1px solid #ddd;
+ margin-bottom: @baseLineHeight * 1.5;
+ border-bottom: 1px solid #eee;
.box-shadow(0 1px 0 rgba(255,255,255,.5));
h1 {
- margin-bottom: (@baseline / 2) - 1px;
+ margin-bottom: @baseLineHeight * .75;
}
}
@@ -523,24 +386,24 @@ footer {
// Base .btn styles
.btn {
// Button Base
- cursor: pointer;
display: inline-block;
- #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
padding: 5px 14px 6px;
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
- color: #333;
- font-size: @basefont;
+ font-size: @baseFontSize;
line-height: normal;
+ color: #333;
+ text-shadow: 0 1px 1px rgba(255,255,255,.75);
+ #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
border: 1px solid #ccc;
border-bottom-color: #bbb;
.border-radius(4px);
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
+ cursor: pointer;
&:hover {
- background-position: 0 -15px;
color: #333;
text-decoration: none;
+ background-position: 0 -15px;
}
// Focus state for keyboard and accessibility
@@ -558,6 +421,7 @@ footer {
.transition(.1s linear all);
// Active and Disabled states
+ &.active,
&:active {
@shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
@@ -581,14 +445,14 @@ footer {
// Button Sizes
&.large {
- font-size: @basefont + 2px;
- line-height: normal;
padding: 9px 14px 9px;
+ font-size: @baseFontSize + 2px;
+ line-height: normal;
.border-radius(6px);
}
&.small {
padding: 7px 9px 7px;
- font-size: @basefont - 2px;
+ font-size: @baseFontSize - 2px;
}
}
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
@@ -606,15 +470,63 @@ input[type=submit].btn {
}
}
+// Button groups
+// -------------
+
+// Group multiple button groups together for a toolbar
+.btn-toolbar {
+ .clearfix();
+ .btn-group {
+ float: left;
+ margin-right: 10px;
+ }
+}
+
+// Clear the float
+.btn-group {
+ .clearfix();
+}
+// Float them, remove border radius, then re-add to first and last elements
+.btn-group .btn {
+ position: relative;
+ float: left;
+ margin-left: -1px;
+ .border-radius(0);
+ &:first-child {
+ margin-left: 0;
+ -webkit-border-top-left-radius: 4px;
+ -moz-border-radius-topleft: 4px;
+ border-top-left-radius: 4px;
+ -webkit-border-bottom-left-radius: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ border-bottom-left-radius: 4px;
+ }
+ &:last-child {
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ border-top-right-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ -moz-border-radius-bottomright: 4px;
+ border-bottom-right-radius: 4px;
+ }
+}
+// On hover/focus/active, bring the proper btn to front
+.btn-group .btn:hover,
+.btn-group .btn:focus,
+.btn-group .btn:active {
+ z-index: 2;
+}
+
+
// CLOSE ICONS
// -----------
.close {
float: right;
- color: @black;
font-size: 20px;
font-weight: bold;
- line-height: @baseline * .75;
+ line-height: @baseLineHeight * .75;
+ color: @black;
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20);
&:hover {
@@ -632,10 +544,10 @@ input[type=submit].btn {
.alert-message {
position: relative;
padding: 7px 15px;
- margin-bottom: @baseline;
+ margin-bottom: @baseLineHeight;
color: @grayDark;
- .gradientBar(#fceec1, #eedc94); // warning by default
text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ .gradientBar(#fceec1, #eedc94); // warning by default
border-width: 1px;
border-style: solid;
.border-radius(4px);
@@ -648,7 +560,7 @@ input[type=submit].btn {
// Remove extra margin from content
h5 {
- line-height: @baseline;
+ line-height: @baseLineHeight;
}
p {
margin-bottom: 0;
@@ -664,10 +576,10 @@ input[type=submit].btn {
}
&.block-message {
+ padding: 14px;
background-image: none;
background-color: lighten(#fceec1, 5%);
- .reset-filter();
- padding: 14px;
+ .reset-filter(); // undo gradient for IE9
border-color: #fceec1;
.box-shadow(none);
ul, p {
@@ -704,56 +616,16 @@ input[type=submit].btn {
}
-// PAGINATION
-// ----------
-
-.pagination {
- height: @baseline * 2;
- margin: @baseline 0;
- ul {
- float: left;
- margin: 0;
- border: 1px solid #ddd;
- border: 1px solid rgba(0,0,0,.15);
- .border-radius(3px);
- .box-shadow(0 1px 2px rgba(0,0,0,.05));
- }
- li {
- display: inline;
- }
- a {
- float: left;
- padding: 0 14px;
- line-height: (@baseline * 2) - 2;
- border-right: 1px solid;
- border-right-color: #ddd;
- border-right-color: rgba(0,0,0,.15);
- *border-right-color: #ddd; /* IE6-7 */
- text-decoration: none;
- }
- a:hover,
- .active a {
- background-color: lighten(@blue, 45%);
- }
- .disabled a,
- .disabled a:hover {
- background-color: transparent;
- color: @grayLight;
- }
- .next a {
- border: 0;
- }
-}
// WELLS
// -----
.well {
- background-color: #f5f5f5;
- margin-bottom: 20px;
- padding: 19px;
min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
border: 1px solid #eee;
border: 1px solid rgba(0,0,0,.05);
.border-radius(4px);
@@ -765,188 +637,6 @@ input[type=submit].btn {
}
-// MODALS
-// ------
-
-.modal-backdrop {
- background-color: @black;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 10000;
- // Fade for backdrop
- &.fade { opacity: 0; }
-}
-
-.modal-backdrop, .modal-backdrop.fade.in {
- .opacity(80);
-}
-
-.modal {
- position: fixed;
- top: 50%;
- left: 50%;
- z-index: 11000;
- width: 560px;
- margin: -250px 0 0 -250px;
- background-color: @white;
- border: 1px solid #999;
- border: 1px solid rgba(0,0,0,.3);
- *border: 1px solid #999; /* IE6-7 */
- .border-radius(6px);
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
- .background-clip(padding-box);
- .close { margin-top: 7px; }
- &.fade {
- .transition(e('opacity .3s linear, top .3s ease-out'));
- top: -25%;
- }
- &.fade.in { top: 50%; }
-}
-.modal-header {
- border-bottom: 1px solid #eee;
- padding: 5px 15px;
-}
-.modal-body {
- padding: 15px;
-}
-.modal-footer {
- background-color: #f5f5f5;
- padding: 14px 15px 15px;
- border-top: 1px solid #ddd;
- .border-radius(0 0 6px 6px);
- .box-shadow(inset 0 1px 0 @white);
- .clearfix();
- margin-bottom: 0;
- .btn {
- float: right;
- margin-left: 5px;
- }
-}
-
-
-// POPOVER ARROWS
-// --------------
-
-#popoverArrow {
- .above(@arrowWidth: 5px) {
- bottom: 0;
- left: 50%;
- margin-left: -@arrowWidth;
- border-left: @arrowWidth solid transparent;
- border-right: @arrowWidth solid transparent;
- border-top: @arrowWidth solid @black;
- }
- .left(@arrowWidth: 5px) {
- top: 50%;
- right: 0;
- margin-top: -@arrowWidth;
- border-top: @arrowWidth solid transparent;
- border-bottom: @arrowWidth solid transparent;
- border-left: @arrowWidth solid @black;
- }
- .below(@arrowWidth: 5px) {
- top: 0;
- left: 50%;
- margin-left: -@arrowWidth;
- border-left: @arrowWidth solid transparent;
- border-right: @arrowWidth solid transparent;
- border-bottom: @arrowWidth solid @black;
- }
- .right(@arrowWidth: 5px) {
- top: 50%;
- left: 0;
- margin-top: -@arrowWidth;
- border-top: @arrowWidth solid transparent;
- border-bottom: @arrowWidth solid transparent;
- border-right: @arrowWidth solid @black;
- }
-}
-
-// TWIPSY
-// ------
-
-.twipsy {
- display: block;
- position: absolute;
- visibility: visible;
- padding: 5px;
- font-size: 11px;
- z-index: 1000;
- .opacity(80);
- &.fade.in {
- .opacity(80);
- }
- &.above .twipsy-arrow { #popoverArrow > .above(); }
- &.left .twipsy-arrow { #popoverArrow > .left(); }
- &.below .twipsy-arrow { #popoverArrow > .below(); }
- &.right .twipsy-arrow { #popoverArrow > .right(); }
-}
-.twipsy-inner {
- padding: 3px 8px;
- background-color: @black;
- color: white;
- text-align: center;
- max-width: 200px;
- text-decoration: none;
- .border-radius(4px);
-}
-.twipsy-arrow {
- position: absolute;
- width: 0;
- height: 0;
-}
-
-
-// POPOVERS
-// --------
-
-.popover {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1000;
- padding: 5px;
- display: none;
- &.above .arrow { #popoverArrow > .above(); }
- &.right .arrow { #popoverArrow > .right(); }
- &.below .arrow { #popoverArrow > .below(); }
- &.left .arrow { #popoverArrow > .left(); }
- .arrow {
- position: absolute;
- width: 0;
- height: 0;
- }
- .inner {
- background-color: @black;
- background-color: rgba(0,0,0,.8);
- padding: 3px;
- overflow: hidden;
- width: 280px;
- .border-radius(6px);
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
- }
- .title {
- background-color: #f5f5f5;
- padding: 9px 15px;
- line-height: 1;
- .border-radius(3px 3px 0 0);
- border-bottom:1px solid #eee;
- }
- .content {
- background-color: @white;
- padding: 14px;
- .border-radius(0 0 3px 3px);
- .background-clip(padding-box);
- p, ul, ol {
- margin-bottom: 0;
- }
- }
-}
-
-
// PATTERN ANIMATIONS
// ------------------
@@ -958,17 +648,25 @@ input[type=submit].btn {
}
}
+.collapse {
+ .transition(height .35s ease);
+ position:relative;
+ overflow:hidden;
+ height: 0;
+ &.in { height: auto; }
+}
+
// LABELS
// ------
.label {
padding: 1px 3px 2px;
- background-color: @grayLight;
- font-size: @basefont * .75;
+ font-size: @baseFontSize * .75;
font-weight: bold;
color: @white;
text-transform: uppercase;
+ background-color: @grayLight;
.border-radius(3px);
&.important { background-color: #c43c35; }
&.warning { background-color: @orange; }
@@ -976,30 +674,3 @@ input[type=submit].btn {
&.notice { background-color: lighten(@blue, 25%); }
}
-
-// MEDIA GRIDS
-// -----------
-
-.media-grid {
- margin-left: -20px;
- margin-bottom: 0;
- .clearfix();
- li {
- display: inline;
- }
- a {
- float: left;
- padding: 4px;
- margin: 0 0 20px 20px;
- border: 1px solid #ddd;
- .border-radius(4px);
- .box-shadow(0 1px 1px rgba(0,0,0,.075));
- img {
- display: block;
- }
- &:hover {
- border-color: @linkColor;
- .box-shadow(0 1px 4px rgba(0,105,214,.25));
- }
- }
-}
diff --git a/lib/popovers.less b/lib/popovers.less
new file mode 100644
index 0000000000000000000000000000000000000000..570bc906c46f4044af68457927eb01f89ad0d006
--- /dev/null
+++ b/lib/popovers.less
@@ -0,0 +1,45 @@
+// POPOVERS
+// --------
+
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1000;
+ display: none;
+ padding: 5px;
+ &.above .arrow { #popoverArrow > .above(); }
+ &.right .arrow { #popoverArrow > .right(); }
+ &.below .arrow { #popoverArrow > .below(); }
+ &.left .arrow { #popoverArrow > .left(); }
+ .arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ }
+ .inner {
+ padding: 3px;
+ width: 280px;
+ overflow: hidden;
+ background-color: @black;
+ background-color: rgba(0,0,0,.8);
+ .border-radius(6px);
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
+ }
+ .title {
+ padding: 9px 15px;
+ line-height: 1;
+ background-color: #f5f5f5;
+ border-bottom:1px solid #eee;
+ .border-radius(3px 3px 0 0);
+ }
+ .content {
+ padding: 14px;
+ background-color: @white;
+ .border-radius(0 0 3px 3px);
+ .background-clip(padding-box);
+ p, ul, ol {
+ margin-bottom: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/lib/reset.less b/lib/reset.less
index 6be76fdba6ac0e42f1bc9009a7ecf5723dd0b509..28638b6b37f820c575c49b75c89341b679ba437a 100644
--- a/lib/reset.less
+++ b/lib/reset.less
@@ -1,6 +1,8 @@
-/* Reset.less
- * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
- * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
+// Reset.less
+// Props to Eric Meyer (meyerweb.com) for his CSS reset file.
+// We're using an adapted version here that cuts out some of the reset HTML
+// elements we will never need here (i.e., dfn, samp, etc).
+// ------------------------------------------------------------------------
// ERIC MEYER RESET
@@ -8,7 +10,11 @@
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
-table { border-collapse: collapse; border-spacing: 0; }
+table {
+ max-width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+}
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
@@ -75,9 +81,9 @@ audio:not([controls]) {
// Source: http://github.com/necolas/normalize.css
sub,
sup {
+ position: relative;
font-size: 75%;
line-height: 0;
- position: relative;
vertical-align: baseline;
}
sup {
@@ -91,8 +97,10 @@ sub {
// -------------------------
// Source: http://github.com/necolas/normalize.css
img {
- border: 0;
- -ms-interpolation-mode: bicubic;
+ max-width: 100%;
+ height: auto;
+ border: 0;
+ -ms-interpolation-mode: bicubic;
}
// Forms
@@ -104,20 +112,20 @@ button,
input,
select,
textarea {
- font-size: 100%;
margin: 0;
+ font-size: 100%;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
- line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
*overflow: visible; // Inner spacing ie IE6/7
+ line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
- border: 0;
padding: 0;
+ border: 0;
}
button,
input[type="button"],
diff --git a/lib/responsive.less b/lib/responsive.less
new file mode 100644
index 0000000000000000000000000000000000000000..c74f6b98e04729820da647b4cfe0f8c18c35b7b3
--- /dev/null
+++ b/lib/responsive.less
@@ -0,0 +1,229 @@
+// Responsive.less
+// For phone and tablet devices
+// -------------------------------------------------------------
+
+
+// RESPONSIVE CLASSES
+// ------------------
+
+// Hide from screenreaders and browsers
+// Credit: HTML5BP
+.hidden {
+ display: none;
+ visibility: hidden;
+}
+
+
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+ // Resize modals
+ .modal {
+ width: auto;
+ margin: 0;
+ }
+
+ // Remove the horizontal form styles
+ .horizontal-form .control-group > label {
+ float: none;
+ width: auto;
+ padding-top: 0;
+ text-align: left;
+ }
+ // Move over all input controls and content
+ .horizontal-form .controls {
+ margin-left: 0;
+ }
+ // Move the options list down to align with labels
+ .horizontal-form .control-list {
+ padding-top: 0; // has to be padding because margin collaspes
+ }
+ // Move over buttons in .form-actions to align with .controls
+ .horizontal-form .form-actions {
+ padding-left: 0;
+ }
+}
+
+
+// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+// --------------------------------------------------
+
+@media (max-width: 768px) {
+ // Remove width from containers
+ .container {
+ width: auto;
+ padding: 0 20px;
+ }
+ // Undo negative margin on rows
+ .row {
+ margin-left: 0;
+ }
+ // Make all columns even
+ [class*="span"] {
+ float: none;
+ display: block;
+ width: auto;
+ margin: 0;
+ }
+
+ // Make the nav work for small devices
+ .nav {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 180px;
+ padding-top: 40px;
+ list-style: none;
+ }
+ .nav,
+ .nav > li:last-child a {
+ .border-radius(0 0 4px 0);
+ }
+ .nav > li {
+ float: none;
+ display: none;
+ }
+ .nav > li > a {
+ float: none;
+ background-color: #222;
+ }
+ .nav > .active {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ .navbar ul .active > a {
+ background-color: transparent;
+ }
+ .nav > .active a:after {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-top: 8px;
+ margin-left: 6px;
+ text-indent: -99999px;
+ vertical-align: top;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid @white;
+ .opacity(100);
+ content: "↓";
+ }
+ .nav > .active a:hover {
+ background-color: rgba(255,255,255,.05);
+ }
+}
+
+
+// PORTRAIT TABLET TO DEFAULT DESKTOP
+// ----------------------------------
+
+@media (min-width: 768px) and (max-width: 940px) {
+
+ // Reset grid variables
+ @gridColumns: 16;
+ @gridColumnWidth: 44px;
+ @gridGutterWidth: 20px;
+ @siteWidth: 748px;
+
+ // Bring grid mixins to recalculate widths
+ .columns(@columnSpan: 1) {
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+ }
+ .offset(@columnOffset: 1) {
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
+ }
+
+ // 16cols at 30px wide with 16px gutters
+ .container {
+ width: @siteWidth;
+ }
+
+ // Default columns
+ .span1 { .columns(1); }
+ .span2 { .columns(2); }
+ .span3 { .columns(3); }
+ .span4 { .columns(4); }
+ .span5 { .columns(5); }
+ .span6 { .columns(6); }
+ .span7 { .columns(7); }
+ .span8 { .columns(8); }
+ .span9 { .columns(9); }
+ .span10 { .columns(10); }
+ .span11 { .columns(11); }
+ .span12 { .columns(12); }
+
+ // Offset column options
+ .offset1 { .offset(1); }
+ .offset2 { .offset(2); }
+ .offset3 { .offset(3); }
+ .offset4 { .offset(4); }
+ .offset5 { .offset(5); }
+ .offset6 { .offset(6); }
+ .offset7 { .offset(7); }
+ .offset8 { .offset(8); }
+ .offset9 { .offset(9); }
+ .offset10 { .offset(10); }
+ .offset11 { .offset(11); }
+ .offset12 { .offset(12); }
+
+}
+
+// LARGE DESKTOP & UP
+// ------------------
+/*
+@media (min-width: 1210px) {
+
+ // Reset grid variables
+ @gridColumns: 12;
+ @gridColumnWidth: 70px;
+ @gridGutterWidth: 30px;
+ @siteWidth: 1170px;
+
+ // Bring grid mixins to recalculate widths
+ .columns(@columnSpan: 1) {
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+ }
+ .offset(@columnOffset: 1) {
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
+ }
+
+ .container {
+ width: @siteWidth;
+ }
+ [class*="span"] {
+ margin-left: @gridGutterWidth;
+ }
+
+ // Default columns
+ .span1 { .columns(1); }
+ .span2 { .columns(2); }
+ .span3 { .columns(3); }
+ .span4 { .columns(4); }
+ .span5 { .columns(5); }
+ .span6 { .columns(6); }
+ .span7 { .columns(7); }
+ .span8 { .columns(8); }
+ .span9 { .columns(9); }
+ .span10 { .columns(10); }
+ .span11 { .columns(11); }
+ .span12 { .columns(12); }
+
+ // Offset column options
+ .offset1 { .offset(1); }
+ .offset2 { .offset(2); }
+ .offset3 { .offset(3); }
+ .offset4 { .offset(4); }
+ .offset5 { .offset(5); }
+ .offset6 { .offset(6); }
+ .offset7 { .offset(7); }
+ .offset8 { .offset(8); }
+ .offset9 { .offset(9); }
+ .offset10 { .offset(10); }
+ .offset11 { .offset(11); }
+ .offset12 { .offset(12); }
+
+}
+*/
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 26bb0cc059977a654606cd62222dd1bbdf50f04e..3e231aae5ef5a29f07923e1536f54b0f4baefb9f 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -1,19 +1,19 @@
-/*
- * Scaffolding
- * Basic and global styles for generating a grid system, structural layout, and page templates
- * ------------------------------------------------------------------------------------------- */
+//
+// Scaffolding
+// Basic and global styles for generating a grid system, structural layout, and page templates
+// -------------------------------------------------------------------------------------------
// STRUCTURAL LAYOUT
// -----------------
-html, body {
- background-color: @white;
-}
body {
margin: 0;
- #font > .sans-serif(normal,@basefont,@baseline);
+ font-family: @baseFontFamily;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
color: @grayDark;
+ background-color: @white;
}
// Container (centered, fixed-width layouts)
@@ -22,20 +22,28 @@ body {
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
-.container-fluid {
+.fluid-container {
position: relative;
min-width: 940px;
padding-left: 20px;
padding-right: 20px;
.clearfix();
- > .sidebar {
- float: left;
- width: 220px;
- }
- // TODO in v2: rename this and .popover .content to be more specific
- > .content {
- margin-left: 240px;
- }
+}
+// Sidebars (left and right options)
+.fluid-sidebar-left,
+.fluid-sidebar-right {
+ width: 220px;
+}
+.fluid-sidebar-left { float: left; }
+.fluid-sidebar-right { float: right; }
+// The main content area
+.fluid-content {
+ margin-left: 240px;
+}
+// Reverse layout for sidebar on right
+.fluid-container.reverse .fluid-content {
+ margin-left: 0;
+ margin-right: 240px;
}
@@ -44,10 +52,10 @@ body {
// Links
a {
+ font-weight: inherit;
+ line-height: inherit;
color: @linkColor;
text-decoration: none;
- line-height: inherit;
- font-weight: inherit;
&:hover {
color: @linkColorHover;
text-decoration: underline;
@@ -74,10 +82,9 @@ a {
// GRID SYSTEM
// -----------
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
-
.row {
+ margin-left: -@gridGutterWidth;
.clearfix();
- margin-left: -1 * @gridGutterWidth;
}
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
@@ -99,20 +106,6 @@ a {
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
-.span13 { .columns(13); }
-.span14 { .columns(14); }
-.span15 { .columns(15); }
-.span16 { .columns(16); }
-
-// For optional 24-column grid
-.span17 { .columns(17); }
-.span18 { .columns(18); }
-.span19 { .columns(19); }
-.span20 { .columns(20); }
-.span21 { .columns(21); }
-.span22 { .columns(22); }
-.span23 { .columns(23); }
-.span24 { .columns(24); }
// Offset column options
.offset1 { .offset(1); }
@@ -126,10 +119,3 @@ a {
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
-.offset12 { .offset(12); }
-
-// Unique column sizes for 16-column grid
-.span-one-third { width: 300px; }
-.span-two-thirds { width: 620px; }
-.offset-one-third { margin-left: 340px; }
-.offset-two-thirds { margin-left: 660px; }
diff --git a/lib/tables.less b/lib/tables.less
index 988483f0ef82aa1eeac58fd1829283e627f675ba..524f959f06ed542070a183bb7dc06364dc3b70bc 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -1,7 +1,8 @@
-/*
- * Tables.less
- * Tables for, you guessed it, tabular data
- * ---------------------------------------- */
+//
+// Tables.less
+// Tables for, you guessed it, tabular data
+// ----------------------------------------
+
// BASELINE STYLES
@@ -9,44 +10,68 @@
table {
width: 100%;
- margin-bottom: @baseline;
- padding: 0;
- border-collapse: separate; // Done so we can round those corners!
- *border-collapse: collapse; /* IE7, collapse table to remove spacing */
- font-size: @basefont;
- border: 1px solid #ddd;
- .border-radius(4px);
- th, td {
- padding: 10px 10px 9px;
- line-height: @baseline;
- text-align: left;
- }
- th {
- padding-top: 9px;
- font-weight: bold;
- vertical-align: middle;
- border-bottom: 1px solid #ddd;
- }
+ margin-bottom: @baseLineHeight;
+}
+th,
+td {
+ padding: 8px;
+ line-height: @baseLineHeight;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+th {
+ font-weight: bold;
+ vertical-align: bottom;
+}
+td {
+ vertical-align: top;
+}
+tbody tr:last-child th,
+tbody tr:last-child td {
+ border-bottom: 0;
+}
+
+
+// CONDENSED TABLE W/ HALF PADDING
+// -------------------------------
+
+.condensed-table {
+ th,
td {
- vertical-align: top;
+ padding: 4px 5px;
}
+}
+
+
+// BORDERED VERSION
+// ----------------
+
+.bordered-table {
+ border: 1px solid #ddd;
+ border-collapse: separate; // Done so we can round those corners!
+ .border-radius(4px);
th + th,
- td + td {
+ td + td,
+ th + td,
+ td + th {
border-left: 1px solid #ddd;
}
- tr + tr td {
- border-top: 1px solid #ddd;
- }
- tbody tr:first-child td:first-child {
+ // For first th or td in the first row in the first thead or tbody
+ thead:first-child tr:first-child th:first-child,
+ tbody:first-child tr:first-child td:first-child {
.border-radius(4px 0 0 0);
}
- tbody tr:first-child td:last-child {
+ thead:first-child tr:first-child th:last-child,
+ tbody:first-child tr:first-child td:last-child {
.border-radius(0 4px 0 0);
}
- tbody tr:last-child td:first-child {
+ // For first th or td in the first row in the first thead or tbody
+ thead:last-child tr:last-child th:first-child,
+ tbody:last-child tr:last-child td:first-child {
.border-radius(0 0 0 4px);
}
- tbody tr:last-child td:last-child {
+ thead:last-child tr:last-child th:last-child,
+ tbody:last-child tr:last-child td:last-child {
.border-radius(0 0 4px 0);
}
}
@@ -56,46 +81,79 @@ table {
// --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-.zebra-striped {
+.striped-table {
tbody {
- tr:nth-child(odd) td {
+ tr:nth-child(odd) td,
+ tr:nth-child(odd) th {
background-color: #f9f9f9;
}
- tr:hover td {
- background-color: #f5f5f5;
- }
}
+}
+
+
+
+/*
+// ----------------
+
+// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
+.tableColumns(@columnSpan: 1) {
+ width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
+}
+table {
+ // Default columns
+ .span1 { .tableColumns(1); }
+ .span2 { .tableColumns(2); }
+ .span3 { .tableColumns(3); }
+ .span4 { .tableColumns(4); }
+ .span5 { .tableColumns(5); }
+ .span6 { .tableColumns(6); }
+ .span7 { .tableColumns(7); }
+ .span8 { .tableColumns(8); }
+ .span9 { .tableColumns(9); }
+ .span10 { .tableColumns(10); }
+ .span11 { .tableColumns(11); }
+ .span12 { .tableColumns(12); }
+ .span13 { .tableColumns(13); }
+ .span14 { .tableColumns(14); }
+ .span15 { .tableColumns(15); }
+ .span16 { .tableColumns(16); }
+}
+
+// TABLESORTER
+// -----------
+
+table {
// Tablesorting styles w/ jQuery plugin
.header {
cursor: pointer;
&:after {
- content: "";
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
+ content: "";
visibility: hidden;
}
}
// Style the sorted column headers (THs)
.headerSortUp,
.headerSortDown {
- background-color: rgba(141,192,219,.25);
text-shadow: 0 1px 1px rgba(255,255,255,.75);
+ background-color: rgba(141,192,219,.25);
}
// Style the ascending (reverse alphabetical) column header
.header:hover {
&:after {
- visibility:visible;
+ visibility: visible;
}
}
// Style the descending (alphabetical) column header
.headerSortDown,
.headerSortDown:hover {
&:after {
- visibility:visible;
+ visibility: visible;
.opacity(60);
}
}
@@ -111,9 +169,6 @@ table {
.opacity(60);
}
}
-}
-
-table {
// Blue Table Headings
.blue {
color: @blue;
@@ -168,4 +223,4 @@ table {
.headerSortDown.purple {
background-color: lighten(@purple, 40%);
}
-}
\ No newline at end of file
+}*/
diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less
new file mode 100644
index 0000000000000000000000000000000000000000..23ba9ccfac383f79cad79fb738e7075661a28abb
--- /dev/null
+++ b/lib/tabs-pills.less
@@ -0,0 +1,294 @@
+// Tabs and Pills
+.tabs,
+.pills {
+ padding: 0;
+ margin: 0 0 20px;
+ list-style: none;
+ .clearfix();
+ > li {
+ float: left;
+ > a {
+ display: block;
+ }
+ }
+}
+
+// Tabs
+.tabs {
+ border-color: #ddd;
+ border-style: solid;
+ border-width: 0 0 1px;
+ > li {
+ position: relative; // For the dropdowns mostly
+ margin-bottom: -1px;
+ > a {
+ padding: 0 15px;
+ margin-right: 2px;
+ line-height: @baseLineHeight * 2;
+ border: 1px solid transparent;
+ .border-radius(4px 4px 0 0);
+ &:hover {
+ text-decoration: none;
+ background-color: #eee;
+ border-color: #eee #eee #ddd;
+ }
+ }
+ }
+ // Active state, and it's :hover to override normal :hover
+ .active > a,
+ .active > a:hover {
+ color: @gray;
+ background-color: @white;
+ border: 1px solid #ddd;
+ border-bottom-color: transparent;
+ cursor: default;
+ }
+}
+
+.tabbable {
+ margin-bottom: @baseLineHeight;
+
+ // Tabs on top
+ .tabs {
+ margin-bottom: 0;
+ border-bottom: 0;
+ }
+ .tab-content {
+ padding: 19px;
+ border: 1px solid #ddd;
+ }
+
+ // Tabs on bottom
+ &.tabs-bottom .tabs > li {
+ margin-top: -1px;
+ margin-bottom: 0;
+ }
+ &.tabs-bottom .tabs > li > a {
+ .border-radius(0 0 4px 4px);
+ &:hover {
+ border-bottom-color: transparent;
+ border-top-color: #ddd;
+ }
+ }
+ &.tabs-bottom .tabs > .active > a,
+ &.tabs-bottom .tabs > .active > a:hover {
+ border-color: transparent #ddd #ddd #ddd;
+ }
+
+ // Tabs on left and right
+ &.tabs-left,
+ &.tabs-right {
+ .clearfix();
+ .tabs {
+ // Give a fixed width to avoid floating .tab-con
+ width: 100px;
+ // Unfloat them so they stack
+ > li {
+ float: none;
+ margin-bottom: -1px;
+ > a {
+ margin-bottom: 2px;
+ &:hover {
+ border-color: transparent;
+ }
+ }
+ }
+ }
+ }
+
+ // Tabs on left
+ &.tabs-left {
+ .tab-content {
+ margin-left: 100px;
+ }
+ .tabs {
+ float: left;
+ > li {
+ margin-right: -1px;
+ > a {
+ margin-right: 0;
+ .border-radius(4px 0 0 4px);
+
+ &:hover {
+ border-right-color: #ddd;
+ }
+ }
+ }
+ // Active state
+ .active > a,
+ .active > a:hover {
+ border-color: #ddd;
+ border-right-color: transparent;
+ }
+ }
+ }
+
+ // Tabs on right
+ &.tabs-right {
+ .tab-content {
+ margin-right: 100px;
+ }
+ .tabs {
+ float: right;
+ > li {
+ margin-left: -1px;
+ > a {
+ margin-left: 0;
+ .border-radius(0 4px 4px 0);
+
+ &:hover {
+ border-left-color: #ddd;
+ }
+ }
+ }
+ // Active state
+ .active > a,
+ .active > a:hover {
+ border-color: #ddd;
+ border-left-color: transparent;
+ }
+ }
+ }
+}
+
+
+// Dropdowns in tabs
+.tabs {
+ // first one for backwards compatibility
+ .menu-dropdown,
+ .dropdown-menu {
+ top: 35px;
+ border-width: 1px;
+ .border-radius(0 6px 6px 6px);
+ }
+ // first one for backwards compatibility
+ a.menu:after,
+ .dropdown-toggle:after {
+ border-top-color: #999;
+ margin-top: 15px;
+ margin-left: 5px;
+ }
+ // first one for backwards compatibility
+ li.open.menu .menu,
+ .open.dropdown .dropdown-toggle {
+ border-color: #999;
+ }
+ // first one for backwards compatibility
+ li.open a.menu:after,
+ .dropdown.open .dropdown-toggle:after {
+ border-top-color: #555;
+ }
+}
+
+// Pills
+.pills {
+ > li > a {
+ padding: 0 15px;
+ margin: 5px 3px 5px 0;
+ line-height: 30px;
+ text-shadow: 0 1px 1px @white;
+ .border-radius(15px);
+ &:hover {
+ color: @white;
+ text-decoration: none;
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
+ background-color: @linkColorHover;
+ }
+ }
+ .active > a {
+ color: @white;
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
+ background-color: @linkColor;
+ }
+}
+
+// Stacked pills
+.pills-vertical > li {
+ float: none;
+}
+
+// Tabbable areas
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+ display: none;
+}
+.tab-content > .active,
+.pill-content > .active {
+ display: block;
+}
+
+
+// Step nav
+.step-nav {
+ position: relative; // for prev/next links
+ margin: 0 0 @baseLineHeight;
+ list-style: none;
+ line-height: 30px;
+ text-align: center;
+ background-color: #f5f5f5;
+ .border-radius(15px);
+ li {
+ display: inline;
+ color: @grayLight;
+ }
+ // prev/next links
+ .prev,
+ .next {
+ position: absolute;
+ top: 6px;
+ }
+ .prev {
+ left: 15px;
+ }
+ .next {
+ right: 15px;
+ }
+ // indicators for each step/page/item/etc
+ .dot {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin: 0 3px;
+ text-indent: -999em;
+ background-color: @grayLight;
+ .border-radius(5px);
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.25));
+ }
+ .dot:hover,
+ .active .dot {
+ background-color: @grayDark;
+ }
+}
+
+
+// Subnav
+// STILL A WIP
+.subnav {
+ #gradient > .vertical(#f5f5f5, #eeeeee);
+ @shadow: inset 0 1px 0 #fff, 0 0 5px rgba(0,0,0,.5);
+ .box-shadow(@shadow);
+ a {
+ padding: 8px 10px;
+ font-size: 12px;
+ color: @linkColor;
+ text-shadow: 0 1px 0 #fff;
+ border-left: 1px solid #f9f9f9;
+ border-right: 1px solid #e5e5e5;
+ &:hover {
+ color: @linkColorHover;
+ background-color: #eee;
+ }
+ }
+ li:first-child a {
+ border-left: 0;
+ .border-radius(6px 0 0 6px);
+ }
+ li:last-child a {
+ border-right: 0;
+ .border-radius(0 6px 6px 0);
+ }
+ ul .active > a {
+ color: @grayDark;
+ background-color: #eee;
+ }
+}
\ No newline at end of file
diff --git a/lib/twipsy.less b/lib/twipsy.less
new file mode 100644
index 0000000000000000000000000000000000000000..3fa21fa01268141e353b6f9fbc7d57fa4077eadc
--- /dev/null
+++ b/lib/twipsy.less
@@ -0,0 +1,33 @@
+// TWIPSY
+// ------
+
+.twipsy {
+ position: absolute;
+ z-index: 1000;
+ display: block;
+ visibility: visible;
+ padding: 5px;
+ font-size: 11px;
+ .opacity(0);
+ &.in {
+ .opacity(80);
+ }
+ &.above .twipsy-arrow { #popoverArrow > .above(); }
+ &.left .twipsy-arrow { #popoverArrow > .left(); }
+ &.below .twipsy-arrow { #popoverArrow > .below(); }
+ &.right .twipsy-arrow { #popoverArrow > .right(); }
+}
+.twipsy-inner {
+ max-width: 200px;
+ padding: 3px 8px;
+ color: white;
+ text-align: center;
+ text-decoration: none;
+ background-color: @black;
+ .border-radius(4px);
+}
+.twipsy-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
diff --git a/lib/type.less b/lib/type.less
index 077ae9d8f71d8313fe678d650a187d00da265486..b2ba73b86785d9a977df2557d3a2dad5b24a42e4 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -1,16 +1,18 @@
-/* Typography.less
- * Headings, body text, lists, code, and more for a versatile and durable typography system
- * ---------------------------------------------------------------------------------------- */
+// Typography.less
+// Headings, body text, lists, code, and more for a versatile and durable typography system
+// ----------------------------------------------------------------------------------------
// BODY TEXT
// ---------
p {
- #font > .shorthand(normal,@basefont,@baseline);
- margin-bottom: @baseline / 2;
+ margin-bottom: @baseLineHeight / 2;
+ font-family: @baseFontFamily;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
small {
- font-size: @basefont - 2;
+ font-size: @baseFontSize - 2;
color: @grayLight;
}
}
@@ -22,29 +24,27 @@ p {
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
color: @grayDark;
+ text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
color: @grayLight;
}
}
h1 {
- margin-bottom: @baseline;
font-size: 30px;
- line-height: @baseline * 2;
+ line-height: @baseLineHeight * 2;
small {
font-size: 18px;
}
}
h2 {
font-size: 24px;
- line-height: @baseline * 2;
+ line-height: @baseLineHeight * 2;
small {
- font-size: 14px;
+ font-size: 18px;
}
}
-h3, h4, h5, h6 {
- line-height: @baseline * 2;
-}
h3 {
+ line-height: @baseLineHeight * 1.5;
font-size: 18px;
small {
font-size: 14px;
@@ -52,15 +52,18 @@ h3 {
}
h4 {
font-size: 16px;
+ line-height: @baseLineHeight * 2;
small {
font-size: 12px;
}
}
h5 {
font-size: 14px;
+ line-height: @baseLineHeight;
}
h6 {
font-size: 13px;
+ line-height: @baseLineHeight;
color: @grayLight;
text-transform: uppercase;
}
@@ -71,7 +74,7 @@ h6 {
// Unordered and Ordered lists
ul, ol {
- margin: 0 0 @baseline 25px;
+ margin: 0 0 @baseLineHeight / 2 25px;
}
ul ul,
ul ol,
@@ -86,25 +89,25 @@ ol {
list-style: decimal;
}
li {
- line-height: @baseline;
- color: @gray;
+ line-height: @baseLineHeight;
+ color: @grayDark;
}
ul.unstyled {
- list-style: none;
margin-left: 0;
+ list-style: none;
}
// Description Lists
dl {
- margin-bottom: @baseline;
+ margin-bottom: @baseLineHeight;
dt, dd {
- line-height: @baseline;
+ line-height: @baseLineHeight;
}
dt {
font-weight: bold;
}
dd {
- margin-left: @baseline / 2;
+ margin-left: @baseLineHeight / 2;
}
}
@@ -113,9 +116,10 @@ dl {
// Horizontal rules
hr {
- margin: 20px 0 19px;
+ margin: @baseLineHeight * 1.5 0;
border: 0;
- border-bottom: 1px solid #eee;
+ border-top: 1px solid #e5e5e5;
+ border-bottom: 1px solid #fff;
}
// Emphasis
@@ -132,56 +136,84 @@ em {
color: @grayLight;
}
+// Abbreviations and acronyms
+abbr {
+ font-size: 90%;
+ text-transform: uppercase;
+ border-bottom: 1px dotted #ddd;
+ cursor: help;
+}
+
// Blockquotes
blockquote {
- margin-bottom: @baseline;
- border-left: 5px solid #eee;
padding-left: 15px;
+ margin-bottom: @baseLineHeight;
+ border-left: 5px solid #eee;
p {
- #font > .shorthand(300,14px,@baseline);
margin-bottom: 0;
+ #font > .shorthand(300,16px,@baseLineHeight * 1.25);
}
small {
display: block;
- #font > .shorthand(300,12px,@baseline);
+ line-height: @baseLineHeight;
color: @grayLight;
&:before {
content: '\2014 \00A0';
}
}
+
+ // Float right with text-align: right
+ &.pull-right {
+ float: right;
+ p,
+ small {
+ text-align: right;
+ }
+ }
}
// Addresses
address {
display: block;
- line-height: @baseline;
- margin-bottom: @baseline;
+ margin-bottom: @baseLineHeight;
+ line-height: @baseLineHeight;
}
// Inline and block code styles
-code, pre {
+code,
+pre {
padding: 0 3px 2px;
- font-family: Monaco, Andale Mono, Courier New, monospace;
+ #font > #family > .monospace;
font-size: 12px;
+ color: @grayDark;
.border-radius(3px);
}
code {
- background-color: lighten(@orange, 40%);
- color: rgba(0,0,0,.75);
padding: 1px 3px;
+ background-color: lighten(@orange, 40%);
}
pre {
- background-color: #f5f5f5;
display: block;
- padding: (@baseline - 1) / 2;
- margin: 0 0 @baseline;
- line-height: @baseline;
+ padding: (@baseLineHeight - 1) / 2;
+ margin: 0 0 @baseLineHeight / 2;
font-size: 12px;
+ line-height: @baseLineHeight;
+ background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
white-space: pre;
white-space: pre-wrap;
- word-wrap: break-word;
+ word-break: break-all;
+ // Make prettyprint styles more spaced out for readability
+ &.prettyprint {
+ margin-bottom: @baseLineHeight;
+ }
+
+ // Account for some code outputs that place code tags in pre tags
+ code {
+ padding: 0;
+ background-color: transparent;
+ }
}
\ No newline at end of file
diff --git a/lib/variables.less b/lib/variables.less
index 34000d0669933cd5191598a6113f97d2cd52dbf2..caa9c0f60232c60f841e1f85412e491d7b14b524 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -1,13 +1,18 @@
-/* Variables.less
- * Variables to customize the look and feel of Bootstrap
- * ----------------------------------------------------- */
+// Variables.less
+// Variables to customize the look and feel of Bootstrap
+// -----------------------------------------------------
-// Links
+// LINK COLORS
+// -----------
+
@linkColor: #0069d6;
@linkColorHover: darken(@linkColor, 15);
-// Grays
+
+// GRAYS
+// -----
+
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@@ -15,7 +20,10 @@
@grayLighter: lighten(@black, 90%);
@white: #fff;
-// Accent Colors
+
+// ACCENT COLORS
+// -------------
+
@blue: #049CDB;
@blueDark: #0064CD;
@green: #46a546;
@@ -25,36 +33,24 @@
@pink: #c3325f;
@purple: #7a43b6;
-// Baseline grid
-@basefont: 13px;
-@baseline: 18px;
-// Griditude
+// GRID
+// ----
+
// Modify the grid styles in mixins.less
-@gridColumns: 16;
-@gridColumnWidth: 40px;
+@gridColumns: 12;
+@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
-@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-// Color Scheme
-// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
-@baseColor: @blue; // Set a base color
-@complement: spin(@baseColor, 180); // Determine a complementary color
-@split1: spin(@baseColor, 158); // Split complements
-@split2: spin(@baseColor, -158);
-@triad1: spin(@baseColor, 135); // Triads colors
-@triad2: spin(@baseColor, -135);
-@tetra1: spin(@baseColor, 90); // Tetra colors
-@tetra2: spin(@baseColor, -90);
-@analog1: spin(@baseColor, 22); // Analogs colors
-@analog2: spin(@baseColor, -22);
-
-
-
-// More variables coming soon:
-// - @basefont to @baseFontSize
-// - @baseline to @baseLineHeight
-// - @baseFontFamily
-// - @primaryButtonColor
-// - anything else? File an issue on GitHub
\ No newline at end of file
+
+// THEME VARIABLES
+// ---------------
+
+// Typography
+@baseFontSize: 13px;
+@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
+@baseLineHeight: 18px;
+
+// Visuals
+@primaryButtonColor: @blue;