Skip to content

B
bootstrap
Commit 03e6dc66 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

Merge branch '2.0.1-wip'

parents 9143d8e4 09162264
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1730 additions and 906 deletions
README.md
View file @ 03e6dc66
...@@ -62,12 +62,10 @@ Developers ...@@ -62,12 +62,10 @@ Developers
We have included a makefile with convenience methods for working with the Bootstrap library. We have included a makefile with convenience methods for working with the Bootstrap library.
+ **build** - `make` + **build** - `make`
This will run the less compiler on the bootstrap lib and regenerate the docs dir. Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages. Requires lessc and uglify-js. <a href="http://twitter.github.com/bootstrap/less.html#compiling">Read more in our docs &raquo;</a>
The lessc compiler is required for this command to run.
+ **watch** - `make watch` + **watch** - `make watch`
This is a convenience method for watching your less files and automatically building them whenever you save. This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
Watchr is required for this command to run.
Authors Authors
......
docs/assets/css/bootstrap-responsive.css
View file @ 03e6dc66
...@@ -7,6 +7,16 @@ ...@@ -7,6 +7,16 @@
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
*/ */
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.hidden { .hidden {
display: none; display: none;
visibility: hidden; visibility: hidden;
...@@ -25,7 +35,7 @@ ...@@ -25,7 +35,7 @@
.uneditable-input { .uneditable-input {
display: block; display: block;
width: 100%; width: 100%;
height: 28px; min-height: 28px;
/* Make inputs at least the height of their button counterpart */ /* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */ /* Makes inputs behave like true block-level elements */
...@@ -84,7 +94,7 @@ ...@@ -84,7 +94,7 @@
position: static; position: static;
} }
} }
@media (max-width: 768px) { @media (max-width: 767px) {
.container { .container {
width: auto; width: auto;
padding: 0 20px; padding: 0 20px;
...@@ -102,7 +112,7 @@ ...@@ -102,7 +112,7 @@
margin: 0; margin: 0;
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 979px) {
.row { .row {
margin-left: -20px; margin-left: -20px;
*zoom: 1; *zoom: 1;
...@@ -205,40 +215,40 @@ ...@@ -205,40 +215,40 @@
.row-fluid > [class*="span"]:first-child { .row-fluid > [class*="span"]:first-child {
margin-left: 0; margin-left: 0;
} }
.row-fluid .span1 { .row-fluid > .span1 {
width: 5.801104972%; width: 5.801104972%;
} }
.row-fluid .span2 { .row-fluid > .span2 {
width: 14.364640883%; width: 14.364640883%;
} }
.row-fluid .span3 { .row-fluid > .span3 {
width: 22.928176794%; width: 22.928176794%;
} }
.row-fluid .span4 { .row-fluid > .span4 {
width: 31.491712705%; width: 31.491712705%;
} }
.row-fluid .span5 { .row-fluid > .span5 {
width: 40.055248616%; width: 40.055248616%;
} }
.row-fluid .span6 { .row-fluid > .span6 {
width: 48.618784527%; width: 48.618784527%;
} }
.row-fluid .span7 { .row-fluid > .span7 {
width: 57.182320438000005%; width: 57.182320438000005%;
} }
.row-fluid .span8 { .row-fluid > .span8 {
width: 65.74585634900001%; width: 65.74585634900001%;
} }
.row-fluid .span9 { .row-fluid > .span9 {
width: 74.30939226%; width: 74.30939226%;
} }
.row-fluid .span10 { .row-fluid > .span10 {
width: 82.87292817100001%; width: 82.87292817100001%;
} }
.row-fluid .span11 { .row-fluid > .span11 {
width: 91.436464082%; width: 91.436464082%;
} }
.row-fluid .span12 { .row-fluid > .span12 {
width: 99.999999993%; width: 99.999999993%;
} }
input.span1, textarea.span1, .uneditable-input.span1 { input.span1, textarea.span1, .uneditable-input.span1 {
...@@ -278,7 +288,7 @@ ...@@ -278,7 +288,7 @@
width: 714px; width: 714px;
} }
} }
@media (max-width: 980px) { @media (max-width: 979px) {
body { body {
padding-top: 0; padding-top: 0;
} }
...@@ -314,6 +324,10 @@ ...@@ -314,6 +324,10 @@
.navbar .nav > .divider-vertical { .navbar .nav > .divider-vertical {
display: none; display: none;
} }
.navbar .nav .nav-header {
color: #999999;
text-shadow: none;
}
.navbar .nav > li > a, .navbar .dropdown-menu a { .navbar .nav > li > a, .navbar .dropdown-menu a {
padding: 6px 15px; padding: 6px 15px;
font-weight: bold; font-weight: bold;
...@@ -486,40 +500,40 @@ ...@@ -486,40 +500,40 @@
.row-fluid > [class*="span"]:first-child { .row-fluid > [class*="span"]:first-child {
margin-left: 0; margin-left: 0;
} }
.row-fluid .span1 { .row-fluid > .span1 {
width: 5.982905983%; width: 5.982905983%;
} }
.row-fluid .span2 { .row-fluid > .span2 {
width: 14.529914530000001%; width: 14.529914530000001%;
} }
.row-fluid .span3 { .row-fluid > .span3 {
width: 23.076923077%; width: 23.076923077%;
} }
.row-fluid .span4 { .row-fluid > .span4 {
width: 31.623931624%; width: 31.623931624%;
} }
.row-fluid .span5 { .row-fluid > .span5 {
width: 40.170940171000005%; width: 40.170940171000005%;
} }
.row-fluid .span6 { .row-fluid > .span6 {
width: 48.717948718%; width: 48.717948718%;
} }
.row-fluid .span7 { .row-fluid > .span7 {
width: 57.264957265%; width: 57.264957265%;
} }
.row-fluid .span8 { .row-fluid > .span8 {
width: 65.81196581200001%; width: 65.81196581200001%;
} }
.row-fluid .span9 { .row-fluid > .span9 {
width: 74.358974359%; width: 74.358974359%;
} }
.row-fluid .span10 { .row-fluid > .span10 {
width: 82.905982906%; width: 82.905982906%;
} }
.row-fluid .span11 { .row-fluid > .span11 {
width: 91.45299145300001%; width: 91.45299145300001%;
} }
.row-fluid .span12 { .row-fluid > .span12 {
width: 100%; width: 100%;
} }
input.span1, textarea.span1, .uneditable-input.span1 { input.span1, textarea.span1, .uneditable-input.span1 {
......
docs/assets/css/bootstrap.css
View file @ 03e6dc66
This diff is collapsed.
docs/assets/css/docs.css
View file @ 03e6dc66
...@@ -181,7 +181,7 @@ hr.soften { ...@@ -181,7 +181,7 @@ hr.soften {
top: 40px; top: 40px;
left: 0; left: 0;
right: 0; right: 0;
z-index: 1030; z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
border-color: #d5d5d5; border-color: #d5d5d5;
border-width: 0 0 1px; /* drop the border on the fixed edges */ border-width: 0 0 1px; /* drop the border on the fixed edges */
-webkit-border-radius: 0; -webkit-border-radius: 0;
...@@ -190,6 +190,7 @@ hr.soften { ...@@ -190,6 +190,7 @@ hr.soften {
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
} }
.subnav-fixed .nav { .subnav-fixed .nav {
width: 938px; width: 938px;
...@@ -481,9 +482,6 @@ hr.soften { ...@@ -481,9 +482,6 @@ hr.soften {
/* Misc /* Misc
-------------------------------------------------- */ -------------------------------------------------- */
pre.prettyprint {
overflow: hidden;
}
.browser-support { .browser-support {
max-width: 100%; max-width: 100%;
...@@ -546,28 +544,12 @@ form.well { ...@@ -546,28 +544,12 @@ form.well {
/* Icons /* Icons
------------------------- */ ------------------------- */
.the-icons { .the-icons {
margin-bottom: 18px; margin-left: 0;
} list-style: none;
.the-icons i {
display: block;
margin-bottom: 5px;
} }
.the-icons i:hover { .the-icons i:hover {
background-color: rgba(255,0,0,.25); background-color: rgba(255,0,0,.25);
} }
.the-icons i:after {
display: block;
content: attr(class);
font-style: normal;
margin-left: 20px;
width: 140px;
}
#javascript input[type=checkbox] {
position: relative;
top: -1px;
display: inline;
margin-left: 6px;
}
/* Eaxmples page /* Eaxmples page
------------------------- */ ------------------------- */
......
docs/assets/js/bootstrap-alert.js
View file @ 03e6dc66
...@@ -51,11 +51,14 @@ ...@@ -51,11 +51,14 @@
$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
$parent.removeClass('in') $parent
.trigger('close')
.removeClass('in')
function removeElement() { function removeElement() {
$parent.remove() $parent
$parent.trigger('closed') .trigger('closed')
.remove()
} }
$.support.transition && $parent.hasClass('fade') ? $.support.transition && $parent.hasClass('fade') ?
...@@ -88,4 +91,4 @@ ...@@ -88,4 +91,4 @@
$('body').on('click.alert.data-api', dismiss, Alert.prototype.close) $('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
docs/assets/js/bootstrap-button.js
View file @ 03e6dc66
...@@ -91,8 +91,8 @@ ...@@ -91,8 +91,8 @@
$(function () { $(function () {
$('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) { $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
$(e.target).button('toggle') $(e.currentTarget).button('toggle')
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
docs/assets/js/bootstrap-carousel.js
View file @ 03e6dc66
...@@ -61,6 +61,7 @@ ...@@ -61,6 +61,7 @@
, pause: function () { , pause: function () {
clearInterval(this.interval) clearInterval(this.interval)
this.interval = null
return this return this
} }
...@@ -82,6 +83,8 @@ ...@@ -82,6 +83,8 @@
, fallback = type == 'next' ? 'first' : 'last' , fallback = type == 'next' ? 'first' : 'last'
, that = this , that = this
if (!$next.length) return
this.sliding = true this.sliding = true
isCycling && this.pause() isCycling && this.pause()
...@@ -151,4 +154,4 @@ ...@@ -151,4 +154,4 @@
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
docs/assets/js/bootstrap-collapse.js
View file @ 03e6dc66
...@@ -133,4 +133,4 @@ ...@@ -133,4 +133,4 @@
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
docs/assets/js/bootstrap-dropdown.js
View file @ 03e6dc66
...@@ -89,4 +89,4 @@ ...@@ -89,4 +89,4 @@
$('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle) $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
docs/assets/js/bootstrap-modal.js
View file @ 03e6dc66
...@@ -177,7 +177,7 @@ ...@@ -177,7 +177,7 @@
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
, data = $this.data('modal') , data = $this.data('modal')
, options = $.extend({}, $.fn.modal.defaults, typeof option == 'object' && option) , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('modal', (data = new Modal(this, options))) if (!data) $this.data('modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]() if (typeof option == 'string') data[option]()
else if (options.show) data.show() else if (options.show) data.show()
...@@ -207,4 +207,4 @@ ...@@ -207,4 +207,4 @@
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
docs/assets/js/bootstrap-popover.js
View file @ 03e6dc66
...@@ -92,4 +92,4 @@ ...@@ -92,4 +92,4 @@
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
docs/assets/js/bootstrap-scrollspy.js
View file @ 03e6dc66
...@@ -122,4 +122,4 @@ ...@@ -122,4 +122,4 @@
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
docs/assets/js/bootstrap-tab.js
View file @ 03e6dc66
...@@ -127,4 +127,4 @@ ...@@ -127,4 +127,4 @@
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
docs/assets/js/bootstrap-tooltip.js
View file @ 03e6dc66
...@@ -267,4 +267,4 @@ ...@@ -267,4 +267,4 @@
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
} }
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
docs/assets/js/bootstrap-transition.js
View file @ 03e6dc66
...@@ -47,5 +47,5 @@ ...@@ -47,5 +47,5 @@
})() })()
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
docs/assets/js/bootstrap-typeahead.js
View file @ 03e6dc66
...@@ -268,4 +268,4 @@ ...@@ -268,4 +268,4 @@
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
docs/base-css.html
View file @ 03e6dc66
This diff is collapsed.
docs/components.html
View file @ 03e6dc66
This diff is collapsed.
docs/download.html
View file @ 03e6dc66
...@@ -7,17 +7,17 @@ ...@@ -7,17 +7,17 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles --> <!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico"> <link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png"> <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
<div class="page-header"> <div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a> <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1> <h1>
1. Chose components 1. Choose components
<small>Get just the CSS you need</small> <small>Get just the CSS you need</small>
</h1> </h1>
</div> </div>
......
docs/examples.html
View file @ 03e6dc66
...@@ -7,17 +7,17 @@ ...@@ -7,17 +7,17 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles --> <!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico"> <link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png"> <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
......
docs/examples/fluid.html
View file @ 03e6dc66
...@@ -7,11 +7,6 @@ ...@@ -7,11 +7,6 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles --> <!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet"> <link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css"> <style type="text/css">
...@@ -25,6 +20,11 @@ ...@@ -25,6 +20,11 @@
</style> </style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico"> <link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
......
docs/examples/hero.html
View file @ 03e6dc66
...@@ -7,11 +7,6 @@ ...@@ -7,11 +7,6 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles --> <!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet"> <link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css"> <style type="text/css">
...@@ -22,6 +17,11 @@ ...@@ -22,6 +17,11 @@
</style> </style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico"> <link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
......
docs/examples/starter-template.html
View file @ 03e6dc66
...@@ -7,11 +7,6 @@ ...@@ -7,11 +7,6 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles --> <!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet"> <link href="../assets/css/bootstrap.css" rel="stylesheet">
<style> <style>
...@@ -21,6 +16,11 @@ ...@@ -21,6 +16,11 @@
</style> </style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico"> <link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
......
docs/index.html
View file @ 03e6dc66
...@@ -7,17 +7,17 @@ ...@@ -7,17 +7,17 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles --> <!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico"> <link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png"> <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
...@@ -89,18 +89,17 @@ ...@@ -89,18 +89,17 @@
<ul class="quick-links"> <ul class="quick-links">
<li><a href="./upgrading.html">Upgrading from 1.4</a></li> <li><a href="./upgrading.html">Upgrading from 1.4</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li> <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li> <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap &amp; changelog</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li>
<li class="divider">&middot;</li> <li class="divider">&middot;</li>
<li> <li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="114px" height="20px"></iframe> <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
</li> </li>
<li> <li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe> <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
</li> </li>
<li class="divider">&middot;</li> <li class="divider">&middot;</li>
<li class="follow-btn"> <li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a> <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="225px" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
</li> </li>
<li class="tweet-btn"> <li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
...@@ -122,7 +121,7 @@ ...@@ -122,7 +121,7 @@
<div class="span4"> <div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png"> <img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
<h2>For all skill levels</h2> <h2>For all skill levels</h2>
<p>Bootstrap is designed to help people of all skill level&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p> <p>Bootstrap is designed to help people of all skill levels&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p>
</div> </div>
<div class="span4"> <div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png"> <img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
......
docs/javascript.html
View file @ 03e6dc66
This diff is collapsed.
docs/less.html
View file @ 03e6dc66
...@@ -7,17 +7,17 @@ ...@@ -7,17 +7,17 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles --> <!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico"> <link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png"> <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
</div> </div>
<div class="span4"> <div class="span4">
<h3>Operations</h3> <h3>Operations</h3>
<p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.</p> <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.</p>
</div> </div>
</div> </div>
</section> </section>
...@@ -348,13 +348,13 @@ ...@@ -348,13 +348,13 @@
<tbody> <tbody>
<tr> <tr>
<td class="span3"><code>@warningText</code></td> <td class="span3"><code>@warningText</code></td>
<td>#f3edd2</td> <td>#c09853</td>
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td> <td><span class="swatch" style="background-color: #c09853;"></span></td>
</tr> </tr>
<tr> <tr>
<td><code>@warningBackground</code></td> <td><code>@warningBackground</code></td>
<td>#c09853</td> <td>#f3edd2</td>
<td><span class="swatch" style="background-color: #c09853;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
</tr> </tr>
<tr> <tr>
<td><code>@errorText</code></td> <td><code>@errorText</code></td>
...@@ -604,7 +604,7 @@ ...@@ -604,7 +604,7 @@
<tr> <tr>
<td><code>.scale()</code></td> <td><code>.scale()</code></td>
<td><code>@ratio</code></td> <td><code>@ratio</code></td>
<td>Scale an element to <em>n</em> times it's original size</td> <td>Scale an element to <em>n</em> times its original size</td>
</tr> </tr>
<tr> <tr>
<td><code>.translate()</code></td> <td><code>.translate()</code></td>
...@@ -614,7 +614,7 @@ ...@@ -614,7 +614,7 @@
<tr> <tr>
<td><code>.background-clip()</code></td> <td><code>.background-clip()</code></td>
<td><code>@clip</code></td> <td><code>@clip</code></td>
<td>Crop the backgroud of an element (useful for <code>border-radius</code>)</td> <td>Crop the background of an element (useful for <code>border-radius</code>)</td>
</tr> </tr>
<tr> <tr>
<td><code>.background-size()</code></td> <td><code>.background-size()</code></td>
...@@ -717,8 +717,8 @@ ...@@ -717,8 +717,8 @@
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h3>Node with makefile</h3> <h3>Node with makefile</h3>
<p>Install the LESS command line compiler with npm by running the following command:</p> <p>Install the LESS command line compiler globally with npm by running the following command:</p>
<pre>$ npm install less</pre> <pre>$ npm install -g less</pre>
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p> <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
<p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p> <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
</div><!-- /span4 --> </div><!-- /span4 -->
......
docs/scaffolding.html
View file @ 03e6dc66
...@@ -7,17 +7,17 @@ ...@@ -7,17 +7,17 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles --> <!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico"> <link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png"> <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
...@@ -81,7 +81,9 @@ ...@@ -81,7 +81,9 @@
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p> <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
<div class="subnav"> <div class="subnav">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li><a href="#grid-system">Grid system</a></li> <li><a href="#gridSystem">Grid system</a></li>
<li><a href="#fluidGridSystem">Fluid gird system</a></li>
<li><a href="#gridCustomization">Customizing</a></li>
<li><a href="#layouts">Layouts</a></li> <li><a href="#layouts">Layouts</a></li>
<li><a href="#responsive">Responsive design</a></li> <li><a href="#responsive">Responsive design</a></li>
</ul> </ul>
...@@ -92,12 +94,11 @@ ...@@ -92,12 +94,11 @@
<!-- Grid system <!-- Grid system
================================================== --> ================================================== -->
<section id="grid-system"> <section id="gridSystem">
<div class="page-header"> <div class="page-header">
<h1>Grid system <small>12 columns with a responsive twist</small></h1> <h1>Default grid system <small>12 columns with a responsive twist</small></h1>
</div> </div>
<h2>Default 940px grid</h2>
<div class="row show-grid"> <div class="row show-grid">
<div class="span1">1</div> <div class="span1">1</div>
<div class="span1">1</div> <div class="span1">1</div>
...@@ -173,7 +174,8 @@ ...@@ -173,7 +174,8 @@
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p> <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
<h4>Example</h4> <h3>Example</h3>
<p>Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested <code>.span3</code> columns should be placed within a <code>.span6</code>.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="span6"> <div class="span6">
Level 1 of column Level 1 of column
...@@ -187,7 +189,7 @@ ...@@ -187,7 +189,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div><!-- /span6 -->
<div class="span6"> <div class="span6">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="row"&gt; &lt;div class="row"&gt;
...@@ -202,8 +204,112 @@ ...@@ -202,8 +204,112 @@
</pre> </pre>
</div> </div>
</div> </div>
</section>
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<div class="page-header">
<h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
</div>
<h2>Grid customization</h2> <h2>Fluid columns</h2>
<div class="row-fluid show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
<div class="row-fluid show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row-fluid show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<h3>Percents, not pixels</h3>
<p>The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
</div>
<div class="span4">
<h3>Fluid rows</h3>
<p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
</div>
<div class="span4">
<h3>Markup</h3>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
<h2>Fluid nesting</h2>
<div class="row">
<div class="span6">
<p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
<div class="row-fluid show-grid">
<div class="span12">
Fluid 12
<div class="row-fluid show-grid">
<div class="span6">
Fluid 6
</div>
<div class="span6">
Fluid 6
</div>
</div>
</div>
</div>
</div>
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span12"&gt;
Level 1 of column
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<div class="page-header">
<h1>Grid customization</h1>
</div>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -242,7 +348,7 @@ ...@@ -242,7 +348,7 @@
</div> </div>
<div class="span4"> <div class="span4">
<h3>How to customize</h3> <h3>How to customize</h3>
<p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.</p> <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.</p>
</div> </div>
<div class="span4"> <div class="span4">
<h3>Staying responsive</h3> <h3>Staying responsive</h3>
...@@ -265,8 +371,8 @@ ...@@ -265,8 +371,8 @@
<div class="span6"> <div class="span6">
<h2>Fixed layout</h2> <h2>Fixed layout</h2>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.</p> <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.</p>
<div class="minicon-layout"> <div class="mini-layout">
<div class="minicon-layout-body"></div> <div class="mini-layout-body"></div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;body&gt; &lt;body&gt;
...@@ -279,9 +385,9 @@ ...@@ -279,9 +385,9 @@
<div class="span6"> <div class="span6">
<h2>Fluid layout</h2> <h2>Fluid layout</h2>
<p><code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p> <p><code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<div class="minicon-layout fluid"> <div class="mini-layout fluid">
<div class="minicon-layout-sidebar"></div> <div class="mini-layout-sidebar"></div>
<div class="minicon-layout-body"></div> <div class="mini-layout-body"></div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="container-fluid"&gt; &lt;div class="container-fluid"&gt;
...@@ -315,7 +421,7 @@ ...@@ -315,7 +421,7 @@
</div> </div>
<div class="span8"> <div class="span8">
<h2>Supported devices</h2> <h2>Supported devices</h2>
<p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p> <p>Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -338,8 +444,8 @@ ...@@ -338,8 +444,8 @@
</tr> </tr>
<tr> <tr>
<td>Landscape tablets</td> <td>Landscape tablets</td>
<td>768px to 980px</td> <td>768px to 979px</td>
<td>44px</td> <td>42px</td>
<td>20px</td> <td>20px</td>
</tr> </tr>
<tr> <tr>
...@@ -357,6 +463,10 @@ ...@@ -357,6 +463,10 @@
</tbody> </tbody>
</table> </table>
<h3>Requires meta tag</h3>
<p>To ensure devices display responsive pages properly, include the viewport meta tag.</p>
<pre class="prettyprint linenums">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
<h3>What they do</h3> <h3>What they do</h3>
<p>Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.</p> <p>Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
<ul> <ul>
...@@ -377,7 +487,7 @@ ...@@ -377,7 +487,7 @@
<ol> <ol>
<li>Use the compiled responsive version, bootstrap-responsive.css</li> <li>Use the compiled responsive version, bootstrap-responsive.css</li>
<li>Add @import "responsive.less" and recompile Bootstrap</li> <li>Add @import "responsive.less" and recompile Bootstrap</li>
<li>Modify and recompile responsive.less as a separate</li> <li>Modify and recompile responsive.less as a separate file</li>
</ol> </ol>
<p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p> <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
</div> </div>
......
docs/templates/layout.mustache
View file @ 03e6dc66
...@@ -7,17 +7,17 @@ ...@@ -7,17 +7,17 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles --> <!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico"> <link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png"> <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
......
docs/templates/pages/base-css.mustache
View file @ 03e6dc66
This diff is collapsed.
docs/templates/pages/components.mustache
View file @ 03e6dc66
This diff is collapsed.
docs/templates/pages/download.mustache
View file @ 03e6dc66
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<div class="page-header"> <div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a> <a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
<h1> <h1>
{{_i}}1. Chose components{{/i}} {{_i}}1. Choose components{{/i}}
<small>{{_i}}Get just the CSS you need{{/i}}</small> <small>{{_i}}Get just the CSS you need{{/i}}</small>
</h1> </h1>
</div> </div>
......
docs/templates/pages/index.mustache
View file @ 03e6dc66
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<header class="jumbotron masthead"> <header class="jumbotron masthead">
<div class="inner"> <div class="inner">
<h1>{{_i}}Bootstrap, from Twitter{{/i}}</h1> <h1>{{_i}}Bootstrap, from Twitter{{/i}}</h1>
<p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p> <p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
<p class="download-info"> <p class="download-info">
<a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">{{_i}}View project on GitHub{{/i}}</a> <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">{{_i}}View project on GitHub{{/i}}</a>
<a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap{{/i}}</a> <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap{{/i}}</a>
...@@ -11,20 +11,19 @@ ...@@ -11,20 +11,19 @@
</div> </div>
<ul class="quick-links"> <ul class="quick-links">
<li><a href="./upgrading.html">Upgrading from 1.4</a></li> <li><a href="./upgrading.html">{{_i}}Upgrading from 1.4{{/i}}</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Issues{{/i}}</a></li> <li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Issues{{/i}}</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">{{_i}}Roadmap{{/i}}</a></li> <li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap &amp; changelog{{/i}}</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">{{_i}}Changelog{{/i}}</a></li>
<li class="divider">&middot;</li> <li class="divider">&middot;</li>
<li> <li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="114px" height="20px"></iframe> <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
</li> </li>
<li> <li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe> <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
</li> </li>
<li class="divider">&middot;</li> <li class="divider">&middot;</li>
<li class="follow-btn"> <li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">{{_i}}Follow @twbootstrap{{/i}}</a> <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="225px" data-link-color="#0069D6" data-show-count="true">{{_i}}Follow @twbootstrap{{/i}}</a>
</li> </li>
<li class="tweet-btn"> <li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
...@@ -46,7 +45,7 @@ ...@@ -46,7 +45,7 @@
<div class="span4"> <div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png"> <img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
<h2>{{_i}}For all skill levels{{/i}}</h2> <h2>{{_i}}For all skill levels{{/i}}</h2>
<p>{{_i}}Bootstrap is designed to help people of all skill level&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}</p> <p>{{_i}}Bootstrap is designed to help people of all skill levels&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}</p>
</div> </div>
<div class="span4"> <div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png"> <img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
......
docs/templates/pages/javascript.mustache
View file @ 03e6dc66
This diff is collapsed.
docs/templates/pages/less.mustache
View file @ 03e6dc66
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
</div> </div>
<div class="span4"> <div class="span4">
<h3>{{_i}}Operations{{/i}}</h3> <h3>{{_i}}Operations{{/i}}</h3>
<p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}</p> <p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}</p>
</div> </div>
</div> </div>
</section> </section>
...@@ -210,7 +210,7 @@ ...@@ -210,7 +210,7 @@
<h3>{{_i}}Components{{/i}}</h3> <h3>{{_i}}Components{{/i}}</h3>
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<h4>Buttons</h4> <h4>{{_i}}Buttons{{/i}}</h4>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<tbody> <tbody>
<tr> <tr>
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h4>Forms</h4> <h4>{{_i}}Forms{{/i}}</h4>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<tbody> <tbody>
<tr> <tr>
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h4>Navbar</h4> <h4>{{_i}}Navbar{{/i}}</h4>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<tbody> <tbody>
<tr> <tr>
...@@ -272,13 +272,13 @@ ...@@ -272,13 +272,13 @@
<tbody> <tbody>
<tr> <tr>
<td class="span3"><code>@warningText</code></td> <td class="span3"><code>@warningText</code></td>
<td>#f3edd2</td> <td>#c09853</td>
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td> <td><span class="swatch" style="background-color: #c09853;"></span></td>
</tr> </tr>
<tr> <tr>
<td><code>@warningBackground</code></td> <td><code>@warningBackground</code></td>
<td>#c09853</td> <td>#f3edd2</td>
<td><span class="swatch" style="background-color: #c09853;"></span></td> <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
</tr> </tr>
<tr> <tr>
<td><code>@errorText</code></td> <td><code>@errorText</code></td>
...@@ -495,7 +495,7 @@ ...@@ -495,7 +495,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h3>CSS3 properties</h3> <h3>{{_i}}CSS3 properties{{/i}}</h3>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -528,7 +528,7 @@ ...@@ -528,7 +528,7 @@
<tr> <tr>
<td><code>.scale()</code></td> <td><code>.scale()</code></td>
<td><code>@ratio</code></td> <td><code>@ratio</code></td>
<td>{{_i}}Scale an element to <em>n</em> times it's original size{{/i}}</td> <td>{{_i}}Scale an element to <em>n</em> times its original size{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.translate()</code></td> <td><code>.translate()</code></td>
...@@ -538,7 +538,7 @@ ...@@ -538,7 +538,7 @@
<tr> <tr>
<td><code>.background-clip()</code></td> <td><code>.background-clip()</code></td>
<td><code>@clip</code></td> <td><code>@clip</code></td>
<td>{{_i}}Crop the backgroud of an element (useful for <code>border-radius</code>){{/i}}</td> <td>{{_i}}Crop the background of an element (useful for <code>border-radius</code>){{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.background-size()</code></td> <td><code>.background-size()</code></td>
...@@ -567,7 +567,7 @@ ...@@ -567,7 +567,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h3>Backgrounds and gradients</h3> <h3>{{_i}}Backgrounds and gradients{{/i}}</h3>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -641,8 +641,8 @@ ...@@ -641,8 +641,8 @@
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h3>{{_i}}Node with makefile{{/i}}</h3> <h3>{{_i}}Node with makefile{{/i}}</h3>
<p>{{_i}}Install the LESS command line compiler with npm by running the following command:{{/i}}</p> <p>{{_i}}Install the LESS command line compiler globally with npm by running the following command:{{/i}}</p>
<pre>$ npm install less</pre> <pre>$ npm install -g less</pre>
<p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p> <p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p>
<p>{{_i}}Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}</p> <p>{{_i}}Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}</p>
</div><!-- /span4 --> </div><!-- /span4 -->
......
docs/templates/pages/scaffolding.mustache
View file @ 03e6dc66
...@@ -5,7 +5,9 @@ ...@@ -5,7 +5,9 @@
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p> <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<div class="subnav"> <div class="subnav">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li><a href="#grid-system">{{_i}}Grid system{{/i}}</a></li> <li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#fluidGridSystem">{{_i}}Fluid gird system{{/i}}</a></li>
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
<li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li> <li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li> <li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
</ul> </ul>
...@@ -16,12 +18,11 @@ ...@@ -16,12 +18,11 @@
<!-- Grid system <!-- Grid system
================================================== --> ================================================== -->
<section id="grid-system"> <section id="gridSystem">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Grid system <small>12 columns with a responsive twist</small>{{/i}}</h1> <h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
</div> </div>
<h2>Default 940px grid</h2>
<div class="row show-grid"> <div class="row show-grid">
<div class="span1">1</div> <div class="span1">1</div>
<div class="span1">1</div> <div class="span1">1</div>
...@@ -72,7 +73,7 @@ ...@@ -72,7 +73,7 @@
<br> <br>
<h2>Offsetting columns</h2> <h2>{{_i}}Offsetting columns{{/i}}</h2>
<div class="row show-grid"> <div class="row show-grid">
<div class="span4">4</div> <div class="span4">4</div>
<div class="span4 offset4">4 offset 4</div> <div class="span4 offset4">4 offset 4</div>
...@@ -97,7 +98,8 @@ ...@@ -97,7 +98,8 @@
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<p>{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.{{/i}}</p> <p>{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.{{/i}}</p>
<h4>{{_i}}Example{{/i}}</h4> <h3>{{_i}}Example{{/i}}</h3>
<p>{{_i}}Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested <code>.span3</code> columns should be placed within a <code>.span6</code>.{{/i}}</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="span6"> <div class="span6">
{{_i}}Level 1 of column{{/i}} {{_i}}Level 1 of column{{/i}}
...@@ -111,7 +113,7 @@ ...@@ -111,7 +113,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div><!-- /span6 -->
<div class="span6"> <div class="span6">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="row"&gt; &lt;div class="row"&gt;
...@@ -126,8 +128,112 @@ ...@@ -126,8 +128,112 @@
</pre> </pre>
</div> </div>
</div> </div>
</section>
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<div class="page-header">
<h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1>
</div>
<h2>{{_i}}Grid customization{{/i}}</h2> <h2>{{_i}}Fluid columns{{/i}}</h2>
<div class="row-fluid show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
<div class="row-fluid show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row-fluid show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Percents, not pixels{{/i}}</h3>
<p>{{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Fluid rows{{/i}}</h3>
<p>{{_i}}Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Markup{{/i}}</h3>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
<h2>{{_i}}Fluid nesting{{/i}}</h2>
<div class="row">
<div class="span6">
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}</p>
<div class="row-fluid show-grid">
<div class="span12">
{{_i}}Fluid 12{{/i}}
<div class="row-fluid show-grid">
<div class="span6">
{{_i}}Fluid 6{{/i}}
</div>
<div class="span6">
{{_i}}Fluid 6{{/i}}
</div>
</div>
</div>
</div>
</div>
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span12"&gt;
{{_i}}Level 1 of column{{/i}}
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<div class="page-header">
<h1>{{_i}}Grid customization{{/i}}</h1>
</div>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -166,7 +272,7 @@ ...@@ -166,7 +272,7 @@
</div> </div>
<div class="span4"> <div class="span4">
<h3>{{_i}}How to customize{{/i}}</h3> <h3>{{_i}}How to customize{{/i}}</h3>
<p>{{_i}}Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}</p> <p>{{_i}}Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}</p>
</div> </div>
<div class="span4"> <div class="span4">
<h3>{{_i}}Staying responsive{{/i}}</h3> <h3>{{_i}}Staying responsive{{/i}}</h3>
...@@ -189,8 +295,8 @@ ...@@ -189,8 +295,8 @@
<div class="span6"> <div class="span6">
<h2>{{_i}}Fixed layout{{/i}}</h2> <h2>{{_i}}Fixed layout{{/i}}</h2>
<p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.{{/i}}</p> <p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.{{/i}}</p>
<div class="minicon-layout"> <div class="mini-layout">
<div class="minicon-layout-body"></div> <div class="mini-layout-body"></div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;body&gt; &lt;body&gt;
...@@ -203,9 +309,9 @@ ...@@ -203,9 +309,9 @@
<div class="span6"> <div class="span6">
<h2>{{_i}}Fluid layout{{/i}}</h2> <h2>{{_i}}Fluid layout{{/i}}</h2>
<p>{{_i}}<code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p> <p>{{_i}}<code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
<div class="minicon-layout fluid"> <div class="mini-layout fluid">
<div class="minicon-layout-sidebar"></div> <div class="mini-layout-sidebar"></div>
<div class="minicon-layout-body"></div> <div class="mini-layout-body"></div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="container-fluid"&gt; &lt;div class="container-fluid"&gt;
...@@ -239,7 +345,7 @@ ...@@ -239,7 +345,7 @@
</div> </div>
<div class="span8"> <div class="span8">
<h2>{{_i}}Supported devices{{/i}}</h2> <h2>{{_i}}Supported devices{{/i}}</h2>
<p>{{_i}}Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}</p> <p>{{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}</p>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -262,8 +368,8 @@ ...@@ -262,8 +368,8 @@
</tr> </tr>
<tr> <tr>
<td>{{_i}}Landscape tablets{{/i}}</td> <td>{{_i}}Landscape tablets{{/i}}</td>
<td>768px to 980px</td> <td>768px to 979px</td>
<td>44px</td> <td>42px</td>
<td>20px</td> <td>20px</td>
</tr> </tr>
<tr> <tr>
...@@ -281,6 +387,10 @@ ...@@ -281,6 +387,10 @@
</tbody> </tbody>
</table> </table>
<h3>{{_i}}Requires meta tag{{/i}}</h3>
<p>{{_i}}To ensure devices display responsive pages properly, include the viewport meta tag.{{/i}}</p>
<pre class="prettyprint linenums">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
<h3>{{_i}}What they do{{/i}}</h3> <h3>{{_i}}What they do{{/i}}</h3>
<p>{{_i}}Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.{{/i}}</p> <p>{{_i}}Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.{{/i}}</p>
<ul> <ul>
...@@ -301,7 +411,7 @@ ...@@ -301,7 +411,7 @@
<ol> <ol>
<li>{{_i}}Use the compiled responsive version, bootstrap-responsive.css{{/i}}</li> <li>{{_i}}Use the compiled responsive version, bootstrap-responsive.css{{/i}}</li>
<li>{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}</li> <li>{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}</li>
<li>{{_i}}Modify and recompile responsive.less as a separate{{/i}}</li> <li>{{_i}}Modify and recompile responsive.less as a separate file{{/i}}</li>
</ol> </ol>
<p>{{_i}}<strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}</p> <p>{{_i}}<strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}</p>
</div> </div>
......
docs/templates/pages/upgrading.mustache
View file @ 03e6dc66
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
<ul> <ul>
<li>{{_i}}Media queries added for <strong>basic support</strong> across mobile and tablet devices{{/i}} <li>{{_i}}Media queries added for <strong>basic support</strong> across mobile and tablet devices{{/i}}
<li>{{_i}}Responsive CSS is compiled separately, as bootstrap-responsive.css{{/i}}</li> <li>{{_i}}Responsive CSS is compiled separately, as bootstrap-responsive.css{{/i}}</li>
</ul> </ul>
</section> </section>
...@@ -76,12 +76,14 @@ ...@@ -76,12 +76,14 @@
<li>{{_i}}IE9: removed gradients and added rounded corners{{/i}}</li> <li>{{_i}}IE9: removed gradients and added rounded corners{{/i}}</li>
<li>{{_i}}Updated active state to make styling clearer in button groups (new) and look better with custom transition{{/i}}</li> <li>{{_i}}Updated active state to make styling clearer in button groups (new) and look better with custom transition{{/i}}</li>
<li>{{_i}}New mixin, <code>.buttonBackground</code>, to set button gradients{{/i}}</li> <li>{{_i}}New mixin, <code>.buttonBackground</code>, to set button gradients{{/i}}</li>
<li>{{_i}}The <code>.secondary</code> class was removed from modal examples in our docs as it never had associated styles.{{/i}}</li>
</ul> </ul>
<h3>{{_i}}Forms{{/i}}</h3> <h3>{{_i}}Forms{{/i}}</h3>
<ul> <ul>
<li>{{_i}}Default form style is now vertical (stacked) to use less CSS and add greater flexibility{{/i}}</li> <li>{{_i}}Default form style is now vertical (stacked) to use less CSS and add greater flexibility{{/i}}</li>
<li>{{_i}}Form classes standardized with <code>.form-</code> required as a prefix{{/i}}</li> <li>{{_i}}Form classes standardized with <code>.form-</code> required as a prefix{{/i}}</li>
<li>{{_i}}New built-in form defaults for search, inline, and horizontal forms{{/i}}</li> <li>{{_i}}New built-in form defaults for search, inline, and horizontal forms{{/i}}</li>
<li>{{_i}}For horizontal forms, previous classes <code>.clearfix</code> and <code>.input</code> are equivalent to the new <code>.control-group</code> and <code>.controls</code>.{{/i}}</li>
<li>{{_i}}More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code>{{/i}}</li> <li>{{_i}}More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code>{{/i}}</li>
<li>{{_i}}Form states: colors updated and customizable via new LESS variables{{/i}}</li> <li>{{_i}}Form states: colors updated and customizable via new LESS variables{{/i}}</li>
</ul> </ul>
...@@ -109,7 +111,7 @@ ...@@ -109,7 +111,7 @@
</ul> </ul>
<h3>{{_i}}Navigation{{/i}}</h3> <h3>{{_i}}Navigation{{/i}}</h3>
<ul> <ul>
<li>{{_i}}Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code>{{/i}}</li> <li>{{_i}}Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code> and the class names are now <code>.nav-pills</code> and <code>.nav-tabs</code>.{{/i}}</li>
<li>{{_i}}New nav list variation added that uses the same base class, <code>.nav</code>{{/i}}</li> <li>{{_i}}New nav list variation added that uses the same base class, <code>.nav</code>{{/i}}</li>
<li>{{_i}}Vertical tabs and pills have been added&mdash;just add <code>.nav-stacked</code> to the <code>&lt;ul&gt;</code>{{/i}}</li> <li>{{_i}}Vertical tabs and pills have been added&mdash;just add <code>.nav-stacked</code> to the <code>&lt;ul&gt;</code>{{/i}}</li>
<li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li> <li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li>
...@@ -128,6 +130,7 @@ ...@@ -128,6 +130,7 @@
<ul> <ul>
<li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li> <li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li>
<li>{{_i}}Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow{{/i}}</li> <li>{{_i}}Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow{{/i}}</li>
<li>{{_i}}Now requires you to add a <code>data-toggle="dropdown"</code> attribute to obtain toggling behavior{{/i}}</li>
<li>{{_i}}The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.{{/i}}</li> <li>{{_i}}The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.{{/i}}</li>
</ul> </ul>
<h3>{{_i}}Labels{{/i}}</h3> <h3>{{_i}}Labels{{/i}}</h3>
...@@ -144,7 +147,7 @@ ...@@ -144,7 +147,7 @@
<ul> <ul>
<li>{{_i}}New base class: <code>.alert</code> instead of <code>.alert-message</code>{{/i}}</li> <li>{{_i}}New base class: <code>.alert</code> instead of <code>.alert-message</code>{{/i}}</li>
<li>{{_i}}Class names standardized for other options, now all starting with <code>.alert-</code>{{/i}}</li> <li>{{_i}}Class names standardized for other options, now all starting with <code>.alert-</code>{{/i}}</li>
<li>{{_i}}Redesigned base alert styles to combine the deafult alerts and block-level alerts into one{{/i}}</li> <li>{{_i}}Redesigned base alert styles to combine the default alerts and block-level alerts into one{{/i}}</li>
<li>{{_i}}Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code>{{/i}}</li> <li>{{_i}}Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code>{{/i}}</li>
</ul> </ul>
<h3>{{_i}}Progress bars{{/i}}</h3> <h3>{{_i}}Progress bars{{/i}}</h3>
...@@ -167,7 +170,7 @@ ...@@ -167,7 +170,7 @@
<h1>{{_i}}Javascript plugins{{/i}}</h1> <h1>{{_i}}Javascript plugins{{/i}}</h1>
</div> </div>
<div class="alert alert-info"> <div class="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}We're rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more.{{/i}} <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}We've rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more.{{/i}}
</div> </div>
<h3>{{_i}}Tooltips{{/i}}</h3> <h3>{{_i}}Tooltips{{/i}}</h3>
<ul> <ul>
...@@ -179,6 +182,7 @@ ...@@ -179,6 +182,7 @@
<h3>{{_i}}Popovers{{/i}}</h3> <h3>{{_i}}Popovers{{/i}}</h3>
<ul> <ul>
<li>{{_i}}Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.{{/i}}</li> <li>{{_i}}Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.{{/i}}</li>
<li>{{_i}}The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.{{/i}}</li>
</ul> </ul>
<h3>{{_i}}New plugins{{/i}}</h3> <h3>{{_i}}New plugins{{/i}}</h3>
<ul> <ul>
......
docs/upgrading.html
View file @ 03e6dc66
...@@ -7,17 +7,17 @@ ...@@ -7,17 +7,17 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles --> <!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico"> <link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png"> <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
<ul> <ul>
<li>Media queries added for <strong>basic support</strong> across mobile and tablet devices <li>Media queries added for <strong>basic support</strong> across mobile and tablet devices
<li>Responsive CSS is compiled separately, as bootstrap-responsive.css</li> <li>Responsive CSS is compiled separately, as bootstrap-responsive.css</li>
</ul> </ul>
</section> </section>
...@@ -152,12 +152,14 @@ ...@@ -152,12 +152,14 @@
<li>IE9: removed gradients and added rounded corners</li> <li>IE9: removed gradients and added rounded corners</li>
<li>Updated active state to make styling clearer in button groups (new) and look better with custom transition</li> <li>Updated active state to make styling clearer in button groups (new) and look better with custom transition</li>
<li>New mixin, <code>.buttonBackground</code>, to set button gradients</li> <li>New mixin, <code>.buttonBackground</code>, to set button gradients</li>
<li>The <code>.secondary</code> class was removed from modal examples in our docs as it never had associated styles.</li>
</ul> </ul>
<h3>Forms</h3> <h3>Forms</h3>
<ul> <ul>
<li>Default form style is now vertical (stacked) to use less CSS and add greater flexibility</li> <li>Default form style is now vertical (stacked) to use less CSS and add greater flexibility</li>
<li>Form classes standardized with <code>.form-</code> required as a prefix</li> <li>Form classes standardized with <code>.form-</code> required as a prefix</li>
<li>New built-in form defaults for search, inline, and horizontal forms</li> <li>New built-in form defaults for search, inline, and horizontal forms</li>
<li>For horizontal forms, previous classes <code>.clearfix</code> and <code>.input</code> are equivalent to the new <code>.control-group</code> and <code>.controls</code>.</li>
<li>More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code></li> <li>More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code></li>
<li>Form states: colors updated and customizable via new LESS variables</li> <li>Form states: colors updated and customizable via new LESS variables</li>
</ul> </ul>
...@@ -185,7 +187,7 @@ ...@@ -185,7 +187,7 @@
</ul> </ul>
<h3>Navigation</h3> <h3>Navigation</h3>
<ul> <ul>
<li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code></li> <li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code> and the class names are now <code>.nav-pills</code> and <code>.nav-tabs</code>.</li>
<li>New nav list variation added that uses the same base class, <code>.nav</code></li> <li>New nav list variation added that uses the same base class, <code>.nav</code></li>
<li>Vertical tabs and pills have been added&mdash;just add <code>.nav-stacked</code> to the <code>&lt;ul&gt;</code></li> <li>Vertical tabs and pills have been added&mdash;just add <code>.nav-stacked</code> to the <code>&lt;ul&gt;</code></li>
<li>Pills were restyled to be less rounded by default</li> <li>Pills were restyled to be less rounded by default</li>
...@@ -204,6 +206,7 @@ ...@@ -204,6 +206,7 @@
<ul> <ul>
<li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li> <li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
<li>Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow</li> <li>Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow</li>
<li>Now requires you to add a <code>data-toggle="dropdown"</code> attribute to obtain toggling behavior</li>
<li>The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.</li> <li>The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.</li>
</ul> </ul>
<h3>Labels</h3> <h3>Labels</h3>
...@@ -220,7 +223,7 @@ ...@@ -220,7 +223,7 @@
<ul> <ul>
<li>New base class: <code>.alert</code> instead of <code>.alert-message</code></li> <li>New base class: <code>.alert</code> instead of <code>.alert-message</code></li>
<li>Class names standardized for other options, now all starting with <code>.alert-</code></li> <li>Class names standardized for other options, now all starting with <code>.alert-</code></li>
<li>Redesigned base alert styles to combine the deafult alerts and block-level alerts into one</li> <li>Redesigned base alert styles to combine the default alerts and block-level alerts into one</li>
<li>Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code></li> <li>Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code></li>
</ul> </ul>
<h3>Progress bars</h3> <h3>Progress bars</h3>
...@@ -243,11 +246,19 @@ ...@@ -243,11 +246,19 @@
<h1>Javascript plugins</h1> <h1>Javascript plugins</h1>
</div> </div>
<div class="alert alert-info"> <div class="alert alert-info">
<strong>Heads up!</strong> We're rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more. <strong>Heads up!</strong> We've rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more.
</div> </div>
<h3>Tooltips</h3>
<ul>
<li>The plugin method has been renamed from <code>twipsy()</code> to <code>tooltip()</code>, and the class name changed from <code>twipsy</code> to <code>tooltip</code>.</li>
<li>The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.</li>
<li>The <code>animate</code> option was renamed to <code>animation</code>.</li>
<li>The <code>html</code> option was removed, as the tooltips default to allowing HTML now.</li>
</ul>
<h3>Popovers</h3> <h3>Popovers</h3>
<ul> <ul>
<li>Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.</li> <li>Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.</li>
<li>The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.</li>
</ul> </ul>
<h3>New plugins</h3> <h3>New plugins</h3>
<ul> <ul>
......
js/README.md
View file @ 03e6dc66
...@@ -37,7 +37,7 @@ All methods should accept an optional options object, a string which targets a p ...@@ -37,7 +37,7 @@ All methods should accept an optional options object, a string which targets a p
Options should be sparse and add universal value. We should pick the right defaults. Options should be sparse and add universal value. We should pick the right defaults.
All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`. All plugins should have a default object which can be modified to affect all instances' default options. The defaults object should be available via `$.fn.plugin.defaults`.
$.fn.modal.defaults = { … } $.fn.modal.defaults = { … }
...@@ -64,7 +64,7 @@ All events should have an infinitive and past participle form. The infinitive is ...@@ -64,7 +64,7 @@ All events should have an infinitive and past participle form. The infinitive is
### CONSTRUCTORS ### CONSTRUCTORS
Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way: Each plugin should expose its raw constructor on a `Constructor` property -- accessed in the following way:
$.fn.popover.Constructor $.fn.popover.Constructor
......
js/bootstrap-alert.js
View file @ 03e6dc66
...@@ -51,11 +51,14 @@ ...@@ -51,11 +51,14 @@
$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
$parent.removeClass('in') $parent
.trigger('close')
.removeClass('in')
function removeElement() { function removeElement() {
$parent.remove() $parent
$parent.trigger('closed') .trigger('closed')
.remove()
} }
$.support.transition && $parent.hasClass('fade') ? $.support.transition && $parent.hasClass('fade') ?
...@@ -88,4 +91,4 @@ ...@@ -88,4 +91,4 @@
$('body').on('click.alert.data-api', dismiss, Alert.prototype.close) $('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
js/bootstrap-button.js
View file @ 03e6dc66
...@@ -91,8 +91,8 @@ ...@@ -91,8 +91,8 @@
$(function () { $(function () {
$('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) { $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
$(e.target).button('toggle') $(e.currentTarget).button('toggle')
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
js/bootstrap-carousel.js
View file @ 03e6dc66
...@@ -61,6 +61,7 @@ ...@@ -61,6 +61,7 @@
, pause: function () { , pause: function () {
clearInterval(this.interval) clearInterval(this.interval)
this.interval = null
return this return this
} }
...@@ -82,6 +83,8 @@ ...@@ -82,6 +83,8 @@
, fallback = type == 'next' ? 'first' : 'last' , fallback = type == 'next' ? 'first' : 'last'
, that = this , that = this
if (!$next.length) return
this.sliding = true this.sliding = true
isCycling && this.pause() isCycling && this.pause()
...@@ -151,4 +154,4 @@ ...@@ -151,4 +154,4 @@
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
js/bootstrap-collapse.js
View file @ 03e6dc66
...@@ -133,4 +133,4 @@ ...@@ -133,4 +133,4 @@
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
js/bootstrap-dropdown.js
View file @ 03e6dc66
...@@ -89,4 +89,4 @@ ...@@ -89,4 +89,4 @@
$('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle) $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
js/bootstrap-modal.js
View file @ 03e6dc66
...@@ -177,7 +177,7 @@ ...@@ -177,7 +177,7 @@
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
, data = $this.data('modal') , data = $this.data('modal')
, options = $.extend({}, $.fn.modal.defaults, typeof option == 'object' && option) , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('modal', (data = new Modal(this, options))) if (!data) $this.data('modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]() if (typeof option == 'string') data[option]()
else if (options.show) data.show() else if (options.show) data.show()
...@@ -207,4 +207,4 @@ ...@@ -207,4 +207,4 @@
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
js/bootstrap-popover.js
View file @ 03e6dc66
...@@ -92,4 +92,4 @@ ...@@ -92,4 +92,4 @@
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
js/bootstrap-scrollspy.js
View file @ 03e6dc66
...@@ -122,4 +122,4 @@ ...@@ -122,4 +122,4 @@
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
js/bootstrap-tab.js
View file @ 03e6dc66
...@@ -127,4 +127,4 @@ ...@@ -127,4 +127,4 @@
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
js/bootstrap-tooltip.js
View file @ 03e6dc66
...@@ -267,4 +267,4 @@ ...@@ -267,4 +267,4 @@
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
} }
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
js/bootstrap-transition.js
View file @ 03e6dc66
...@@ -47,5 +47,5 @@ ...@@ -47,5 +47,5 @@
})() })()
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
js/bootstrap-typeahead.js
View file @ 03e6dc66
...@@ -268,4 +268,4 @@ ...@@ -268,4 +268,4 @@
}) })
}) })
}( window.jQuery ) }( window.jQuery );
\ No newline at end of file
js/tests/unit/bootstrap-button.js
View file @ 03e6dc66
...@@ -3,7 +3,7 @@ $(function () { ...@@ -3,7 +3,7 @@ $(function () {
module("bootstrap-buttons") module("bootstrap-buttons")
test("should be defined on jquery object", function () { test("should be defined on jquery object", function () {
ok($(document.body).button, 'tabs method is defined') ok($(document.body).button, 'button method is defined')
}) })
test("should return element", function () { test("should return element", function () {
......
less/breadcrumbs.less
View file @ 03e6dc66
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
.border-radius(3px); .border-radius(3px);
.box-shadow(inset 0 1px 0 @white); .box-shadow(inset 0 1px 0 @white);
li { li {
display: inline; display: inline-block;
text-shadow: 0 1px 0 @white; text-shadow: 0 1px 0 @white;
} }
.divider { .divider {
......
less/button-groups.less
View file @ 03e6dc66
...@@ -133,7 +133,8 @@ ...@@ -133,7 +133,8 @@
.btn-primary, .btn-primary,
.btn-danger, .btn-danger,
.btn-info, .btn-info,
.btn-success { .btn-success,
.btn-inverse {
.caret { .caret {
border-top-color: @white; border-top-color: @white;
.opacity(75); .opacity(75);
......
less/buttons.less
View file @ 03e6dc66
...@@ -9,12 +9,14 @@ ...@@ -9,12 +9,14 @@
.btn { .btn {
display: inline-block; display: inline-block;
padding: 4px 10px 4px; padding: 4px 10px 4px;
margin-bottom: 0; // For input.btn
font-size: @baseFontSize; font-size: @baseFontSize;
line-height: @baseLineHeight; line-height: @baseLineHeight;
color: @grayDark; color: @grayDark;
text-align: center; text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75); text-shadow: 0 1px 1px rgba(255,255,255,.75);
#gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient vertical-align: middle;
.buttonBackground(@white, darken(@white, 10%));
border: 1px solid #ccc; border: 1px solid #ccc;
border-bottom-color: #bbb; border-bottom-color: #bbb;
.border-radius(4px); .border-radius(4px);
...@@ -23,6 +25,7 @@ ...@@ -23,6 +25,7 @@
cursor: pointer; cursor: pointer;
// Give IE7 some love // Give IE7 some love
.reset-filter();
.ie7-restore-left-whitespace(); .ie7-restore-left-whitespace();
} }
...@@ -51,7 +54,6 @@ ...@@ -51,7 +54,6 @@
.box-shadow(@shadow); .box-shadow(@shadow);
background-color: darken(@white, 10%); background-color: darken(@white, 10%);
background-color: darken(@white, 15%) e("\9"); background-color: darken(@white, 15%) e("\9");
color: rgba(0,0,0,.5);
outline: 0; outline: 0;
} }
...@@ -76,7 +78,7 @@ ...@@ -76,7 +78,7 @@
line-height: normal; line-height: normal;
.border-radius(5px); .border-radius(5px);
} }
.btn-large .icon { .btn-large [class^="icon-"] {
margin-top: 1px; margin-top: 1px;
} }
...@@ -86,10 +88,17 @@ ...@@ -86,10 +88,17 @@
font-size: @baseFontSize - 2px; font-size: @baseFontSize - 2px;
line-height: @baseLineHeight - 2px; line-height: @baseLineHeight - 2px;
} }
.btn-small .icon { .btn-small [class^="icon-"] {
margin-top: -1px; margin-top: -1px;
} }
// Mini
.btn-mini {
padding: 2px 6px;
font-size: @baseFontSize - 2px;
line-height: @baseLineHeight - 4px;
}
// Alternate buttons // Alternate buttons
// -------------------------------------------------- // --------------------------------------------------
...@@ -105,7 +114,9 @@ ...@@ -105,7 +114,9 @@
.btn-success, .btn-success,
.btn-success:hover, .btn-success:hover,
.btn-info, .btn-info,
.btn-info:hover { .btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.25);
color: @white; color: @white;
} }
...@@ -114,7 +125,8 @@ ...@@ -114,7 +125,8 @@
.btn-warning.active, .btn-warning.active,
.btn-danger.active, .btn-danger.active,
.btn-success.active, .btn-success.active,
.btn-info.active { .btn-info.active,
.btn-dark.active {
color: rgba(255,255,255,.75); color: rgba(255,255,255,.75);
} }
...@@ -139,6 +151,10 @@ ...@@ -139,6 +151,10 @@
.btn-info { .btn-info {
.buttonBackground(#5bc0de, #2f96b4); .buttonBackground(#5bc0de, #2f96b4);
} }
// Inverse appears as dark gray
.btn-inverse {
.buttonBackground(#454545, #262626);
}
// Cross-browser Jank // Cross-browser Jank
...@@ -146,8 +162,10 @@ ...@@ -146,8 +162,10 @@
button.btn, button.btn,
input[type="submit"].btn { input[type="submit"].btn {
// Firefox 3.6 only I believe
&::-moz-focus-inner { &::-moz-focus-inner {
padding: 0; padding: 0;
border: 0; border: 0;
} }
......
less/code.less
View file @ 03e6dc66
...@@ -11,12 +11,16 @@ pre { ...@@ -11,12 +11,16 @@ pre {
color: @grayDark; color: @grayDark;
.border-radius(3px); .border-radius(3px);
} }
// Inline code
code { code {
padding: 3px 4px; padding: 3px 4px;
color: #d14; color: #d14;
background-color: #f7f7f9; background-color: #f7f7f9;
border: 1px solid #e1e1e8; border: 1px solid #e1e1e8;
} }
// Blocks of code
pre { pre {
display: block; display: block;
padding: (@baseLineHeight - 1) / 2; padding: (@baseLineHeight - 1) / 2;
...@@ -30,6 +34,7 @@ pre { ...@@ -30,6 +34,7 @@ pre {
white-space: pre; white-space: pre;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all; word-break: break-all;
word-wrap: break-word;
// Make prettyprint styles more spaced out for readability // Make prettyprint styles more spaced out for readability
&.prettyprint { &.prettyprint {
...@@ -39,6 +44,14 @@ pre { ...@@ -39,6 +44,14 @@ pre {
// Account for some code outputs that place code tags in pre tags // Account for some code outputs that place code tags in pre tags
code { code {
padding: 0; padding: 0;
color: inherit;
background-color: transparent; background-color: transparent;
border: 0;
} }
} }
// Enable scrollable blocks of code
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
\ No newline at end of file
less/dropdowns.less
View file @ 03e6dc66
...@@ -46,7 +46,6 @@ ...@@ -46,7 +46,6 @@
float: left; float: left;
display: none; // none by default, but block on "open" of the menu display: none; // none by default, but block on "open" of the menu
min-width: 160px; min-width: 160px;
max-width: 220px;
_width: 160px; _width: 160px;
padding: 4px 0; padding: 4px 0;
margin: 0; // override default ul margin: 0; // override default ul
...@@ -93,7 +92,7 @@ ...@@ -93,7 +92,7 @@
padding: 3px 15px; padding: 3px 15px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: @baseLineHeight;
color: @gray; color: @gray;
white-space: nowrap; white-space: nowrap;
} }
......
less/forms.less
View file @ 03e6dc66
...@@ -28,6 +28,12 @@ legend { ...@@ -28,6 +28,12 @@ legend {
color: @grayDark; color: @grayDark;
border: 0; border: 0;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
// Small
small {
font-size: @baseLineHeight * .75;
color: @grayLight;
}
} }
// Set font for forms // Set font for forms
...@@ -36,7 +42,13 @@ input, ...@@ -36,7 +42,13 @@ input,
button, button,
select, select,
textarea { textarea {
#font > .sans-serif(@baseFontSize,normal,@baseLineHeight); #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
}
input,
button,
select,
textarea {
#font > #family > .sans-serif(); // And only set font-family here for those that need it (note the missing label element)
} }
// Identify controls by their labels // Identify controls by their labels
...@@ -84,13 +96,17 @@ input[type="radio"] { ...@@ -84,13 +96,17 @@ input[type="radio"] {
margin: 3px 0; margin: 3px 0;
*margin-top: 0; /* IE7 */ *margin-top: 0; /* IE7 */
line-height: normal; line-height: normal;
border: 0;
cursor: pointer; cursor: pointer;
.border-radius(0); .border-radius(0);
border: 0 \9; /* IE9 and down */
}
input[type="image"] {
border: 0;
} }
// Reset the file input to browser defaults // Reset the file input to browser defaults
input[type="file"] { input[type="file"] {
width: auto;
padding: initial; padding: initial;
line-height: initial; line-height: initial;
border: initial; border: initial;
...@@ -115,6 +131,11 @@ input[type="file"] { ...@@ -115,6 +131,11 @@ input[type="file"] {
line-height: 28px; line-height: 28px;
} }
// Reset line-height for IE
input[type="file"] {
line-height: 18px \9;
}
// Chrome on Linux and Mobile Safari need background-color // Chrome on Linux and Mobile Safari need background-color
select { select {
width: 220px; // default input width + 10px of padding that doesn't get applied width: 220px; // default input width + 10px of padding that doesn't get applied
...@@ -165,9 +186,11 @@ input[type="hidden"] { ...@@ -165,9 +186,11 @@ input[type="hidden"] {
} }
// Radios and checkboxes on same line // Radios and checkboxes on same line
// TODO v3: Convert .inline to .control-inline
.radio.inline, .radio.inline,
.checkbox.inline { .checkbox.inline {
display: inline-block; display: inline-block;
padding-top: 5px;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
...@@ -175,11 +198,6 @@ input[type="hidden"] { ...@@ -175,11 +198,6 @@ input[type="hidden"] {
.checkbox.inline + .checkbox.inline { .checkbox.inline + .checkbox.inline {
margin-left: 10px; // space out consecutive inline controls margin-left: 10px; // space out consecutive inline controls
} }
// But don't forget to remove their padding on first-child
.controls > .radio.inline:first-child,
.controls > .checkbox.inline:first-child {
padding-top: 0;
}
...@@ -198,9 +216,10 @@ textarea:focus { ...@@ -198,9 +216,10 @@ textarea:focus {
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow); .box-shadow(@shadow);
outline: 0; outline: 0;
outline: thin dotted \9; /* IE6-8 */ outline: thin dotted \9; /* IE6-9 */
} }
input[type="file"]:focus, input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus, input[type="checkbox"]:focus,
select:focus { select:focus {
.box-shadow(none); // override for file inputs .box-shadow(none); // override for file inputs
...@@ -260,33 +279,6 @@ textarea[readonly] { ...@@ -260,33 +279,6 @@ textarea[readonly] {
// FORM FIELD FEEDBACK STATES // FORM FIELD FEEDBACK STATES
// -------------------------- // --------------------------
// Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color
> label,
.help-block,
.help-inline {
color: @textColor;
}
// Style inputs accordingly
input,
select,
textarea {
color: @textColor;
border-color: @borderColor;
&:focus {
border-color: darken(@borderColor, 10%);
.box-shadow(0 0 6px lighten(@borderColor, 20%));
}
}
// Give a small background color for input-prepend/-append
.input-prepend .add-on,
.input-append .add-on {
color: @textColor;
background-color: @backgroundColor;
border-color: @textColor;
}
}
// Warning // Warning
.control-group.warning { .control-group.warning {
.formFieldState(@warningText, @warningText, @warningBackground); .formFieldState(@warningText, @warningText, @warningBackground);
...@@ -344,6 +336,7 @@ select:focus:required:invalid { ...@@ -344,6 +336,7 @@ select:focus:required:invalid {
// --------- // ---------
.help-block { .help-block {
display: block; // account for any element using help-block
margin-top: 5px; margin-top: 5px;
margin-bottom: 0; margin-bottom: 0;
color: @grayLight; color: @grayLight;
...@@ -412,6 +405,7 @@ select:focus:required:invalid { ...@@ -412,6 +405,7 @@ select:focus:required:invalid {
.border-radius(3px 0 0 3px); .border-radius(3px 0 0 3px);
} }
.uneditable-input { .uneditable-input {
border-left-color: #eee;
border-right-color: #ccc; border-right-color: #ccc;
} }
.add-on { .add-on {
...@@ -461,6 +455,10 @@ select:focus:required:invalid { ...@@ -461,6 +455,10 @@ select:focus:required:invalid {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
} }
// Re-hide hidden elements due to specifity
.hide {
display: none;
}
} }
.form-search label, .form-search label,
.form-inline label, .form-inline label,
...@@ -477,28 +475,37 @@ select:focus:required:invalid { ...@@ -477,28 +475,37 @@ select:focus:required:invalid {
.form-inline .input-prepend .add-on { .form-inline .input-prepend .add-on {
vertical-align: middle; vertical-align: middle;
} }
// Inline checkbox/radio labels
.form-search .radio,
.form-inline .radio,
.form-search .checkbox,
.form-inline .checkbox {
margin-bottom: 0;
vertical-align: middle;
}
// Margin to space out fieldsets // Margin to space out fieldsets
.control-group { .control-group {
margin-bottom: @baseLineHeight / 2; margin-bottom: @baseLineHeight / 2;
} }
// Legend collapses margin, so next element is responsible for spacing
legend + .control-group {
margin-top: @baseLineHeight;
-webkit-margin-top-collapse: separate;
}
// Horizontal-specific styles // Horizontal-specific styles
// -------------------------- // --------------------------
.form-horizontal { .form-horizontal {
// Legend collapses margin, so we're relegated to padding
legend + .control-group {
margin-top: @baseLineHeight;
-webkit-margin-top-collapse: separate;
}
// Increase spacing between groups // Increase spacing between groups
.control-group { .control-group {
margin-bottom: @baseLineHeight; margin-bottom: @baseLineHeight;
.clearfix(); .clearfix();
} }
// Float the labels left // Float the labels left
.control-group > label { .control-label {
float: left; float: left;
width: 140px; width: 140px;
padding-top: 5px; padding-top: 5px;
......
less/labels.less
View file @ 03e6dc66
// LABELS // LABELS
// ------ // ------
// Base
.label { .label {
padding: 1px 3px 2px; padding: 2px 4px 3px;
font-size: @baseFontSize * .75; font-size: @baseFontSize * .85;
font-weight: bold; font-weight: bold;
color: @white; color: @white;
text-transform: uppercase; text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @grayLight; background-color: @grayLight;
.border-radius(3px); .border-radius(3px);
} }
.label-important { background-color: @errorText; }
.label-warning { background-color: @orange; } // Hover state
.label-success { background-color: @successText; } .label:hover {
.label-info { background-color: @infoText; } color: @white;
text-decoration: none;
}
// Colors
.label-important { background-color: @errorText; }
.label-important:hover { background-color: darken(@errorText, 10%); }
.label-warning { background-color: @orange; }
.label-warning:hover { background-color: darken(@orange, 10%); }
.label-success { background-color: @successText; }
.label-success:hover { background-color: darken(@successText, 10%); }
.label-info { background-color: @infoText; }
.label-info:hover { background-color: darken(@infoText, 10%); }
less/mixins.less
View file @ 03e6dc66
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
// Clearfix // Clearfix
// -------- // --------
// For clearing floats like a boss h5bp.com/q // For clearing floats like a boss h5bp.com/q
.clearfix() { .clearfix {
*zoom: 1; *zoom: 1;
&:before, &:before,
&:after { &:after {
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
// ------------------ // ------------------
.tab-focus() { .tab-focus() {
// Default // Default
outline: thin dotted; outline: thin dotted #333;
// Webkit // Webkit
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; outline-offset: -2px;
...@@ -89,6 +89,15 @@ ...@@ -89,6 +89,15 @@
} }
} }
// Text overflow
// -------------------------
// Requires inline-block or block for proper styling
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// FONTS // FONTS
...@@ -199,13 +208,13 @@ ...@@ -199,13 +208,13 @@
// Setup the mixins to be used // Setup the mixins to be used
.columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) { .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
} }
.gridColumn(@fluidGridGutterWidth) { .gridColumn(@fluidGridGutterWidth) {
float: left; float: left;
margin-left: @fluidGridGutterWidth; margin-left: @fluidGridGutterWidth;
} }
// Take these values and mixins, and make 'em do their thang // Take these values and mixins, and make 'em do their thang
.generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) { .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
// Row surrounds the columns // Row surrounds the columns
.row-fluid { .row-fluid {
width: 100%; width: 100%;
...@@ -219,24 +228,22 @@ ...@@ -219,24 +228,22 @@
margin-left: 0; margin-left: 0;
} }
// Default columns // Default columns
.span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); } > .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
.span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); } > .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
.span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); } > .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
.span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); } > .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
.span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); } > .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
.span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); } > .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
.span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); } > .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
.span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); } > .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
.span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); } > .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
.span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); } > .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
.span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); } > .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
.span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); } > .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
} }
} }
} }
// Input grid system // Input grid system
// ------------------------- // -------------------------
#inputGridSystem { #inputGridSystem {
...@@ -263,6 +270,52 @@ ...@@ -263,6 +270,52 @@
} }
} }
// Make a Grid
// -------------------------
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
.makeRow() {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
.makeColumn(@columns: 1) {
float: left;
margin-left: @gridGutterWidth;
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
// Form field states (used in forms.less)
// --------------------------------------------------
// Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color
> label,
.help-block,
.help-inline {
color: @textColor;
}
// Style inputs accordingly
input,
select,
textarea {
color: @textColor;
border-color: @borderColor;
&:focus {
border-color: darken(@borderColor, 10%);
.box-shadow(0 0 6px lighten(@borderColor, 20%));
}
}
// Give a small background color for input-prepend/-append
.input-prepend .add-on,
.input-append .add-on {
color: @textColor;
background-color: @backgroundColor;
border-color: @textColor;
}
}
// CSS3 PROPERTIES // CSS3 PROPERTIES
...@@ -313,13 +366,6 @@ ...@@ -313,13 +366,6 @@
-o-transform: translate(@x, @y); -o-transform: translate(@x, @y);
transform: translate(@x, @y); transform: translate(@x, @y);
} }
.skew(@x: 0, @y: 0) {
-webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.skew(@x: 0, @y: 0) { .skew(@x: 0, @y: 0) {
-webkit-transform: skew(@x, @y); -webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y); -moz-transform: skew(@x, @y);
...@@ -327,6 +373,13 @@ ...@@ -327,6 +373,13 @@
-o-transform: skew(@x, @y); -o-transform: skew(@x, @y);
transform: skew(@x, @y); transform: skew(@x, @y);
} }
.translate3d(@x: 0, @y: 0, @z: 0) {
-webkit-transform: translate(@x, @y, @z);
-moz-transform: translate(@x, @y, @z);
-ms-transform: translate(@x, @y, @z);
-o-transform: translate(@x, @y, @z);
transform: translate(@x, @y, @z);
}
// Background clipping // Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box" // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
......
less/modals.less
View file @ 03e6dc66
// MODALS // MODALS
// ------ // ------
// Recalculate z-index where appropriate
.modal-open { .modal-open {
.dropdown-menu { z-index: @zindexDropdown + @zindexModal; } .dropdown-menu { z-index: @zindexDropdown + @zindexModal; }
.dropdown.open { *z-index: @zindexDropdown + @zindexModal; } .dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
...@@ -8,6 +9,7 @@ ...@@ -8,6 +9,7 @@
.tooltip { z-index: @zindexTooltip + @zindexModal; } .tooltip { z-index: @zindexTooltip + @zindexModal; }
} }
// Background
.modal-backdrop { .modal-backdrop {
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -25,6 +27,7 @@ ...@@ -25,6 +27,7 @@
.opacity(80); .opacity(80);
} }
// Base modal
.modal { .modal {
position: fixed; position: fixed;
top: 50%; top: 50%;
...@@ -53,9 +56,17 @@ ...@@ -53,9 +56,17 @@
// Close icon // Close icon
.close { margin-top: 2px; } .close { margin-top: 2px; }
} }
// Body (where all modal content resises)
.modal-body { .modal-body {
padding: 15px; padding: 15px;
} }
// Remove bottom margin if need be
.modal-body .modal-form {
margin-bottom: 0;
}
// Footer (for actions)
.modal-footer { .modal-footer {
padding: 14px 15px 15px; padding: 14px 15px 15px;
margin-bottom: 0; margin-bottom: 0;
......
less/navbar.less
View file @ 03e6dc66
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
margin-top: 5px; // make buttons vertically centered in navbar margin-top: 5px; // make buttons vertically centered in navbar
} }
.btn-group .btn { .btn-group .btn {
margin-top: 0; margin-top: 0; // then undo the margin here so we don't accidentally double it
} }
} }
...@@ -104,6 +104,14 @@ ...@@ -104,6 +104,14 @@
input[type="radio"] { input[type="radio"] {
margin-top: 3px; margin-top: 3px;
} }
.input-append,
.input-prepend {
margin-top: 6px;
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
input {
margin-top: 0; // remove the margin on top since it's on the parent
}
}
} }
// Navbar search // Navbar search
...@@ -133,7 +141,7 @@ ...@@ -133,7 +141,7 @@
background-color: @grayLight; background-color: @grayLight;
background-color: rgba(255,255,255,.5); background-color: rgba(255,255,255,.5);
} }
// Focus states (we use .focused since IE8 and down doesn't support :focus) // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
&:focus, &:focus,
&.focused { &.focused {
padding: 5px 10px; padding: 5px 10px;
...@@ -194,7 +202,7 @@ ...@@ -194,7 +202,7 @@
} }
// Hover // Hover
.navbar .nav > li > a:hover { .navbar .nav > li > a:hover {
background-color: transparent; background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
color: @navbarLinkColorHover; color: @navbarLinkColorHover;
text-decoration: none; text-decoration: none;
} }
...@@ -205,7 +213,6 @@ ...@@ -205,7 +213,6 @@
color: @navbarLinkColorHover; color: @navbarLinkColorHover;
text-decoration: none; text-decoration: none;
background-color: @navbarBackground; background-color: @navbarBackground;
background-color: rgba(0,0,0,.5);
} }
// Dividers (basically a vertical hr) // Dividers (basically a vertical hr)
......
less/navs.less
View file @ 03e6dc66
...@@ -21,6 +21,21 @@ ...@@ -21,6 +21,21 @@
background-color: @grayLighter; background-color: @grayLighter;
} }
// Nav headers (for dropdowns and lists)
.nav .nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: @baseLineHeight;
color: @grayLight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// NAV LIST // NAV LIST
...@@ -33,21 +48,12 @@ ...@@ -33,21 +48,12 @@
} }
.nav-list > li > a, .nav-list > li > a,
.nav-list .nav-header { .nav-list .nav-header {
display: block;
padding: 3px 15px;
margin-left: -15px; margin-left: -15px;
margin-right: -15px; margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 1px 0 rgba(255,255,255,.5);
} }
.nav-list .nav-header { .nav-list > li > a {
font-size: 11px; padding: 3px 15px;
font-weight: bold;
line-height: @baseLineHeight;
color: @grayLight;
text-transform: uppercase;
}
.nav-list > li + .nav-header {
margin-top: 9px;
} }
.nav-list .active > a, .nav-list .active > a,
.nav-list .active > a:hover { .nav-list .active > a:hover {
...@@ -249,6 +255,9 @@ ...@@ -249,6 +255,9 @@
.tabbable { .tabbable {
.clearfix(); .clearfix();
} }
.tab-content {
overflow: hidden; // prevent content from running below tabs
}
// Remove border on bottom, left, right // Remove border on bottom, left, right
.tabs-below .nav-tabs, .tabs-below .nav-tabs,
......
less/reset.less
View file @ 03e6dc66
...@@ -108,7 +108,7 @@ input[type="button"], ...@@ -108,7 +108,7 @@ input[type="button"],
input[type="reset"], input[type="reset"],
input[type="submit"] { input[type="submit"] {
cursor: pointer; // Cursors on all buttons applied consistently cursor: pointer; // Cursors on all buttons applied consistently
-webkit-appearance: button; // Style clicable inputs in iOS -webkit-appearance: button; // Style clickable inputs in iOS
} }
input[type="search"] { // Appearance in Safari/Chrome input[type="search"] { // Appearance in Safari/Chrome
-webkit-appearance: textfield; -webkit-appearance: textfield;
......
less/responsive.less
View file @ 03e6dc66
This diff is collapsed.
less/sprites.less
View file @ 03e6dc66
This diff is collapsed.
less/tables.less
View file @ 03e6dc66
This diff is collapsed.
less/thumbnails.less
View file @ 03e6dc66
This diff is collapsed.
less/type.less
View file @ 03e6dc66
This diff is collapsed.
less/variables.less
View file @ 03e6dc66
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment