rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Merge branch '3.0.0-wip' into bs3-normalize

Browse Source 
Conflicts:
	less/bootstrap.less
This commit is contained in:
Mark Otto 2012-12-20 14:02:54 -08:00
commit be74ad7e0d
55 changed files with 1005 additions and 3013 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
Makefile
View File

@ -16,7 +16,7 @@ build:
@jshint js/*.js --config js/.jshintrc
@jshint js/tests/unit/*.js --config js/.jshintrc
@echo "Running JSHint on javascript... ${CHECK} Done"
@recess --compile ${BOOTSTRAP_LESS} > ${BOOTSTRAP}
@./node_modules/.bin/recess --compile ${BOOTSTRAP_LESS} > ${BOOTSTRAP}
@echo "Compiling LESS with Recess... ${CHECK} Done"
@node docs/build
@cp fonts/* docs/assets/fonts/
@ -24,8 +24,8 @@ build:
@cp js/tests/vendor/jquery.js docs/assets/js/
@echo "Compiling documentation... ${CHECK} Done"
@cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > docs/assets/js/bootstrap.js
@uglifyjs docs/assets/js/bootstrap.js -nc > docs/assets/js/bootstrap.min.tmp.js
@echo "/**\n* Bootstrap.js v3.0.0 by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js
@./node_modules/.bin/uglifyjs -nc docs/assets/js/bootstrap.js > docs/assets/js/bootstrap.min.tmp.js
@echo "/**\n* Bootstrap.js v2.2.3 by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js
@cat docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js > docs/assets/js/bootstrap.min.js
@rm docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js
@echo "Compiling and minifying javascript... ${CHECK} Done"
@ -40,8 +40,8 @@ build:
#
test:
jshint js/*.js --config js/.jshintrc
jshint js/tests/unit/*.js --config js/.jshintrc
./node_modules/.bin/jshint js/*.js --config js/.jshintrc
./node_modules/.bin/jshint js/tests/unit/*.js --config js/.jshintrc
node js/tests/server.js &
phantomjs js/tests/phantom.js "http://localhost:3000/js/tests"
kill -9 `cat js/tests/pid.txt`
@ -64,10 +64,10 @@ bootstrap:
mkdir -p bootstrap/css
mkdir -p bootstrap/js
cp fonts/* bootstrap/fonts/
recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
./node_modules/.bin/recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
./node_modules/.bin/recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js
uglifyjs bootstrap/js/bootstrap.js -nc > bootstrap/js/bootstrap.min.tmp.js
./node_modules/.bin/uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js
echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js

1
composer.json
View File

@ -5,6 +5,5 @@
, "homepage": "http://twitter.github.com/bootstrap/"
, "author": "Twitter Inc."
, "license": "Apache-2.0"
, "target-dir": "twitter/bootstrap"
}

1092
docs/assets/css/bootstrap-responsive.css vendored
View File

@ -1,1092 +0,0 @@
/*!
* Bootstrap Responsive v3.0.0
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
@-ms-viewport {
width: device-width;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.hidden {
display: none;
visibility: hidden;
}
.visible-phone {
display: none !important;
}
.visible-tablet {
display: none !important;
}
.hidden-desktop {
display: none !important;
}
.visible-desktop {
display: inherit !important;
}
@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
@media (max-width: 767px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
@media (min-width: 1200px) {
.row {
margin-left: -30px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px;
}
.span12 {
width: 1170px;
}
.span11 {
width: 1070px;
}
.span10 {
width: 970px;
}
.span9 {
width: 870px;
}
.span8 {
width: 770px;
}
.span7 {
width: 670px;
}
.span6 {
width: 570px;
}
.span5 {
width: 470px;
}
.span4 {
width: 370px;
}
.span3 {
width: 270px;
}
.span2 {
width: 170px;
}
.span1 {
width: 70px;
}
.offset12 {
margin-left: 1230px;
}
.offset11 {
margin-left: 1130px;
}
.offset10 {
margin-left: 1030px;
}
.offset9 {
margin-left: 930px;
}
.offset8 {
margin-left: 830px;
}
.offset7 {
margin-left: 730px;
}
.offset6 {
margin-left: 630px;
}
.offset5 {
margin-left: 530px;
}
.offset4 {
margin-left: 430px;
}
.offset3 {
margin-left: 330px;
}
.offset2 {
margin-left: 230px;
}
.offset1 {
margin-left: 130px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
display: table;
line-height: 0;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 30px;
margin-left: 2.564102564102564%;
*margin-left: 2.5109110747408616%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 2.564102564102564%;
}
.row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}
.row-fluid .span11 {
width: 91.45299145299145%;
*width: 91.39979996362975%;
}
.row-fluid .span10 {
width: 82.90598290598291%;
*width: 82.8527914166212%;
}
.row-fluid .span9 {
width: 74.35897435897436%;
*width: 74.30578286961266%;
}
.row-fluid .span8 {
width: 65.81196581196582%;
*width: 65.75877432260411%;
}
.row-fluid .span7 {
width: 57.26495726495726%;
*width: 57.21176577559556%;
}
.row-fluid .span6 {
width: 48.717948717948715%;
*width: 48.664757228587014%;
}
.row-fluid .span5 {
width: 40.17094017094017%;
*width: 40.11774868157847%;
}
.row-fluid .span4 {
width: 31.623931623931625%;
*width: 31.570740134569924%;
}
.row-fluid .span3 {
width: 23.076923076923077%;
*width: 23.023731587561375%;
}
.row-fluid .span2 {
width: 14.52991452991453%;
*width: 14.476723040552828%;
}
.row-fluid .span1 {
width: 5.982905982905983%;
*width: 5.929714493544281%;
}
.row-fluid .offset12 {
margin-left: 105.12820512820512%;
*margin-left: 105.02182214948171%;
}
.row-fluid .offset12:first-child {
margin-left: 102.56410256410257%;
*margin-left: 102.45771958537915%;
}
.row-fluid .offset11 {
margin-left: 96.58119658119658%;
*margin-left: 96.47481360247316%;
}
.row-fluid .offset11:first-child {
margin-left: 94.01709401709402%;
*margin-left: 93.91071103837061%;
}
.row-fluid .offset10 {
margin-left: 88.03418803418803%;
*margin-left: 87.92780505546462%;
}
.row-fluid .offset10:first-child {
margin-left: 85.47008547008548%;
*margin-left: 85.36370249136206%;
}
.row-fluid .offset9 {
margin-left: 79.48717948717949%;
*margin-left: 79.38079650845607%;
}
.row-fluid .offset9:first-child {
margin-left: 76.92307692307693%;
*margin-left: 76.81669394435352%;
}
.row-fluid .offset8 {
margin-left: 70.94017094017094%;
*margin-left: 70.83378796144753%;
}
.row-fluid .offset8:first-child {
margin-left: 68.37606837606839%;
*margin-left: 68.26968539734497%;
}
.row-fluid .offset7 {
margin-left: 62.393162393162385%;
*margin-left: 62.28677941443899%;
}
.row-fluid .offset7:first-child {
margin-left: 59.82905982905982%;
*margin-left: 59.72267685033642%;
}
.row-fluid .offset6 {
margin-left: 53.84615384615384%;
*margin-left: 53.739770867430444%;
}
.row-fluid .offset6:first-child {
margin-left: 51.28205128205128%;
*margin-left: 51.175668303327875%;
}
.row-fluid .offset5 {
margin-left: 45.299145299145295%;
*margin-left: 45.1927623204219%;
}
.row-fluid .offset5:first-child {
margin-left: 42.73504273504273%;
*margin-left: 42.62865975631933%;
}
.row-fluid .offset4 {
margin-left: 36.75213675213675%;
*margin-left: 36.645753773413354%;
}
.row-fluid .offset4:first-child {
margin-left: 34.18803418803419%;
*margin-left: 34.081651209310785%;
}
.row-fluid .offset3 {
margin-left: 28.205128205128204%;
*margin-left: 28.0987452264048%;
}
.row-fluid .offset3:first-child {
margin-left: 25.641025641025642%;
*margin-left: 25.53464266230224%;
}
.row-fluid .offset2 {
margin-left: 19.65811965811966%;
*margin-left: 19.551736679396257%;
}
.row-fluid .offset2:first-child {
margin-left: 17.094017094017094%;
*margin-left: 16.98763411529369%;
}
.row-fluid .offset1 {
margin-left: 11.11111111111111%;
*margin-left: 11.004728132387708%;
}
.row-fluid .offset1:first-child {
margin-left: 8.547008547008547%;
*margin-left: 8.440625568285142%;
}
input,
textarea,
.uneditable-input {
margin-left: 0;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 30px;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
width: 1156px;
}
input.span11,
textarea.span11,
.uneditable-input.span11 {
width: 1056px;
}
input.span10,
textarea.span10,
.uneditable-input.span10 {
width: 956px;
}
input.span9,
textarea.span9,
.uneditable-input.span9 {
width: 856px;
}
input.span8,
textarea.span8,
.uneditable-input.span8 {
width: 756px;
}
input.span7,
textarea.span7,
.uneditable-input.span7 {
width: 656px;
}
input.span6,
textarea.span6,
.uneditable-input.span6 {
width: 556px;
}
input.span5,
textarea.span5,
.uneditable-input.span5 {
width: 456px;
}
input.span4,
textarea.span4,
.uneditable-input.span4 {
width: 356px;
}
input.span3,
textarea.span3,
.uneditable-input.span3 {
width: 256px;
}
input.span2,
textarea.span2,
.uneditable-input.span2 {
width: 156px;
}
input.span1,
textarea.span1,
.uneditable-input.span1 {
width: 56px;
}
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
.row-fluid .thumbnails {
margin-left: 0;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 724px;
}
.span12 {
width: 724px;
}
.span11 {
width: 662px;
}
.span10 {
width: 600px;
}
.span9 {
width: 538px;
}
.span8 {
width: 476px;
}
.span7 {
width: 414px;
}
.span6 {
width: 352px;
}
.span5 {
width: 290px;
}
.span4 {
width: 228px;
}
.span3 {
width: 166px;
}
.span2 {
width: 104px;
}
.span1 {
width: 42px;
}
.offset12 {
margin-left: 764px;
}
.offset11 {
margin-left: 702px;
}
.offset10 {
margin-left: 640px;
}
.offset9 {
margin-left: 578px;
}
.offset8 {
margin-left: 516px;
}
.offset7 {
margin-left: 454px;
}
.offset6 {
margin-left: 392px;
}
.offset5 {
margin-left: 330px;
}
.offset4 {
margin-left: 268px;
}
.offset3 {
margin-left: 206px;
}
.offset2 {
margin-left: 144px;
}
.offset1 {
margin-left: 82px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
display: table;
line-height: 0;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 30px;
margin-left: 2.7624309392265194%;
*margin-left: 2.709239449864817%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 2.7624309392265194%;
}
.row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}
.row-fluid .span11 {
width: 91.43646408839778%;
*width: 91.38327259903608%;
}
.row-fluid .span10 {
width: 82.87292817679558%;
*width: 82.81973668743387%;
}
.row-fluid .span9 {
width: 74.30939226519337%;
*width: 74.25620077583166%;
}
.row-fluid .span8 {
width: 65.74585635359117%;
*width: 65.69266486422946%;
}
.row-fluid .span7 {
width: 57.18232044198895%;
*width: 57.12912895262725%;
}
.row-fluid .span6 {
width: 48.61878453038674%;
*width: 48.56559304102504%;
}
.row-fluid .span5 {
width: 40.05524861878453%;
*width: 40.00205712942283%;
}
.row-fluid .span4 {
width: 31.491712707182323%;
*width: 31.43852121782062%;
}
.row-fluid .span3 {
width: 22.92817679558011%;
*width: 22.87498530621841%;
}
.row-fluid .span2 {
width: 14.3646408839779%;
*width: 14.311449394616199%;
}
.row-fluid .span1 {
width: 5.801104972375691%;
*width: 5.747913483013988%;
}
.row-fluid .offset12 {
margin-left: 105.52486187845304%;
*margin-left: 105.41847889972962%;
}
.row-fluid .offset12:first-child {
margin-left: 102.76243093922652%;
*margin-left: 102.6560479605031%;
}
.row-fluid .offset11 {
margin-left: 96.96132596685082%;
*margin-left: 96.8549429881274%;
}
.row-fluid .offset11:first-child {
margin-left: 94.1988950276243%;
*margin-left: 94.09251204890089%;
}
.row-fluid .offset10 {
margin-left: 88.39779005524862%;
*margin-left: 88.2914070765252%;
}
.row-fluid .offset10:first-child {
margin-left: 85.6353591160221%;
*margin-left: 85.52897613729868%;
}
.row-fluid .offset9 {
margin-left: 79.8342541436464%;
*margin-left: 79.72787116492299%;
}
.row-fluid .offset9:first-child {
margin-left: 77.07182320441989%;
*margin-left: 76.96544022569647%;
}
.row-fluid .offset8 {
margin-left: 71.2707182320442%;
*margin-left: 71.16433525332079%;
}
.row-fluid .offset8:first-child {
margin-left: 68.50828729281768%;
*margin-left: 68.40190431409427%;
}
.row-fluid .offset7 {
margin-left: 62.70718232044199%;
*margin-left: 62.600799341718584%;
}
.row-fluid .offset7:first-child {
margin-left: 59.94475138121547%;
*margin-left: 59.838368402492065%;
}
.row-fluid .offset6 {
margin-left: 54.14364640883978%;
*margin-left: 54.037263430116376%;
}
.row-fluid .offset6:first-child {
margin-left: 51.38121546961326%;
*margin-left: 51.27483249088986%;
}
.row-fluid .offset5 {
margin-left: 45.58011049723757%;
*margin-left: 45.47372751851417%;
}
.row-fluid .offset5:first-child {
margin-left: 42.81767955801105%;
*margin-left: 42.71129657928765%;
}
.row-fluid .offset4 {
margin-left: 37.01657458563536%;
*margin-left: 36.91019160691196%;
}
.row-fluid .offset4:first-child {
margin-left: 34.25414364640884%;
*margin-left: 34.14776066768544%;
}
.row-fluid .offset3 {
margin-left: 28.45303867403315%;
*margin-left: 28.346655695309746%;
}
.row-fluid .offset3:first-child {
margin-left: 25.69060773480663%;
*margin-left: 25.584224756083227%;
}
.row-fluid .offset2 {
margin-left: 19.88950276243094%;
*margin-left: 19.783119783707537%;
}
.row-fluid .offset2:first-child {
margin-left: 17.12707182320442%;
*margin-left: 17.02068884448102%;
}
.row-fluid .offset1 {
margin-left: 11.32596685082873%;
*margin-left: 11.219583872105325%;
}
.row-fluid .offset1:first-child {
margin-left: 8.56353591160221%;
*margin-left: 8.457152932878806%;
}
input,
textarea,
.uneditable-input {
margin-left: 0;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 20px;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
width: 710px;
}
input.span11,
textarea.span11,
.uneditable-input.span11 {
width: 648px;
}
input.span10,
textarea.span10,
.uneditable-input.span10 {
width: 586px;
}
input.span9,
textarea.span9,
.uneditable-input.span9 {
width: 524px;
}
input.span8,
textarea.span8,
.uneditable-input.span8 {
width: 462px;
}
input.span7,
textarea.span7,
.uneditable-input.span7 {
width: 400px;
}
input.span6,
textarea.span6,
.uneditable-input.span6 {
width: 338px;
}
input.span5,
textarea.span5,
.uneditable-input.span5 {
width: 276px;
}
input.span4,
textarea.span4,
.uneditable-input.span4 {
width: 214px;
}
input.span3,
textarea.span3,
.uneditable-input.span3 {
width: 152px;
}
input.span2,
textarea.span2,
.uneditable-input.span2 {
width: 90px;
}
input.span1,
textarea.span1,
.uneditable-input.span1 {
width: 28px;
}
}
@media (max-width: 767px) {
body {
padding-right: 20px;
padding-left: 20px;
}
.navbar-fixed-top,
.navbar-fixed-bottom,
.navbar-static-top {
margin-right: -20px;
margin-left: -20px;
}
.container-fluid {
padding: 0;
}
.dl-horizontal dt {
float: none;
width: auto;
clear: none;
text-align: left;
}
.dl-horizontal dd {
margin-left: 0;
}
.container {
width: auto;
}
.row-fluid {
width: 100%;
}
.row,
.thumbnails {
margin-left: 0;
}
.thumbnails > li {
float: none;
margin-left: 0;
}
[class*="span"],
.uneditable-input[class*="span"],
.row-fluid [class*="span"] {
display: block;
float: none;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.span12,
.row-fluid .span12 {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
.input-large,
.input-xlarge,
.input-xxlarge,
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.input-prepend input,
.input-append input,
.input-prepend input[class*="span"],
.input-append input[class*="span"] {
display: inline-block;
width: auto;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 0;
}
.modal {
position: fixed;
top: 20px;
right: 20px;
left: 20px;
width: auto;
margin: 0;
}
.modal.fade {
top: -100px;
}
.modal.fade.in {
top: 20px;
}
}
@media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0);
}
.page-header h1 small {
display: block;
line-height: 20px;
}
input[type="checkbox"],
input[type="radio"] {
border: 1px solid #ccc;
}
.form-horizontal .control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
.form-horizontal .controls {
margin-left: 0;
}
.form-horizontal .control-list {
padding-top: 0;
}
.form-horizontal .form-actions {
padding-right: 10px;
padding-left: 10px;
}
.media .pull-left,
.media .pull-right {
display: block;
float: none;
margin-bottom: 10px;
}
.media-object {
margin-right: 0;
margin-left: 0;
}
.modal {
top: 10px;
right: 10px;
left: 10px;
}
.modal-header .close {
padding: 10px;
margin: -10px;
}
.carousel-caption {
position: static;
}
}
@media (max-width: 979px) {
body {
padding-top: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: static;
}
.navbar-fixed-top {
margin-bottom: 20px;
}
.navbar-fixed-bottom {
margin-top: 20px;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding: 5px;
}
.navbar .container {
width: auto;
padding: 0;
}
.navbar .brand {
padding-right: 10px;
padding-left: 10px;
margin: 0 0 0 -5px;
}
.nav-collapse {
clear: both;
}
.nav-collapse .nav {
float: none;
margin: 0 0 10px;
}
.nav-collapse .nav > li {
float: none;
}
.nav-collapse .nav > li > a {
margin-bottom: 2px;
}
.nav-collapse .nav > .divider-vertical {
display: none;
}
.nav-collapse .nav .nav-header {
color: #777777;
text-shadow: none;
}
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 9px 15px;
font-weight: bold;
color: #777777;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.nav-collapse .btn {
padding: 4px 10px 4px;
font-weight: normal;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.nav-collapse .dropdown-menu li + li a {
margin-bottom: 2px;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: #f2f2f2;
}
.navbar-inverse .nav-collapse .nav > li > a,
.navbar-inverse .nav-collapse .dropdown-menu a {
color: #999999;
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
background-color: #111111;
}
.nav-collapse.in .btn-group {
padding: 0;
margin-top: 5px;
}
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
display: none;
float: none;
max-width: none;
padding: 0;
margin: 0 15px;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.nav-collapse .open > .dropdown-menu {
display: block;
}
.nav-collapse .dropdown-menu:before,
.nav-collapse .dropdown-menu:after {
display: none;
}
.nav-collapse .dropdown-menu .divider {
display: none;
}
.nav-collapse .nav > li > .dropdown-menu:before,
.nav-collapse .nav > li > .dropdown-menu:after {
display: none;
}
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: 10px 15px;
margin: 10px 0;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {
border-top-color: #111111;
border-bottom-color: #111111;
}
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
.nav-collapse,
.nav-collapse.collapse {
height: 0;
overflow: hidden;
}
.navbar .btn-navbar {
display: block;
}
.navbar-static .navbar-inner {
padding-right: 10px;
padding-left: 10px;
}
}
@media (min-width: 980px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}

809
docs/assets/css/bootstrap.css vendored
View File

@ -571,10 +571,6 @@ a:hover {
margin-left: 8.333333333333332%;
}
[class*="span"].hide {
display: none;
}
[class*="span"].pull-right {
float: right;
}
@ -1311,7 +1307,7 @@ input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"] {
height: 30px;
height: 34px;
}
.controls-row:before,
@ -1338,7 +1334,10 @@ select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
textarea[readonly],
fieldset[disabled] input,
fieldset[disabled] select,
fieldset[disabled] textarea {
cursor: not-allowed;
background-color: #eeeeee;
}
@ -1346,7 +1345,9 @@ textarea[readonly] {
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
input[type="checkbox"][readonly],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
background-color: transparent;
}
@ -1547,63 +1548,38 @@ select:focus:invalid:focus {
vertical-align: middle;
}
.input-append,
.input-prepend {
margin-bottom: 5px;
font-size: 0;
white-space: nowrap;
.input-group {
display: table;
}
.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input,
.input-append .dropdown-menu,
.input-prepend .dropdown-menu {
font-size: 14px;
}
.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input {
position: relative;
.input-group[class*="span"] {
float: none;
padding: 0;
}
.input-group input,
.input-group select,
.input-group .uneditable-input {
width: 100%;
}
.input-group-addon,
.input-group-btn,
.input-group input,
.input-group .uneditable-input {
display: table-cell;
margin: 0;
font-size: 14px;
vertical-align: top;
border-radius: 0 4px 4px 0;
border-radius: 0;
}
.input-append input:focus,
.input-prepend input:focus,
.input-append select:focus,
.input-prepend select:focus,
.input-append .uneditable-input:focus,
.input-prepend .uneditable-input:focus {
z-index: 2;
.input-group-addon,
.input-group-btn {
width: 1%;
vertical-align: middle;
}
.input-append input[class*="span"],
.input-prepend input[class*="span"],
.input-append select[class*="span"],
.input-prepend select[class*="span"],
.input-append .uneditable-input[class*="span"],
.input-prepend .uneditable-input[class*="span"] {
margin: 0;
}
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 20px;
min-width: 16px;
padding: 6px;
.input-group-addon {
padding: 6px 8px;
font-size: 14px;
font-weight: normal;
line-height: 20px;
@ -1611,243 +1587,69 @@ select:focus:invalid:focus {
text-shadow: 0 1px 0 #fff;
background-color: #eeeeee;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.input-append .add-on,
.input-prepend .add-on,
.input-append .btn,
.input-prepend .btn,
.input-append .btn-group > .dropdown-toggle,
.input-prepend .btn-group > .dropdown-toggle {
vertical-align: top;
border-radius: 0;
.input-group input:first-child,
.input-group .uneditable-input:first-child,
.input-group-addon:first-child {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.input-append .active,
.input-prepend .active {
background-color: #dff0d8;
border-color: #468847;
.input-group-addon:first-child {
border-right: 0;
}
.input-prepend .add-on,
.input-prepend .btn {
margin-right: -1px;
.input-group input:last-child,
.input-group .uneditable-input:last-child,
.input-group-addon:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.input-prepend .add-on:first-child,
.input-prepend .btn:first-child {
border-radius: 4px 0 0 4px;
.input-group-addon:last-child {
border-left: 0;
}
.input-append input,
.input-append select,
.input-append .uneditable-input {
border-radius: 4px 0 0 4px;
.input-group-btn,
.input-group-btn .btn {
white-space: nowrap;
}
.input-append input + .btn-group .btn,
.input-append select + .btn-group .btn,
.input-append .uneditable-input + .btn-group .btn,
.input-append input + .btn-group .btn:last-child,
.input-append select + .btn-group .btn:last-child,
.input-append .uneditable-input + .btn-group .btn:last-child {
border-radius: 0 4px 4px 0;
}
.input-append .add-on,
.input-append .btn,
.input-append .btn-group {
margin-left: -1px;
}
.input-append .add-on:last-child,
.input-append .btn:last-child,
.input-append .btn-group:last-child > .dropdown-toggle {
border-radius: 0 4px 4px 0;
}
.input-prepend.input-append input,
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
border-radius: 0;
}
.input-prepend.input-append input + .btn-group .btn,
.input-prepend.input-append select + .btn-group .btn,
.input-prepend.input-append .uneditable-input + .btn-group .btn {
border-radius: 0 4px 4px 0;
}
.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
margin-right: -1px;
border-radius: 4px 0 0 4px;
}
.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
margin-left: -1px;
border-radius: 0 4px 4px 0;
}
.input-prepend.input-append .btn-group:first-child {
margin-left: 0;
}
input.search-query {
padding-right: 14px;
padding-right: 4px \9;
padding-left: 14px;
padding-left: 4px \9;
/* IE8 doesn't have border radius, so don't indent the padding */
margin-bottom: 0;
border-radius: 20px;
}
/* Allow for input prepend/append in search forms */
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
border-radius: 0;
}
.form-search .input-append .search-query {
border-radius: 20px 0 0 20px;
}
.form-search .input-append .btn {
border-radius: 0 20px 20px 0;
}
.form-search .input-prepend .search-query {
border-radius: 0 20px 20px 0;
}
.form-search .input-prepend .btn {
border-radius: 20px 0 0 20px;
}
.form-search input,
.form-inline input,
.form-horizontal input,
.form-search textarea,
.form-inline textarea,
.form-horizontal textarea,
.form-search select,
.form-inline select,
.form-horizontal select,
.form-search .help-inline,
.form-inline .help-inline,
.form-horizontal .help-inline,
.form-search .uneditable-input,
.form-inline .uneditable-input,
.form-horizontal .uneditable-input,
.form-search .input-prepend,
.form-inline .input-prepend,
.form-horizontal .input-prepend,
.form-search .input-append,
.form-inline .input-append,
.form-horizontal .input-append {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-search .hide,
.form-inline .hide,
.form-horizontal .hide {
display: none;
}
.form-search label,
.form-inline label,
.form-search .btn-group,
.form-inline .btn-group {
display: inline-block;
}
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
margin-bottom: 0;
}
.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
padding-left: 0;
}
.form-search .radio label,
.form-search .checkbox label,
.form-inline .radio label,
.form-inline .checkbox label {
margin-bottom: 0;
vertical-align: middle;
}
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
.input-group-btn > .btn {
float: left;
margin-right: 3px;
margin-left: 0;
border-radius: 0;
}
.control-group {
margin-bottom: 10px;
.input-group-btn > .btn + .btn {
border-left: 0;
}
legend + .control-group {
margin-top: 20px;
-webkit-margin-top-collapse: separate;
.input-group-btn.btn-group {
display: table-cell;
}
.form-horizontal .control-group {
margin-bottom: 20px;
.input-group-btn:first-child > .btn,
.input-group-btn.btn-group:first-child > .btn {
border-right: 0;
}
.form-horizontal .control-group:before,
.form-horizontal .control-group:after {
display: table;
content: " ";
.input-group-btn:first-child > .btn,
.input-group-btn.btn-group:first-child > .btn {
border-radius: 4px 0 0 4px;
}
.form-horizontal .control-group:after {
clear: both;
.input-group-btn:last-child > .btn,
.input-group-btn.btn-group:last-child > .btn:first-child {
border-left: 0;
}
.form-horizontal .control-label {
float: left;
width: 160px;
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
margin-left: 180px;
}
.form-horizontal .help-block {
margin-bottom: 0;
}
.form-horizontal input + .help-block,
.form-horizontal select + .help-block,
.form-horizontal textarea + .help-block,
.form-horizontal .uneditable-input + .help-block,
.form-horizontal .input-prepend + .help-block,
.form-horizontal .input-append + .help-block {
margin-top: 10px;
}
.form-horizontal .form-actions {
padding-left: 180px;
.input-group-btn:last-child > .btn,
.input-group-btn.btn-group:last-child > .btn {
border-radius: 0 4px 4px 0;
}
table {
@ -2687,7 +2489,7 @@ table th[class*="span"] {
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid #000000;
border-top: 4px solid #000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
@ -2733,7 +2535,7 @@ table th[class*="span"] {
border-bottom: 1px solid #ffffff;
}
.dropdown-menu li > a {
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
@ -2744,11 +2546,10 @@ table th[class*="span"] {
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
.dropdown-menu li > a:focus {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
background-color: #0077b3;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
@ -2758,11 +2559,11 @@ table th[class*="span"] {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
background-color: #0077b3;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
@ -2773,12 +2574,12 @@ table th[class*="span"] {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.dropdown-menu .disabled > a,
.dropdown-menu .disabled > a:hover {
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover {
color: #999999;
}
.dropdown-menu .disabled > a:hover {
.dropdown-menu > .disabled > a:hover {
text-decoration: none;
cursor: default;
background-color: transparent;
@ -2798,7 +2599,7 @@ table th[class*="span"] {
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
border-top: 0;
border-bottom: 4px solid #000000;
border-bottom: 4px solid #000;
content: "";
}
@ -2809,58 +2610,6 @@ table th[class*="span"] {
margin-bottom: 1px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
border-radius: 0 4px 4px 4px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropup .dropdown-submenu > .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -2px;
border-radius: 4px 4px 4px 0;
}
.dropdown-submenu > a:after {
display: block;
float: right;
width: 0;
height: 0;
margin-top: 5px;
margin-right: -10px;
border-color: transparent;
border-left-color: #cccccc;
border-style: solid;
border-width: 5px 0 5px 5px;
content: " ";
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
border-radius: 4px 0 4px 4px;
}
.dropdown .dropdown-menu .nav-header {
padding-right: 20px;
padding-left: 20px;
@ -2868,7 +2617,6 @@ table th[class*="span"] {
.typeahead {
z-index: 1051;
margin-top: 2px;
}
.well {
@ -2928,14 +2676,14 @@ table th[class*="span"] {
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #000000;
color: #000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
}
.close:hover {
color: #000000;
color: #000;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
@ -2952,55 +2700,17 @@ button.close {
.btn {
display: inline-block;
padding: 6px 12px;
padding: 6px 13px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #bbbbbb;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
border: 1px solid #ccc;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
color: #333333;
background-color: #e6e6e6;
}
.btn:active,
.btn.active {
background-color: #cccccc \9;
}
.btn:hover {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn:focus {
@ -3009,18 +2719,22 @@ button.close {
outline-offset: -2px;
}
.btn.active,
.btn:active {
.btn:hover {
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn.disabled,
.btn[disabled] {
.btn[disabled],
fieldset[disabled] .btn {
cursor: default;
background-image: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
@ -3079,203 +2793,160 @@ input[type="button"].btn-block {
width: 100%;
}
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
.btn {
color: #555555;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
background-color: #eaeaea;
background-image: -moz-linear-gradient(top, #ffffff, #eaeaea);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#eaeaea));
background-image: -webkit-linear-gradient(top, #ffffff, #eaeaea);
background-image: -o-linear-gradient(top, #ffffff, #eaeaea);
background-image: linear-gradient(to bottom, #ffffff, #eaeaea);
background-repeat: repeat-x;
border-color: #d7d7d7;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeaeaea', GradientType=0);
}
.btn {
border-color: #c5c5c5;
border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
.btn:hover,
.btn:active,
.btn.active {
color: #555555;
background-color: #eaeaea;
background-position: 0 -15px;
}
.btn:active,
.btn.active,
.btn[disabled],
.btn.disabled,
fieldset[disabled] .btn {
background-image: none;
}
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-color: #006699;
background-image: -moz-linear-gradient(top, #0088cc, #006699);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#006699));
background-image: -webkit-linear-gradient(top, #0088cc, #006699);
background-image: -o-linear-gradient(top, #0088cc, #006699);
background-image: linear-gradient(to bottom, #0088cc, #006699);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border-color: #004c73;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff006699', GradientType=0);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
.btn-primary.active {
color: #ffffff;
background-color: #0044cc;
background-color: #006699;
background-position: 0 -15px;
}
.btn-primary:active,
.btn-primary.active {
background-color: #003399 \9;
.btn-primary.active,
.btn-primary[disabled],
.btn-primary.disabled,
fieldset[disabled] .btn-primary {
background-image: none;
}
.btn-warning {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #faa732;
background-color: #f89406;
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(to bottom, #fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #d37e05;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
.btn-warning.active {
color: #ffffff;
background-color: #f89406;
background-position: 0 -15px;
}
.btn-warning:active,
.btn-warning.active {
background-color: #c67605 \9;
.btn-warning.active,
.btn-warning[disabled],
.btn-warning.disabled,
fieldset[disabled] .btn-warning {
background-image: none;
}
.btn-danger {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #da4f49;
background-color: #bd362f;
background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
background-repeat: repeat-x;
border-color: #bd362f #bd362f #802420;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #9e2d27;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
.btn-danger.active {
color: #ffffff;
background-color: #bd362f;
background-position: 0 -15px;
}
.btn-danger:active,
.btn-danger.active {
background-color: #942a25 \9;
.btn-danger.active,
.btn-danger[disabled],
.btn-danger.disabled,
fieldset[disabled] .btn-danger {
background-image: none;
}
.btn-success {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #5bb75b;
background-color: #51a351;
background-image: -moz-linear-gradient(top, #62c462, #51a351);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
background-image: -webkit-linear-gradient(top, #62c462, #51a351);
background-image: -o-linear-gradient(top, #62c462, #51a351);
background-image: linear-gradient(to bottom, #62c462, #51a351);
background-repeat: repeat-x;
border-color: #51a351 #51a351 #387038;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #448944;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
.btn-success.active {
color: #ffffff;
background-color: #51a351;
background-position: 0 -15px;
}
.btn-success:active,
.btn-success.active {
background-color: #408140 \9;
}
.btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
color: #ffffff;
background-color: #2f96b4;
}
.btn-info:active,
.btn-info.active {
background-color: #24748c \9;
}
.btn-inverse {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #363636;
background-image: -moz-linear-gradient(top, #444444, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
background-image: -webkit-linear-gradient(top, #444444, #222222);
background-image: -o-linear-gradient(top, #444444, #222222);
background-image: linear-gradient(to bottom, #444444, #222222);
background-repeat: repeat-x;
border-color: #222222 #222222 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
color: #ffffff;
background-color: #222222;
}
.btn-inverse:active,
.btn-inverse.active {
background-color: #080808 \9;
.btn-success.active,
.btn-success[disabled],
.btn-success.disabled,
fieldset[disabled] .btn-success {
background-image: none;
}
.btn-link,
.btn-link:active,
.btn-link[disabled] {
.btn-link[disabled],
fieldset[disabled] .btn-link {
background-color: transparent;
background-image: none;
-webkit-box-shadow: none;
@ -3295,7 +2966,8 @@ input[type="button"].btn-block {
background-color: transparent;
}
.btn-link[disabled]:hover {
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover {
color: #333333;
text-decoration: none;
}
@ -3411,11 +3083,11 @@ input[type="button"].btn-block {
}
.btn-group.open .btn.dropdown-toggle {
background-color: #e6e6e6;
background-color: #eaeaea;
}
.btn-group.open .btn-primary.dropdown-toggle {
background-color: #0044cc;
background-color: #006699;
}
.btn-group.open .btn-warning.dropdown-toggle {
@ -3430,21 +3102,11 @@ input[type="button"].btn-block {
background-color: #51a351;
}
.btn-group.open .btn-info.dropdown-toggle {
background-color: #2f96b4;
}
.btn-group.open .btn-inverse.dropdown-toggle {
background-color: #222222;
}
.btn .caret {
margin-top: 8px;
margin-left: 0;
}
.btn-mini .caret,
.btn-small .caret,
.btn-large .caret {
margin-top: 6px;
}
@ -3455,6 +3117,11 @@ input[type="button"].btn-block {
border-left-width: 5px;
}
.btn-mini .caret,
.btn-small .caret {
margin-top: 8px;
}
.dropup .btn-large .caret {
border-bottom-width: 5px;
}
@ -3825,7 +3492,7 @@ input[type="button"].btn-block {
padding: 0 20px;
margin-bottom: 20px;
overflow: visible;
background-color: #fafafa;
background-color: #f2f2f2;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
@ -4066,33 +3733,33 @@ input[type="button"].btn-block {
margin-left: 5px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #ededed;
background-color: #e5e5e5;
background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
background-repeat: repeat-x;
border-color: #e5e5e5 #e5e5e5 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #d2d2d2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
}
.navbar .btn-navbar:hover,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
.navbar .btn-navbar.active {
color: #ffffff;
background-color: #e5e5e5;
background-position: 0 -15px;
}
.navbar .btn-navbar:active,
.navbar .btn-navbar.active {
background-color: #cccccc \9;
.navbar .btn-navbar.active,
.navbar .btn-navbar[disabled],
.navbar .btn-navbar.disabled,
fieldset[disabled] .navbar .btn-navbar {
background-image: none;
}
.navbar .btn-navbar .icon-bar {
@ -4199,7 +3866,7 @@ input[type="button"].btn-block {
}
.navbar-inverse {
background-color: #1b1b1b;
background-color: #111111;
background-image: -moz-linear-gradient(top, #222222, #111111);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #222222, #111111);
@ -4318,31 +3985,31 @@ input[type="button"].btn-block {
.navbar-inverse .btn-navbar {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0e0e0e;
background-color: #040404;
background-image: -moz-linear-gradient(top, #151515, #040404);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
background-image: -webkit-linear-gradient(top, #151515, #040404);
background-image: -o-linear-gradient(top, #151515, #040404);
background-image: linear-gradient(to bottom, #151515, #040404);
background-repeat: repeat-x;
border-color: #040404 #040404 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #000000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.navbar-inverse .btn-navbar:hover,
.navbar-inverse .btn-navbar:active,
.navbar-inverse .btn-navbar.active,
.navbar-inverse .btn-navbar.disabled,
.navbar-inverse .btn-navbar[disabled] {
.navbar-inverse .btn-navbar.active {
color: #ffffff;
background-color: #040404;
background-position: 0 -15px;
}
.navbar-inverse .btn-navbar:active,
.navbar-inverse .btn-navbar.active {
background-color: #000000 \9;
.navbar-inverse .btn-navbar.active,
.navbar-inverse .btn-navbar[disabled],
.navbar-inverse .btn-navbar.disabled,
fieldset[disabled] .navbar-inverse .btn-navbar {
background-image: none;
}
.breadcrumb {
@ -4543,7 +4210,7 @@ input[type="button"].btn-block {
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
background-color: #000;
}
.modal-backdrop.fade {
@ -4561,6 +4228,7 @@ input[type="button"].btn-block {
top: 10%;
left: 50%;
z-index: 1050;
display: none;
width: 560px;
margin-left: -280px;
background-color: #fff;
@ -4918,11 +4586,11 @@ a.thumbnail:hover {
margin: 0 0 5px;
}
.media .pull-left {
.media > .pull-left {
margin-right: 10px;
}
.media .pull-right {
.media > .pull-right {
margin-left: 10px;
}
@ -4931,7 +4599,6 @@ a.thumbnail:hover {
list-style: none;
}
.label,
.badge {
display: inline-block;
padding: 2px 4px;
@ -4943,87 +4610,64 @@ a.thumbnail:hover {
white-space: nowrap;
vertical-align: baseline;
background-color: #999999;
}
.label {
border-radius: 3px;
}
.badge {
padding-right: 9px;
padding-left: 9px;
border-radius: 9px;
}
.label:empty,
.badge:empty {
display: none;
}
a.label:hover,
a.badge:hover {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.label-danger,
.badge-danger {
background-color: #b94a48;
}
.label-danger[href],
.badge-danger[href] {
background-color: #953b39;
}
.label-warning,
.badge-warning {
background-color: #f89406;
}
.label-warning[href],
.badge-warning[href] {
background-color: #c67605;
}
.label-success,
.badge-success {
background-color: #468847;
}
.label-success[href],
.badge-success[href] {
background-color: #356635;
}
.label-info,
.badge-info {
background-color: #3a87ad;
}
.label-info[href],
.badge-info[href] {
background-color: #2d6987;
}
.label-inverse,
.badge-inverse {
background-color: #333333;
}
.label-inverse[href],
.badge-inverse[href] {
background-color: #1a1a1a;
}
.btn .label,
.btn .badge {
position: relative;
top: -1px;
}
.btn-mini .label,
.btn-mini .badge {
top: 0;
}
@ -5077,7 +4721,7 @@ a.badge:hover {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f7f7f7;
background-color: #f9f9f9;
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
@ -5098,7 +4742,7 @@ a.badge:hover {
color: #fff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0e90d2;
background-color: #0480be;
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
@ -5145,7 +4789,7 @@ a.badge:hover {
.progress-danger .bar,
.progress .bar-danger {
background-color: #dd514c;
background-color: #c43c35;
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
@ -5167,7 +4811,7 @@ a.badge:hover {
.progress-success .bar,
.progress .bar-success {
background-color: #5eb95e;
background-color: #57a957;
background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
@ -5189,7 +4833,7 @@ a.badge:hover {
.progress-info .bar,
.progress .bar-info {
background-color: #4bb1cf;
background-color: #339bb9;
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
@ -5211,7 +4855,7 @@ a.badge:hover {
.progress-warning .bar,
.progress .bar-warning {
background-color: #faa732;
background-color: #f89406;
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
@ -5383,6 +5027,31 @@ a.badge:hover {
margin-left: 70px;
}
.carousel-indicators {
position: absolute;
top: 15px;
right: 15px;
z-index: 5;
margin: 0;
list-style: none;
}
.carousel-indicators li {
display: block;
float: left;
width: 10px;
height: 10px;
margin-left: 5px;
text-indent: -999px;
background-color: #ccc;
background-color: rgba(255, 255, 255, 0.25);
border-radius: 5px;
}
.carousel-indicators .active {
background-color: #fff;
}
.carousel-caption {
position: absolute;
right: 0;
@ -5408,7 +5077,7 @@ a.badge:hover {
margin-bottom: 0;
}
.hero-unit {
.jumbotron {
padding: 60px;
margin-bottom: 30px;
font-size: 18px;
@ -5419,7 +5088,7 @@ a.badge:hover {
border-radius: 6px;
}
.hero-unit h1 {
.jumbotron h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
@ -5427,7 +5096,7 @@ a.badge:hover {
color: inherit;
}
.hero-unit li {
.jumbotron li {
line-height: 30px;
}
@ -5450,11 +5119,11 @@ a.badge:hover {
}
.hide {
display: none;
display: none !important;
}
.show {
display: block;
display: block !important;
}
.invisible {
@ -5478,6 +5147,10 @@ a.badge:hover {
width: 100%;
}
@-ms-viewport {
width: device-width;
}
.hidden {
display: none;
visibility: hidden;

10
docs/assets/css/docs.css
View File

@ -83,7 +83,7 @@ hr.soften {
/* Base class
------------------------- */
.jumbotron {
.bs-docs-jumbotron {
position: relative;
padding: 40px 0;
color: #fff;
@ -101,13 +101,13 @@ hr.soften {
-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
}
.jumbotron h1 {
.bs-docs-jumbotron h1 {
font-size: 80px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
}
.jumbotron p {
.bs-docs-jumbotron p {
font-size: 24px;
font-weight: 300;
line-height: 1.25;
@ -115,14 +115,14 @@ hr.soften {
}
/* Link styles (used on .masthead-links as well) */
.jumbotron a {
.bs-docs-jumbotron a {
color: #fff;
color: rgba(255,255,255,.5);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.jumbotron a:hover {
.bs-docs-jumbotron a:hover {
color: #fff;
text-shadow: 0 0 10px rgba(255,255,255,.25);
}

16
docs/assets/js/application.js
View File

@ -14,12 +14,14 @@
})
// side bar
$('.bs-docs-sidenav').affix({
offset: {
top: function () { return $window.width() <= 980 ? 290 : 210 }
, bottom: 270
}
})
setTimeout(function () {
$('.bs-docs-sidenav').affix({
offset: {
top: function () { return $window.width() <= 980 ? 290 : 210 }
, bottom: 270
}
})
}, 100)
// make code pretty
window.prettyPrint && prettyPrint()
@ -34,7 +36,7 @@
// add tipsies to grid for scaffolding
if ($('#gridSystem').length) {
$('#gridSystem').tooltip({
selector: '.show-grid > div'
selector: '.show-grid > div:not(.tooltip)'
, title: function () { return $(this).width() + 'px' }
})
}

27
docs/assets/js/bootstrap-carousel.js vendored
View File

@ -28,6 +28,7 @@
var Carousel = function (element, options) {
this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this))
@ -44,13 +45,17 @@
return this
}
, getActiveIndex: function () {
this.$active = this.$element.find('.item.active')
this.$items = this.$active.parent().children()
return this.$items.index(this.$active)
}
, to: function (pos) {
var $active = this.$element.find('.item.active')
, children = $active.parent().children()
, activePos = children.index($active)
var activeIndex = this.getActiveIndex()
, that = this
if (pos > (children.length - 1) || pos < 0) return
if (pos > (this.$items.length - 1) || pos < 0) return
if (this.sliding) {
return this.$element.one('slid', function () {
@ -58,11 +63,11 @@
})
}
if (activePos == pos) {
if (activeIndex == pos) {
return this.pause().cycle()
}
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
}
, pause: function (e) {
@ -107,6 +112,14 @@
if ($next.hasClass('active')) return
if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active')
this.$element.one('slid', function () {
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
$nextIndicator && $nextIndicator.addClass('active')
})
}
if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
@ -151,7 +164,7 @@
if (!data) $this.data('carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option)
else if (action) data[action]()
else if (options.interval) data.cycle()
else if (options.interval) data.pause().cycle()
})
}

2
docs/assets/js/bootstrap-collapse.js vendored
View File

@ -52,7 +52,7 @@
, actives
, hasData
if (this.transitioning) return
if (this.transitioning || this.$element.hasClass('in')) return
dimension = this.dimension()
scroll = $.camelCase(['scroll', dimension].join('-'))

5
docs/assets/js/bootstrap-dropdown.js vendored
View File

@ -115,8 +115,9 @@
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
$parent = selector && $(selector)
if (!$parent || !$parent.length) $parent = $this.parent()
return $parent
}

3
docs/assets/js/bootstrap-modal.js vendored
View File

@ -60,8 +60,7 @@
that.$element.appendTo(document.body) //don't move modals dom position
}
that.$element
.show()
that.$element.show()
if (transition) {
that.$element[0].offsetWidth // force reflow

18
docs/assets/js/bootstrap-tooltip.js vendored
View File

@ -97,7 +97,6 @@
, show: function () {
var $tip
, inside
, pos
, actualWidth
, actualHeight
@ -116,19 +115,17 @@
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement
inside = /in/.test(placement)
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.insertAfter(this.$element)
pos = this.getPosition(inside)
pos = this.getPosition()
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
switch (inside ? placement.split(' ')[1] : placement) {
switch (placement) {
case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
break
@ -193,11 +190,12 @@
return this.getTitle()
}
, getPosition: function (inside) {
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
width: this.$element[0].offsetWidth
, height: this.$element[0].offsetHeight
})
, getPosition: function () {
var el = this.$element[0]
return $.extend({}, el.getBoundingClientRect ? el.getBoundingClientRect() : {
width: el.offsetWidth
, height: el.offsetHeight
}, this.$element.offset())
}
, getTitle: function () {

16
docs/assets/js/bootstrap-typeahead.js vendored
View File

@ -172,6 +172,7 @@
, listen: function () {
this.$element
.on('focus', $.proxy(this.focus, this))
.on('blur', $.proxy(this.blur, this))
.on('keypress', $.proxy(this.keypress, this))
.on('keyup', $.proxy(this.keyup, this))
@ -183,6 +184,7 @@
this.$menu
.on('click', $.proxy(this.click, this))
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
.on('mouseleave', 'li', $.proxy(this.mouseleave, this))
}
, eventSupported: function(eventName) {
@ -256,9 +258,13 @@
e.preventDefault()
}
, focus: function (e) {
this.focused = true
}
, blur: function (e) {
var that = this
setTimeout(function () { that.hide() }, 150)
this.focused = false
if (!this.mousedover && this.shown) this.hide()
}
, click: function (e) {
@ -268,10 +274,16 @@
}
, mouseenter: function (e) {
this.mousedover = true
this.$menu.find('.active').removeClass('active')
$(e.currentTarget).addClass('active')
}
, mouseleave: function (e) {
this.mousedover = false
if (!this.focused && this.shown) this.hide()
}
}

71
docs/assets/js/bootstrap.js vendored
View File

@ -289,6 +289,7 @@
var Carousel = function (element, options) {
this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this))
@ -305,13 +306,17 @@
return this
}
, getActiveIndex: function () {
this.$active = this.$element.find('.item.active')
this.$items = this.$active.parent().children()
return this.$items.index(this.$active)
}
, to: function (pos) {
var $active = this.$element.find('.item.active')
, children = $active.parent().children()
, activePos = children.index($active)
var activeIndex = this.getActiveIndex()
, that = this
if (pos > (children.length - 1) || pos < 0) return
if (pos > (this.$items.length - 1) || pos < 0) return
if (this.sliding) {
return this.$element.one('slid', function () {
@ -319,11 +324,11 @@
})
}
if (activePos == pos) {
if (activeIndex == pos) {
return this.pause().cycle()
}
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
}
, pause: function (e) {
@ -368,6 +373,14 @@
if ($next.hasClass('active')) return
if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active')
this.$element.one('slid', function () {
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
$nextIndicator && $nextIndicator.addClass('active')
})
}
if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
@ -412,7 +425,7 @@
if (!data) $this.data('carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option)
else if (action) data[action]()
else if (options.interval) data.cycle()
else if (options.interval) data.pause().cycle()
})
}
@ -497,7 +510,7 @@
, actives
, hasData
if (this.transitioning) return
if (this.transitioning || this.$element.hasClass('in')) return
dimension = this.dimension()
scroll = $.camelCase(['scroll', dimension].join('-'))
@ -726,8 +739,9 @@
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
$parent = selector && $(selector)
if (!$parent || !$parent.length) $parent = $this.parent()
return $parent
}
@ -831,8 +845,7 @@
that.$element.appendTo(document.body) //don't move modals dom position
}
that.$element
.show()
that.$element.show()
if (transition) {
that.$element[0].offsetWidth // force reflow
@ -1113,7 +1126,6 @@
, show: function () {
var $tip
, inside
, pos
, actualWidth
, actualHeight
@ -1132,19 +1144,17 @@
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement
inside = /in/.test(placement)
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.insertAfter(this.$element)
pos = this.getPosition(inside)
pos = this.getPosition()
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
switch (inside ? placement.split(' ')[1] : placement) {
switch (placement) {
case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
break
@ -1209,11 +1219,12 @@
return this.getTitle()
}
, getPosition: function (inside) {
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
width: this.$element[0].offsetWidth
, height: this.$element[0].offsetHeight
})
, getPosition: function () {
var el = this.$element[0]
return $.extend({}, el.getBoundingClientRect ? el.getBoundingClientRect() : {
width: el.offsetWidth
, height: el.offsetHeight
}, this.$element.offset())
}
, getTitle: function () {
@ -1892,6 +1903,7 @@
, listen: function () {
this.$element
.on('focus', $.proxy(this.focus, this))
.on('blur', $.proxy(this.blur, this))
.on('keypress', $.proxy(this.keypress, this))
.on('keyup', $.proxy(this.keyup, this))
@ -1903,6 +1915,7 @@
this.$menu
.on('click', $.proxy(this.click, this))
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
.on('mouseleave', 'li', $.proxy(this.mouseleave, this))
}
, eventSupported: function(eventName) {
@ -1976,9 +1989,13 @@
e.preventDefault()
}
, focus: function (e) {
this.focused = true
}
, blur: function (e) {
var that = this
setTimeout(function () { that.hide() }, 150)
this.focused = false
if (!this.mousedover && this.shown) this.hide()
}
, click: function (e) {
@ -1988,10 +2005,16 @@
}
, mouseenter: function (e) {
this.mousedover = true
this.$menu.find('.active').removeClass('active')
$(e.currentTarget).addClass('active')
}
, mouseleave: function (e) {
this.mousedover = false
if (!this.focused && this.shown) this.hide()
}
}

4
docs/assets/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

164
docs/components.html
View File

@ -68,7 +68,7 @@
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
@ -90,7 +90,7 @@
<li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
<li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
<li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
<li><a href="#labels-badges"><i class="glyphicon-chevron-right"></i> Labels and badges</a></li>
<li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
@ -159,90 +159,6 @@
...
&lt;/ul&gt;
</pre>
<h3>Sub menus on dropdowns</h3>
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
<div class="bs-docs-example bs-docs-example-submenus">
<div class="pull-left">
<p class="muted">Default</p>
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="pull-left">
<p class="muted">Dropup</p>
<div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="pull-left">
<p class="muted">Left submenu</p>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-left">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
...
&lt;li class="dropdown-submenu"&gt;
&lt;a tabindex="-1" href="#"&gt;More options&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</section>
@ -327,7 +243,7 @@
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
<h4>Dropdowns in button groups</h4>
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
<p>Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
</section>
@ -1511,73 +1427,13 @@
<!-- Labels and badges
<!-- Badges
================================================== -->
<section id="labels-badges">
<section id="badges">
<div class="page-header">
<h1>Labels and badges</h1>
<h1>Badges</h1>
</div>
<h3>Labels</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Markup</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="label">Default</span>
</td>
<td>
<code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-success">Success</span>
</td>
<td>
<code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-warning">Warning</span>
</td>
<td>
<code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-danger">Danger</span>
</td>
<td>
<code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-info">Info</span>
</td>
<td>
<code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-inverse">Inverse</span>
</td>
<td>
<code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
<h3>Badges</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -1657,7 +1513,7 @@
</table>
<h3>Easily collapsible</h3>
<p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
<p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
</section>
@ -1670,17 +1526,17 @@
<h1>Typographic components</h1>
</div>
<h2>Hero unit</h2>
<h2>Jumbotron</h2>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<div class="bs-docs-example">
<div class="hero-unit">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="hero-unit"&gt;
&lt;div class="jumbotron"&gt;
&lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Tagline&lt;/p&gt;
&lt;p&gt;

381
docs/css.html
View File

@ -68,7 +68,7 @@
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>CSS</h1>
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
@ -303,7 +303,7 @@
</div>
<pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>
<p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
<p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
<h3>Emphasis classes</h3>
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
@ -567,8 +567,8 @@
&lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;
</pre>
<h5>Auto-truncating</h5>
<p>
<span class="label label-info">Heads up!</span>
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
</p>
</section>
@ -588,7 +588,7 @@
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<pre class="prettyprint linenums">
For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inline.
For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped as inline.
</pre>
<h2>Basic block</h2>
@ -601,7 +601,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
&lt;/pre&gt;
</pre>
<p><span class="label label-info">Heads up!</span> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</section>
@ -1060,20 +1059,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h2 id="forms-layouts">Optional layouts</h2>
<p>Included with Bootstrap are three optional form layouts for common use cases.</p>
<h3>Search form</h3>
<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>&lt;input&gt;</code> for an extra-rounded text input.</p>
<form class="bs-docs-example form-search">
<input type="text" class="span3 search-query">
<button type="submit" class="btn">Search</button>
</form>
<pre class="prettyprint linenums">
&lt;form class="form-search"&gt;
&lt;input type="text" class="span3 search-query"&gt;
&lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/form&gt;
</pre>
<p>Included with Bootstrap are optional form layouts for common use cases.</p>
<h3>Inline form</h3>
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
@ -1119,13 +1105,15 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
@ -1146,9 +1134,11 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;/div&gt;
&lt;div class="control-group"&gt;
&lt;div class="controls"&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; Remember me
&lt;/label&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; Remember me
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
@ -1296,85 +1286,82 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h2 id="forms-extending">Extending form controls</h2>
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
<h3>Prepended and appended inputs</h3>
<p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p>
<h4>Default options</h4>
<p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
<h3>Input groups</h3>
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
<form class="bs-docs-example">
<div class="input-prepend">
<span class="add-on">@</span>
<input id="prependedInput" type="text" placeholder="Username">
<div class="input-group span9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
</div>
<br>
<div class="input-append">
<input id="appendedInput" type="text">
<span class="add-on">.00</span>
<div class="input-group span6">
<input type="text">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group span3">
<span class="input-group-addon">$</span>
<input type="text">
<span class="input-group-addon">.00</span>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend"&gt;
&lt;span class="add-on"&gt;@&lt;/span&gt;
&lt;input id="prependedInput" type="text" placeholder="Username"&gt;
&lt;div class="input-group span9"&gt;
&lt;span class="input-group-addon"&gt;@&lt;/span&gt;
&lt;input type="text" placeholder="Username"&gt;
&lt;/div&gt;
&lt;div class="input-append"&gt;
&lt;input id="appendedInput" type="text"&gt;
&lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;/div&gt;
</pre>
<h4>Combined</h4>
<p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
<form class="bs-docs-example form-inline">
<div class="input-prepend input-append">
<span class="add-on">$</span>
<input id="appendedPrependedInput" type="text">
<span class="add-on">.00</span>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend input-append"&gt;
&lt;span class="add-on"&gt;$&lt;/span&gt;
&lt;input id="appendedPrependedInput" type="text"&gt;
&lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;div class="input-group span6"&gt;
&lt;input type="text"&gt;
&lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
&lt;/div&gt;
&lt;div class="input-group span3"&gt;
&lt;span class="input-group-addon"&gt;$&lt;/span&gt;
&lt;input type="text"&gt;
&lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
&lt;/div&gt;
</pre>
<h4>Buttons instead of text</h4>
<p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-docs-example">
<div class="input-append">
<input class="span3" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
<div class="input-group span7">
<span class="input-group-btn">
<button class="btn" type="button">Go!</button>
</span>
<input type="text">
</div>
<br>
<div class="input-group span7">
<input type="text">
<span class="input-group-btn">
<button class="btn" type="button">Go!</button>
</span>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
&lt;input class="span3" id="appendedInputButton" type="text"&gt;
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
&lt;div class="input-group span7"&gt;
&lt;span class="input-group-btn"&gt;
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
&lt;/span&gt;
&lt;input type="text"&gt;
&lt;/div&gt;
</pre>
<form class="bs-docs-example">
<div class="input-append">
<input class="span3" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
&lt;input class="span3" id="appendedInputButton" type="text"&gt;
&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
&lt;div class="input-group span7"&gt;
&lt;input type="text"&gt;
&lt;span class="input-group-btn"&gt;
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
&lt;/span&gt;
&lt;/div&gt;
</pre>
<h4>Button dropdowns</h4>
<p></p>
<form class="bs-docs-example">
<div class="input-append">
<input class="span3" id="appendedDropdownButton" type="text">
<div class="btn-group">
<div class="input-group span7">
<div class="input-group-btn btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
@ -1384,13 +1371,26 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-append -->
<input type="text">
</div><!-- /input-group -->
<br>
<div class="input-group span7">
<input type="text">
<div class="input-group-btn btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
&lt;input id="appendedInputButtons" type="text"&gt;
&lt;input class="span3" id="appendedDropdownButton" type="text"&gt;
&lt;div class="btn-group"&gt;
&lt;div class="input-group span7"&gt;
&lt;div class="input-group-btn btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
@ -1399,77 +1399,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;input type="text"&gt;
&lt;/div&gt;
</pre>
<form class="bs-docs-example">
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input class="span2" id="prependedDropdownButton" type="text">
</div><!-- /input-prepend -->
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend"&gt;
&lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
&lt;/div&gt;
</pre>
<form class="bs-docs-example">
<div class="input-prepend input-append">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input class="span2" id="appendedPrependedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-prepend input-append -->
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend input-append"&gt;
&lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
&lt;div class="btn-group"&gt;
&lt;div class="input-group span7"&gt;
&lt;input type="text"&gt;
&lt;div class="input-group-btn btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
@ -1483,8 +1418,8 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h4>Segmented dropdown groups</h4>
<form class="bs-docs-example">
<div class="input-prepend">
<div class="btn-group">
<div class="input-group span7">
<div class="input-group-btn btn-group">
<button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
@ -1499,58 +1434,35 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</div>
<input type="text" class="span3">
</div>
<div class="input-append">
<input type="text" class="span3">
<div class="btn-group">
<button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</form>
<pre class="prettyprint linenums">
&lt;form&gt;
&lt;div class="input-prepend"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;input type="text" class="span3"&gt;
&lt;/div&gt;
&lt;div class="input-append"&gt;
&lt;input type="text" class="span3"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
</pre>
<h4>Search form</h4>
<form class="bs-docs-example form-search">
<div class="input-append">
<input type="text" class="search-query span3">
<button type="submit" class="btn">Search</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">Search</button>
<input type="text" class="search-query span3">
<br>
<div class="input-group span7">
<input type="text">
<div class="input-group-btn btn-group">
<button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</form>
<pre class="prettyprint linenums">
&lt;form class="form-search"&gt;
&lt;div class="input-append"&gt;
&lt;input type="text" class="search-query span3"&gt;
&lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/div&gt;
&lt;div class="input-prepend"&gt;
&lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;input type="text" class="search-query span3"&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;div class="input-prepend"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;input type="text" class="span3"&gt;
&lt;/div&gt;
&lt;div class="input-append"&gt;
&lt;input type="text" class="span3"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<h3 id="forms-extending-sizes">Control sizing</h3>
@ -1735,6 +1647,43 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</form>
<pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
</pre>
<h3>Disabled fieldsets</h3>
<p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</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>
<div>
<input type="text" class="span4" placeholder="Disabled input">
</div>
<div>
<select class="span4">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
<pre class="prettyprint linenums">
&lt;form class="form-inline"&gt;
&lt;fieldset disabled&gt;
&lt;input type="text" class="span4" placeholder="Disabled input"&gt;
&lt;select class="span4"&gt;
&lt;option&gt;Disabled select&lt;/option&gt;
&lt;/select&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; Can't check this
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</pre>
<h3>Validation states</h3>
@ -1817,7 +1766,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</thead>
<tbody>
<tr>
<td><button type="button" class="btn">Default</button></td>
<td><button type="button" class="btn btn-default">Default</button></td>
<td><code>btn</code></td>
<td>Standard gray button with gradient</td>
</tr>
@ -1826,11 +1775,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<td><code>btn btn-primary</code></td>
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
</tr>
<tr>
<td><button type="button" class="btn btn-info">Info</button></td>
<td><code>btn btn-info</code></td>
<td>Used as an alternative to the default styles</td>
</tr>
<tr>
<td><button type="button" class="btn btn-success">Success</button></td>
<td><code>btn btn-success</code></td>
@ -1846,11 +1790,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<td><code>btn btn-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td><button type="button" class="btn btn-inverse">Inverse</button></td>
<td><code>btn btn-inverse</code></td>
<td>Alternate dark gray button, not tied to a semantic action or use</td>
</tr>
<tr>
<td><button type="button" class="btn btn-link">Link</button></td>
<td><code>btn btn-link</code></td>
@ -1928,7 +1867,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;a href="#" class="btn btn-large disabled"&gt;Link&lt;/a&gt;
</pre>
<p>
<span class="label label-info">Heads up!</span>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
</p>
@ -1971,7 +1909,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h1>Images</h1>
</div>
<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
<div class="bs-docs-example bs-docs-example-images">
<img data-src="holder.js/140x140" class="img-rounded">
<img data-src="holder.js/140x140" class="img-circle">
@ -1982,8 +1920,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;img src="..." class="img-circle"&gt;
&lt;img src="..." class="img-polaroid"&gt;
</pre>
<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE8 due to lack of <code>border-radius</code> support.</p>
</section>
@ -2181,10 +2117,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;i class="glyphicon-search"&gt;&lt;/i&gt;
</pre>
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
<p>
<span class="label label-info">Heads up!</span>
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
</p>
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
<hr class="bs-docs-separator">

2
docs/customize.html
View File

@ -68,7 +68,7 @@
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>

2
docs/examples/carousel.html
View File

@ -78,7 +78,7 @@
.carousel .container {
position: relative;
z-index: 10;
z-index: 9;
}
.carousel-control {

2
docs/extend.html
View File

@ -68,7 +68,7 @@
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<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>

2
docs/gallery.html
View File

@ -68,7 +68,7 @@
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>Gallery</h1>
<p class="lead">Showcase of sites using Bootstrap.</p>

2
docs/getting-started.html
View File

@ -68,7 +68,7 @@
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>Getting started</h1>
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>

6
docs/index.html
View File

@ -66,7 +66,7 @@
</div>
</div>
<div class="jumbotron masthead">
<div class="bs-docs-jumbotron masthead">
<div class="container">
<h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
@ -83,9 +83,7 @@
<li>
<a href="./extend.html" >Extend</a>
</li>
<li>
Version 3.0.0
</li>
<li>Version 3.0.0</li>
</ul>
</div>
</div>

22
docs/javascript.html
View File

@ -68,7 +68,7 @@
<!-- Subhead
================================================== -->
<header class="jumbotron subhead">
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>JavaScript</h1>
<p class="lead">Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.
@ -186,7 +186,7 @@ $('#myModal').on('show', function (e) {
<h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; display: block; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Modal header</h3>
@ -201,7 +201,7 @@ $('#myModal').on('show', function (e) {
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="modal hide fade"&gt;
&lt;div class="modal fade"&gt;
&lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
&lt;h3&gt;Modal header&lt;/h3&gt;
@ -219,7 +219,7 @@ $('#myModal').on('show', function (e) {
<h3>Live demo</h3>
<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 id="myModalLabel">Modal Heading</h3>
@ -258,7 +258,7 @@ $('#myModal').on('show', function (e) {
&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
&lt!-- Modal --&gt;
&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
&lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
&lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt;
&lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
@ -1420,26 +1420,31 @@ $('#myCollapsible').on('hidden', function () {
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
<div class="bs-docs-example">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>
</div>
<div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare.</p>
</div>
</div>
<div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>
</div>
</div>
@ -1683,6 +1688,7 @@ $('[data-spy="affix"]').each(function () {
</pre>
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>

164
docs/templates/pages/components.mustache vendored
View File

@ -1,6 +1,6 @@
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
@ -22,7 +22,7 @@
<li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
<li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
<li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
<li><a href="#labels-badges"><i class="glyphicon-chevron-right"></i> Labels and badges</a></li>
<li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
@ -91,90 +91,6 @@
...
&lt;/ul&gt;
</pre>
<h3>Sub menus on dropdowns</h3>
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
<div class="bs-docs-example bs-docs-example-submenus">
<div class="pull-left">
<p class="muted">Default</p>
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>{{! /.pull-left }}
<div class="pull-left">
<p class="muted">Dropup</p>
<div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>{{! /.pull-left }}
<div class="pull-left">
<p class="muted">Left submenu</p>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-left">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>{{! /.pull-left }}
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
...
&lt;li class="dropdown-submenu"&gt;
&lt;a tabindex="-1" href="#"&gt;More options&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</section>
@ -259,7 +175,7 @@
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
<h4>Dropdowns in button groups</h4>
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
<p>Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
</section>
@ -1443,73 +1359,13 @@
<!-- Labels and badges
<!-- Badges
================================================== -->
<section id="labels-badges">
<section id="badges">
<div class="page-header">
<h1>Labels and badges</h1>
<h1>Badges</h1>
</div>
<h3>Labels</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Markup</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="label">Default</span>
</td>
<td>
<code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-success">Success</span>
</td>
<td>
<code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-warning">Warning</span>
</td>
<td>
<code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-danger">Danger</span>
</td>
<td>
<code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-info">Info</span>
</td>
<td>
<code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-inverse">Inverse</span>
</td>
<td>
<code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
<h3>Badges</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -1589,7 +1445,7 @@
</table>
<h3>Easily collapsible</h3>
<p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
<p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
</section>
@ -1602,17 +1458,17 @@
<h1>Typographic components</h1>
</div>
<h2>Hero unit</h2>
<h2>Jumbotron</h2>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<div class="bs-docs-example">
<div class="hero-unit">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="hero-unit"&gt;
&lt;div class="jumbotron"&gt;
&lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Tagline&lt;/p&gt;
&lt;p&gt;

359
docs/templates/pages/css.mustache vendored
View File

@ -1,6 +1,6 @@
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>CSS</h1>
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
@ -240,7 +240,7 @@
</div>
<pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>
<p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
<p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
<h3>Emphasis classes</h3>
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
@ -507,8 +507,8 @@
&lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;
</pre>
<h5>Auto-truncating</h5>
<p>
<span class="label label-info">Heads up!</span>
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
</p>
</section>
@ -528,7 +528,7 @@
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<pre class="prettyprint linenums">
For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inline.
For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped as inline.
</pre>
<h2>Basic block</h2>
@ -541,7 +541,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
&lt;/pre&gt;
</pre>
<p><span class="label label-info">Heads up!</span> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</section>
@ -1000,20 +999,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h2 id="forms-layouts">Optional layouts</h2>
<p>Included with Bootstrap are three optional form layouts for common use cases.</p>
<h3>Search form</h3>
<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>&lt;input&gt;</code> for an extra-rounded text input.</p>
<form class="bs-docs-example form-search">
<input type="text" class="span3 search-query">
<button type="submit" class="btn">Search</button>
</form>{{! /example }}
<pre class="prettyprint linenums">
&lt;form class="form-search"&gt;
&lt;input type="text" class="span3 search-query"&gt;
&lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/form&gt;
</pre>
<p>Included with Bootstrap are optional form layouts for common use cases.</p>
<h3>Inline form</h3>
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
@ -1059,13 +1045,15 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
@ -1086,9 +1074,11 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;/div&gt;
&lt;div class="control-group"&gt;
&lt;div class="controls"&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; Remember me
&lt;/label&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; Remember me
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
@ -1236,85 +1226,82 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h2 id="forms-extending">Extending form controls</h2>
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
<h3>Prepended and appended inputs</h3>
<p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p>
<h4>Default options</h4>
<p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
<h3>Input groups</h3>
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
<form class="bs-docs-example">
<div class="input-prepend">
<span class="add-on">@</span>
<input id="prependedInput" type="text" placeholder="Username">
<div class="input-group span9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
</div>
<br>
<div class="input-append">
<input id="appendedInput" type="text">
<span class="add-on">.00</span>
<div class="input-group span6">
<input type="text">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group span3">
<span class="input-group-addon">$</span>
<input type="text">
<span class="input-group-addon">.00</span>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend"&gt;
&lt;span class="add-on"&gt;@&lt;/span&gt;
&lt;input id="prependedInput" type="text" placeholder="Username"&gt;
&lt;div class="input-group span9"&gt;
&lt;span class="input-group-addon"&gt;@&lt;/span&gt;
&lt;input type="text" placeholder="Username"&gt;
&lt;/div&gt;
&lt;div class="input-append"&gt;
&lt;input id="appendedInput" type="text"&gt;
&lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;/div&gt;
</pre>
<h4>Combined</h4>
<p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
<form class="bs-docs-example form-inline">
<div class="input-prepend input-append">
<span class="add-on">$</span>
<input id="appendedPrependedInput" type="text">
<span class="add-on">.00</span>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend input-append"&gt;
&lt;span class="add-on"&gt;$&lt;/span&gt;
&lt;input id="appendedPrependedInput" type="text"&gt;
&lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;div class="input-group span6"&gt;
&lt;input type="text"&gt;
&lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
&lt;/div&gt;
&lt;div class="input-group span3"&gt;
&lt;span class="input-group-addon"&gt;$&lt;/span&gt;
&lt;input type="text"&gt;
&lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
&lt;/div&gt;
</pre>
<h4>Buttons instead of text</h4>
<p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-docs-example">
<div class="input-append">
<input class="span3" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
<div class="input-group span7">
<span class="input-group-btn">
<button class="btn" type="button">Go!</button>
</span>
<input type="text">
</div>
<br>
<div class="input-group span7">
<input type="text">
<span class="input-group-btn">
<button class="btn" type="button">Go!</button>
</span>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
&lt;input class="span3" id="appendedInputButton" type="text"&gt;
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
&lt;div class="input-group span7"&gt;
&lt;span class="input-group-btn"&gt;
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
&lt;/span&gt;
&lt;input type="text"&gt;
&lt;/div&gt;
</pre>
<form class="bs-docs-example">
<div class="input-append">
<input class="span3" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
&lt;input class="span3" id="appendedInputButton" type="text"&gt;
&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
&lt;div class="input-group span7"&gt;
&lt;input type="text"&gt;
&lt;span class="input-group-btn"&gt;
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
&lt;/span&gt;
&lt;/div&gt;
</pre>
<h4>Button dropdowns</h4>
<p></p>
<form class="bs-docs-example">
<div class="input-append">
<input class="span3" id="appendedDropdownButton" type="text">
<div class="btn-group">
<div class="input-group span7">
<div class="input-group-btn btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
@ -1324,13 +1311,26 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-append -->
<input type="text">
</div><!-- /input-group -->
<br>
<div class="input-group span7">
<input type="text">
<div class="input-group-btn btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
&lt;input id="appendedInputButtons" type="text"&gt;
&lt;input class="span3" id="appendedDropdownButton" type="text"&gt;
&lt;div class="btn-group"&gt;
&lt;div class="input-group span7"&gt;
&lt;div class="input-group-btn btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
@ -1339,77 +1339,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;input type="text"&gt;
&lt;/div&gt;
</pre>
<form class="bs-docs-example">
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input class="span2" id="prependedDropdownButton" type="text">
</div><!-- /input-prepend -->
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend"&gt;
&lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
&lt;/div&gt;
</pre>
<form class="bs-docs-example">
<div class="input-prepend input-append">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input class="span2" id="appendedPrependedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-prepend input-append -->
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend input-append"&gt;
&lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
&lt;div class="btn-group"&gt;
&lt;div class="input-group span7"&gt;
&lt;input type="text"&gt;
&lt;div class="input-group-btn btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
@ -1423,8 +1358,8 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h4>Segmented dropdown groups</h4>
<form class="bs-docs-example">
<div class="input-prepend">
<div class="btn-group">
<div class="input-group span7">
<div class="input-group-btn btn-group">
<button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
@ -1439,9 +1374,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</div>
<input type="text" class="span3">
</div>
<div class="input-append">
<input type="text" class="span3">
<div class="btn-group">
<br>
<div class="input-group span7">
<input type="text">
<div class="input-group-btn btn-group">
<button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
@ -1457,40 +1395,14 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</div>
</form>
<pre class="prettyprint linenums">
&lt;form&gt;
&lt;div class="input-prepend"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;input type="text" class="span3"&gt;
&lt;/div&gt;
&lt;div class="input-append"&gt;
&lt;input type="text" class="span3"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
</pre>
<h4>Search form</h4>
<form class="bs-docs-example form-search">
<div class="input-append">
<input type="text" class="search-query span3">
<button type="submit" class="btn">Search</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">Search</button>
<input type="text" class="search-query span3">
</div>
</form>{{! /example }}
<pre class="prettyprint linenums">
&lt;form class="form-search"&gt;
&lt;div class="input-append"&gt;
&lt;input type="text" class="search-query span3"&gt;
&lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/div&gt;
&lt;div class="input-prepend"&gt;
&lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;input type="text" class="search-query span3"&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;div class="input-prepend"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;input type="text" class="span3"&gt;
&lt;/div&gt;
&lt;div class="input-append"&gt;
&lt;input type="text" class="span3"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<h3 id="forms-extending-sizes">Control sizing</h3>
@ -1675,6 +1587,43 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</form>
<pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
</pre>
<h3>Disabled fieldsets</h3>
<p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</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>
<div>
<input type="text" class="span4" placeholder="Disabled input">
</div>
<div>
<select class="span4">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
<pre class="prettyprint linenums">
&lt;form class="form-inline"&gt;
&lt;fieldset disabled&gt;
&lt;input type="text" class="span4" placeholder="Disabled input"&gt;
&lt;select class="span4"&gt;
&lt;option&gt;Disabled select&lt;/option&gt;
&lt;/select&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; Can't check this
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</pre>
<h3>Validation states</h3>
@ -1757,7 +1706,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</thead>
<tbody>
<tr>
<td><button type="button" class="btn">Default</button></td>
<td><button type="button" class="btn btn-default">Default</button></td>
<td><code>btn</code></td>
<td>Standard gray button with gradient</td>
</tr>
@ -1766,11 +1715,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<td><code>btn btn-primary</code></td>
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
</tr>
<tr>
<td><button type="button" class="btn btn-info">Info</button></td>
<td><code>btn btn-info</code></td>
<td>Used as an alternative to the default styles</td>
</tr>
<tr>
<td><button type="button" class="btn btn-success">Success</button></td>
<td><code>btn btn-success</code></td>
@ -1786,11 +1730,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<td><code>btn btn-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td><button type="button" class="btn btn-inverse">Inverse</button></td>
<td><code>btn btn-inverse</code></td>
<td>Alternate dark gray button, not tied to a semantic action or use</td>
</tr>
<tr>
<td><button type="button" class="btn btn-link">Link</button></td>
<td><code>btn btn-link</code></td>
@ -1868,7 +1807,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;a href="#" class="btn btn-large disabled"&gt;Link&lt;/a&gt;
</pre>
<p>
<span class="label label-info">Heads up!</span>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
</p>
@ -1911,7 +1849,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h1>Images</h1>
</div>
<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
<div class="bs-docs-example bs-docs-example-images">
<img data-src="holder.js/140x140" class="img-rounded">
<img data-src="holder.js/140x140" class="img-circle">
@ -1922,8 +1860,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;img src="..." class="img-circle"&gt;
&lt;img src="..." class="img-polaroid"&gt;
</pre>
<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE8 due to lack of <code>border-radius</code> support.</p>
</section>
@ -2121,10 +2057,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;i class="glyphicon-search"&gt;&lt;/i&gt;
</pre>
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
<p>
<span class="label label-info">Heads up!</span>
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
</p>
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
<hr class="bs-docs-separator">

2
docs/templates/pages/customize.mustache vendored
View File

@ -1,6 +1,6 @@
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>

2
docs/templates/pages/extend.mustache vendored
View File

@ -1,6 +1,6 @@
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<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>

2
docs/templates/pages/gallery.mustache vendored
View File

@ -1,6 +1,6 @@
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>Gallery</h1>
<p class="lead">Showcase of sites using Bootstrap.</p>

2
docs/templates/pages/getting-started.mustache vendored
View File

@ -1,6 +1,6 @@
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>Getting started</h1>
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>

6
docs/templates/pages/index.mustache vendored
View File

@ -1,4 +1,4 @@
<div class="jumbotron masthead">
<div class="bs-docs-jumbotron masthead">
<div class="container">
<h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
@ -15,9 +15,7 @@
<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>
<li>Version 3.0.0</li>
</ul>
</div>
</div>

22
docs/templates/pages/javascript.mustache vendored
View File

@ -1,6 +1,6 @@
<!-- Subhead
================================================== -->
<header class="jumbotron subhead">
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>JavaScript</h1>
<p class="lead">Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.
@ -119,7 +119,7 @@ $('#myModal').on('show', function (e) {
<h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; display: block; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Modal header</h3>
@ -134,7 +134,7 @@ $('#myModal').on('show', function (e) {
</div>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;div class="modal hide fade"&gt;
&lt;div class="modal fade"&gt;
&lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
&lt;h3&gt;Modal header&lt;/h3&gt;
@ -152,7 +152,7 @@ $('#myModal').on('show', function (e) {
<h3>Live demo</h3>
<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 id="myModalLabel">Modal Heading</h3>
@ -191,7 +191,7 @@ $('#myModal').on('show', function (e) {
&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
&lt!-- Modal --&gt;
&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
&lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
&lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt;
&lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
@ -1353,26 +1353,31 @@ $('#myCollapsible').on('hidden', function () {
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
<div class="bs-docs-example">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>
</div>
<div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare.</p>
</div>
</div>
<div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>
</div>
</div>
@ -1616,6 +1621,7 @@ $('[data-spy="affix"]').each(function () {
</pre>
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>

27
js/bootstrap-carousel.js vendored
View File

@ -28,6 +28,7 @@
var Carousel = function (element, options) {
this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this))
@ -44,13 +45,17 @@
return this
}
, getActiveIndex: function () {
this.$active = this.$element.find('.item.active')
this.$items = this.$active.parent().children()
return this.$items.index(this.$active)
}
, to: function (pos) {
var $active = this.$element.find('.item.active')
, children = $active.parent().children()
, activePos = children.index($active)
var activeIndex = this.getActiveIndex()
, that = this
if (pos > (children.length - 1) || pos < 0) return
if (pos > (this.$items.length - 1) || pos < 0) return
if (this.sliding) {
return this.$element.one('slid', function () {
@ -58,11 +63,11 @@
})
}
if (activePos == pos) {
if (activeIndex == pos) {
return this.pause().cycle()
}
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
}
, pause: function (e) {
@ -107,6 +112,14 @@
if ($next.hasClass('active')) return
if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active')
this.$element.one('slid', function () {
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
$nextIndicator && $nextIndicator.addClass('active')
})
}
if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
@ -151,7 +164,7 @@
if (!data) $this.data('carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option)
else if (action) data[action]()
else if (options.interval) data.cycle()
else if (options.interval) data.pause().cycle()
})
}

2
js/bootstrap-collapse.js vendored
View File

@ -52,7 +52,7 @@
, actives
, hasData
if (this.transitioning) return
if (this.transitioning || this.$element.hasClass('in')) return
dimension = this.dimension()
scroll = $.camelCase(['scroll', dimension].join('-'))

5
js/bootstrap-dropdown.js vendored
View File

@ -115,8 +115,9 @@
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
$parent = selector && $(selector)
if (!$parent || !$parent.length) $parent = $this.parent()
return $parent
}

3
js/bootstrap-modal.js vendored
View File

@ -60,8 +60,7 @@
that.$element.appendTo(document.body) //don't move modals dom position
}
that.$element
.show()
that.$element.show()
if (transition) {
that.$element[0].offsetWidth // force reflow

18
js/bootstrap-tooltip.js vendored
View File

@ -97,7 +97,6 @@
, show: function () {
var $tip
, inside
, pos
, actualWidth
, actualHeight
@ -116,19 +115,17 @@
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement
inside = /in/.test(placement)
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.insertAfter(this.$element)
pos = this.getPosition(inside)
pos = this.getPosition()
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
switch (inside ? placement.split(' ')[1] : placement) {
switch (placement) {
case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
break
@ -193,11 +190,12 @@
return this.getTitle()
}
, getPosition: function (inside) {
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
width: this.$element[0].offsetWidth
, height: this.$element[0].offsetHeight
})
, getPosition: function () {
var el = this.$element[0]
return $.extend({}, el.getBoundingClientRect ? el.getBoundingClientRect() : {
width: el.offsetWidth
, height: el.offsetHeight
}, this.$element.offset())
}
, getTitle: function () {

16
js/bootstrap-typeahead.js vendored
View File

@ -172,6 +172,7 @@
, listen: function () {
this.$element
.on('focus', $.proxy(this.focus, this))
.on('blur', $.proxy(this.blur, this))
.on('keypress', $.proxy(this.keypress, this))
.on('keyup', $.proxy(this.keyup, this))
@ -183,6 +184,7 @@
this.$menu
.on('click', $.proxy(this.click, this))
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
.on('mouseleave', 'li', $.proxy(this.mouseleave, this))
}
, eventSupported: function(eventName) {
@ -256,9 +258,13 @@
e.preventDefault()
}
, focus: function (e) {
this.focused = true
}
, blur: function (e) {
var that = this
setTimeout(function () { that.hide() }, 150)
this.focused = false
if (!this.mousedover && this.shown) this.hide()
}
, click: function (e) {
@ -268,10 +274,16 @@
}
, mouseenter: function (e) {
this.mousedover = true
this.$menu.find('.active').removeClass('active')
$(e.currentTarget).addClass('active')
}
, mouseleave: function (e) {
this.mousedover = false
if (!this.focused && this.shown) this.hide()
}
}

22
less/labels-badges.less → less/badges.less
View File

@ -4,7 +4,6 @@
// Base classes
.label,
.badge {
display: inline-block;
padding: 2px 4px;
@ -16,29 +15,17 @@
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @grayLight;
}
// Set unique padding and border-radii
.label {
border-radius: 3px;
}
.badge {
padding-left: 9px;
padding-right: 9px;
border-radius: 9px;
}
// Empty labels/badges collapse
.label,
.badge {
// Empty labels/badges collapse
&:empty {
display: none;
}
}
// Hover state, but only for links
a {
&.label:hover,
&.badge:hover {
a.badge {
&:hover {
color: #fff;
text-decoration: none;
cursor: pointer;
@ -47,7 +34,6 @@ a {
// Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
.label,
.badge {
// Important (red)
&-danger { background-color: @state-error-text; }
@ -68,14 +54,12 @@ a {
// Quick fix for labels/badges in buttons
.btn {
.label,
.badge {
position: relative;
top: -1px;
}
}
.btn-mini {
.label,
.badge {
top: 0;
}

4
less/bootstrap.less vendored
View File

@ -52,11 +52,11 @@
// Components: Misc
@import "thumbnails.less";
@import "media.less";
@import "labels-badges.less";
@import "badges.less";
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
@import "hero-unit.less";
@import "jumbotron.less";
// Utility classes
@import "utilities.less"; // Has to be last to override when necessary

20
less/button-groups.less
View File

@ -126,22 +126,16 @@
background-color: @btn-background-highlight;
}
.btn-primary.dropdown-toggle {
background-color: @btn-backround-primary-highlight;
background-color: @btn-background-primary-highlight;
}
.btn-warning.dropdown-toggle {
background-color: @btn-backround-warning-highlight;
background-color: @btn-background-warning-highlight;
}
.btn-danger.dropdown-toggle {
background-color: @btn-backround-danger-highlight;
background-color: @btn-background-danger-highlight;
}
.btn-success.dropdown-toggle {
background-color: @btn-backround-success-highlight;
}
.btn-info.dropdown-toggle {
background-color: @btn-backround-info-highlight;
}
.btn-inverse.dropdown-toggle {
background-color: @btn-backround-inverse-highlight;
background-color: @btn-background-success-highlight;
}
}
@ -152,8 +146,6 @@
margin-left: 0;
}
// Carets in other button sizes
.btn-mini .caret,
.btn-small .caret,
.btn-large .caret {
margin-top: 6px;
}
@ -162,6 +154,10 @@
border-right-width: 5px;
border-top-width: 5px;
}
.btn-mini .caret,
.btn-small .caret {
margin-top: 8px;
}
// Upside down carets for .dropup
.dropup .btn-large .caret {
border-bottom-width: 5px;

92
less/buttons.less
View File

@ -6,51 +6,39 @@
// Base styles
// --------------------------------------------------
// Core
// Core styles
.btn {
display: inline-block;
padding: 6px 12px;
padding: 6px 13px;
margin-bottom: 0; // For input.btn
font-size: @font-size-base;
line-height: @line-height-base;
text-align: center;
vertical-align: middle;
cursor: pointer;
.buttonBackground(@btn-background, @btn-background-highlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btn-border;
border-bottom-color: darken(@btn-border, 10%);
border: 1px solid #ccc;
border-radius: @border-radius-base;
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
.box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
// Hover state
&:hover {
color: @grayDark;
text-decoration: none;
background-position: 0 -15px;
// transition is only when going to hover, otherwise the background
// behind the gradient (there for IE<=9 fallback) gets mismatched
.transition(background-position .1s linear);
}
// Focus state for keyboard and accessibility
&:focus {
.tab-focus();
}
// Active state
&.active,
&:active {
background-image: none;
outline: 0;
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
&:hover {
text-decoration: none;
}
// Disabled state
&.disabled,
&[disabled] {
cursor: default;
&:active,
&.active {
outline: 0;
background-image: none;
.box-shadow(~"inset 0 3px 5px rgba(0,0,0,.125), 0 1px 0 rgba(255,255,255,.1)");
}
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: default;
.opacity(65);
.box-shadow(none);
}
@ -125,47 +113,25 @@ input[type="button"] {
// Alternate buttons
// --------------------------------------------------
// Provide *some* extra contrast for those who can get it
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
color: rgba(255,255,255,.75);
}
// Set the backgrounds
// -------------------------
.btn {
// reset here as of 2.0.3 due to Recess property order
border-color: #c5c5c5;
border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
.buttonBackground(@btn-background, @btn-background-highlight, @gray, 0 1px 0 rgba(255,255,255,.75));
}
// Primary appears as blue
.btn-primary {
.buttonBackground(@btn-backround-primary, @btn-backround-primary-highlight);
.buttonBackground(@btn-background-primary, @btn-background-primary-highlight);
}
// Warning appears are orange
.btn-warning {
.buttonBackground(@btn-backround-warning, @btn-backround-warning-highlight);
.buttonBackground(@btn-background-warning, @btn-background-warning-highlight);
}
// Danger and error appear as red
.btn-danger {
.buttonBackground(@btn-backround-danger, @btn-backround-danger-highlight);
.buttonBackground(@btn-background-danger, @btn-background-danger-highlight);
}
// Success appears as green
.btn-success {
.buttonBackground(@btn-backround-success, @btn-backround-success-highlight);
.buttonBackground(@btn-background-success, @btn-background-success-highlight);
}
// Info appears as a neutral blue
.btn-info {
.buttonBackground(@btn-backround-info, @btn-backround-info-highlight);
}
// Inverse appears as dark gray
.btn-inverse {
.buttonBackground(@btn-backround-inverse, @btn-backround-inverse-highlight);
}
// Link buttons
@ -174,7 +140,8 @@ input[type="button"] {
// Make a button look and behave like a link
.btn-link,
.btn-link:active,
.btn-link[disabled] {
.btn-link[disabled],
fieldset[disabled] .btn-link {
background-color: transparent;
background-image: none;
.box-shadow(none);
@ -190,7 +157,12 @@ input[type="button"] {
text-decoration: underline;
background-color: transparent;
}
.btn-link[disabled]:hover {
color: @grayDark;
text-decoration: none;
.btn-link {
&[disabled],
fieldset[disabled] & {
&:hover {
color: @grayDark;
text-decoration: none;
}
}
}

25
less/carousel.less
View File

@ -119,6 +119,31 @@
}
}
// Carousel indicator pips
// -----------------------------
.carousel-indicators {
position: absolute;
top: 15px;
right: 15px;
z-index: 5;
margin: 0;
list-style: none;
li {
display: block;
float: left;
width: 10px;
height: 10px;
margin-left: 5px;
text-indent: -999px;
background-color: #ccc;
background-color: rgba(255,255,255,.25);
border-radius: 5px;
}
.active {
background-color: #fff;
}
}
// Caption for text below images

4
less/close.less
View File

@ -8,11 +8,11 @@
font-size: 20px;
font-weight: bold;
line-height: @line-height-base;
color: @black;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20);
&:hover {
color: @black;
color: #000;
text-decoration: none;
cursor: pointer;
.opacity(40);

78
less/dropdowns.less
View File

@ -20,7 +20,7 @@
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid @black;
border-top: 4px solid #000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
@ -64,7 +64,7 @@
}
// Links within the dropdown menu
li > a {
> li > a {
display: block;
padding: 3px 20px;
clear: both;
@ -78,8 +78,7 @@
// Hover state
// -----------
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
.dropdown-menu li > a:focus {
text-decoration: none;
color: @dropdown-link-color-hover;
#gradient > .vertical(@dropdown-link-background-hover, darken(@dropdown-link-background-hover, 5%));
@ -87,8 +86,8 @@
// Active state
// ------------
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
color: @dropdown-link-color-active;
text-decoration: none;
outline: 0;
@ -98,12 +97,12 @@
// Disabled state
// --------------
// Gray out text and ensure the hover state remains gray
.dropdown-menu .disabled > a,
.dropdown-menu .disabled > a:hover {
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover {
color: @grayLight;
}
// Nuke hover effects
.dropdown-menu .disabled > a:hover {
.dropdown-menu > .disabled > a:hover {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
@ -135,7 +134,7 @@
// Reverse the caret
.caret {
border-top: 0;
border-bottom: 4px solid @black;
border-bottom: 4px solid #000;
content: "";
}
// Different positioning for bottom up menu
@ -146,64 +145,6 @@
}
}
// Sub menus
// ---------------------------
.dropdown-submenu {
position: relative;
}
// Default dropdowns
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
border-radius: 0 4px 4px 4px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
// Dropups
.dropup .dropdown-submenu > .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -2px;
border-radius: 4px 4px 4px 0;
}
// Caret to indicate there is a submenu
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: darken(@dropdown-background, 20%);
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: @dropdown-link-color-hover;
}
// Left aligned submenus
.dropdown-submenu.pull-left {
// Undo the float
// Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
float: none;
// Positioning the submenu
> .dropdown-menu {
left: -100%;
margin-left: 10px;
border-radius: 4px 0 4px 4px;
}
}
// Tweak nav headers
// -----------------
// Increase padding from 15px to 20px on sides
@ -216,5 +157,4 @@
// ---------
.typeahead {
z-index: 1051;
margin-top: 2px; // give it some space to breathe
}

366
less/forms.less
View File

@ -307,7 +307,7 @@ input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"] {
height: 30px;
height: @input-height;
}
// Control row for multiple inputs per line
.controls-row {
@ -331,21 +331,24 @@ textarea[class*="span"],
// --------------
// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
cursor: not-allowed;
background-color: @input-background-disabled;
input,
select,
textarea {
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-background-disabled;
}
}
// Explicitly reset the colors here
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
background-color: transparent;
input[type="radio"],
input[type="checkbox"] {
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: transparent;
}
}
@ -422,273 +425,112 @@ select:focus:invalid {
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
margin-bottom: 5px;
font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating
// Input groups
// --------------------------------------------------
// Reset the white space collapse hack
input,
select,
.uneditable-input,
.dropdown-menu {
font-size: @font-size-base;
// Base styles
// -------------------------
.input-group {
display: table;
// Undo padding and float of grid classes
&[class*="span"] {
float: none;
padding: 0;
}
input,
select,
.uneditable-input {
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
float: none; // Undo the float from grid sizing
margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
font-size: @font-size-base;
vertical-align: top;
border-radius: 0 @input-border-radius @input-border-radius 0;
// Make input on top when focused so blue border and shadow always show
&:focus {
z-index: 2;
}
}
input[class*="span"],
select[class*="span"],
.uneditable-input[class*="span"] {
margin: 0;
}
.add-on {
display: inline-block;
width: auto;
height: @line-height-base;
min-width: 16px;
padding: 6px;
font-size: @font-size-base;
font-weight: normal;
line-height: @line-height-base;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: @grayLighter;
border: 1px solid #ccc;
}
.add-on,
.btn,
.btn-group > .dropdown-toggle {
vertical-align: top;
border-radius: 0;
}
.active {
background-color: @state-success-background;
border-color: @state-success-text;
width: 100%;
}
}
.input-prepend {
.add-on,
.btn {
margin-right: -1px;
}
.add-on:first-child,
.btn:first-child {
// FYI, `.btn:first-child` accounts for a button group that's prepended
border-radius: @input-border-radius 0 0 @input-border-radius;
}
// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group input,
.input-group .uneditable-input {
display: table-cell;
margin: 0;
border-radius: 0;
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
vertical-align: middle; // Match the inputs
}
.input-append {
input,
select,
.uneditable-input {
border-radius: @input-border-radius 0 0 @input-border-radius;
+ .btn-group .btn,
+ .btn-group .btn:last-child {
border-radius: 0 @input-border-radius @input-border-radius 0;
}
}
.add-on,
.btn,
.btn-group {
margin-left: -1px;
}
.add-on:last-child,
.btn:last-child,
.btn-group:last-child > .dropdown-toggle {
border-radius: 0 @input-border-radius @input-border-radius 0;
}
// Text input groups
// -------------------------
.input-group-addon {
.box-sizing(border-box);
padding: 6px 8px;
font-size: @font-size-base;
font-weight: normal;
line-height: @line-height-base;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: @grayLighter;
border: 1px solid #ccc;
}
// Remove all border-radius for inputs with both prepend and append
.input-prepend.input-append {
input,
select,
.uneditable-input {
border-radius: 0;
+ .btn-group .btn {
border-radius: 0 @input-border-radius @input-border-radius 0;
}
}
.add-on:first-child,
.btn:first-child {
margin-right: -1px;
border-radius: @input-border-radius 0 0 @input-border-radius;
}
.add-on:last-child,
.btn:last-child {
margin-left: -1px;
border-radius: 0 @input-border-radius @input-border-radius 0;
}
.btn-group:first-child {
margin-left: 0;
// Reset rounded corners
.input-group input:first-child,
.input-group .uneditable-input:first-child,
.input-group-addon:first-child {
.border-left-radius(@border-radius-base);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group input:last-child,
.input-group .uneditable-input:last-child,
.input-group-addon:last-child {
.border-right-radius(@border-radius-base);
}
.input-group-addon:last-child {
border-left: 0;
}
// Button input groups
// -------------------------
.input-group-btn,
.input-group-btn .btn {
white-space: nowrap;
}
.input-group-btn > .btn {
float: left; // Collapse white-space
border-radius: 0;
+ .btn {
border-left: 0;
}
}
// SEARCH FORM
// -----------
input.search-query {
padding-right: 14px;
padding-right: 4px \9;
padding-left: 14px;
padding-left: 4px \9; /* IE8 doesn't have border radius, so don't indent the padding */
margin-bottom: 0; // Remove the default margin on all inputs
border-radius: @input-border-radius-search;
.input-group-btn.btn-group {
display: table-cell;
}
/* Allow for input prepend/append in search forms */
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
border-radius: 0; // Override due to specificity
}
.form-search .input-append .search-query {
border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
}
.form-search .input-append .btn {
border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
}
.form-search .input-prepend .search-query {
border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
}
.form-search .input-prepend .btn {
border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
}
// HORIZONTAL & VERTICAL FORMS
// ---------------------------
// Common properties
// -----------------
.form-search,
.form-inline,
.form-horizontal {
input,
textarea,
select,
.help-inline,
.uneditable-input,
.input-prepend,
.input-append {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
// Prepend
.input-group-btn {
&:first-child > .btn,
&.btn-group:first-child > .btn {
border-right: 0;
}
// Re-hide hidden elements due to specifity
.hide {
display: none;
&:first-child > .btn,
&.btn-group:first-child > .btn {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
.form-search label,
.form-inline label,
.form-search .btn-group,
.form-inline .btn-group {
display: inline-block;
}
// Remove margin for input-prepend/-append
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
margin-bottom: 0;
}
// Inline checkbox/radio labels (remove padding on left)
.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
padding-left: 0;
label {
margin-bottom: 0;
vertical-align: middle;
}
}
// Remove float and margin, set to inline-block
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-right: 3px;
margin-left: 0;
}
// Margin to space out fieldsets
.control-group {
margin-bottom: @line-height-base / 2;
}
// Legend collapses margin, so next element is responsible for spacing
legend + .control-group {
margin-top: @line-height-base;
-webkit-margin-top-collapse: separate;
}
// Horizontal-specific styles
// --------------------------
.form-horizontal {
// Increase spacing between groups
.control-group {
margin-bottom: @line-height-base;
.clearfix();
}
// Float the labels left
.control-label {
float: left;
width: @component-offset-horizontal - 20;
padding-top: 5px;
text-align: right;
}
// Move over all input controls and content
.controls {
margin-left: @component-offset-horizontal;
}
// Remove bottom margin on block level help text since that's accounted for on .control-group
.help-block {
margin-bottom: 0;
}
// And apply it only to .help-block instances that follow a form control
input,
select,
textarea,
.uneditable-input,
.input-prepend,
.input-append {
+ .help-block {
margin-top: @line-height-base / 2;
}
}
// Move over buttons in .form-actions to align with .controls
.form-actions {
padding-left: @component-offset-horizontal;
// Append
.input-group-btn {
&:last-child > .btn,
&.btn-group:last-child > .btn:first-child {
border-left: 0;
}
&:last-child > .btn,
&.btn-group:last-child > .btn {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}

4
less/grid.less
View File

@ -13,10 +13,6 @@
#grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
// Reset utility classes due to specificity
[class*="span"].hide {
display: none;
}
[class*="span"].pull-right {
float: right;
}

10
less/hero-unit.less → less/jumbotron.less
View File

@ -1,22 +1,22 @@
//
// Hero unit
// Jumbotron
// --------------------------------------------------
.hero-unit {
.jumbotron {
padding: 60px;
margin-bottom: 30px;
font-size: 18px;
font-weight: 200;
line-height: @line-height-base * 1.5;
color: @hero-lead-color;
background-color: @hero-background;
color: @jumbotron-lead-color;
background-color: @jumbotron-background;
border-radius: 6px;
h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
color: @hero-heading-color;
color: @jumbotron-heading-color;
letter-spacing: -1px;
}
li {

4
less/media.less
View File

@ -36,10 +36,10 @@
// Media image alignment
// -------------------------
.media .pull-left {
.media > .pull-left {
margin-right: 10px;
}
.media .pull-right {
.media > .pull-right {
margin-left: 10px;
}

31
less/mixins.less
View File

@ -338,7 +338,7 @@
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
background-color: @endColor;
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
@ -405,24 +405,25 @@
// Button backgrounds
// ------------------
.buttonBackground(@startColor, @endColor, @text-color: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
.buttonBackground(@background-start, @background-end, @text-color: #fff, @text-shadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: @text-color;
text-shadow: @textShadow;
#gradient > .vertical(@startColor, @endColor);
border-color: @endColor @endColor darken(@endColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
.reset-filter();
text-shadow: @text-shadow;
#gradient > .vertical(@background-start, @background-end);
border-color: darken(@background-end, 7.5%);
// in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] {
color: @text-color;
background-color: @endColor;
}
// IE8 can't handle box-shadow to show active, so we darken a bit ourselves
&:hover,
&:active,
&.active {
background-color: darken(@endColor, 10%) e("\9");
color: @text-color;
background-color: @background-end;
background-position: 0 -15px;
}
&:active,
&.active,
&[disabled],
&.disabled,
fieldset[disabled] & {
background-image: none;
}
}

3
less/modals.less
View File

@ -10,7 +10,7 @@
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
background-color: @black;
background-color: #000;
// Fade for backdrop
&.fade { opacity: 0; }
}
@ -26,6 +26,7 @@
top: 10%;
left: 50%;
z-index: @zindex-modal;
display: none;
width: 560px;
margin-left: -280px;
background-color: #fff;

1
less/navbar.less
View File

@ -222,7 +222,6 @@
}
.navbar .nav .dropdown-toggle .caret {
margin-top: 8px;
}
// Hover

7
less/responsive-utilities.less
View File

@ -3,6 +3,13 @@
// --------------------------------------------------
// IE10 Metro responsive
// Required for Windows 8 Metro split-screen snapping with IE10
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport{
width: device-width;
}
// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden {

4
less/utilities.less
View File

@ -21,10 +21,10 @@
// -------------------------
.hide {
display: none;
display: none !important;
}
.show {
display: block;
display: block !important;
}
.invisible {
visibility: hidden;

34
less/variables.less
View File

@ -9,7 +9,6 @@
// Grays
// -------------------------
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@ -77,26 +76,19 @@
// -------------------------
@btn-background: #fff;
@btn-background-highlight: darken(#fff, 10%);
@btn-border: #bbb;
@btn-background-highlight: #eaeaea;
@btn-backround-primary: @link-color;
@btn-backround-primary-highlight: spin(@btn-backround-primary, 20%);
@btn-background-primary: @link-color;
@btn-background-primary-highlight: darken(@link-color, 10%);
@btn-backround-info: #5bc0de;
@btn-backround-info-highlight: #2f96b4;
@btn-background-success: #62c462;
@btn-background-success-highlight: #51a351;
@btn-backround-success: #62c462;
@btn-backround-success-highlight: #51a351;
@btn-background-warning: lighten(#f89406, 15%);
@btn-background-warning-highlight: #f89406;
@btn-backround-warning: lighten(#f89406, 15%);
@btn-backround-warning-highlight: #f89406;
@btn-backround-danger: #ee5f5b;
@btn-backround-danger-highlight: #bd362f;
@btn-backround-inverse: #444;
@btn-backround-inverse-highlight: @grayDarker;
@btn-background-danger: #ee5f5b;
@btn-background-danger-highlight: #bd362f;
// Forms
@ -199,12 +191,12 @@
@pagination-border: #ddd;
// Hero unit
// Jumbotron
// -------------------------
@hero-background: @grayLighter;
@hero-heading-color: inherit;
@hero-lead-color: inherit;
@jumbotron-background: @grayLighter;
@jumbotron-heading-color: inherit;
@jumbotron-lead-color: inherit;
// Form states and alerts

6
package.json
View File

@ -17,10 +17,10 @@
}
]
, "devDependencies": {
"uglify-js": "1.2.6"
, "jshint": "0.6.1"
"uglify-js": "1.3.4"
, "jshint": "0.9.1"
, "recess": "1.0.3"
, "connect": "2.1.3"
, "hogan.js": "2.0.0"
}
}
}