mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
Merge branch '3.0.0-wip' into bs3-flatten
This commit is contained in:
Mark Otto
commit
a33d45f308
@ -63,7 +63,7 @@ $ npm install recess connect uglify-js jshint -g
|
||||
```
|
||||
|
||||
+ **build** - `make`
|
||||
Runs the recess compiler to rebuild the `/less` files and compiles the docs pages. Requires recess and uglify-js. <a href="http://twitter.github.com/bootstrap/extend.html#compiling">Read more in our docs »</a>
|
||||
Runs the recess compiler to rebuild the `/less` files and compiles the docs pages. Requires recess and uglify-js.
|
||||
|
||||
+ **test** - `make test`
|
||||
Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). Depends on having phantomjs installed.
|
||||
|
||||
387
docs/assets/css/bootstrap.css
vendored
387
docs/assets/css/bootstrap.css
vendored
@ -502,14 +502,6 @@ a.text-error:hover {
|
||||
color: #953b39;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #3a87ad;
|
||||
}
|
||||
|
||||
a.text-info:hover {
|
||||
color: #2d6987;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #468847;
|
||||
}
|
||||
@ -518,6 +510,18 @@ a.text-success:hover {
|
||||
color: #356635;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
@ -1086,90 +1090,6 @@ textarea[class*="span"],
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.controls-row input.offset12,
|
||||
textarea.offset12,
|
||||
select.offset12,
|
||||
uneditable-input.offset12 {
|
||||
margin-left: 101.06382978723404%;
|
||||
}
|
||||
|
||||
.controls-row input.offset11,
|
||||
textarea.offset11,
|
||||
select.offset11,
|
||||
uneditable-input.offset11 {
|
||||
margin-left: 92.7304964539007%;
|
||||
}
|
||||
|
||||
.controls-row input.offset10,
|
||||
textarea.offset10,
|
||||
select.offset10,
|
||||
uneditable-input.offset10 {
|
||||
margin-left: 84.39716312056738%;
|
||||
}
|
||||
|
||||
.controls-row input.offset9,
|
||||
textarea.offset9,
|
||||
select.offset9,
|
||||
uneditable-input.offset9 {
|
||||
margin-left: 76.06382978723404%;
|
||||
}
|
||||
|
||||
.controls-row input.offset8,
|
||||
textarea.offset8,
|
||||
select.offset8,
|
||||
uneditable-input.offset8 {
|
||||
margin-left: 67.7304964539007%;
|
||||
}
|
||||
|
||||
.controls-row input.offset7,
|
||||
textarea.offset7,
|
||||
select.offset7,
|
||||
uneditable-input.offset7 {
|
||||
margin-left: 59.39716312056738%;
|
||||
}
|
||||
|
||||
.controls-row input.offset6,
|
||||
textarea.offset6,
|
||||
select.offset6,
|
||||
uneditable-input.offset6 {
|
||||
margin-left: 51.06382978723404%;
|
||||
}
|
||||
|
||||
.controls-row input.offset5,
|
||||
textarea.offset5,
|
||||
select.offset5,
|
||||
uneditable-input.offset5 {
|
||||
margin-left: 42.73049645390071%;
|
||||
}
|
||||
|
||||
.controls-row input.offset4,
|
||||
textarea.offset4,
|
||||
select.offset4,
|
||||
uneditable-input.offset4 {
|
||||
margin-left: 34.39716312056737%;
|
||||
}
|
||||
|
||||
.controls-row input.offset3,
|
||||
textarea.offset3,
|
||||
select.offset3,
|
||||
uneditable-input.offset3 {
|
||||
margin-left: 26.06382978723404%;
|
||||
}
|
||||
|
||||
.controls-row input.offset2,
|
||||
textarea.offset2,
|
||||
select.offset2,
|
||||
uneditable-input.offset2 {
|
||||
margin-left: 17.730496453900706%;
|
||||
}
|
||||
|
||||
.controls-row input.offset1,
|
||||
textarea.offset1,
|
||||
select.offset1,
|
||||
uneditable-input.offset1 {
|
||||
margin-left: 9.397163120567374%;
|
||||
}
|
||||
|
||||
.input-append input[class*="span"],
|
||||
.input-append .uneditable-input[class*="span"],
|
||||
.input-prepend input[class*="span"],
|
||||
@ -1184,25 +1104,6 @@ textarea[class*="span"],
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.controls-row:before,
|
||||
.controls-row:after {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.controls-row:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.controls-row [class*="span"] {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.controls-row .checkbox[class*="span"],
|
||||
.controls-row .radio[class*="span"] {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
@ -1225,154 +1126,57 @@ fieldset[disabled] input[type="checkbox"] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.control-group.warning .control-label,
|
||||
.control-group.warning .help-block,
|
||||
.control-group.warning .help-inline {
|
||||
.has-warning .control-label {
|
||||
color: #c09853;
|
||||
}
|
||||
|
||||
.control-group.warning .checkbox,
|
||||
.control-group.warning .radio,
|
||||
.control-group.warning input,
|
||||
.control-group.warning select,
|
||||
.control-group.warning textarea {
|
||||
color: #c09853;
|
||||
}
|
||||
|
||||
.control-group.warning input,
|
||||
.control-group.warning select,
|
||||
.control-group.warning textarea {
|
||||
.has-warning .input-with-feedback {
|
||||
padding-right: 32px;
|
||||
border-color: #c09853;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.control-group.warning input:focus,
|
||||
.control-group.warning select:focus,
|
||||
.control-group.warning textarea:focus {
|
||||
.has-warning .input-with-feedback:focus {
|
||||
border-color: #a47e3c;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
|
||||
}
|
||||
|
||||
.control-group.warning .input-prepend .add-on,
|
||||
.control-group.warning .input-append .add-on {
|
||||
color: #c09853;
|
||||
background-color: #fcf8e3;
|
||||
border-color: #c09853;
|
||||
}
|
||||
|
||||
.control-group.error .control-label,
|
||||
.control-group.error .help-block,
|
||||
.control-group.error .help-inline {
|
||||
.has-error .control-label {
|
||||
color: #b94a48;
|
||||
}
|
||||
|
||||
.control-group.error .checkbox,
|
||||
.control-group.error .radio,
|
||||
.control-group.error input,
|
||||
.control-group.error select,
|
||||
.control-group.error textarea {
|
||||
color: #b94a48;
|
||||
}
|
||||
|
||||
.control-group.error input,
|
||||
.control-group.error select,
|
||||
.control-group.error textarea {
|
||||
.has-error .input-with-feedback {
|
||||
padding-right: 32px;
|
||||
border-color: #b94a48;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.control-group.error input:focus,
|
||||
.control-group.error select:focus,
|
||||
.control-group.error textarea:focus {
|
||||
.has-error .input-with-feedback:focus {
|
||||
border-color: #953b39;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
|
||||
}
|
||||
|
||||
.control-group.error .input-prepend .add-on,
|
||||
.control-group.error .input-append .add-on {
|
||||
color: #b94a48;
|
||||
background-color: #f2dede;
|
||||
border-color: #b94a48;
|
||||
}
|
||||
|
||||
.control-group.success .control-label,
|
||||
.control-group.success .help-block,
|
||||
.control-group.success .help-inline {
|
||||
.has-success .control-label {
|
||||
color: #468847;
|
||||
}
|
||||
|
||||
.control-group.success .checkbox,
|
||||
.control-group.success .radio,
|
||||
.control-group.success input,
|
||||
.control-group.success select,
|
||||
.control-group.success textarea {
|
||||
color: #468847;
|
||||
}
|
||||
|
||||
.control-group.success input,
|
||||
.control-group.success select,
|
||||
.control-group.success textarea {
|
||||
.has-success .input-with-feedback {
|
||||
padding-right: 32px;
|
||||
border-color: #468847;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.control-group.success input:focus,
|
||||
.control-group.success select:focus,
|
||||
.control-group.success textarea:focus {
|
||||
.has-success .input-with-feedback:focus {
|
||||
border-color: #356635;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
|
||||
}
|
||||
|
||||
.control-group.success .input-prepend .add-on,
|
||||
.control-group.success .input-append .add-on {
|
||||
color: #468847;
|
||||
background-color: #dff0d8;
|
||||
border-color: #468847;
|
||||
}
|
||||
|
||||
.control-group.info .control-label,
|
||||
.control-group.info .help-block,
|
||||
.control-group.info .help-inline {
|
||||
color: #3a87ad;
|
||||
}
|
||||
|
||||
.control-group.info .checkbox,
|
||||
.control-group.info .radio,
|
||||
.control-group.info input,
|
||||
.control-group.info select,
|
||||
.control-group.info textarea {
|
||||
color: #3a87ad;
|
||||
}
|
||||
|
||||
.control-group.info input,
|
||||
.control-group.info select,
|
||||
.control-group.info textarea {
|
||||
border-color: #3a87ad;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.control-group.info input:focus,
|
||||
.control-group.info select:focus,
|
||||
.control-group.info textarea:focus {
|
||||
border-color: #2d6987;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
|
||||
}
|
||||
|
||||
.control-group.info .input-prepend .add-on,
|
||||
.control-group.info .input-append .add-on {
|
||||
color: #3a87ad;
|
||||
background-color: #d9edf7;
|
||||
border-color: #3a87ad;
|
||||
}
|
||||
|
||||
input:focus:invalid,
|
||||
textarea:focus:invalid,
|
||||
select:focus:invalid {
|
||||
@ -1526,6 +1330,39 @@ select:focus:invalid:focus {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.form-horizontal .control-group {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-horizontal .control-group:before,
|
||||
.form-horizontal .control-group:after {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.form-horizontal .control-group:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.form-horizontal .control-group input,
|
||||
.form-horizontal .control-group select,
|
||||
.form-horizontal .control-group textarea,
|
||||
.form-horizontal .control-group .uneditable-input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-horizontal .control-group > .control-label {
|
||||
float: left;
|
||||
width: 160px;
|
||||
padding-top: 6px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form-horizontal .control-group > .controls {
|
||||
margin-left: 180px;
|
||||
}
|
||||
|
||||
table {
|
||||
max-width: 100%;
|
||||
background-color: transparent;
|
||||
@ -3196,10 +3033,6 @@ fieldset[disabled] .btn-link:hover {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tab-content > .tab-pane,
|
||||
.pill-content > .pill-pane {
|
||||
display: none;
|
||||
@ -3755,24 +3588,19 @@ fieldset[disabled] .navbar-inverse .btn-navbar {
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
margin: 20px 0;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.pagination ul > li {
|
||||
.pagination > li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.pagination ul > li > a,
|
||||
.pagination ul > li > span {
|
||||
.pagination > li > a,
|
||||
.pagination > li > span {
|
||||
float: left;
|
||||
padding: 4px 12px;
|
||||
line-height: 20px;
|
||||
@ -3782,89 +3610,81 @@ fieldset[disabled] .navbar-inverse .btn-navbar {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.pagination ul > li > a:hover,
|
||||
.pagination ul > .active > a,
|
||||
.pagination ul > .active > span {
|
||||
.pagination > li > a:hover,
|
||||
.pagination > .active > a,
|
||||
.pagination > .active > span {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.pagination ul > .active > a,
|
||||
.pagination ul > .active > span {
|
||||
.pagination > .active > a,
|
||||
.pagination > .active > span {
|
||||
color: #999999;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.pagination ul > .disabled > span,
|
||||
.pagination ul > .disabled > a,
|
||||
.pagination ul > .disabled > a:hover {
|
||||
.pagination > .disabled > span,
|
||||
.pagination > .disabled > a,
|
||||
.pagination > .disabled > a:hover {
|
||||
color: #999999;
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pagination ul > li:first-child > a,
|
||||
.pagination ul > li:first-child > span {
|
||||
.pagination > li:first-child > a,
|
||||
.pagination > li:first-child > span {
|
||||
border-left-width: 1px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.pagination ul > li:last-child > a,
|
||||
.pagination ul > li:last-child > span {
|
||||
.pagination > li:last-child > a,
|
||||
.pagination > li:last-child > span {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.pagination-centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pagination-large ul > li > a,
|
||||
.pagination-large ul > li > span {
|
||||
.pagination-large > li > a,
|
||||
.pagination-large > li > span {
|
||||
padding: 11px 19px;
|
||||
font-size: 17.5px;
|
||||
}
|
||||
|
||||
.pagination-large ul > li:first-child > a,
|
||||
.pagination-large ul > li:first-child > span {
|
||||
.pagination-large > li:first-child > a,
|
||||
.pagination-large > li:first-child > span {
|
||||
border-bottom-left-radius: 6px;
|
||||
border-top-left-radius: 6px;
|
||||
}
|
||||
|
||||
.pagination-large ul > li:last-child > a,
|
||||
.pagination-large ul > li:last-child > span {
|
||||
.pagination-large > li:last-child > a,
|
||||
.pagination-large > li:last-child > span {
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.pagination-mini ul > li:first-child > a,
|
||||
.pagination-small ul > li:first-child > a,
|
||||
.pagination-mini ul > li:first-child > span,
|
||||
.pagination-small ul > li:first-child > span {
|
||||
.pagination-mini > li:first-child > a,
|
||||
.pagination-small > li:first-child > a,
|
||||
.pagination-mini > li:first-child > span,
|
||||
.pagination-small > li:first-child > span {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
|
||||
.pagination-mini ul > li:last-child > a,
|
||||
.pagination-small ul > li:last-child > a,
|
||||
.pagination-mini ul > li:last-child > span,
|
||||
.pagination-small ul > li:last-child > span {
|
||||
.pagination-mini > li:last-child > a,
|
||||
.pagination-small > li:last-child > a,
|
||||
.pagination-mini > li:last-child > span,
|
||||
.pagination-small > li:last-child > span {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.pagination-small ul > li > a,
|
||||
.pagination-small ul > li > span {
|
||||
.pagination-small > li > a,
|
||||
.pagination-small > li > span {
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
}
|
||||
|
||||
.pagination-mini ul > li > a,
|
||||
.pagination-mini ul > li > span {
|
||||
.pagination-mini > li > a,
|
||||
.pagination-mini > li > span {
|
||||
padding: 0 6px;
|
||||
font-size: 10.5px;
|
||||
}
|
||||
@ -4365,22 +4185,6 @@ a.badge:hover {
|
||||
background-color: #356635;
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
background-color: #3a87ad;
|
||||
}
|
||||
|
||||
.badge-info[href] {
|
||||
background-color: #2d6987;
|
||||
}
|
||||
|
||||
.badge-inverse {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.badge-inverse[href] {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.btn .badge {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
@ -4860,11 +4664,6 @@ a.badge:hover {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.control-block-level {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
@ -5149,7 +4948,6 @@ a.badge:hover {
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.input-prepend input,
|
||||
@ -5159,9 +4957,6 @@ a.badge:hover {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: 0;
|
||||
}
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
|
||||
@ -1189,29 +1189,25 @@
|
||||
<h2>Standard pagination</h2>
|
||||
<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li><a href="#">Prev</a></li>
|
||||
<li><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="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li><a href="#">Prev</a></li>
|
||||
<li><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="#">Next</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
|
||||
@ -1223,43 +1219,37 @@
|
||||
<h3>Disabled and active states</h3>
|
||||
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-centered">
|
||||
<ul>
|
||||
<li class="disabled"><a href="#">«</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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><a href="#">«</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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="disabled"><a href="#">Prev</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><a href="#">Prev</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
<p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="disabled"><span>Prev</span></li>
|
||||
<li class="active"><span>1</span></li>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><span>Prev</span></li>
|
||||
<li class="active"><span>1</span></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Sizes</h3>
|
||||
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-large">
|
||||
<ul>
|
||||
<div>
|
||||
<ul class="pagination pagination-large">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
@ -1269,19 +1259,8 @@
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-small">
|
||||
<ul>
|
||||
<div>
|
||||
<ul class="pagination">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
@ -1291,8 +1270,19 @@
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-mini">
|
||||
<ul>
|
||||
<div>
|
||||
<ul class="pagination pagination-small">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="pagination pagination-mini">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
@ -1304,65 +1294,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination pagination-large">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-small">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-mini">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Alignment</h3>
|
||||
<p>Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-centered">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination pagination-centered">
|
||||
<ul class="pagination pagination-large">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-right">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination pagination-right">
|
||||
</ul>
|
||||
<ul class="pagination">
|
||||
...
|
||||
</div>
|
||||
</ul>
|
||||
<ul class="pagination pagination-small">
|
||||
...
|
||||
</ul>
|
||||
<ul class="pagination pagination-mini">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
|
||||
@ -1478,7 +1421,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Important
|
||||
Danger
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">6</span>
|
||||
@ -1487,28 +1430,6 @@
|
||||
<code><span class="badge badge-danger">6</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Info
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-info">8</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="badge badge-info">8</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Inverse
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-inverse">10</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="badge badge-inverse">10</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -2138,7 +2059,7 @@ class="muted"
|
||||
</pre>
|
||||
|
||||
<h4>.clearfix</h4>
|
||||
<p>Clear the <code>float</code> on any element.</p>
|
||||
<p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
class="clearfix"
|
||||
</pre>
|
||||
|
||||
130
docs/css.html
130
docs/css.html
@ -305,20 +305,31 @@
|
||||
|
||||
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <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>Alignment classes</h3>
|
||||
<p>Easily realign text to components with text alignment classes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
</pre>
|
||||
|
||||
<h3>Emphasis classes</h3>
|
||||
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
</pre>
|
||||
|
||||
@ -1468,17 +1479,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<h3 id="forms-extending-sizes">Control sizing</h3>
|
||||
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
|
||||
|
||||
<h4>Block level inputs</h4>
|
||||
<p>Make any <code><input></code> or <code><textarea></code> element behave like a block level element.</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="controls">
|
||||
<input class="input-block-level" type="text" placeholder=".input-block-level">
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<input class="input-block-level" type="text" placeholder=".input-block-level">
|
||||
</pre>
|
||||
|
||||
<h4>Relative sizing</h4>
|
||||
<p>Create larger or smaller form controls that match button sizes.</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
@ -1538,38 +1538,32 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
...
|
||||
</select>
|
||||
</pre>
|
||||
|
||||
<p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p>
|
||||
<p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="controls controls-row">
|
||||
<input class="span5" type="text" placeholder=".span5">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span3" type="text" placeholder=".span3">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
<input class="span3" type="text" placeholder=".span3">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="controls">
|
||||
<input class="span5" type="text" placeholder=".span5">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
</div>
|
||||
...
|
||||
</pre>
|
||||
|
||||
<h3>Uneditable inputs</h3>
|
||||
@ -1622,7 +1616,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<h2>Form control states</h2>
|
||||
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
|
||||
|
||||
<h3>Input focus</h3>
|
||||
<h3 id="forms-input-focus">Input focus</h3>
|
||||
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
|
||||
@ -1631,8 +1625,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
|
||||
</pre>
|
||||
|
||||
<h3>Invalid inputs</h3>
|
||||
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.</p>
|
||||
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
|
||||
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="span3" type="email" placeholder="test@example.com" required>
|
||||
</form>
|
||||
@ -1640,7 +1634,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<input class="span3" type="email" required>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled inputs</h3>
|
||||
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
|
||||
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
|
||||
@ -1649,7 +1643,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled fieldsets</h3>
|
||||
<h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
|
||||
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<fieldset disabled>
|
||||
@ -1686,59 +1680,51 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Validation states</h3>
|
||||
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
|
||||
<h3 id="forms-validation">Validation states</h3>
|
||||
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
|
||||
<ul>
|
||||
<li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
|
||||
<li>Add .input-with-feedback to the field(s) in question</li>
|
||||
</ul>
|
||||
<p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p>
|
||||
|
||||
<form class="bs-docs-example form-horizontal">
|
||||
<div class="control-group warning">
|
||||
<div class="control-group has-warning">
|
||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputWarning">
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group error">
|
||||
<div class="control-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
<input type="text" class="input-with-feedback" id="inputError">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group info">
|
||||
<label class="control-label" for="inputInfo">Input with info</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputInfo">
|
||||
<span class="help-inline">Username is taken</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group success">
|
||||
<div class="control-group has-success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputSuccess">
|
||||
<span class="help-inline">Woohoo!</span>
|
||||
<input type="text" class="input-with-feedback" id="inputSuccess">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="control-group warning">
|
||||
<div class="control-group has-warning">
|
||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputWarning">
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group error">
|
||||
<div class="control-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
<input type="text" class="input-with-feedback" id="inputError">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group success">
|
||||
<div class="control-group has-success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputSuccess">
|
||||
<span class="help-inline">Woohoo!</span>
|
||||
<input type="text" class="input-with-feedback id="inputSuccess"">
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
306
docs/extend.html
306
docs/extend.html
@ -1,306 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Extend · Bootstrap</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="assets/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="assets/css/docs.css" rel="stylesheet">
|
||||
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- 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 fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".bs-docs-sidebar">
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="brand" href="./index.html">Bootstrap</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="">
|
||||
<a href="./index.html">Home</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./getting-started.html">Get started</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./css.html">Core CSS</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./components.html">Components</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./javascript.html">JavaScript</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./customize.html">Customize</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./gallery.html">Gallery</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Extending Bootstrap</h1>
|
||||
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
|
||||
<div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#built-with-less"><i class="glyphicon-chevron-right"></i> Built with LESS</a></li>
|
||||
<li><a href="#compiling"><i class="glyphicon-chevron-right"></i> Compiling Bootstrap</a></li>
|
||||
<li><a href="#static-assets"><i class="glyphicon-chevron-right"></i> Use as static assets</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span9">
|
||||
|
||||
|
||||
|
||||
<!-- BUILT WITH LESS
|
||||
================================================== -->
|
||||
<section id="built-with-less">
|
||||
<div class="page-header">
|
||||
<h1>Built with LESS</h1>
|
||||
</div>
|
||||
|
||||
<img style="float: right; height: 36px; margin: 10px 20px 20px" src="assets/img/less-logo-large.png" alt="LESS CSS">
|
||||
<p class="lead">Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
|
||||
|
||||
<h3>Why LESS?</h3>
|
||||
<p>One of Bootstrap's creators wrote a quick <a href="http://www.wordsbyf.at/2012/03/08/why-less/">blog post about this</a>, summarized here:</p>
|
||||
<ul>
|
||||
<li>Bootstrap compiles faster ~6x faster with Less compared to Sass</li>
|
||||
<li>Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.</li>
|
||||
<li>Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.</li>
|
||||
</ul>
|
||||
|
||||
<h3>What's included?</h3>
|
||||
<p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
|
||||
|
||||
<h3>Learn more</h3>
|
||||
<p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- COMPILING LESS AND BOOTSTRAP
|
||||
================================================== -->
|
||||
<section id="compiling">
|
||||
<div class="page-header">
|
||||
<h1>Compiling Bootstrap with Less</h1>
|
||||
</div>
|
||||
|
||||
<p class="lead">Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.</p>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
|
||||
</div>
|
||||
|
||||
<h2>Tools for compiling</h2>
|
||||
|
||||
<h3>Node with makefile</h3>
|
||||
<p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
|
||||
<pre>$ npm install -g less jshint recess uglify-js</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>
|
||||
|
||||
<h3>Command line</h3>
|
||||
<p>Install the LESS command line tool via Node and run the following command:</p>
|
||||
<pre>$ lessc ./less/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>
|
||||
|
||||
<h3>JavaScript</h3>
|
||||
<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>
|
||||
|
||||
<h3>Unofficial Mac app</h3>
|
||||
<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. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
|
||||
|
||||
<h3>More apps</h3>
|
||||
<h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
|
||||
<p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
|
||||
<h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
|
||||
<p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
|
||||
<h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
|
||||
<p>Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Static assets
|
||||
================================================== -->
|
||||
<section id="static-assets">
|
||||
<div class="page-header">
|
||||
<h1>Use as static assets</h1>
|
||||
</div>
|
||||
<p class="lead"><a href="./getting-started.html">Quickly start</a> any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.</p>
|
||||
|
||||
<h3>Setup file structure</h3>
|
||||
<p>Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:</p>
|
||||
<pre>
|
||||
<span class="icon-folder-open"></span> app/
|
||||
<span class="icon-folder-open"></span> layouts/
|
||||
<span class="icon-folder-open"></span> templates/
|
||||
<span class="icon-folder-open"></span> public/
|
||||
<span class="icon-folder-open"></span> css/
|
||||
<span class="icon-file"></span> bootstrap.min.css
|
||||
<span class="icon-folder-open"></span> js/
|
||||
<span class="icon-file"></span> bootstrap.min.js
|
||||
<span class="icon-folder-open"></span> img/
|
||||
<span class="icon-file"></span> glyphicons-halflings.png
|
||||
<span class="icon-file"></span> glyphicons-halflings-white.png
|
||||
</pre>
|
||||
|
||||
<h3>Utilize starter template</h3>
|
||||
<p>Copy the following base HTML to get started.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="public/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<!-- Bootstrap -->
|
||||
<script src="public/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</pre>
|
||||
|
||||
<h3>Layer on custom code</h3>
|
||||
<p>Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="public/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Project -->
|
||||
<link href="public/css/application.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<!-- Bootstrap -->
|
||||
<script src="public/js/bootstrap.min.js"></script>
|
||||
<!-- Project -->
|
||||
<script src="public/js/application.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
|
||||
<div class="bs-docs-social">
|
||||
<ul class="bs-docs-social-buttons">
|
||||
<li>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
|
||||
</li>
|
||||
<li>
|
||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
|
||||
</li>
|
||||
<li class="follow-btn">
|
||||
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
|
||||
</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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Designed and built with all the love in the world 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 <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<p><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>
|
||||
<ul class="footer-links">
|
||||
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li class="muted">·</li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="assets/js/jquery.js"></script>
|
||||
<script src="assets/js/bootstrap-transition.js"></script>
|
||||
<script src="assets/js/bootstrap-alert.js"></script>
|
||||
<script src="assets/js/bootstrap-modal.js"></script>
|
||||
<script src="assets/js/bootstrap-dropdown.js"></script>
|
||||
<script src="assets/js/bootstrap-scrollspy.js"></script>
|
||||
<script src="assets/js/bootstrap-tab.js"></script>
|
||||
<script src="assets/js/bootstrap-tooltip.js"></script>
|
||||
<script src="assets/js/bootstrap-popover.js"></script>
|
||||
<script src="assets/js/bootstrap-button.js"></script>
|
||||
<script src="assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="assets/js/bootstrap-typeahead.js"></script>
|
||||
<script src="assets/js/bootstrap-affix.js"></script>
|
||||
|
||||
<script src="assets/js/holder/holder.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -80,9 +80,6 @@
|
||||
<li>
|
||||
<a href="./getting-started.html#examples" >Examples</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./extend.html" >Extend</a>
|
||||
</li>
|
||||
<li>Version 3.0.0</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
209
docs/templates/pages/components.mustache
vendored
209
docs/templates/pages/components.mustache
vendored
@ -1121,29 +1121,25 @@
|
||||
<h2>Standard pagination</h2>
|
||||
<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li><a href="#">Prev</a></li>
|
||||
<li><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="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li><a href="#">Prev</a></li>
|
||||
<li><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="#">Next</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
|
||||
@ -1155,43 +1151,37 @@
|
||||
<h3>Disabled and active states</h3>
|
||||
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-centered">
|
||||
<ul>
|
||||
<li class="disabled"><a href="#">«</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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><a href="#">«</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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="disabled"><a href="#">Prev</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><a href="#">Prev</a></li>
|
||||
<li class="active"><a href="#">1</a></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
<p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="disabled"><span>Prev</span></li>
|
||||
<li class="active"><span>1</span></li>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><span>Prev</span></li>
|
||||
<li class="active"><span>1</span></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Sizes</h3>
|
||||
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-large">
|
||||
<ul>
|
||||
<div>
|
||||
<ul class="pagination pagination-large">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
@ -1201,19 +1191,8 @@
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-small">
|
||||
<ul>
|
||||
<div>
|
||||
<ul class="pagination">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
@ -1223,8 +1202,19 @@
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-mini">
|
||||
<ul>
|
||||
<div>
|
||||
<ul class="pagination pagination-small">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="pagination pagination-mini">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
@ -1236,65 +1226,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination pagination-large">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-small">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-mini">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Alignment</h3>
|
||||
<p>Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-centered">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination pagination-centered">
|
||||
<ul class="pagination pagination-large">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-right">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><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><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination pagination-right">
|
||||
</ul>
|
||||
<ul class="pagination">
|
||||
...
|
||||
</div>
|
||||
</ul>
|
||||
<ul class="pagination pagination-small">
|
||||
...
|
||||
</ul>
|
||||
<ul class="pagination pagination-mini">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
|
||||
@ -1410,7 +1353,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Important
|
||||
Danger
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">6</span>
|
||||
@ -1419,28 +1362,6 @@
|
||||
<code><span class="badge badge-danger">6</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Info
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-info">8</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="badge badge-info">8</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Inverse
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-inverse">10</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="badge badge-inverse">10</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -2070,7 +1991,7 @@ class="muted"
|
||||
</pre>
|
||||
|
||||
<h4>.clearfix</h4>
|
||||
<p>Clear the <code>float</code> on any element.</p>
|
||||
<p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
class="clearfix"
|
||||
</pre>
|
||||
|
||||
130
docs/templates/pages/css.mustache
vendored
130
docs/templates/pages/css.mustache
vendored
@ -242,20 +242,31 @@
|
||||
|
||||
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <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>Alignment classes</h3>
|
||||
<p>Easily realign text to components with text alignment classes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
</pre>
|
||||
|
||||
<h3>Emphasis classes</h3>
|
||||
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
</pre>
|
||||
|
||||
@ -1408,17 +1419,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<h3 id="forms-extending-sizes">Control sizing</h3>
|
||||
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
|
||||
|
||||
<h4>Block level inputs</h4>
|
||||
<p>Make any <code><input></code> or <code><textarea></code> element behave like a block level element.</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="controls">
|
||||
<input class="input-block-level" type="text" placeholder=".input-block-level">
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<input class="input-block-level" type="text" placeholder=".input-block-level">
|
||||
</pre>
|
||||
|
||||
<h4>Relative sizing</h4>
|
||||
<p>Create larger or smaller form controls that match button sizes.</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
@ -1478,38 +1478,32 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
...
|
||||
</select>
|
||||
</pre>
|
||||
|
||||
<p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p>
|
||||
<p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="controls controls-row">
|
||||
<input class="span5" type="text" placeholder=".span5">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span3" type="text" placeholder=".span3">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
<input class="span3" type="text" placeholder=".span3">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="controls">
|
||||
<input class="span5" type="text" placeholder=".span5">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
<input type="text" placeholder=".span4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
</div>
|
||||
...
|
||||
</pre>
|
||||
|
||||
<h3>Uneditable inputs</h3>
|
||||
@ -1562,7 +1556,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<h2>Form control states</h2>
|
||||
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
|
||||
|
||||
<h3>Input focus</h3>
|
||||
<h3 id="forms-input-focus">Input focus</h3>
|
||||
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
|
||||
@ -1571,8 +1565,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
|
||||
</pre>
|
||||
|
||||
<h3>Invalid inputs</h3>
|
||||
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.</p>
|
||||
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
|
||||
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="span3" type="email" placeholder="test@example.com" required>
|
||||
</form>
|
||||
@ -1580,7 +1574,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<input class="span3" type="email" required>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled inputs</h3>
|
||||
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
|
||||
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
|
||||
@ -1589,7 +1583,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled fieldsets</h3>
|
||||
<h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
|
||||
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<fieldset disabled>
|
||||
@ -1626,59 +1620,51 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Validation states</h3>
|
||||
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
|
||||
<h3 id="forms-validation">Validation states</h3>
|
||||
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
|
||||
<ul>
|
||||
<li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
|
||||
<li>Add .input-with-feedback to the field(s) in question</li>
|
||||
</ul>
|
||||
<p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p>
|
||||
|
||||
<form class="bs-docs-example form-horizontal">
|
||||
<div class="control-group warning">
|
||||
<div class="control-group has-warning">
|
||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputWarning">
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group error">
|
||||
<div class="control-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
<input type="text" class="input-with-feedback" id="inputError">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group info">
|
||||
<label class="control-label" for="inputInfo">Input with info</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputInfo">
|
||||
<span class="help-inline">Username is taken</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group success">
|
||||
<div class="control-group has-success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputSuccess">
|
||||
<span class="help-inline">Woohoo!</span>
|
||||
<input type="text" class="input-with-feedback" id="inputSuccess">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="control-group warning">
|
||||
<div class="control-group has-warning">
|
||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputWarning">
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group error">
|
||||
<div class="control-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
<input type="text" class="input-with-feedback" id="inputError">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group success">
|
||||
<div class="control-group has-success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputSuccess">
|
||||
<span class="help-inline">Woohoo!</span>
|
||||
<input type="text" class="input-with-feedback id="inputSuccess"">
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
169
docs/templates/pages/extend.mustache
vendored
169
docs/templates/pages/extend.mustache
vendored
@ -1,169 +0,0 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Extending Bootstrap</h1>
|
||||
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
|
||||
<div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#built-with-less"><i class="glyphicon-chevron-right"></i> Built with LESS</a></li>
|
||||
<li><a href="#compiling"><i class="glyphicon-chevron-right"></i> Compiling Bootstrap</a></li>
|
||||
<li><a href="#static-assets"><i class="glyphicon-chevron-right"></i> Use as static assets</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span9">
|
||||
|
||||
|
||||
|
||||
<!-- BUILT WITH LESS
|
||||
================================================== -->
|
||||
<section id="built-with-less">
|
||||
<div class="page-header">
|
||||
<h1>Built with LESS</h1>
|
||||
</div>
|
||||
|
||||
<img style="float: right; height: 36px; margin: 10px 20px 20px" src="assets/img/less-logo-large.png" alt="LESS CSS">
|
||||
<p class="lead">Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
|
||||
|
||||
<h3>Why LESS?</h3>
|
||||
<p>One of Bootstrap's creators wrote a quick <a href="http://www.wordsbyf.at/2012/03/08/why-less/">blog post about this</a>, summarized here:</p>
|
||||
<ul>
|
||||
<li>Bootstrap compiles faster ~6x faster with Less compared to Sass</li>
|
||||
<li>Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.</li>
|
||||
<li>Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.</li>
|
||||
</ul>
|
||||
|
||||
<h3>What's included?</h3>
|
||||
<p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
|
||||
|
||||
<h3>Learn more</h3>
|
||||
<p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- COMPILING LESS AND BOOTSTRAP
|
||||
================================================== -->
|
||||
<section id="compiling">
|
||||
<div class="page-header">
|
||||
<h1>Compiling Bootstrap with Less</h1>
|
||||
</div>
|
||||
|
||||
<p class="lead">Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.</p>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
|
||||
</div>
|
||||
|
||||
<h2>Tools for compiling</h2>
|
||||
|
||||
<h3>Node with makefile</h3>
|
||||
<p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
|
||||
<pre>$ npm install -g less jshint recess uglify-js</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>
|
||||
|
||||
<h3>Command line</h3>
|
||||
<p>Install the LESS command line tool via Node and run the following command:</p>
|
||||
<pre>$ lessc ./less/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>
|
||||
|
||||
<h3>JavaScript</h3>
|
||||
<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>
|
||||
|
||||
<h3>Unofficial Mac app</h3>
|
||||
<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. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
|
||||
|
||||
<h3>More apps</h3>
|
||||
<h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
|
||||
<p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
|
||||
<h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
|
||||
<p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
|
||||
<h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
|
||||
<p>Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Static assets
|
||||
================================================== -->
|
||||
<section id="static-assets">
|
||||
<div class="page-header">
|
||||
<h1>Use as static assets</h1>
|
||||
</div>
|
||||
<p class="lead"><a href="./getting-started.html">Quickly start</a> any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.</p>
|
||||
|
||||
<h3>Setup file structure</h3>
|
||||
<p>Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:</p>
|
||||
<pre>
|
||||
<span class="icon-folder-open"></span> app/
|
||||
<span class="icon-folder-open"></span> layouts/
|
||||
<span class="icon-folder-open"></span> templates/
|
||||
<span class="icon-folder-open"></span> public/
|
||||
<span class="icon-folder-open"></span> css/
|
||||
<span class="icon-file"></span> bootstrap.min.css
|
||||
<span class="icon-folder-open"></span> js/
|
||||
<span class="icon-file"></span> bootstrap.min.js
|
||||
<span class="icon-folder-open"></span> img/
|
||||
<span class="icon-file"></span> glyphicons-halflings.png
|
||||
<span class="icon-file"></span> glyphicons-halflings-white.png
|
||||
</pre>
|
||||
|
||||
<h3>Utilize starter template</h3>
|
||||
<p>Copy the following base HTML to get started.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="public/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<!-- Bootstrap -->
|
||||
<script src="public/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</pre>
|
||||
|
||||
<h3>Layer on custom code</h3>
|
||||
<p>Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="public/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Project -->
|
||||
<link href="public/css/application.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<!-- Bootstrap -->
|
||||
<script src="public/js/bootstrap.min.js"></script>
|
||||
<!-- Project -->
|
||||
<script src="public/js/application.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
</div>{{! /span9 }}
|
||||
</div>{{! row}}
|
||||
|
||||
</div>{{! /.container }}
|
||||
3
docs/templates/pages/index.mustache
vendored
3
docs/templates/pages/index.mustache
vendored
@ -12,9 +12,6 @@
|
||||
<li>
|
||||
<a href="./getting-started.html#examples" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);"{{/production}}>Examples</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>Extend</a>
|
||||
</li>
|
||||
<li>Version 3.0.0</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -44,12 +44,6 @@ a.badge {
|
||||
// Success (green)
|
||||
&-success { background-color: @state-success-text; }
|
||||
&-success[href] { background-color: darken(@state-success-text, 10%); }
|
||||
// Info (turquoise)
|
||||
&-info { background-color: @state-info-text; }
|
||||
&-info[href] { background-color: darken(@state-info-text, 10%); }
|
||||
// Inverse (black)
|
||||
&-inverse { background-color: @grayDark; }
|
||||
&-inverse[href] { background-color: darken(@grayDark, 10%); }
|
||||
}
|
||||
|
||||
// Quick fix for labels/badges in buttons
|
||||
|
||||
@ -292,10 +292,6 @@ textarea[class*="span"],
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.controls-row {
|
||||
#grid > .input(@grid-column-width, @grid-gutter-width, @grid-row-width);
|
||||
}
|
||||
|
||||
// Ensure input-prepend/append never wraps
|
||||
.input-append input[class*="span"],
|
||||
.input-append .uneditable-input[class*="span"],
|
||||
@ -310,21 +306,6 @@ textarea[class*="span"],
|
||||
.uneditable-input[class*="span"] {
|
||||
height: @input-height;
|
||||
}
|
||||
// Control row for multiple inputs per line
|
||||
.controls-row {
|
||||
.clearfix(); // Clear the float from controls
|
||||
}
|
||||
|
||||
// Float to collapse white-space for proper grid alignment
|
||||
.controls-row [class*="span"] {
|
||||
float: left;
|
||||
}
|
||||
// Explicity set top padding on all checkboxes/radios, not just first-child
|
||||
.controls-row .checkbox[class*="span"],
|
||||
.controls-row .radio[class*="span"] {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -362,21 +343,17 @@ input[type="checkbox"] {
|
||||
// --------------------------
|
||||
|
||||
// Warning
|
||||
.control-group.warning {
|
||||
.has-warning {
|
||||
.formFieldState(@state-warning-text, @state-warning-text, @state-warning-background);
|
||||
}
|
||||
// Error
|
||||
.control-group.error {
|
||||
.has-error {
|
||||
.formFieldState(@state-error-text, @state-error-text, @state-error-background);
|
||||
}
|
||||
// Success
|
||||
.control-group.success {
|
||||
.has-success {
|
||||
.formFieldState(@state-success-text, @state-success-text, @state-success-background);
|
||||
}
|
||||
// Success
|
||||
.control-group.info {
|
||||
.formFieldState(@state-info-text, @state-info-text, @state-info-background);
|
||||
}
|
||||
|
||||
// HTML5 invalid states
|
||||
// Shares styles with the .control-group.error above
|
||||
@ -429,7 +406,6 @@ select:focus:invalid {
|
||||
|
||||
|
||||
|
||||
|
||||
// Input groups
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -538,3 +514,39 @@ select:focus:invalid {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Horizontal forms
|
||||
// --------------------------------------------------
|
||||
|
||||
.form-horizontal {
|
||||
|
||||
// Increase spacing between groups
|
||||
.control-group {
|
||||
position: relative;
|
||||
margin-bottom: @line-height-base;
|
||||
.clearfix();
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Float the labels left
|
||||
.control-group > .control-label {
|
||||
float: left;
|
||||
width: @component-offset-horizontal - 20;
|
||||
padding-top: 6px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Move over all input controls and content over
|
||||
.control-group > .controls {
|
||||
margin-left: @component-offset-horizontal;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -21,11 +21,11 @@
|
||||
// Import the fonts
|
||||
@font-face {
|
||||
font-family: 'Glyphicons Halflings';
|
||||
src: url('../fonts/glyphiconshalflings-regular.eot');
|
||||
src: url('../fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/glyphiconshalflings-regular.woff') format('woff'),
|
||||
url('../fonts/glyphiconshalflings-regular.ttf') format('truetype'),
|
||||
url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
|
||||
src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot');
|
||||
src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{glyphicons-font-path}/glyphiconshalflings-regular.woff') format('woff'),
|
||||
url('@{glyphicons-font-path}/glyphiconshalflings-regular.ttf') format('truetype'),
|
||||
url('@{glyphicons-font-path}/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@ -122,33 +122,14 @@
|
||||
// FORMS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Block level inputs
|
||||
.input-block-level() {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Mixin for form field states
|
||||
.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
|
||||
// Set the text color
|
||||
.control-label,
|
||||
.help-block,
|
||||
.help-inline {
|
||||
// Color the label text
|
||||
.control-label {
|
||||
color: @text-color;
|
||||
}
|
||||
// Style inputs accordingly
|
||||
.checkbox,
|
||||
.radio,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: @text-color;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.input-with-feedback {
|
||||
padding-right: 32px; // to account for the feedback icon
|
||||
border-color: @border-color;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
||||
&:focus {
|
||||
@ -157,13 +138,6 @@
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
// Give a small background color for input-prepend/-append
|
||||
.input-prepend .add-on,
|
||||
.input-append .add-on {
|
||||
color: @text-color;
|
||||
background-color: @background-color;
|
||||
border-color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -243,9 +243,6 @@
|
||||
.tabbable {
|
||||
.clearfix();
|
||||
}
|
||||
.tab-content {
|
||||
overflow: auto; // prevent content from running below tabs
|
||||
}
|
||||
|
||||
// Show/hide tabbable areas
|
||||
.tab-content > .tab-pane,
|
||||
|
||||
@ -1,27 +1,17 @@
|
||||
//
|
||||
// Pagination (multiple pages)
|
||||
// --------------------------------------------------
|
||||
|
||||
// Space out pagination from surrounding content
|
||||
.pagination {
|
||||
margin: @line-height-base 0;
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
// Allow for text-based alignment
|
||||
display: inline-block;
|
||||
// Reset default ul styles
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
// Visuals
|
||||
margin: @line-height-base 0;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(0 1px 2px rgba(0,0,0,.05));
|
||||
}
|
||||
.pagination ul > li {
|
||||
.pagination > li {
|
||||
display: inline; // Remove list-style and block-level defaults
|
||||
}
|
||||
.pagination ul > li > a,
|
||||
.pagination ul > li > span {
|
||||
.pagination > li > a,
|
||||
.pagination > li > span {
|
||||
float: left; // Collapse white-space
|
||||
padding: 4px 12px;
|
||||
line-height: @line-height-base;
|
||||
@ -30,61 +20,50 @@
|
||||
border: 1px solid @pagination-border;
|
||||
border-left-width: 0;
|
||||
}
|
||||
.pagination ul > li > a:hover,
|
||||
.pagination ul > .active > a,
|
||||
.pagination ul > .active > span {
|
||||
.pagination > li > a:hover,
|
||||
.pagination > .active > a,
|
||||
.pagination > .active > span {
|
||||
background-color: @pagination-background-active;
|
||||
}
|
||||
.pagination ul > .active > a,
|
||||
.pagination ul > .active > span {
|
||||
.pagination > .active > a,
|
||||
.pagination > .active > span {
|
||||
color: @grayLight;
|
||||
cursor: default;
|
||||
}
|
||||
.pagination ul > .disabled > span,
|
||||
.pagination ul > .disabled > a,
|
||||
.pagination ul > .disabled > a:hover {
|
||||
.pagination > .disabled > span,
|
||||
.pagination > .disabled > a,
|
||||
.pagination > .disabled > a:hover {
|
||||
color: @grayLight;
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
.pagination ul > li:first-child > a,
|
||||
.pagination ul > li:first-child > span {
|
||||
.pagination > li:first-child > a,
|
||||
.pagination > li:first-child > span {
|
||||
border-left-width: 1px;
|
||||
.border-left-radius(@border-radius-base);
|
||||
}
|
||||
.pagination ul > li:last-child > a,
|
||||
.pagination ul > li:last-child > span {
|
||||
.pagination > li:last-child > a,
|
||||
.pagination > li:last-child > span {
|
||||
.border-right-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
|
||||
// Alignment
|
||||
// --------------------------------------------------
|
||||
|
||||
.pagination-centered {
|
||||
text-align: center;
|
||||
}
|
||||
.pagination-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
// --------------------------------------------------
|
||||
|
||||
// Large
|
||||
.pagination-large {
|
||||
ul > li > a,
|
||||
ul > li > span {
|
||||
> li > a,
|
||||
> li > span {
|
||||
padding: @padding-large;
|
||||
font-size: @font-size-large;
|
||||
}
|
||||
ul > li:first-child > a,
|
||||
ul > li:first-child > span {
|
||||
> li:first-child > a,
|
||||
> li:first-child > span {
|
||||
.border-left-radius(@border-radius-large);
|
||||
}
|
||||
ul > li:last-child > a,
|
||||
ul > li:last-child > span {
|
||||
> li:last-child > a,
|
||||
> li:last-child > span {
|
||||
.border-right-radius(@border-radius-large);
|
||||
}
|
||||
}
|
||||
@ -92,28 +71,28 @@
|
||||
// Small and mini
|
||||
.pagination-mini,
|
||||
.pagination-small {
|
||||
ul > li:first-child > a,
|
||||
ul > li:first-child > span {
|
||||
> li:first-child > a,
|
||||
> li:first-child > span {
|
||||
.border-left-radius(@border-radius-small);
|
||||
}
|
||||
ul > li:last-child > a,
|
||||
ul > li:last-child > span {
|
||||
> li:last-child > a,
|
||||
> li:last-child > span {
|
||||
.border-right-radius(@border-radius-small);
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.pagination-small {
|
||||
ul > li > a,
|
||||
ul > li > span {
|
||||
> li > a,
|
||||
> li > span {
|
||||
padding: @padding-small;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
}
|
||||
// Mini
|
||||
.pagination-mini {
|
||||
ul > li > a,
|
||||
ul > li > span {
|
||||
> li > a,
|
||||
> li > span {
|
||||
padding: @padding-mini;
|
||||
font-size: @font-size-mini;
|
||||
}
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input {
|
||||
.input-block-level();
|
||||
width: 100%;
|
||||
}
|
||||
// But don't let it screw up prepend/append inputs
|
||||
.input-prepend input,
|
||||
@ -67,9 +67,6 @@
|
||||
display: inline-block; // redeclare so they don't wrap to new lines
|
||||
width: auto;
|
||||
}
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Modals
|
||||
.modal {
|
||||
|
||||
@ -37,12 +37,13 @@ a.text-warning:hover { color: darken(@state-warning-text, 10%); }
|
||||
.text-error { color: @state-error-text; }
|
||||
a.text-error:hover { color: darken(@state-error-text, 10%); }
|
||||
|
||||
.text-info { color: @state-info-text; }
|
||||
a.text-info:hover { color: darken(@state-info-text, 10%); }
|
||||
|
||||
.text-success { color: @state-success-text; }
|
||||
a.text-success:hover { color: darken(@state-success-text, 10%); }
|
||||
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
|
||||
|
||||
// Headings
|
||||
// -------------------------
|
||||
|
||||
@ -40,11 +40,3 @@
|
||||
.affix {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
|
||||
.control-block-level {
|
||||
.input-block-level();
|
||||
}
|
||||
|
||||
@ -78,17 +78,17 @@
|
||||
@btn-background: #fff;
|
||||
@btn-background-highlight: #eaeaea;
|
||||
|
||||
@btn-background-primary: @link-color;
|
||||
@btn-background-primary-highlight: darken(@link-color, 10%);
|
||||
@btn-background-primary: @link-color;
|
||||
@btn-background-primary-highlight: darken(@link-color, 10%);
|
||||
|
||||
@btn-background-success: #62c462;
|
||||
@btn-background-success-highlight: #51a351;
|
||||
@btn-background-success: #62c462;
|
||||
@btn-background-success-highlight: #51a351;
|
||||
|
||||
@btn-background-warning: lighten(#f89406, 15%);
|
||||
@btn-background-warning-highlight: #f89406;
|
||||
@btn-background-warning: lighten(#f89406, 15%);
|
||||
@btn-background-warning-highlight: #f89406;
|
||||
|
||||
@btn-background-danger: #ee5f5b;
|
||||
@btn-background-danger-highlight: #bd362f;
|
||||
@btn-background-danger: #ee5f5b;
|
||||
@btn-background-danger-highlight: #bd362f;
|
||||
|
||||
|
||||
// Forms
|
||||
@ -113,12 +113,12 @@
|
||||
|
||||
@dropdown-background: #fff;
|
||||
@dropdown-border: rgba(0,0,0,.2);
|
||||
@dropdown-divider-top: #e5e5e5;
|
||||
@dropdown-divider-bottom: #fff;
|
||||
@dropdown-divider-top: #e5e5e5;
|
||||
@dropdown-divider-bottom: #fff;
|
||||
|
||||
@dropdown-link-color: @grayDark;
|
||||
@dropdown-link-color-hover: #fff;
|
||||
@dropdown-link-color-active: #fff;
|
||||
@dropdown-link-color: @grayDark;
|
||||
@dropdown-link-color-hover: #fff;
|
||||
@dropdown-link-color-active: #fff;
|
||||
|
||||
@dropdown-link-background-active: @link-color;
|
||||
@dropdown-link-background-hover: @dropdown-link-background-active;
|
||||
@ -142,6 +142,11 @@
|
||||
@zindex-modal: 1050;
|
||||
|
||||
|
||||
// Glyphicons font path
|
||||
// -------------------------
|
||||
@glyphicons-font-path: "../fonts";
|
||||
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
|
||||
@ -186,8 +191,7 @@
|
||||
// -------------------------
|
||||
|
||||
@pagination-background: #fff;
|
||||
@pagination-background-active: #f5f5f5;
|
||||
|
||||
@pagination-background-active: #f5f5f5;
|
||||
@pagination-border: #ddd;
|
||||
|
||||
|
||||
@ -221,32 +225,32 @@
|
||||
|
||||
// Tooltips and popovers
|
||||
// -------------------------
|
||||
@tooltip-color: #fff;
|
||||
@tooltip-background: rgba(0,0,0,.9);
|
||||
@tooltip-arrow-width: 5px;
|
||||
@tooltip-arrow-color: @tooltip-background;
|
||||
@tooltip-color: #fff;
|
||||
@tooltip-background: rgba(0,0,0,.9);
|
||||
@tooltip-arrow-width: 5px;
|
||||
@tooltip-arrow-color: @tooltip-background;
|
||||
|
||||
@popover-background: #fff;
|
||||
@popover-arrow-width: 10px;
|
||||
@popover-arrow-color: #fff;
|
||||
@popover-title-background: darken(@popover-background, 3%);
|
||||
@popover-background: #fff;
|
||||
@popover-arrow-width: 10px;
|
||||
@popover-arrow-color: #fff;
|
||||
@popover-title-background: darken(@popover-background, 3%);
|
||||
|
||||
// Special enhancement for popovers
|
||||
@popover-arrow-outer-width: @popover-arrow-width + 1;
|
||||
@popover-arrow-outer-color: rgba(0,0,0,.25);
|
||||
@popover-arrow-outer-width: @popover-arrow-width + 1;
|
||||
@popover-arrow-outer-color: rgba(0,0,0,.25);
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// -------------------------
|
||||
|
||||
// Hr border color
|
||||
@hr-border: @grayLighter;
|
||||
@hr-border: @grayLighter;
|
||||
|
||||
// Horizontal forms & lists
|
||||
@component-offset-horizontal: 180px;
|
||||
@component-offset-horizontal: 180px;
|
||||
|
||||
// Wells
|
||||
@well-background: #f5f5f5;
|
||||
@well-background: #f5f5f5;
|
||||
|
||||
|
||||
|
||||
@ -254,17 +258,17 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default 940px grid
|
||||
@grid-columns: 12;
|
||||
@grid-columns: 12;
|
||||
@grid-column-width: 60px;
|
||||
@grid-gutter-width: 20px;
|
||||
@grid-row-width: (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1));
|
||||
|
||||
// 1200px min
|
||||
@grid-column-width-1200: 70px;
|
||||
@grid-gutter-width-1200: 30px;
|
||||
@grid-row-width-1200: (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1));
|
||||
@grid-column-width-1200: 70px;
|
||||
@grid-gutter-width-1200: 30px;
|
||||
@grid-row-width-1200: (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1));
|
||||
|
||||
// 768px-979px
|
||||
@grid-column-width-768: 42px;
|
||||
@grid-gutter-width-768: 20px;
|
||||
@grid-row-width-768: (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1));
|
||||
@grid-column-width-768: 42px;
|
||||
@grid-gutter-width-768: 20px;
|
||||
@grid-row-width-768: (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user