diff --git a/bootstrap.css b/bootstrap.css
index 8b6fe3eb42c6cf55897124d66ecdc9b95b4d64f9..8535c67874c7b3929c05b500577d417cb929bcca 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,10 +6,10 @@
* 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:
*/
/* 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).
+ * 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;
@@ -173,21 +173,18 @@ textarea {
/* Variables.less
* Variables to customize the look and feel of Bootstrap
* ----------------------------------------------------- */
-/* Variables.less
+/* Mixins.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 {
+ background-color: #ffffff;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
- font-weight: normal;
line-height: 18px;
color: #404040;
}
@@ -206,29 +203,38 @@ body {
.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;
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 {
color: #0069d6;
text-decoration: none;
@@ -252,8 +258,8 @@ a:hover {
display: block;
}
.row {
- zoom: 1;
margin-left: -20px;
+ zoom: 1;
}
.row:before, .row:after {
display: table;
@@ -270,131 +276,80 @@ 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;
-}
-.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;
+ margin-left: 900px;
}
/* Typography.less
* Headings, body text, lists, code, and more for a versatile and durable typography system
* ---------------------------------------------------------------------------------------- */
p {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
- font-weight: normal;
line-height: 18px;
margin-bottom: 9px;
}
@@ -410,6 +365,7 @@ h5,
h6 {
font-weight: bold;
color: #404040;
+ text-rendering: optimizelegibility;
}
h1 small,
h2 small,
@@ -420,7 +376,6 @@ h6 small {
color: #bfbfbf;
}
h1 {
- margin-bottom: 18px;
font-size: 30px;
line-height: 36px;
}
@@ -432,15 +387,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 +398,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,7 +430,7 @@ ol {
}
li {
line-height: 18px;
- color: #808080;
+ color: #404040;
}
ul.unstyled {
list-style: none;
@@ -512,27 +465,37 @@ em {
.muted {
color: #bfbfbf;
}
+abbr {
+ font-size: 90%;
+ text-transform: uppercase;
+ border-bottom: 1px dotted #ddd;
+ cursor: help;
+}
blockquote {
margin-bottom: 18px;
border-left: 5px solid #eee;
padding-left: 15px;
}
blockquote p {
- font-size: 14px;
+ font-size: 16px;
font-weight: 300;
- line-height: 18px;
+ line-height: 22.5px;
margin-bottom: 0;
}
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;
@@ -540,7 +503,7 @@ address {
}
code, pre {
padding: 0 3px 2px;
- font-family: Monaco, Andale Mono, Courier New, monospace;
+ font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@@ -555,7 +518,7 @@ pre {
background-color: #f5f5f5;
display: block;
padding: 8.5px;
- margin: 0 0 18px;
+ margin: 0 0 9px;
line-height: 18px;
font-size: 12px;
border: 1px solid #ccc;
@@ -565,7 +528,7 @@ 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
@@ -573,35 +536,14 @@ pre {
form {
margin-bottom: 18px;
}
-fieldset {
- 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,
@@ -610,23 +552,13 @@ textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
- line-height: normal;
+ 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,7 +575,7 @@ select,
-moz-border-radius: 3px;
border-radius: 3px;
}
-/* mini reset for non-html5 file types */
+/* Mini reset for unique input types */
input[type=checkbox], input[type=radio] {
width: auto;
height: auto;
@@ -654,9 +586,11 @@ input[type=checkbox], input[type=radio] {
line-height: normal;
border: none;
+ cursor: pointer;
}
input[type=file] {
background-color: #ffffff;
+ background-color: initial;
padding: initial;
border: initial;
line-height: initial;
@@ -676,26 +610,12 @@ select, input[type=file] {
}
select[multiple] {
+ background-color: #ffffff;
height: inherit;
}
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;
@@ -719,167 +639,118 @@ 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 {
display: inline-block;
float: none;
- width: 30px;
+ width: 50px;
margin-left: 0;
}
input.span2, textarea.span2, select.span2 {
display: inline-block;
float: none;
- width: 90px;
+ width: 150px;
margin-left: 0;
}
input.span3, textarea.span3, select.span3 {
display: inline-block;
float: none;
- width: 150px;
+ width: 250px;
margin-left: 0;
}
input.span4, textarea.span4, select.span4 {
display: inline-block;
float: none;
- width: 210px;
+ width: 350px;
margin-left: 0;
}
input.span5, textarea.span5, select.span5 {
display: inline-block;
float: none;
- width: 270px;
+ width: 450px;
margin-left: 0;
}
input.span6, textarea.span6, select.span6 {
display: inline-block;
float: none;
- width: 330px;
+ width: 550px;
margin-left: 0;
}
input.span7, textarea.span7, select.span7 {
display: inline-block;
float: none;
- width: 390px;
+ width: 650px;
margin-left: 0;
}
input.span8, textarea.span8, select.span8 {
display: inline-block;
float: none;
- width: 450px;
+ width: 750px;
margin-left: 0;
}
input.span9, textarea.span9, select.span9 {
display: inline-block;
float: none;
- width: 510px;
+ width: 850px;
margin-left: 0;
}
input.span10, textarea.span10, select.span10 {
display: inline-block;
float: none;
- width: 570px;
+ width: 950px;
margin-left: 0;
}
input.span11, textarea.span11, select.span11 {
display: inline-block;
float: none;
- width: 630px;
+ width: 1050px;
margin-left: 0;
}
input.span12, textarea.span12, select.span12 {
display: inline-block;
float: none;
- width: 690px;
+ width: 1150px;
margin-left: 0;
}
input.span13, textarea.span13, select.span13 {
display: inline-block;
float: none;
- width: 750px;
+ width: 1250px;
margin-left: 0;
}
input.span14, textarea.span14, select.span14 {
display: inline-block;
float: none;
- width: 810px;
+ width: 1350px;
margin-left: 0;
}
input.span15, textarea.span15, select.span15 {
display: inline-block;
float: none;
- width: 870px;
+ width: 1450px;
margin-left: 0;
}
input.span16, textarea.span16, select.span16 {
display: inline-block;
float: none;
- width: 930px;
+ width: 1550px;
margin-left: 0;
}
input[disabled],
@@ -892,31 +763,63 @@ textarea[readonly] {
border-color: #ddd;
cursor: not-allowed;
}
-.actions {
- background: #f5f5f5;
+.has-error {
+ background: #f8dcda;
+ padding: 9px 0;
+ margin: -10px 0 10px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.has-error > label, .has-error span.help-inline, .has-error span.help-block {
+ color: #9d261d;
+}
+.has-error input, .has-error textarea, .has-error select {
+ 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);
+}
+.has-error input:focus, .has-error textarea:focus, .has-error select: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);
+}
+.has-error .input-prepend span.add-on, .has-error .input-append span.add-on {
+ background: #f4c8c5;
+ border-color: #c87872;
+ color: #b9554d;
+}
+.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 {
+ 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;
}
-.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 {
+ display: inline;
padding-left: 5px;
*position: relative;
/* IE6-7 */
@@ -971,8 +874,8 @@ textarea[readonly] {
border-radius: 3px 0 0 3px;
}
.input-prepend .active, .input-append .active {
- background: #a9dba9;
- border-color: #46a546;
+ background: #bcddbc;
+ border-color: #57a957;
}
.input-prepend .add-on {
*margin-top: 1px;
@@ -992,89 +895,31 @@ textarea[readonly] {
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-search .search-query {
+ -webkit-border-radius: 14px;
+ -moz-border-radius: 14px;
+ border-radius: 14px;
}
-.form-stacked legend {
- padding-left: 0;
+.control-group {
+ margin-bottom: 18px;
}
-.form-stacked label {
- display: block;
- float: none;
- width: auto;
+.control-group > label {
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-horizontal .control-group > label {
+ float: left;
+ width: 130px;
+ padding-top: 5px;
+ text-align: right;
}
-.form-stacked .inputs-list li label {
- font-weight: normal;
- padding-top: 0;
+.form-horizontal .controls {
+ margin-left: 150px;
}
-.form-stacked div.clearfix.error {
- padding-top: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
- margin-top: 0;
- margin-left: -10px;
+.form-horizontal .control-list {
+ padding-top: 6px;
}
-.form-stacked .actions {
- margin-left: -20px;
- padding-left: 20px;
+.form-horizontal .form-actions {
+ padding-left: 150px;
}
/*
* Tables.less
@@ -1082,17 +927,10 @@ textarea[readonly] {
* ---------------------------------------- */
table {
width: 100%;
- margin-bottom: 18px;
padding: 0;
- border-collapse: separate;
- *border-collapse: collapse;
- /* IE7, collapse table to remove spacing */
-
+ margin-bottom: 18px;
font-size: 13px;
- border: 1px solid #ddd;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
+ border-collapse: collapse;
}
table th, table td {
padding: 10px 10px 9px;
@@ -1103,47 +941,109 @@ table th {
padding-top: 9px;
font-weight: bold;
vertical-align: middle;
- border-bottom: 1px solid #ddd;
}
table td {
vertical-align: top;
+ border-top: 1px solid #ddd;
}
-table th + th, table td + td {
- border-left: 1px solid #ddd;
-}
-table tr + tr td {
+table tbody th {
border-top: 1px solid #ddd;
+ vertical-align: top;
+}
+.condensed-table th, .condensed-table td {
+ padding: 5px 5px 4px;
+}
+.bordered-table {
+ border: 1px solid #ddd;
+ border-collapse: separate;
+ *border-collapse: collapse;
+ /* IE7, collapse table to remove spacing */
+
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.bordered-table th + th, .bordered-table td + td, .bordered-table th + td {
+ border-left: 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 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 {
+.bordered-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 {
+table .span1 {
+ width: 40px;
+}
+table .span2 {
+ width: 120px;
+}
+table .span3 {
+ width: 200px;
+}
+table .span4 {
+ width: 280px;
+}
+table .span5 {
+ width: 360px;
+}
+table .span6 {
+ width: 440px;
+}
+table .span7 {
+ width: 520px;
+}
+table .span8 {
+ width: 600px;
+}
+table .span9 {
+ width: 680px;
+}
+table .span10 {
+ width: 760px;
+}
+table .span11 {
+ width: 840px;
+}
+table .span12 {
+ width: 920px;
+}
+table .span13 {
+ width: 1000px;
+}
+table .span14 {
+ width: 1080px;
+}
+table .span15 {
+ width: 1160px;
+}
+table .span16 {
+ width: 1240px;
+}
+.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 {
+.striped-table tbody tr:hover td, .striped-table tbody tr:hover th {
background-color: #f5f5f5;
}
-.zebra-striped .header {
+table .header {
cursor: pointer;
}
-.zebra-striped .header:after {
+table .header:after {
content: "";
float: right;
margin-top: 7px;
@@ -1152,21 +1052,21 @@ table tbody tr:last-child td:last-child {
border-color: #000 transparent;
visibility: hidden;
}
-.zebra-striped .headerSortUp, .zebra-striped .headerSortDown {
+table .headerSortUp, table .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 {
+table .header:hover:after {
visibility: visible;
}
-.zebra-striped .headerSortDown:after, .zebra-striped .headerSortDown:hover:after {
+table .headerSortDown:after, table .headerSortDown:hover:after {
visibility: visible;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
-.zebra-striped .headerSortUp:after {
+table .headerSortUp:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
@@ -1188,11 +1088,11 @@ table .headerSortUp.blue, table .headerSortDown.blue {
background-color: #ade6fe;
}
table .green {
- color: #46a546;
- border-bottom-color: #46a546;
+ color: #57a957;
+ border-bottom-color: #57a957;
}
table .headerSortUp.green, table .headerSortDown.green {
- background-color: #cdeacd;
+ background-color: #deeede;
}
table .red {
color: #9d261d;
@@ -1225,29 +1125,37 @@ table .headerSortUp.purple, table .headerSortDown.purple {
/* Patterns.less
* Repeatable UI elements outside the base styles provided from the scaffolding
* ---------------------------------------------------------------------------- */
-.topbar {
+.navbar {
height: 40px;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 10000;
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;
+.navbar .brand a:hover, .navbar ul .active > a {
+ background-color: #333333;
background-color: rgba(255, 255, 255, 0.05);
color: #ffffff;
text-decoration: none;
}
-.topbar h3 {
- position: relative;
-}
-.topbar h3 a, .topbar .brand {
+.navbar .brand {
float: left;
display: block;
padding: 8px 20px 12px;
@@ -1257,27 +1165,21 @@ table .headerSortUp.purple, table .headerSortDown.purple {
font-weight: 200;
line-height: 1;
}
-.topbar p {
+.navbar p {
margin: 0;
line-height: 40px;
}
-.topbar p a:hover {
+.navbar p a:hover {
background-color: transparent;
color: #ffffff;
}
-.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;
+ margin-top: 6px;
+ margin-bottom: 0;
+ float: left;
}
-.topbar input {
+.navbar-search .search-query {
background-color: #444;
background-color: rgba(255, 255, 255, 0.3);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -1288,30 +1190,27 @@ table .headerSortUp.purple, table .headerSortDown.purple {
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-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 {
background-color: #bfbfbf;
background-color: rgba(255, 255, 255, 0.5);
color: #ffffff;
}
-.topbar input:focus, .topbar input.focused {
+.navbar-search .search-query:focus, .navbar-search .search-query.focused {
outline: 0;
background-color: #ffffff;
color: #404040;
@@ -1322,111 +1221,78 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-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);
+.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;
+ left: 0;
+ right: 0;
+ z-index: 10000;
}
-.topbar div > ul, .nav {
+.nav {
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.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,29 +1300,24 @@ 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 {
width: 0;
height: 0;
display: inline-block;
@@ -1464,16 +1325,22 @@ a.menu:after, .dropdown-toggle:after {
text-indent: -99999px;
vertical-align: top;
margin-top: 8px;
- margin-left: 4px;
+ margin-left: 6px;
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);
+ -khtml-opacity: 0.3;
+ -moz-opacity: 0.3;
+ opacity: 0.3;
+}
+.dropdown:hover .dropdown-toggle:after {
+ filter: alpha(opacity=100);
+ -khtml-opacity: 1;
+ -moz-opacity: 1;
+ opacity: 1;
}
-.menu-dropdown, .dropdown-menu {
+.dropdown-menu {
background-color: #ffffff;
float: left;
display: none;
@@ -1501,12 +1368,12 @@ a.menu:after, .dropdown-toggle:after {
-moz-background-clip: padding-box;
background-clip: padding-box;
}
-.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;
@@ -1524,7 +1391,6 @@ a.menu:after, .dropdown-toggle:after {
}
.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);
@@ -1532,6 +1398,7 @@ 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;
@@ -1539,17 +1406,11 @@ a.menu:after, .dropdown-toggle:after {
-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;
}
@@ -1578,13 +1439,13 @@ a.menu:after, .dropdown-toggle:after {
display: block;
}
.tabs {
- float: left;
- width: 100%;
- border-bottom: 1px solid #ddd;
+ border-color: #ddd;
+ border-style: solid;
+ border-width: 0 0 1px;
}
.tabs > li {
position: relative;
- top: 1px;
+ margin-bottom: -1px;
}
.tabs > li > a {
padding: 0 15px;
@@ -1600,11 +1461,111 @@ a.menu:after, .dropdown-toggle:after {
background-color: #eee;
border-color: #eee #eee #ddd;
}
-.tabs > li.active > a {
+.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;
+ content: "";
+ zoom: 1;
+ *display: inline;
+}
+.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;
@@ -1624,30 +1585,30 @@ a.menu:after, .dropdown-toggle:after {
.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;
+ text-shadow: 0 1px 1px #ffffff;
-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);
+ background-color: #00438a;
}
.pills .active a {
- background: #0069d6;
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+ background-color: #0069d6;
}
-.tab-content > *, .pill-content > * {
+.pills-vertical > li {
+ float: none;
+}
+.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none;
}
.tab-content > .active, .pill-content > .active {
@@ -1657,7 +1618,6 @@ a.menu:after, .dropdown-toggle:after {
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);
@@ -1665,6 +1625,7 @@ a.menu:after, .dropdown-toggle:after {
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;
@@ -1710,14 +1671,14 @@ footer {
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,
@@ -1734,7 +1695,19 @@ footer {
.btn.info,
.alert-message.info,
.btn.info:hover,
-.alert-message.info:hover {
+.alert-message.info:hover,
+.btn.brown,
+.alert-message.brown,
+.btn.brown:hover,
+.alert-message.brown:hover,
+.btn.purple,
+.alert-message.purple,
+.btn.purple:hover,
+.alert-message.purple:hover,
+.btn.blue,
+.alert-message.blue,
+.btn.blue:hover,
+.alert-message.blue:hover {
color: #ffffff;
}
.btn.danger,
@@ -1742,7 +1715,6 @@ footer {
.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);
@@ -1750,6 +1722,7 @@ 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;
@@ -1757,7 +1730,6 @@ footer {
}
.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);
@@ -1765,6 +1737,7 @@ 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;
@@ -1772,7 +1745,6 @@ footer {
}
.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);
@@ -1780,22 +1752,68 @@ 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.brown, .alert-message.brown {
+ background-color: #b3774d;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#c7a383), to(#b3774d));
+ background-image: -moz-linear-gradient(top, #c7a383, #b3774d);
+ background-image: -ms-linear-gradient(top, #c7a383, #b3774d);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c7a383), color-stop(100%, #b3774d));
+ background-image: -webkit-linear-gradient(top, #c7a383, #b3774d);
+ background-image: -o-linear-gradient(top, #c7a383, #b3774d);
+ background-image: linear-gradient(top, #c7a383, #b3774d);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c7a383', endColorstr='#b3774d', GradientType=0);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #b3774d #b3774d #7e5336;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+.btn.purple, .alert-message.purple {
+ background-color: #7a43b6;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#bb91ff), to(#7a43b6));
+ background-image: -moz-linear-gradient(top, #bb91ff, #7a43b6);
+ background-image: -ms-linear-gradient(top, #bb91ff, #7a43b6);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bb91ff), color-stop(100%, #7a43b6));
+ background-image: -webkit-linear-gradient(top, #bb91ff, #7a43b6);
+ background-image: -o-linear-gradient(top, #bb91ff, #7a43b6);
+ background-image: linear-gradient(top, #bb91ff, #7a43b6);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb91ff', endColorstr='#7a43b6', GradientType=0);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #7a43b6 #7a43b6 #552e7e;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+.btn.blue, .alert-message.blue {
+ background-color: #049cdb;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#63afff), to(#049cdb));
+ background-image: -moz-linear-gradient(top, #63afff, #049cdb);
+ background-image: -ms-linear-gradient(top, #63afff, #049cdb);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #63afff), color-stop(100%, #049cdb));
+ background-image: -webkit-linear-gradient(top, #63afff, #049cdb);
+ background-image: -o-linear-gradient(top, #63afff, #049cdb);
+ background-image: linear-gradient(top, #63afff, #049cdb);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63afff', endColorstr='#049cdb', GradientType=0);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #049cdb #049cdb #036690;
+ 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);
+ 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);
@@ -1827,7 +1845,6 @@ footer {
.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);
@@ -1835,6 +1852,7 @@ 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;
@@ -1888,6 +1906,62 @@ 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;
+ content: "";
+ zoom: 1;
+ *display: inline;
+}
+.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;
+ content: "";
+ zoom: 1;
+ *display: inline;
+}
+.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;
@@ -1914,7 +1988,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
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);
@@ -1922,6 +1995,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
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);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #eedc94 #eedc94 #e4c652;
@@ -2317,7 +2391,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
background-color: #f89406;
}
.label.success {
- background-color: #46a546;
+ background-color: #57a957;
}
.label.notice {
background-color: #62cffc;
@@ -2360,3 +2434,189 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
+/* Responsive.less
+ * For phone and tablet devices
+ * ------------------------------------------------------------- */
+@media (max-width: 480px) {
+ .container {
+ width: auto;
+ padding: 0 15px;
+ }
+ .row {
+ margin-left: 0;
+ }
+ [class*="span"] {
+ float: none;
+ display: block;
+ width: auto;
+ margin: 0;
+ }
+ .modal {
+ width: auto;
+ margin: 0;
+ }
+ .form-horizontal .control-group > label {
+ float: none;
+ width: auto;
+ padding-top: 0;
+ text-align: left;
+ }
+ .form-horizontal .controls {
+ margin-left: 0;
+ }
+ .form-horizontal .control-list {
+ padding-top: 0;
+ }
+ .form-horizontal .form-actions {
+ padding-left: 0;
+ }
+}
+@media (min-width: 480px) and (max-width: 768px) {
+ .container {
+ width: auto;
+ padding: 0 10px;
+ }
+ .row {
+ margin-left: 0;
+ }
+ [class*="span"] {
+ float: none;
+ display: block;
+ width: auto;
+ margin: 0;
+ }
+}
+@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;
+ }
+}
+/*
+// 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); }
+
+}
+*/
\ No newline at end of file
diff --git a/bootstrap.min.css b/bootstrap.min.css
index aabdf2428b30d9932a884c217d76dacef29f230e..674d7cf0c5528f779cea0b4777e5dd896df3d82e 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -20,76 +20,60 @@ button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:poin
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;}
+body{background-color:#ffffff;margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;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;}
.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;}
+.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;content:"";zoom:1;*display:inline;}
+.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{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}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;content:"";zoom:1;*display:inline;}
.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{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}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;}
+li{line-height:18px;color:#404040;}
ul.unstyled{list-style:none;margin-left:0;}
dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
dl dt{font-weight:bold;}
@@ -98,63 +82,60 @@ hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;}
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';}
+abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;}
+blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:16px;font-weight:300;line-height:22.5px;margin-bottom:0;}
+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;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,pre{padding:0 3px 2px;font-family:Menlo, 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;}
+pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 9px;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-break:break-all;}
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:13px;font-weight:normal;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=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]{background-color:#ffffff;background-color:initial;padding:initial;border:initial;line-height: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[multiple]{height:inherit;}
+select[multiple]{background-color:#ffffff;height:inherit;}
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[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{display:inline-block;float:none;width:50px;margin-left:0;}
+input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:150px;margin-left:0;}
+input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:250px;margin-left:0;}
+input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:350px;margin-left:0;}
+input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:450px;margin-left:0;}
+input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:550px;margin-left:0;}
+input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:650px;margin-left:0;}
+input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:750px;margin-left:0;}
+input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:850px;margin-left:0;}
+input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:950px;margin-left:0;}
+input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:1050px;margin-left:0;}
+input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:1150px;margin-left:0;}
+input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:1250px;margin-left:0;}
+input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:1350px;margin-left:0;}
+input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:1450px;margin-left:0;}
+input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:1550px;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;}
+.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;}
+.has-error input,.has-error textarea,.has-error select{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);}.has-error input:focus,.has-error textarea:focus,.has-error select: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);}
+.has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
+.form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}
+.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;}
+.help-text{margin-top:5px;margin-bottom:0;color:#bfbfbf;}
+.help-inline{display:inline;padding-left:5px;*position:relative;*top:-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;}
@@ -162,44 +143,54 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.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 .active,.input-append .active{background:#bcddbc;border-color:#57a957;}
.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;}
+.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
+.control-group{margin-bottom:18px;}
+.control-group>label{font-weight:bold;}
+.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
+.form-horizontal .controls{margin-left:150px;}
+.form-horizontal .control-list{padding-top:6px;}
+.form-horizontal .form-actions{padding-left:150px;}
+table{width:100%;padding:0;margin-bottom:18px;font-size:13px;border-collapse:collapse;}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;}
+table td{vertical-align:top;border-top:1px solid #ddd;}
+table tbody th{border-top:1px solid #ddd;vertical-align:top;}
+.condensed-table th,.condensed-table td{padding:5px 5px 4px;}
+.bordered-table{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td{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 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;}
+.bordered-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;}
+table .span1{width:40px;}
+table .span2{width:120px;}
+table .span3{width:200px;}
+table .span4{width:280px;}
+table .span5{width:360px;}
+table .span6{width:440px;}
+table .span7{width:520px;}
+table .span8{width:600px;}
+table .span9{width:680px;}
+table .span10{width:760px;}
+table .span11{width:840px;}
+table .span12{width:920px;}
+table .span13{width:1000px;}
+table .span14{width:1080px;}
+table .span15{width:1160px;}
+table .span16{width:1240px;}
+.striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
+.striped-table tbody tr:hover td,.striped-table tbody tr:hover th{background-color:#f5f5f5;}
+table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
+table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
+table .header:hover:after{visibility:visible;}
+table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
+table .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 .green{color:#57a957;border-bottom-color:#57a957;}
+table .headerSortUp.green,table .headerSortDown.green{background-color:#deeede;}
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;}
@@ -208,63 +199,82 @@ 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;}
+.navbar{height:40px;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{background-color:#333333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
+.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
+.navbar p{margin:0;line-height:40px;}.navbar p a:hover{background-color:transparent;color:#ffffff;}
+.navbar-search{position:relative;margin-top:6px;margin-bottom:0;float:left;}.navbar-search .search-query{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-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{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
+.navbar-search .search-query:focus,.navbar-search .search-query.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);}
+.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;left:0;right:0;z-index:10000;}
+.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left: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.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{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-khtml-opacity:0.3;-moz-opacity:0.3;opacity:0.3;}
+.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
+.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;}.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{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);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);}
+.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
+.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{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;content:"";zoom:1;*display:inline;}
+.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;}
-.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;}
+.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills 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;}
-.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{margin:0 0 18px;padding:7px 14px;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;}
.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;}
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;}
-.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;}
+.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,.btn.brown,.alert-message.brown,.btn.brown:hover,.alert-message.brown:hover,.btn.purple,.alert-message.purple,.btn.purple:hover,.alert-message.purple:hover,.btn.blue,.alert-message.blue,.btn.blue:hover,.alert-message.blue:hover{color:#ffffff;}
+.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{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);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-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);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-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);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.brown,.alert-message.brown{background-color:#b3774d;background-image:-khtml-gradient(linear, left top, left bottom, from(#c7a383), to(#b3774d));background-image:-moz-linear-gradient(top, #c7a383, #b3774d);background-image:-ms-linear-gradient(top, #c7a383, #b3774d);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #c7a383), color-stop(100%, #b3774d));background-image:-webkit-linear-gradient(top, #c7a383, #b3774d);background-image:-o-linear-gradient(top, #c7a383, #b3774d);background-image:linear-gradient(top, #c7a383, #b3774d);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c7a383', endColorstr='#b3774d', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#b3774d #b3774d #7e5336;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.purple,.alert-message.purple{background-color:#7a43b6;background-image:-khtml-gradient(linear, left top, left bottom, from(#bb91ff), to(#7a43b6));background-image:-moz-linear-gradient(top, #bb91ff, #7a43b6);background-image:-ms-linear-gradient(top, #bb91ff, #7a43b6);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #bb91ff), color-stop(100%, #7a43b6));background-image:-webkit-linear-gradient(top, #bb91ff, #7a43b6);background-image:-o-linear-gradient(top, #bb91ff, #7a43b6);background-image:linear-gradient(top, #bb91ff, #7a43b6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb91ff', endColorstr='#7a43b6', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#7a43b6 #7a43b6 #552e7e;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.blue,.alert-message.blue{background-color:#049cdb;background-image:-khtml-gradient(linear, left top, left bottom, from(#63afff), to(#049cdb));background-image:-moz-linear-gradient(top, #63afff, #049cdb);background-image:-ms-linear-gradient(top, #63afff, #049cdb);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #63afff), color-stop(100%, #049cdb));background-image:-webkit-linear-gradient(top, #63afff, #049cdb);background-image:-o-linear-gradient(top, #63afff, #049cdb);background-image:linear-gradient(top, #63afff, #049cdb);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63afff', endColorstr='#049cdb', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#049cdb #049cdb #036690;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-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;-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: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.primary{color:#ffffff;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);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;}
@@ -272,8 +282,16 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.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;}
+.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;content:"";zoom:1;*display:inline;}
+.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;content:"";zoom:1;*display:inline;}
+.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;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;}
+.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;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);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;}
.alert-message h5{line-height:18px;}
.alert-message p{margin-bottom:0;}
.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
@@ -321,10 +339,11 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding: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.success{background-color:#57a957;}
.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);}
+@media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@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..185f381e92f3c99ae146fa1f3bbcce7c4577bd40 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -5,175 +5,193 @@
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);
}
-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 {
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 .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;
- text-align: center;
+.marketing h1 {
+ margin-bottom: 18px;
+}
+.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 +199,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 +246,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 +256,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 +288,141 @@ 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;
+}
+
+
+/* Responsive Docs
+-------------------------------------------------- */
+@media (max-width: 480px) {
+
+ /* Hide the nav for now */
+ body > .navbar-fixed .nav {
+ display: none;
+ }
+
+ /* 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;
+ }
+
+}
+
+
+@media (max-width: 768px) {
+
+ /* Hide the nav for now */
+ body > .navbar-fixed .nav {
+ display: none;
+ }
+
+ /* 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;
+ }
+
+}
+
+
+@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/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/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..13a5cf9785a34379c16131afb927035b9c4b1e78
--- /dev/null
+++ b/docs/base-css.html
@@ -0,0 +1,1070 @@
+<!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 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</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">The core typography, form, and table styles of Bootstrap</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 padding in half, from 10px to 5px, 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. 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="form-search">
+ <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="form-inline">
+ <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="form-horizontal">
+ <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="form-vertical">
+ <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>Name</th>
+ <th>Preview</th>
+ <th>Class</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>Default</th>
+ <td><a class="btn" href="#">Button</a></td>
+ <td><code>.btn</code></td>
+ <td>Standard gray button with gradient</td>
+ </tr>
+ <tr>
+ <th>Primary</th>
+ <td><a class="btn primary" href="#">Button</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>
+ <th>Info</th>
+ <td><a class="btn info" href="#">Button</a></td>
+ <td><code>.info</code></td>
+ <td>Used as an alternate to the default styles</td>
+ </tr>
+ <tr>
+ <th>Success</th>
+ <td><a class="btn success" href="#">Button</a></td>
+ <td><code>.success</code></td>
+ <td>Used to indicate a successful or positive action will be taken</td>
+ </tr>
+ <tr>
+ <th>Danger</th>
+ <td><a class="btn danger" href="#">Button</a></td>
+ <td><code>.danger</code></td>
+ <td>Used to indicate a dangerous or potentially negative action will be taken</td>
+ </tr>
+
+ <tr>
+ <th>Brown</th>
+ <td><a class="btn brown" href="#">Button</a></td>
+ <td><code>.brown</code></td>
+ <td>Used to indicate a brown action will be taken</td>
+ </tr>
+ <tr>
+ <th>Purple</th>
+ <td><a class="btn purple" href="#">Button</a></td>
+ <td><code>.purple</code></td>
+ <td>Used to indicate a purple action will be taken</td>
+ </tr>
+ <tr>
+ <th>Other Blue</th>
+ <td><a class="btn blue" href="#">Button</a></td>
+ <td><code>.blue</code></td>
+ <td>Used to indicate a blue 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>.<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>
+ </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 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..73a049298973d5d498e01fd913f889859fcf4852
--- /dev/null
+++ b/docs/components.html
@@ -0,0 +1,672 @@
+<!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 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">Reusable patterns for navigation, alerts, popovers, and much more</p>
+ </header>
+
+
+<!-- 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="span3">
+ <h2>Media grid</h2>
+ <p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
+ </div>
+ <div class="span9">
+ <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>
+
+
+
+<!-- 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="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>
+
+ <!-- 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>.<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>
+ </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 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..7b91315029266adefcbcc5542b28f750bd731180 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,7 +6,7 @@
<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 +16,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 +25,189 @@
<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>
- </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 -->
-
- <!-- 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>
- </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" />
- </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>
- </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>
- </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>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label>Uneditable input</label>
- <div class="input">
- <span class="uneditable-input">Some value here</span>
- </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>
- </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>
- </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>
- </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>
- </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>
- </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>
- </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>
- </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>
+ <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, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
+ <p class="download-info">
+ <a href="#" class="btn primary btn-large">Download on GitHub</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>
- <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>
- </div><!-- /clearfix -->
- </fieldset>
- <div class="actions">
- <button type="submit" class="btn primary">Save changes</button> <button type="reset" class="btn">Cancel</button>
- </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>
+ </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><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>
- <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 class="marketing">
+ <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 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 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><!--/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 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 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><!--/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 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 class="span4">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.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><!--/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 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 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 class="span3">
+ <img class="small-icon" src="assets/img/icon-twitter.png">
+ <h3>Made at Twitter</h3>
+ <p>Brought to you by experienced engineers and designers.</p>
+ </div>
+ </div><!--/row-->
</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>
+<!-- <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><!-- /#overview -->
- </div><!-- /container -->
- <footer class="footer">
- <div class="container">
+ <!-- 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>.<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>
+ <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 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..3175d261e5756ca3d4639a24c445cf4196f5e385 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -11,18 +11,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">
@@ -37,13 +25,30 @@
<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>
+ <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>
+
+<!--
+ <div class="navbar navbar-fixed" data-scrollspy="scrollspy">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="./index.html">Bootstrap</a>
+ <ul class="nav">
<li><a href="#overview">Overview</a></li>
<li><a href="#modal">Modals</a></li>
<li><a href="#dropdown">Dropdown</a></li>
@@ -56,22 +61,79 @@
</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 custom plugins for <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. 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="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#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 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-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>
+</section>
+
<!-- Modal
================================================== -->
@@ -81,15 +143,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>
<h3>Options</h3>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@@ -147,7 +209,7 @@ $('#my-modal').modal({
<p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('modal')</code>.</p>
<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>
@@ -182,20 +244,18 @@ $('#my-modal').bind('hidden', function () {
<!-- sample modal content -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
- <a href="#" class="close">×</a>
+ <a href="#" class="close" data-modal-dismiss="true" >×</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-modal-dismiss="true" >Close</a>
</div>
</div>
-
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Launch Modal</button>
-
</div>
</div>
</section>
@@ -209,19 +269,19 @@ $('#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">$('#navbar').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>
<pre class="prettyprint linenums">
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
- <li class="dropdown" data-dropdown="dropdown" >
+ <li class="dropdown" data-dropdown="true" >
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
@@ -231,46 +291,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-dropdown="true">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-dropdown="true">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 +343,29 @@ $('#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>
+ <p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.navbar</code>.
+ <pre class="prettyprint linenums"><div class="navbar" 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>.
+ <pre class="prettyprint linenums">$('body > .navbar').scrollSpy()</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>.
</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>
<h3>Demo</h3>
- <p>Checkout the the topbar navigation on this page.</p>
+ <p>Checkout the the navbar navigation on this page.</p>
</div>
</div>
</section>
@@ -321,11 +378,11 @@ $('#my-modal').bind('hidden', function () {
<h1>Tabs <small>bootstrap-tabs.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>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h3>Using boostrap-tabs.js</h3>
<pre class="prettyprint linenums">$('.tabs').tabs()</pre>
<h3>Markup</h3>
@@ -358,24 +415,26 @@ $('#my-modal').bind('hidden', function () {
</script></pre>
</p>
<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>
- <div id="my-tab-content" class="tab-content">
- <div class="active" 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">
- <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">
- <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">
- <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 class="tabbable">
+ <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>
+ <div class="tab-content" id="myTabContent">
+ <div class="tab-pane active" 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 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 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 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>
</div>
</div>
@@ -390,15 +449,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>
@@ -507,15 +566,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>
@@ -628,11 +687,11 @@ $('#my-modal').bind('hidden', function () {
<h1>Alerts <small>bootstrap-alerts.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>
@@ -645,11 +704,11 @@ $('#my-modal').bind('hidden', function () {
<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>
+ <a class="close" data-alert-dismiss="true" 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>
+ <a class="close" data-alert-dismiss="true" 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 +719,27 @@ $('#my-modal').bind('hidden', function () {
</section>
- </div><!-- /container -->
-
- <footer class="footer">
- <div class="container">
+ <!-- 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>.<br />
- Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
+ 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>
+ </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 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/less.html b/docs/less.html
new file mode 100644
index 0000000000000000000000000000000000000000..4fa0f0bdd277725ebec31147861a466c120c168a
--- /dev/null
+++ b/docs/less.html
@@ -0,0 +1,242 @@
+<!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 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</h1>
+ <p class="lead">Be a boss and use Bootstrap's built-in variables, mixins, and more via LESS</p>
+ </header>
+
+
+<!-- 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="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>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>
+
+
+ <!-- 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>.<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>
+ </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 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..de50caf8d84d2d8c9878ccbf14cdbc6e6c4851ce
--- /dev/null
+++ b/docs/scaffolding.html
@@ -0,0 +1,384 @@
+<!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 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">Responsive 12-column grid and fixed- and fluid-width layouts</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">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>
+ <div class="row show-grid">
+ <div class="span4">4</div>
+ <div class="span4">4</div>
+ <div class="span4">4</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span4">4</div>
+ <div class="span8">8</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span6">6</div>
+ <div class="span6">6</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span12">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="striped-table">
+ <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>
+ <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="container-fluid">
+ <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="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>.<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>
+ </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 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/bootstrap-accordion.js b/js/bootstrap-accordion.js
new file mode 100644
index 0000000000000000000000000000000000000000..9a24b5ddfcf3960f1562cb57c427aab37b36581a
--- /dev/null
+++ b/js/bootstrap-accordion.js
@@ -0,0 +1,41 @@
+/* =============================================================
+ * bootstrap-accordion.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html#accordion
+ * =============================================================
+ * 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( $ ){
+
+ var Accordion = function ( element, options ) {}
+
+ Accordion.prototype = {}
+
+ /* ALERT PLUGIN DEFINITION
+ * ======================= */
+
+ $.fn.accordion = function ( options ) {
+
+ if ( options === true ) {
+ return this.data('accordion')
+ }
+
+ return this.each(function () {
+ new Accordion(this, options)
+ })
+ }
+
+
+})( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js
index 82bcac5246e3862f230447705cd2995d56e30ceb..4f1acfa3d0d8ce4cda91dd5b5ba3fe6f8f543225 100644
--- a/js/bootstrap-alerts.js
+++ b/js/bootstrap-alerts.js
@@ -1,5 +1,5 @@
/* ==========================================================
- * bootstrap-alerts.js v1.3.0
+ * bootstrap-alerts.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
* Copyright 2011 Twitter, Inc.
@@ -17,88 +17,32 @@
* 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')
+ function close(e) {
+ var $element = $(this).parent('.alert-message')
- e && e.preventDefault()
- $element.removeClass('in')
+ e && e.preventDefault()
+ $element.removeClass('in')
- function removeElement () {
- $element.remove()
- }
-
- $.support.transition && $element.hasClass('fade') ?
- $element.bind(transitionEnd, removeElement) :
- removeElement()
+ function removeElement () {
+ $element.remove()
}
+ $.support.transition && $element.hasClass('fade') ?
+ $element.bind($.support.transition.end, 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')
+ $(function () {
+ $('body').delegate('[data-alert-dismiss]', 'click', close)
})
})( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js
index ca2daf1f5612c5faf71b92400f04de98196490c4..d12fe48cb6742f2dc0888b84792f58cddb9fe576 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.
@@ -20,31 +20,23 @@
(function( $ ){
- var d = 'a.menu, .dropdown-toggle'
+ /* APPLY TO STANDARD DROPDOWN ELEMENTS
+ * =================================== */
+ var selector = '[data-dropdown]'
function clearMenus() {
- $(d).parent('li').removeClass('open')
+ $(selector).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 ) {
- 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
- })
+ $('body').delegate(selector, 'click', function (e) {
+ var li = $(this).parent('li')
+ , isActive = li.hasClass('open')
+ clearMenus()
+ !isActive && li.toggleClass('open')
+ return false
})
- }
+ })
})( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index da67060731c80cc8e624d5e0bb58ffd0fa0fdfdb..984b091d61ede2f58fc60265be86eb0876ada52f 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,51 +18,18 @@
* ========================================================= */
-(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"
- }
- }
-
- })
-
+!function( $ ){
/* MODAL PUBLIC 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))
+ .delegate('[data-modal-dismiss]', 'click', $.proxy(this.hide, this))
- if ( options ) {
- $.extend( this.settings, options )
-
- if ( options.show ) {
- this.show()
- }
+ if ( this.settings.show ) {
+ this.show()
}
return this
@@ -80,17 +47,7 @@
this.$element.trigger('show')
escape.call(this)
- backdrop.call(this, function () {
- that.$element
- .appendTo(document.body)
- .show()
-
- setTimeout(function () {
- that.$element
- .addClass('in')
- .trigger('shown')
- }, 1)
- })
+ backdrop.call(this)
return this
}
@@ -98,6 +55,10 @@
, hide: function (e) {
e && e.preventDefault()
+ if ( !this.isShown ) {
+ return this
+ }
+
var that = this
this.isShown = false
@@ -116,7 +77,7 @@
}
$.support.transition && this.$element.hasClass('fade') ?
- this.$element.one(transitionEnd, removeElement) :
+ this.$element.one($.support.transition.end, removeElement) :
removeElement()
return this
@@ -128,20 +89,31 @@
/* MODAL PRIVATE METHODS
* ===================== */
- function backdrop ( callback ) {
+ function backdrop () {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
+ , callback = $.proxy(show, this)
+
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()
- })
+ 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')
@@ -151,23 +123,43 @@
}
$.support.transition && this.$element.hasClass('fade')?
- this.$backdrop.one(transitionEnd, removeElement) :
+ this.$backdrop.one($.support.transition.end, removeElement) :
removeElement()
} else if ( callback ) {
callback()
}
}
+ function show() {
+ var transition = $.support.transition && that.$element.hasClass('fade')
+ , that = this
+
+ this.$element
+ .appendTo(document.body)
+ .show()
+
+ if (transition) {
+ this.$element[0].offsetWidth // force reflow
+ }
+
+ this.$element
+ .addClass('in')
+
+ transition ?
+ this.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
+ this.$element.trigger('shown')
+ }
+
function escape() {
var that = this
if ( this.isShown && this.settings.keyboard ) {
- $('body').bind('keyup.modal', function ( e ) {
+ $(document).bind('keyup.modal', function ( e ) {
if ( e.which == 27 ) {
that.hide()
}
})
} else if ( !this.isShown ) {
- $('body').unbind('keyup.modal')
+ $(document).unbind('keyup.modal')
}
}
@@ -209,14 +201,14 @@
$.fn.modal.defaults = {
backdrop: false
, keyboard: false
- , show: true
+ , show: false
}
- /* MODAL DATA- IMPLEMENTATION
- * ========================== */
+ /* MODAL DATA-IMPLEMENTATION
+ * ========================= */
- $(document).ready(function () {
+ $(function () {
$('body').delegate('[data-controls-modal]', 'click', function (e) {
e.preventDefault()
var $this = $(this).data('show', true)
@@ -224,4 +216,4 @@
})
})
-})( 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..3fdde19b518277ef490ef01afae0ca0a72b67b3e 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,7 @@
* =========================================================== */
-(function( $ ) {
+!function( $ ) {
var Popover = function ( element, options ) {
this.$element = $(element)
@@ -40,7 +40,7 @@
}
, getContent: function () {
- var contentvar
+ var content
, $e = this.$element
, o = this.options
@@ -62,7 +62,6 @@
})
-
/* POPOVER PLUGIN DEFINITION
* ======================= */
@@ -74,4 +73,4 @@
$.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { content: 'data-content', placement: 'right'})
-})( 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..1269d91ecbe4b231dee9bddef78d460179e027c0 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.
@@ -22,14 +22,14 @@
var $window = $(window)
- function ScrollSpy( topbar, selector ) {
- var processScroll = $.proxy(this.processScroll, this)
- this.$topbar = $(topbar)
- this.selector = selector || 'li > a'
+ function ScrollSpy() {
+ var process = $.proxy(this.process, this)
+ this.$topbar = $('body')
+ this.selector = '[data-scrollspy] li > a'
this.refresh()
- this.$topbar.delegate(this.selector, 'click', processScroll)
- $window.scroll(processScroll)
- this.processScroll()
+ this.$topbar.delegate(this.selector, 'click', process)
+ $window.scroll(process)
+ this.process()
}
ScrollSpy.prototype = {
@@ -45,7 +45,7 @@
})
}
- , processScroll: function () {
+ , process: function () {
var scrollTop = $window.scrollTop() + 10
, offsets = this.offsets
, targets = this.targets
@@ -56,50 +56,34 @@
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
.find(this.selector).parent('.active')
.removeClass('active')
- this.$topbar
+ active = this.$topbar
.find(this.selector + '[href="' + target + '"]')
.parent('li')
.addClass('active')
- }
-
- }
- /* SCROLLSPY PLUGIN DEFINITION
- * =========================== */
-
- $.fn.scrollSpy = function( options ) {
- var scrollspy = this.data('scrollspy')
-
- if (!scrollspy) {
- return this.each(function () {
- $(this).data('scrollspy', new ScrollSpy( this, options ))
- })
- }
-
- if ( options === true ) {
- return scrollspy
- }
+ if ( active.parent('.dropdown-menu') ) {
+ active.closest('li.dropdown').addClass('active')
+ }
- if ( typeof options == 'string' ) {
- scrollspy[options]()
- }
+ }
- return this
}
- $(document).ready(function () {
- $('body').scrollSpy('[data-scrollspy] li > a')
+ $(function () {
+ new ScrollSpy()
})
}( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js
index 807b366a354de2f9ab5180b3619ee5d7095a715a..86bd4784f3fd5e44e025fb769ef4ef52f6f4e90f 100644
--- a/js/bootstrap-tabs.js
+++ b/js/bootstrap-tabs.js
@@ -1,5 +1,5 @@
/* ========================================================
- * bootstrap-tabs.js v1.3.0
+ * bootstrap-tabs.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
* Copyright 2011 Twitter, Inc.
@@ -18,30 +18,45 @@
* ======================================================== */
-(function( $ ){
+!function( $ ){
function activate ( element, container ) {
- container.find('.active').removeClass('active')
+ 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')
+ }
}
function tab( e ) {
var $this = $(this)
+ , $ul = $this.closest('ul:not(.dropdown-menu)')
, href = $this.attr('href')
- , $ul = $(e.liveFired)
- , $controlled
+ , previous
- if (/^#\w+/.test(href)) {
+ if ( /^#\w+/.test(href) ) {
e.preventDefault()
- if ($this.hasClass('active')) {
+ if ( $this.parent('li').hasClass('active') ) {
return
}
+ previous = $ul.find('.active a').last()[0]
$href = $(href)
activate($this.parent('li'), $ul)
activate($href, $href.parent())
+
+ $this.trigger({
+ type: 'change'
+ , relatedTarget: previous
+ })
}
}
@@ -49,14 +64,8 @@
/* 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')
+ $(function () {
+ $('body').delegate('ul[data-tabs] > li > a, ul[data-pills] > li > a', 'click', tab)
})
-})( 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-transitions.js b/js/bootstrap-transitions.js
new file mode 100644
index 0000000000000000000000000000000000000000..49b5338a8fc31f8a758bcce3cde3a60ceffe4879
--- /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..7c195fbc78ac7b785fe82e034fcc683fe33a3799 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
* ==========================================================
@@ -19,36 +19,7 @@
* ========================================================== */
-(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"
- }
- }
-
- })
-
+!function( $ ) {
/* TWIPSY PUBLIC CLASS DEFINITION
* ============================== */
@@ -131,7 +102,7 @@
}
$.support.transition && this.$tip.hasClass('fade') ?
- $tip.bind(transitionEnd, removeElement) :
+ $tip.bind($.support.transition.end, removeElement) :
removeElement()
}
@@ -304,4 +275,4 @@
return $.metadata ? $.extend({}, options, $(ele).metadata()) : options
}
-})( 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..9665306fd5941caccb71c632518e8ad4a576e096 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -23,4 +23,7 @@
@import "type.less";
@import "forms.less";
@import "tables.less";
-@import "patterns.less";
\ No newline at end of file
+@import "patterns.less";
+
+// Responsive
+@import "responsive.less";
\ No newline at end of file
diff --git a/lib/forms.less b/lib/forms.less
index 0da4037df7cf55d9d7b2060d7db2d2a829418401..6edf29e536a7da7240f86ae30e613acd98d7d603 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -3,32 +3,23 @@
* ------------------------------------------------------------- */
-// 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,16 @@ 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=checkbox],
input[type=radio] {
width: auto;
@@ -87,16 +63,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;
+ background-color: initial;
padding: initial;
border: initial;
line-height: initial;
.box-shadow(none);
}
+// Help out input buttons
input[type=button],
input[type=reset],
input[type=submit] {
@@ -106,13 +86,14 @@ input[type=submit] {
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
+ line-height: @baseLineHeight * 1.5;
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
}
// Make multiple select elements height not fixed
select[multiple] {
+ background-color: @white; // Fixes Chromium bug?
height: inherit;
}
@@ -120,24 +101,11 @@ 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 {
@transition: border linear .2s, box-shadow linear .2s;
@@ -158,78 +126,18 @@ 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
@@ -261,6 +169,11 @@ select {
&.span16 { .formColumns(16); }
}
+
+
+// DISABLED STATE
+// --------------
+
// Disabled and read-only inputs
input[disabled],
select[disabled],
@@ -273,33 +186,89 @@ 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;
- }
+
+
+// ERROR STATE
+// -----------
+
+// Set color of error text
+@error-text: desaturate(lighten(@red, 25%), 25%);
+
+// Style the background of control-groups with errors
+.has-error {
+ background: lighten(@red, 55%);
+ padding: (@baseLineHeight / 2) 0;
+ margin: -10px 0 10px;
+ .border-radius(4px);
+ > label,
+ span.help-inline,
+ span.help-block {
+ color: @red;
+ }
+ input,
+ textarea,
+ select {
+ 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%);
}
}
}
-// 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 {
+ 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;
+}
+
+
+
+// HELP TEXT
+// ---------
+
+.help-text {
+ margin-top: 5px;
+ margin-bottom: 0;
+ color: @grayLight;
+}
+
.help-inline {
+ display: inline;
padding-left: 5px;
*position: relative; /* IE6-7 */
*top: -5px; /* IE6-7 */
@@ -311,7 +280,10 @@ textarea[readonly] {
max-width: 600px;
}
-// Inline Fields (input fields that appear as inline objects
+
+// INLINE FIELDS
+// -------------
+
.inline-inputs {
color: @gray;
span, input {
@@ -328,6 +300,10 @@ textarea[readonly] {
}
}
+
+// INPUT GROUPS
+// ------------
+
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
@@ -343,11 +319,11 @@ textarea[readonly] {
display: block;
width: auto;
min-width: 16px;
- height: 18px;
+ height: @baseLineHeight;
padding: 4px 4px 4px 5px;
margin-right: -1px;
font-weight: normal;
- line-height: 18px;
+ line-height: @baseLineHeight;
color: @grayLight;
text-align: center;
text-shadow: 0 1px 0 @white;
@@ -375,91 +351,59 @@ textarea[readonly] {
}
}
-// 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
+// -----------
+
+.form-search .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;
- }
- }
- .inputs-list {
- margin-bottom: 0;
- li {
- padding-top: 0;
- label {
- font-weight: normal;
- padding-top: 0;
- }
- }
- }
- div.clearfix.error {
- padding-top: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
- margin-top: 0;
- margin-left: -10px;
- }
- .actions {
- margin-left: -20px;
- padding-left: 20px;
- }
+
+
+// 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;
+}
+
+// Lists of controls (checkboxes and radios)
+.control-list {
+}
+
+
+// Horizontal-specific styles
+// --------------------------
+
+// Float the labels left
+.form-horizontal .control-group > label {
+ float: left;
+ width: 130px;
+ padding-top: 5px;
+ text-align: right;
+}
+// Move over all input controls and content
+.form-horizontal .controls {
+ margin-left: 150px;
+}
+// Move the options list down to align with labels
+.form-horizontal .control-list {
+ padding-top: 6px; // has to be padding because margin collaspes
+}
+// Move over buttons in .form-actions to align with .controls
+.form-horizontal .form-actions {
+ padding-left: 150px;
}
diff --git a/lib/mixins.less b/lib/mixins.less
index ca7893dafea098a5fda162e82be4a7aa59f1f17a..6d034cbcc6d604853fdafe08d8bb4b690a7a2bdd 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -1,4 +1,4 @@
-/* Variables.less
+/* Mixins.less
* Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */
@@ -6,32 +6,32 @@
// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix() {
zoom: 1;
- &:before,
+ &:before,
&:after {
display: table;
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;
+ height: @height;
+ width: @width;
}
.square(@size: 5px) {
- .size(@size, @size);
+ .size(@size, @size);
}
// Input placeholder text
@@ -46,25 +46,25 @@
// Font Stacks
#font {
- .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ .shorthand(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
- .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ .sans-serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
- .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ .serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
font-family: "Georgia", Times New Roman, Times, serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
- .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
- font-family: "Monaco", Courier New, monospace;
+ .monospace(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
+ font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
@@ -78,12 +78,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 +103,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 +130,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
+.rotation(@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,11 +189,11 @@
#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);
+ background-clip: padding-box;
+ }
}
// Gradient Bar Colors for buttons and allerts
@@ -157,9 +206,8 @@
// 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 +215,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 +227,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 +241,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 +268,8 @@
// Opacity
.opacity(@opacity: 100) {
- filter: e(%("alpha(opacity=%d)", @opacity));
- -khtml-opacity: @opacity / 100;
- -moz-opacity: @opacity / 100;
- 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
diff --git a/lib/patterns.less b/lib/patterns.less
index ce387614e9a13d8f177ece609cab44efeca5b058..fe1209caefc1ba7723efd5ae243c47ed79a3f620 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -3,42 +3,42 @@
* ---------------------------------------------------------------------------- */
-// 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 {
+ height: @navBarHeight;
+ 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: @navBarBgStart;
background-color: rgba(255,255,255,.05);
color: @white;
text-decoration: none;
}
-
- // Website name
- // h3 left for backwards compatibility
- h3 {
- position: relative;
- }
- h3 a,
+ // Website or project name
.brand {
float: left;
display: block;
@@ -49,7 +49,6 @@
font-weight: 200;
line-height: 1;
}
-
// Plain text in topbar
p {
margin: 0;
@@ -59,19 +58,15 @@
color: @white;
}
}
+}
- // 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 {
+// Navbar search
+.navbar-search {
+ position: relative;
+ margin-top: 6px;
+ margin-bottom: 0;
+ float: left;
+ .search-query {
background-color: #444;
background-color: rgba(255,255,255,.3);
#font > .sans-serif(13px, normal, 1);
@@ -79,8 +74,7 @@
color: @white;
color: rgba(255,255,255,.75);
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);
@@ -111,24 +105,33 @@
}
}
-// 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;
+ left: 0;
+ right: 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 {
display: block;
float: left;
@@ -160,28 +163,19 @@
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,22 +201,16 @@
}
}
-// 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 {
width: 0;
height: 0;
@@ -231,15 +219,16 @@ a.menu:after,
text-indent: -99999px;
vertical-align: top;
margin-top: 8px;
- margin-left: 4px;
+ margin-left: 6px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid @white;
- .opacity(50);
+ .opacity(30);
+}
+.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;
@@ -300,18 +289,12 @@ 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;
}
@@ -333,18 +316,18 @@ a.menu:after,
}
}
-// Basic Tabs
+// Tabs
.tabs {
- float: left;
- width: 100%;
- border-bottom: 1px solid #ddd;
+ border-color: #ddd;
+ border-style: solid;
+ border-width: 0 0 1px;
> li {
position: relative; // For the dropdowns mostly
- top: 1px;
+ margin-bottom: -1px;
> a {
padding: 0 15px;
margin-right: 2px;
- line-height: @baseline * 2;
+ line-height: @baseLineHeight * 2;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
@@ -353,13 +336,127 @@ a.menu:after,
border-color: #eee #eee #ddd;
}
}
- &.active > a {
- color: @gray;
- background-color: @white;
- border: 1px solid #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 {
@@ -385,40 +482,45 @@ a.menu:after,
border-top-color: #555;
}
}
-.tab-content {
- clear: both;
-}
-// Basic pill nav
+// Pills
.pills {
a {
- margin: 5px 3px 5px 0;
+ margin: 5px 3px 5px 0;
padding: 0 15px;
- text-shadow: 0 1px 1px @white;
line-height: 30px;
+ text-shadow: 0 1px 1px @white;
.border-radius(15px);
&:hover {
- background: @linkColorHover;
color: @white;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
+ background-color: @linkColorHover;
}
}
.active a {
- background: @linkColor;
color: @white;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
+ background-color: @linkColor;
}
}
-.tab-content > *,
-.pill-content > * {
- display: none;
+// Stacked pills
+.pills-vertical > li {
+ float: none;
}
+// Tabbable areas
+.tab-content,
+.pill-content {
+}
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+ display: none;
+}
.tab-content > .active,
.pill-content > .active {
- display:block;
+ display: block;
}
@@ -426,7 +528,7 @@ a.menu:after,
// -----------
.breadcrumb {
- margin: 0 0 @baseline;
+ margin: 0 0 @baseLineHeight;
padding: 7px 14px;
#gradient > .vertical(#ffffff, #f5f5f5);
border: 1px solid #ddd;
@@ -440,8 +542,6 @@ a.menu:after,
padding: 0 5px;
color: @grayLight;
}
- a {
- }
.active a {
color: @grayDark;
}
@@ -465,12 +565,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;
+ margin-top: @baseLineHeight - 1;
+ padding-top: @baseLineHeight - 1;
border-top: 1px solid #eee;
}
@@ -479,11 +579,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;
}
}
@@ -502,7 +602,13 @@ footer {
&.success,
&.success:hover,
&.info,
- &.info:hover {
+ &.info:hover,
+ &.brown,
+ &.brown:hover,
+ &.purple,
+ &.purple:hover,
+ &.blue,
+ &.blue:hover {
color: @white
}
// Danger and error appear as red
@@ -512,12 +618,22 @@ footer {
}
// Success appears as green
&.success {
- .gradientBar(#62c462, #57a957);
+ .gradientBar(@greenLight, @green);
}
// Info appears as a neutral blue
&.info {
.gradientBar(#5bc0de, #339bb9);
}
+
+ &.brown {
+ .gradientBar(@brownLight, @brown);
+ }
+ &.purple {
+ .gradientBar(@purpleLight, @purple);
+ }
+ &.blue {
+ .gradientBar(@blueLight, @blue);
+ }
}
// Base .btn styles
@@ -529,7 +645,7 @@ footer {
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;
border: 1px solid #ccc;
border-bottom-color: #bbb;
@@ -581,14 +697,14 @@ footer {
// Button Sizes
&.large {
- font-size: @basefont + 2px;
+ font-size: @baseFontSize + 2px;
line-height: normal;
padding: 9px 14px 9px;
.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,6 +722,54 @@ 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
// -----------
@@ -614,7 +778,7 @@ input[type=submit].btn {
color: @black;
font-size: 20px;
font-weight: bold;
- line-height: @baseline * .75;
+ line-height: @baseLineHeight * .75;
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20);
&:hover {
@@ -632,7 +796,7 @@ 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);
@@ -648,7 +812,7 @@ input[type=submit].btn {
// Remove extra margin from content
h5 {
- line-height: @baseline;
+ line-height: @baseLineHeight;
}
p {
margin-bottom: 0;
@@ -693,8 +857,8 @@ input[type=submit].btn {
border-color: lighten(#f56a66, 20%);
}
&.success {
- background-color: lighten(#62c462, 30%);
- border-color: lighten(#62c462, 25%);
+ background-color: lighten(@greenLight, 30%);
+ border-color: lighten(@greenLight, 25%);
}
&.info {
background-color: lighten(#6bd0ee, 25%);
@@ -708,8 +872,8 @@ input[type=submit].btn {
// ----------
.pagination {
- height: @baseline * 2;
- margin: @baseline 0;
+ height: @baseLineHeight * 2;
+ margin: @baseLineHeight 0;
ul {
float: left;
margin: 0;
@@ -724,7 +888,7 @@ input[type=submit].btn {
a {
float: left;
padding: 0 14px;
- line-height: (@baseline * 2) - 2;
+ line-height: (@baseLineHeight * 2) - 2;
border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0,0,0,.15);
@@ -965,7 +1129,7 @@ input[type=submit].btn {
.label {
padding: 1px 3px 2px;
background-color: @grayLight;
- font-size: @basefont * .75;
+ font-size: @baseFontSize * .75;
font-weight: bold;
color: @white;
text-transform: uppercase;
diff --git a/lib/reset.less b/lib/reset.less
index 6be76fdba6ac0e42f1bc9009a7ecf5723dd0b509..983f14f3dc7fe88c2cd8eb6652a93b18a4d5d88b 100644
--- a/lib/reset.less
+++ b/lib/reset.less
@@ -1,5 +1,5 @@
/* 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).
+ * 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).
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
diff --git a/lib/responsive.less b/lib/responsive.less
new file mode 100644
index 0000000000000000000000000000000000000000..75c33b1a8eb1ff53ef8345c2dd6e902873cbab55
--- /dev/null
+++ b/lib/responsive.less
@@ -0,0 +1,188 @@
+/* Responsive.less
+ * For phone and tablet devices
+ * ------------------------------------------------------------- */
+
+
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+ // Remove width from containers
+ .container {
+ width: auto;
+ padding: 0 15px;
+ }
+ // Undo negative margin on rows
+ .row {
+ margin-left: 0;
+ }
+ // Make all columns even
+ [class*="span"] {
+ float: none;
+ display: block;
+ width: auto;
+ margin: 0;
+ }
+ // Resize modals
+ .modal {
+ width: auto;
+ margin: 0;
+ }
+
+ // Remove the horizontal form styles
+ .form-horizontal .control-group > label {
+ float: none;
+ width: auto;
+ padding-top: 0;
+ text-align: left;
+ }
+ // Move over all input controls and content
+ .form-horizontal .controls {
+ margin-left: 0;
+ }
+ // Move the options list down to align with labels
+ .form-horizontal .control-list {
+ padding-top: 0; // has to be padding because margin collaspes
+ }
+ // Move over buttons in .form-actions to align with .controls
+ .form-horizontal .form-actions {
+ padding-left: 0;
+ }
+
+}
+
+
+// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+// --------------------------------------------------
+
+@media (min-width: 480px) and (max-width: 768px) {
+ // Remove width from containers
+ .container {
+ width: auto;
+ padding: 0 10px;
+ }
+ // Undo negative margin on rows
+ .row {
+ margin-left: 0;
+ }
+ // Make all columns even
+ [class*="span"] {
+ float: none;
+ display: block;
+ width: auto;
+ margin: 0;
+ }
+}
+
+
+// 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); }
+
+}
+*/
\ No newline at end of file
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 26bb0cc059977a654606cd62222dd1bbdf50f04e..7b8aa369a40a494e27d2c9d73116866f31f5b4ea 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -7,12 +7,12 @@
// STRUCTURAL LAYOUT
// -----------------
-html, body {
- background-color: @white;
-}
body {
+ background-color: @white;
margin: 0;
- #font > .sans-serif(normal,@basefont,@baseline);
+ font-family: @baseFontFamily;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
color: @grayDark;
}
@@ -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;
}
@@ -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..b02087fbd2d8b2cd58299ba5e20f0f9531ad7d6f 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -9,38 +9,63 @@
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 {
+ margin-bottom: @baseLineHeight;
+ font-size: @baseFontSize;
+ border-collapse: collapse;
+ th,
+ td {
padding: 10px 10px 9px;
- line-height: @baseline;
+ line-height: @baseLineHeight;
text-align: left;
}
th {
padding-top: 9px;
font-weight: bold;
vertical-align: middle;
- border-bottom: 1px solid #ddd;
}
td {
vertical-align: top;
+ border-top: 1px solid #ddd;
}
+ // When scoped to row, fix th in tbody
+ tbody th {
+ border-top: 1px solid #ddd;
+ vertical-align: top;
+ }
+}
+
+
+// CONDENSED VERSION
+// -----------------
+
+.condensed-table {
+ th,
+ td {
+ padding: 5px 5px 4px;
+ }
+}
+
+
+// BORDERED VERSION
+// ----------------
+
+.bordered-table {
+ border: 1px solid #ddd;
+ border-collapse: separate; // Done so we can round those corners!
+ *border-collapse: collapse; /* IE7, collapse table to remove spacing */
+ .border-radius(4px);
th + th,
- td + td {
+ td + td,
+ th + td {
border-left: 1px solid #ddd;
}
- tr + tr td {
- border-top: 1px solid #ddd;
- }
- tbody tr:first-child td:first-child {
+ 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 {
@@ -52,20 +77,55 @@ table {
}
+// ----------------
+
+// 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); }
+}
+
+
// ZEBRA-STRIPING
// --------------
// 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 {
+ tr:hover td,
+ tr:hover th {
background-color: #f5f5f5;
}
}
+}
+
+
+// TABLESORTER
+// -----------
+table {
// Tablesorting styles w/ jQuery plugin
.header {
cursor: pointer;
@@ -111,9 +171,6 @@ table {
.opacity(60);
}
}
-}
-
-table {
// Blue Table Headings
.blue {
color: @blue;
diff --git a/lib/type.less b/lib/type.less
index 077ae9d8f71d8313fe678d650a187d00da265486..421d666a479d79d17e8ea55da5abe92faf949147 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -7,10 +7,12 @@
// ---------
p {
- #font > .shorthand(normal,@basefont,@baseline);
- margin-bottom: @baseline / 2;
+ font-family: @baseFontFamily;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
+ margin-bottom: @baseLineHeight / 2;
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,8 +89,8 @@ ol {
list-style: decimal;
}
li {
- line-height: @baseline;
- color: @gray;
+ line-height: @baseLineHeight;
+ color: @grayDark;
}
ul.unstyled {
list-style: none;
@@ -96,15 +99,15 @@ ul.unstyled {
// 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;
}
}
@@ -132,36 +135,53 @@ 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;
+ margin-bottom: @baseLineHeight;
border-left: 5px solid #eee;
padding-left: 15px;
p {
- #font > .shorthand(300,14px,@baseline);
+ #font > .shorthand(300,16px,@baseLineHeight * 1.25);
margin-bottom: 0;
}
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;
+ line-height: @baseLineHeight;
+ margin-bottom: @baseLineHeight;
}
// Inline and block code styles
code, pre {
padding: 0 3px 2px;
- font-family: Monaco, Andale Mono, Courier New, monospace;
+ font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;
font-size: 12px;
.border-radius(3px);
}
@@ -173,15 +193,14 @@ code {
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;
+ line-height: @baseLineHeight;
font-size: 12px;
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;
}
\ No newline at end of file
diff --git a/lib/variables.less b/lib/variables.less
index 34000d0669933cd5191598a6113f97d2cd52dbf2..5a1ce1a4bf24f30703ef8633481225a4f9d87377 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -3,11 +3,16 @@
* ----------------------------------------------------- */
-// Links
+// LINK COLORS
+// -----------
+
@linkColor: #0069d6;
@linkColorHover: darken(@linkColor, 15);
-// Grays
+
+// GRAYS
+// -----
+
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@@ -15,46 +20,46 @@
@grayLighter: lighten(@black, 90%);
@white: #fff;
-// Accent Colors
+
+// ACCENT COLORS
+// -------------
+
+@blueLight: #63AFFF;
@blue: #049CDB;
@blueDark: #0064CD;
-@green: #46a546;
+
+@greenLight: #62c462;
+@green: #57a957;
+@greenDark: #1F8511;
+@brownLight: #C7A383;
+@brown: #B3774D;
+
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
+
@pink: #c3325f;
@purple: #7a43b6;
+@purpleLight: #BB91FF;
+
-// Baseline grid
-@basefont: 13px;
-@baseline: 18px;
+// GRID
+// ----
-// Griditude
// 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;