0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00

Merge branch '2.1.2-wip' into box-sizing-exercise

Conflicts:
	docs/scaffolding.html
	docs/templates/pages/scaffolding.mustache
This commit is contained in:
Mark Otto 2012-09-07 22:34:51 -07:00
commit 7e29581210
64 changed files with 709 additions and 255 deletions

View File

@ -28,7 +28,7 @@ build:
@echo "Compiling documentation... ${CHECK} Done"
@cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > docs/assets/js/bootstrap.js
@uglifyjs -nc docs/assets/js/bootstrap.js > docs/assets/js/bootstrap.min.tmp.js
@echo "/**\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js
@echo "/**\n* Bootstrap.js v2.1.2 by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js
@cat docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js > docs/assets/js/bootstrap.min.js
@rm docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js
@echo "Compiling and minifying javascript... ${CHECK} Done"
@ -50,6 +50,13 @@ test:
kill -9 `cat js/tests/pid.txt`
rm js/tests/pid.txt
#
# CLEANS THE ROOT DIRECTORY OF PRIOR BUILDS
#
clean:
rm -r bootstrap
#
# BUILD SIMPLE BOOTSTRAP DIRECTORY
# recess & uglifyjs are required

View File

@ -1,5 +1,5 @@
/*!
* Bootstrap Responsive v2.1.1
* Bootstrap Responsive v2.1.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
@ -339,8 +339,11 @@
.row-fluid [class*="span"] {
display: block;
float: none;
width: auto;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.span12,
.row-fluid .span12 {
@ -349,6 +352,9 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
.input-large,
.input-xlarge,
.input-xxlarge,
@ -398,7 +404,7 @@
input[type="radio"] {
border: 1px solid #ccc;
}
.form-horizontal .control-group > label {
.form-horizontal .control-label {
float: none;
width: auto;
padding-top: 0;

View File

@ -1,5 +1,5 @@
/*!
* Bootstrap v2.1.1
* Bootstrap v2.1.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
@ -67,6 +67,7 @@ sub {
}
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
@ -376,7 +377,7 @@ p {
.lead {
margin-bottom: 20px;
font-size: 20px;
font-size: 21px;
font-weight: 200;
line-height: 30px;
}
@ -401,6 +402,22 @@ cite {
color: #999999;
}
.text-warning {
color: #c09853;
}
.text-error {
color: #b94a48;
}
.text-info {
color: #3a87ad;
}
.text-success {
color: #468847;
}
h1,
h2,
h3,
@ -848,7 +865,7 @@ input[type="file"] {
select {
width: 220px;
background-color: #ffffff;
border: 1px solid #bbb;
border: 1px solid #cccccc;
}
select[multiple],
@ -1644,7 +1661,7 @@ table {
.table-bordered colgroup + tbody tr:first-child td:last-child {
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
.table-striped tbody tr:nth-child(odd) td,
@ -1664,145 +1681,145 @@ table [class*=span],
margin-left: 0;
}
table .span1 {
.table .span1 {
float: none;
width: 44px;
margin-left: 0;
}
table .span2 {
.table .span2 {
float: none;
width: 124px;
margin-left: 0;
}
table .span3 {
.table .span3 {
float: none;
width: 204px;
margin-left: 0;
}
table .span4 {
.table .span4 {
float: none;
width: 284px;
margin-left: 0;
}
table .span5 {
.table .span5 {
float: none;
width: 364px;
margin-left: 0;
}
table .span6 {
.table .span6 {
float: none;
width: 444px;
margin-left: 0;
}
table .span7 {
.table .span7 {
float: none;
width: 524px;
margin-left: 0;
}
table .span8 {
.table .span8 {
float: none;
width: 604px;
margin-left: 0;
}
table .span9 {
.table .span9 {
float: none;
width: 684px;
margin-left: 0;
}
table .span10 {
.table .span10 {
float: none;
width: 764px;
margin-left: 0;
}
table .span11 {
.table .span11 {
float: none;
width: 844px;
margin-left: 0;
}
table .span12 {
.table .span12 {
float: none;
width: 924px;
margin-left: 0;
}
table .span13 {
.table .span13 {
float: none;
width: 1004px;
margin-left: 0;
}
table .span14 {
.table .span14 {
float: none;
width: 1084px;
margin-left: 0;
}
table .span15 {
.table .span15 {
float: none;
width: 1164px;
margin-left: 0;
}
table .span16 {
.table .span16 {
float: none;
width: 1244px;
margin-left: 0;
}
table .span17 {
.table .span17 {
float: none;
width: 1324px;
margin-left: 0;
}
table .span18 {
.table .span18 {
float: none;
width: 1404px;
margin-left: 0;
}
table .span19 {
.table .span19 {
float: none;
width: 1484px;
margin-left: 0;
}
table .span20 {
.table .span20 {
float: none;
width: 1564px;
margin-left: 0;
}
table .span21 {
.table .span21 {
float: none;
width: 1644px;
margin-left: 0;
}
table .span22 {
.table .span22 {
float: none;
width: 1724px;
margin-left: 0;
}
table .span23 {
.table .span23 {
float: none;
width: 1804px;
margin-left: 0;
}
table .span24 {
.table .span24 {
float: none;
width: 1884px;
margin-left: 0;
@ -1857,8 +1874,6 @@ table .span24 {
/* White icons with optional class, or on hover/active states of certain elements */
.icon-white,
.nav-tabs > .active > a > [class^="icon-"],
.nav-tabs > .active > a > [class*=" icon-"],
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
@ -2604,6 +2619,16 @@ table .span24 {
display: block;
}
.dropup .dropdown-submenu > .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -2px;
-webkit-border-radius: 5px 5px 5px 0;
-moz-border-radius: 5px 5px 5px 0;
border-radius: 5px 5px 5px 0;
}
.dropdown-submenu > a:after {
display: block;
float: right;
@ -3106,7 +3131,8 @@ input[type="submit"].btn.btn-mini {
}
.btn-link,
.btn-link:active {
.btn-link:active,
.btn-link[disabled] {
background-color: transparent;
background-image: none;
-webkit-box-shadow: none;
@ -3129,6 +3155,11 @@ input[type="submit"].btn.btn-mini {
background-color: transparent;
}
.btn-link[disabled]:hover {
color: #333333;
text-decoration: none;
}
.btn-group {
position: relative;
*margin-left: .3em;
@ -4520,8 +4551,8 @@ input[type="submit"].btn.btn-mini {
display: inline;
}
.pager a,
.pager span {
.pager li > a,
.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
@ -4531,23 +4562,24 @@ input[type="submit"].btn.btn-mini {
border-radius: 15px;
}
.pager a:hover {
.pager li > a:hover {
text-decoration: none;
background-color: #f5f5f5;
}
.pager .next a,
.pager .next span {
.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous a {
.pager .previous > a,
.pager .previous > span {
float: left;
}
.pager .disabled a,
.pager .disabled a:hover,
.pager .disabled span {
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > span {
color: #999999;
cursor: default;
background-color: #fff;
@ -4683,6 +4715,10 @@ input[type="submit"].btn.btn-mini {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
.tooltip {
position: absolute;
z-index: 1030;

View File

@ -132,16 +132,6 @@ hr.soften {
}
/* Download button */
@-webkit-keyframes downloadButton {
from { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 25px rgba(0,68,204,.9); }
to { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
}
@-moz-keyframes downloadButton {
from { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 25px rgba(0,68,204,.9); }
to { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
}
.masthead .btn {
padding: 14px 24px;
font-size: 24px;
@ -151,19 +141,17 @@ hr.soften {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.01);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.01);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.01);
-webkit-animation-name: downloadButton;
-moz-animation-name: downloadButton;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.masthead .btn:hover {
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
}
.masthead .btn:active {
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
@ -547,7 +535,7 @@ h2 + .row {
background-color: rgba(255,0,0,.25);
}
/* Eaxmples page
/* Example page
------------------------- */
.bootstrap-examples p {
font-size: 13px;
@ -653,10 +641,6 @@ h2 + .row {
form.bs-docs-example {
padding-bottom: 19px;
}
.bs-docs-example .lead {
font-size: 18px;
line-height: 24px;
}
/* Images */
.bs-docs-example-images img {

View File

@ -1,5 +1,5 @@
/* ==========================================================
* bootstrap-affix.js v2.1.1
* bootstrap-affix.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#affix
* ==========================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ==========================================================
* bootstrap-alert.js v2.1.1
* bootstrap-alert.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ============================================================
* bootstrap-button.js v2.1.1
* bootstrap-button.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ==========================================================
* bootstrap-carousel.js v2.1.1
* bootstrap-carousel.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#carousel
* ==========================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* =============================================================
* bootstrap-collapse.js v2.1.1
* bootstrap-collapse.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#collapse
* =============================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ============================================================
* bootstrap-dropdown.js v2.1.1
* bootstrap-dropdown.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* =========================================================
* bootstrap-modal.js v2.1.1
* bootstrap-modal.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#modals
* =========================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ===========================================================
* bootstrap-popover.js v2.1.1
* bootstrap-popover.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#popovers
* ===========================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* =============================================================
* bootstrap-scrollspy.js v2.1.1
* bootstrap-scrollspy.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
* =============================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ========================================================
* bootstrap-tab.js v2.1.1
* bootstrap-tab.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ===========================================================
* bootstrap-tooltip.js v2.1.1
* bootstrap-tooltip.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#tooltips
* Inspired by the original jQuery.tipsy by Jason Frame
* ===========================================================

View File

@ -1,5 +1,5 @@
/* ===================================================
* bootstrap-transition.js v2.1.1
* bootstrap-transition.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#transitions
* ===================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* =============================================================
* bootstrap-typeahead.js v2.1.1
* bootstrap-typeahead.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#typeahead
* =============================================================
* Copyright 2012 Twitter, Inc.
@ -174,7 +174,7 @@
.on('keypress', $.proxy(this.keypress, this))
.on('keyup', $.proxy(this.keyup, this))
if ($.browser.webkit || $.browser.msie) {
if ($.browser.chrome || $.browser.webkit || $.browser.msie) {
this.$element.on('keydown', $.proxy(this.keydown, this))
}

View File

@ -1,5 +1,5 @@
/* ===================================================
* bootstrap-transition.js v2.1.1
* bootstrap-transition.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#transitions
* ===================================================
* Copyright 2012 Twitter, Inc.
@ -58,7 +58,7 @@
})
}(window.jQuery);/* ==========================================================
* bootstrap-alert.js v2.1.1
* bootstrap-alert.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
* Copyright 2012 Twitter, Inc.
@ -147,7 +147,7 @@
})
}(window.jQuery);/* ============================================================
* bootstrap-button.js v2.1.1
* bootstrap-button.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================
* Copyright 2012 Twitter, Inc.
@ -242,7 +242,7 @@
})
}(window.jQuery);/* ==========================================================
* bootstrap-carousel.js v2.1.1
* bootstrap-carousel.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#carousel
* ==========================================================
* Copyright 2012 Twitter, Inc.
@ -417,7 +417,7 @@
})
}(window.jQuery);/* =============================================================
* bootstrap-collapse.js v2.1.1
* bootstrap-collapse.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#collapse
* =============================================================
* Copyright 2012 Twitter, Inc.
@ -574,7 +574,7 @@
})
}(window.jQuery);/* ============================================================
* bootstrap-dropdown.js v2.1.1
* bootstrap-dropdown.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
* Copyright 2012 Twitter, Inc.
@ -723,7 +723,7 @@
})
}(window.jQuery);/* =========================================================
* bootstrap-modal.js v2.1.1
* bootstrap-modal.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#modals
* =========================================================
* Copyright 2012 Twitter, Inc.
@ -961,7 +961,7 @@
})
}(window.jQuery);/* ===========================================================
* bootstrap-tooltip.js v2.1.1
* bootstrap-tooltip.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#tooltips
* Inspired by the original jQuery.tipsy by Jason Frame
* ===========================================================
@ -1236,7 +1236,7 @@
}(window.jQuery);
/* ===========================================================
* bootstrap-popover.js v2.1.1
* bootstrap-popover.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#popovers
* ===========================================================
* Copyright 2012 Twitter, Inc.
@ -1338,7 +1338,7 @@
})
}(window.jQuery);/* =============================================================
* bootstrap-scrollspy.js v2.1.1
* bootstrap-scrollspy.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
* =============================================================
* Copyright 2012 Twitter, Inc.
@ -1488,7 +1488,7 @@
})
}(window.jQuery);/* ========================================================
* bootstrap-tab.js v2.1.1
* bootstrap-tab.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
* Copyright 2012 Twitter, Inc.
@ -1622,7 +1622,7 @@
})
}(window.jQuery);/* =============================================================
* bootstrap-typeahead.js v2.1.1
* bootstrap-typeahead.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#typeahead
* =============================================================
* Copyright 2012 Twitter, Inc.
@ -1797,7 +1797,7 @@
.on('keypress', $.proxy(this.keypress, this))
.on('keyup', $.proxy(this.keyup, this))
if ($.browser.webkit || $.browser.msie) {
if ($.browser.chrome || $.browser.webkit || $.browser.msie) {
this.$element.on('keydown', $.proxy(this.keydown, this))
}
@ -1922,7 +1922,7 @@
}(window.jQuery);
/* ==========================================================
* bootstrap-affix.js v2.1.1
* bootstrap-affix.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#affix
* ==========================================================
* Copyright 2012 Twitter, Inc.

File diff suppressed because one or more lines are too long

View File

@ -154,14 +154,14 @@
</p>
</pre>
<h3><code>&lt;strong&gt;</code></h3>
<h3>Bold</h3>
<p>For emphasizing a snippet of text with <strong>important</strong></p>
<div class="bs-docs-example">
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
</div>
<pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>
<h3><code>&lt;em&gt;</code></h3>
<h3>Italics</h3>
<p>For emphasizing a snippet of text with <em>stress</em></p>
<div class="bs-docs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
@ -170,6 +170,23 @@
<p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
<h3>Emphasis classes</h3>
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
<div class="bs-docs-example">
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<pre class="prettyprint linenums">
&lt;p class="muted"&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.&lt;/p&gt;
&lt;p class="text-warning"&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/p&gt;
&lt;p class="text-error"&gt;Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
&lt;p class="text-info"&gt;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.&lt;/p&gt;
&lt;p class="text-success"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
</pre>
<hr class="bs-docs-separator">
@ -995,7 +1012,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</pre>
<h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.</p>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<form class="bs-docs-example form-inline">
<textarea rows="3"></textarea>
</form>
@ -1904,6 +1921,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;input class="span2" id="inputIcon" type="text"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>

View File

@ -182,6 +182,24 @@
</ul>
</li>
</ul>
<div class="dropup" style="float: left; margin-left: 20px;">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<pre class="prettyprint linenums">

View File

@ -104,7 +104,7 @@
<div class="page-header">
<h1>1. Download</h1>
</div>
<p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.</p>
<p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.</p>
<div class="row-fluid">
<div class="span6">
@ -199,7 +199,7 @@
<div class="page-header">
<h1>4. Basic HTML template</h1>
</div>
<p class="lead">With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.</p>
<p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.</p>
<p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;

View File

@ -77,7 +77,7 @@
<ul class="masthead-links">
<li><a href="http://github.com/twitter/bootstrap" >GitHub project</a></li>
<li><a href="./extend.html" >Extend</a></li>
<li>Version 2.1.1</li>
<li>Version 2.1.2</li>
</ul>
</div>
</div>

View File

@ -1261,6 +1261,36 @@ $('#my-alert').bind('closed', function () {
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="accordion" id="accordion2"&gt;
&lt;div class="accordion-group"&gt;
&lt;div class="accordion-heading"&gt;
&lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"&gt;
Collapsible Group Item #1
&lt;/a&gt;
&lt;/div&gt;
&lt;div id="collapseOne" class="accordion-body collapse in"&gt;
&lt;div class="accordion-inner"&gt;
Anim pariatur cliche...
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="accordion-group"&gt;
&lt;div class="accordion-heading"&gt;
&lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"&gt;
Collapsible Group Item #2
&lt;/a&gt;
&lt;/div&gt;
&lt;div id="collapseTwo" class="accordion-body collapse"&gt;
&lt;div class="accordion-inner"&gt;
Anim pariatur cliche...
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
...
</pre>
<p>You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.</p>
<pre class="prettyprint linenums">
&lt;button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;
simple collapsible
&lt;/button&gt;

View File

@ -178,7 +178,7 @@
<p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
<h2>Offsetting columns</h2>
<p>Move columns to the left using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
<p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span4">4</div>
@ -203,8 +203,8 @@
<h2>Nesting columns</h2>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
<div class="row show-grid">
<div class="span12">
Level 1 of column
<div class="span9">
Level 1 column
<div class="row show-grid">
<div class="span6">
Level 2
@ -221,7 +221,111 @@
Level 1 column
&lt;div class="row"&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;div class="span3"&gt;Level 2&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<div class="page-header">
<h1>Fluid grid system</h1>
</div>
<h2>Live fluid grid example</h2>
<p>The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
<div class="bs-docs-grid">
<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>
<h3>Basic fluid grid HTML</h3>
<p>Make any row "fluid" by changing <code>.row</code> to <code>.row-fluid</code>. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.</p>
<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>
<h2>Fluid offsetting</h2>
<p>Operates the same way as the fixed grid system offsetting: add <code>.offset*</code> to any column to offset by that many columns.</p>
<div class="bs-docs-grid">
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<div class="row-fluid show-grid">
<div class="span3 offset3">3 offset 3</div>
<div class="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<div class="row-fluid show-grid">
<div class="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span4 offset2"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<h2>Fluid nesting</h2>
<p>Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset 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>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span12"&gt;
Fluid 12
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;Fluid 6&lt;/div&gt;
&lt;div class="span6"&gt;Fluid 6&lt;/div&gt;
>>>>>>> 2.1.2-wip
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
@ -312,20 +416,10 @@
</thead>
<tbody>
<tr>
<td>Phones</td>
<td>480px and below</td>
<td class="muted" colspan="2">Fluid columns, no fixed widths</td>
</tr>
<tr>
<td>Phones to tablets</td>
<td>767px and below</td>
<td class="muted" colspan="2">Fluid columns, no fixed widths</td>
</tr>
<tr>
<td>Portrait tablets</td>
<td>768px and above</td>
<td>42px</td>
<td>20px</td>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
<tr>
<td>Default</td>
@ -334,25 +428,35 @@
<td>20px</td>
</tr>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
<td>Portrait tablets</td>
<td>768px and above</td>
<td>42px</td>
<td>20px</td>
</tr>
<tr>
<td>Phones to tablets</td>
<td>767px and below</td>
<td class="muted" colspan="2">Fluid columns, no fixed widths</td>
</tr>
<tr>
<td>Phones</td>
<td>480px and below</td>
<td class="muted" colspan="2">Fluid columns, no fixed widths</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
/* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
</pre>

View File

@ -88,14 +88,14 @@
&lt;/p&gt;
</pre>
<h3><code>&lt;strong&gt;</code></h3>
<h3>{{_i}}Bold{{/i}}</h3>
<p>{{_i}}For emphasizing a snippet of text with <strong>important</strong>{{/i}}</p>
<div class="bs-docs-example">
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
</div>
<pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>
<h3><code>&lt;em&gt;</code></h3>
<h3>{{_i}}Italics{{/i}}</h3>
<p>{{_i}}For emphasizing a snippet of text with <em>stress</em>{{/i}}</p>
<div class="bs-docs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
@ -104,6 +104,23 @@
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.{{/i}}</p>
<h3>{{_i}}Emphasis classes{{/i}}</h3>
<p>{{_i}}Convey meaning through color with a handful of emphasis utility classes.{{/i}}</p>
<div class="bs-docs-example">
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<pre class="prettyprint linenums">
&lt;p class="muted"&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.&lt;/p&gt;
&lt;p class="text-warning"&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/p&gt;
&lt;p class="text-error"&gt;Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
&lt;p class="text-info"&gt;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.&lt;/p&gt;
&lt;p class="text-success"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
</pre>
<hr class="bs-docs-separator">
@ -932,7 +949,7 @@
</pre>
<h3>{{_i}}Textarea{{/i}}</h3>
<p>{{_i}}Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.{{/i}}</p>
<p>{{_i}}Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.{{/i}}</p>
<form class="bs-docs-example form-inline">
<textarea rows="3"></textarea>
</form>
@ -1841,6 +1858,7 @@
&lt;input class="span2" id="inputIcon" type="text"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>

View File

@ -111,6 +111,24 @@
</ul>
</li>
</ul>
<div class="dropup" style="float: left; margin-left: 20px;">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>{{! /example }}
<pre class="prettyprint linenums">

View File

@ -33,7 +33,7 @@
<div class="page-header">
<h1>{{_i}}1. Download{{/i}}</h1>
</div>
<p class="lead">{{_i}}Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.{{/i}}</p>
<p class="lead">{{_i}}Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.{{/i}}</p>
<div class="row-fluid">
<div class="span6">
@ -128,7 +128,7 @@
<div class="page-header">
<h1>{{_i}}4. Basic HTML template{{/i}}</h1>
</div>
<p class="lead">{{_i}}With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.{{/i}}</p>
<p class="lead">{{_i}}With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.{{/i}}</p>
<p>{{_i}}Now, here's a look at a <strong>typical HTML file</strong>:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;

View File

@ -2,11 +2,11 @@
<div class="container">
<h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.1']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p>
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.2']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p>
<ul class="masthead-links">
<li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>GitHub project</a></li>
<li><a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>Extend</a></li>
<li>Version 2.1.1</li>
<li>Version 2.1.2</li>
</ul>
</div>
</div>

View File

@ -1191,6 +1191,36 @@ $('#my-alert').bind('closed', function () {
</div>
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;div class="accordion" id="accordion2"&gt;
&lt;div class="accordion-group"&gt;
&lt;div class="accordion-heading"&gt;
&lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"&gt;
{{_i}}Collapsible Group Item #1{{/i}}
&lt;/a&gt;
&lt;/div&gt;
&lt;div id="collapseOne" class="accordion-body collapse in"&gt;
&lt;div class="accordion-inner"&gt;
Anim pariatur cliche...
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="accordion-group"&gt;
&lt;div class="accordion-heading"&gt;
&lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"&gt;
{{_i}}Collapsible Group Item #2{{/i}}
&lt;/a&gt;
&lt;/div&gt;
&lt;div id="collapseTwo" class="accordion-body collapse"&gt;
&lt;div class="accordion-inner"&gt;
Anim pariatur cliche...
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
...
</pre>
<p>{{_i}}You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;
{{_i}}simple collapsible{{/i}}
&lt;/button&gt;

View File

@ -107,7 +107,7 @@
<p>{{_i}}Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.{{/i}}</p>
<h2>{{_i}}Offsetting columns{{/i}}</h2>
<p>{{_i}}Move columns to the left using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.{{/i}}</p>
<p>{{_i}}Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.{{/i}}</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span4">4</div>
@ -132,8 +132,8 @@
<h2>{{_i}}Nesting columns{{/i}}</h2>
<p>{{_i}}To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}</p>
<div class="row show-grid">
<div class="span12">
{{_i}}Level 1 of column{{/i}}
<div class="span9">
{{_i}}Level 1 column{{/i}}
<div class="row show-grid">
<div class="span6">
{{_i}}Level 2{{/i}}
@ -150,7 +150,111 @@
{{_i}}Level 1 column{{/i}}
&lt;div class="row"&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 class="span3"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<div class="page-header">
<h1>{{_i}}Fluid grid system{{/i}}</h1>
</div>
<h2>{{_i}}Live fluid grid example{{/i}}</h2>
<p>{{_i}}The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
<div class="bs-docs-grid">
<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>
<h3>{{_i}}Basic fluid grid HTML{{/i}}</h3>
<p>{{_i}}Make any row "fluid" by changing <code>.row</code> to <code>.row-fluid</code>. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}</p>
<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>
<h2>{{_i}}Fluid offsetting{{/i}}</h2>
<p>{{_i}}Operates the same way as the fixed grid system offsetting: add <code>.offset*</code> to any column to offset by that many columns.{{/i}}</p>
<div class="bs-docs-grid">
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<div class="row-fluid show-grid">
<div class="span3 offset3">3 offset 3</div>
<div class="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<div class="row-fluid show-grid">
<div class="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span4 offset2"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<h2>{{_i}}Fluid nesting{{/i}}</h2>
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset 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>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span12"&gt;
{{_i}}Fluid 12{{/i}}
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;{{_i}}Fluid 6{{/i}}&lt;/div&gt;
&lt;div class="span6"&gt;{{_i}}Fluid 6{{/i}}&lt;/div&gt;
>>>>>>> 2.1.2-wip
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
@ -244,20 +348,10 @@
</thead>
<tbody>
<tr>
<td>{{_i}}Phones{{/i}}</td>
<td>480px and below</td>
<td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
</tr>
<tr>
<td>{{_i}}Phones to tablets{{/i}}</td>
<td>767px and below</td>
<td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
</tr>
<tr>
<td>{{_i}}Portrait tablets{{/i}}</td>
<td>768px and above</td>
<td>42px</td>
<td>20px</td>
<td>{{_i}}Large display{{/i}}</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
<tr>
<td>{{_i}}Default{{/i}}</td>
@ -266,25 +360,35 @@
<td>20px</td>
</tr>
<tr>
<td>{{_i}}Large display{{/i}}</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
<td>{{_i}}Portrait tablets{{/i}}</td>
<td>768px and above</td>
<td>42px</td>
<td>20px</td>
</tr>
<tr>
<td>{{_i}}Phones to tablets{{/i}}</td>
<td>767px and below</td>
<td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
</tr>
<tr>
<td>{{_i}}Phones{{/i}}</td>
<td>480px and below</td>
<td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
/* {{_i}}Landscape phones and down{{/i}} */
@media (max-width: 480px) { ... }
/* {{_i}}Landscape phone to portrait tablet{{/i}} */
@media (max-width: 767px) { ... }
/* {{_i}}Large desktop{{/i}} */
@media (min-width: 1200px) { ... }
/* {{_i}}Portrait tablet to landscape and desktop{{/i}} */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* {{_i}}Large desktop{{/i}} */
@media (min-width: 1200px) { ... }
/* {{_i}}Landscape phone to portrait tablet{{/i}} */
@media (max-width: 767px) { ... }
/* {{_i}}Landscape phones and down{{/i}} */
@media (max-width: 480px) { ... }
</pre>

View File

@ -1,5 +1,5 @@
/* ==========================================================
* bootstrap-affix.js v2.1.1
* bootstrap-affix.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#affix
* ==========================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ==========================================================
* bootstrap-alert.js v2.1.1
* bootstrap-alert.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ============================================================
* bootstrap-button.js v2.1.1
* bootstrap-button.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ==========================================================
* bootstrap-carousel.js v2.1.1
* bootstrap-carousel.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#carousel
* ==========================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* =============================================================
* bootstrap-collapse.js v2.1.1
* bootstrap-collapse.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#collapse
* =============================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ============================================================
* bootstrap-dropdown.js v2.1.1
* bootstrap-dropdown.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* =========================================================
* bootstrap-modal.js v2.1.1
* bootstrap-modal.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#modals
* =========================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ===========================================================
* bootstrap-popover.js v2.1.1
* bootstrap-popover.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#popovers
* ===========================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* =============================================================
* bootstrap-scrollspy.js v2.1.1
* bootstrap-scrollspy.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
* =============================================================
* Copyright 2012 Twitter, Inc.

2
js/bootstrap-tab.js vendored
View File

@ -1,5 +1,5 @@
/* ========================================================
* bootstrap-tab.js v2.1.1
* bootstrap-tab.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* ===========================================================
* bootstrap-tooltip.js v2.1.1
* bootstrap-tooltip.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#tooltips
* Inspired by the original jQuery.tipsy by Jason Frame
* ===========================================================

View File

@ -1,5 +1,5 @@
/* ===================================================
* bootstrap-transition.js v2.1.1
* bootstrap-transition.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#transitions
* ===================================================
* Copyright 2012 Twitter, Inc.

View File

@ -1,5 +1,5 @@
/* =============================================================
* bootstrap-typeahead.js v2.1.1
* bootstrap-typeahead.js v2.1.2
* http://twitter.github.com/bootstrap/javascript.html#typeahead
* =============================================================
* Copyright 2012 Twitter, Inc.
@ -174,7 +174,7 @@
.on('keypress', $.proxy(this.keypress, this))
.on('keyup', $.proxy(this.keyup, this))
if ($.browser.webkit || $.browser.msie) {
if ($.browser.chrome || $.browser.webkit || $.browser.msie) {
this.$element.on('keydown', $.proxy(this.keydown, this))
}

2
less/bootstrap.less vendored
View File

@ -1,5 +1,5 @@
/*!
* Bootstrap v2.1.1
* Bootstrap v2.1.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0

View File

@ -120,7 +120,7 @@
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
.box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
.box-shadow(inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
*padding-top: 5px;
*padding-bottom: 5px;
}
@ -147,7 +147,7 @@
// Remove the gradient and set the same inset shadow as the :active state
.dropdown-toggle {
background-image: none;
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
.box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
}
// Keep the hover's background when dropdown is open

View File

@ -24,7 +24,7 @@
border-bottom-color: darken(@btnBorder, 10%);
.border-radius(4px);
.ie7-restore-left-whitespace(); // Give IE7 some love
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
.box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
// Hover state
&:hover {
@ -51,7 +51,7 @@
background-color: darken(@white, 15%) e("\9");
background-image: none;
outline: 0;
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
.box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
}
// Disabled state
@ -208,7 +208,8 @@ input[type="submit"].btn {
// Make a button look and behave like a link
.btn-link,
.btn-link:active {
.btn-link:active,
.btn-link[disabled] {
background-color: transparent;
background-image: none;
.box-shadow(none);
@ -224,3 +225,7 @@ input[type="submit"].btn {
text-decoration: underline;
background-color: transparent;
}
.btn-link[disabled]:hover {
color: @grayDark;
text-decoration: none;
}

View File

@ -163,6 +163,8 @@
.dropdown-submenu {
position: relative;
}
// Default dropdowns
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
@ -176,6 +178,18 @@
display: block;
}
// Dropups
.dropup .dropdown-submenu > .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -2px;
-webkit-border-radius: 5px 5px 5px 0;
-moz-border-radius: 5px 5px 5px 0;
border-radius: 5px 5px 5px 0;
}
// Caret to indicate there is a submenu
.dropdown-submenu > a:after {
display: block;
content: " ";

View File

@ -126,7 +126,7 @@ input[type="color"],
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
}
}
@ -162,7 +162,7 @@ input[type="file"] {
// Make select elements obey height by applying a border
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
border: 1px solid #bbb;
border: 1px solid @inputBorder;
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
}

View File

@ -183,10 +183,7 @@
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@borderColor, 10%);
// Write out in full since the lighten() function isn't easily escaped
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%));
}
}
// Give a small background color for input-prepend/-append
@ -251,10 +248,12 @@
}
// Drop shadows
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
.box-shadow(@shadowA, @shadowB:X, ...){
// Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/
@props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-box-shadow: @props;
-moz-box-shadow: @props;
box-shadow: @props;
}
// Transitions
@ -296,7 +295,7 @@
.skew(@x, @y) {
-webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y);
-ms-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
}

View File

@ -95,4 +95,8 @@
.btn-group .btn + .btn {
margin-left: -1px;
}
// and override it for block buttons as well
.btn-block + .btn-block {
margin-left: 0;
}
}

View File

@ -202,7 +202,7 @@
.navbar-fixed-top,
.navbar-static-top {
.navbar-inner {
.box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1));
}
}
@ -210,7 +210,7 @@
.navbar-fixed-bottom {
bottom: 0;
.navbar-inner {
.box-shadow(~"inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)");
.box-shadow(inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1));
}
}
@ -262,9 +262,7 @@
color: @navbarLinkColorActive;
text-decoration: none;
background-color: @navbarLinkBackgroundActive;
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
.box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
}
// Navbar button for toggling navbar items in responsive layouts
@ -276,7 +274,7 @@
margin-left: 5px;
margin-right: 5px;
.buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
.box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075));
}
.navbar .btn-navbar .icon-bar {
display: block;
@ -448,7 +446,7 @@
color: @white;
background-color: @navbarInverseSearchBackground;
border-color: @navbarInverseSearchBorder;
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15));
.transition(none);
.placeholder(@navbarInverseSearchPlaceholderColor);

View File

@ -12,28 +12,29 @@
.pager li {
display: inline;
}
.pager a,
.pager span {
.pager li > a,
.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
.border-radius(15px);
}
.pager a:hover {
.pager li > a:hover {
text-decoration: none;
background-color: #f5f5f5;
}
.pager .next a,
.pager .next span {
.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous a {
.pager .previous > a,
.pager .previous > span {
float: left;
}
.pager .disabled a,
.pager .disabled a:hover,
.pager .disabled span {
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > span {
color: @grayLight;
background-color: #fff;
cursor: default;

View File

@ -66,7 +66,7 @@
.transition(width .6s ease);
}
.progress .bar + .bar {
.box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
.box-shadow(inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15));
}
// Striped bars

View File

@ -77,8 +77,11 @@ sub {
// -------------------------
img {
max-width: 100%; // Make images inherently responsive
height: auto; // Make images inherently responsive
/* Responsive images (ensure images don't scale beyond their parents) */
max-width: 100%; /* Part 1: Set a maxium relative to the parent */
width: auto\9; /* IE7-8 need help adjusting responsive images */
height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;

View File

@ -61,14 +61,18 @@
.row-fluid [class*="span"] {
float: none;
display: block;
width: auto;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
.span12,
.row-fluid .span12 {
width: 100%;
.box-sizing(border-box);
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
// FORM FIELDS
// -----------
@ -132,25 +136,27 @@
}
// Remove the horizontal form styles
.form-horizontal .control-group > label {
.form-horizontal {
.control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
// Move over all input controls and content
.form-horizontal .controls {
.controls {
margin-left: 0;
}
// Move the options list down to align with labels
.form-horizontal .control-list {
.control-list {
padding-top: 0; // has to be padding because margin collaspes
}
// Move over buttons in .form-actions to align with .controls
.form-horizontal .form-actions {
.form-actions {
padding-left: 10px;
padding-right: 10px;
}
}
// Modals
.modal {

View File

@ -129,7 +129,7 @@
margin: (@baseLineHeight / 2) 0;
border-top: 1px solid @navbarBackground;
border-bottom: 1px solid @navbarBackground;
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
.box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1));
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {

View File

@ -1,5 +1,5 @@
/*!
* Bootstrap Responsive v2.1.1
* Bootstrap Responsive v2.1.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0

View File

@ -32,20 +32,21 @@ a:hover {
// Images
// -------------------------
// Rounded corners
.img-rounded {
.border-radius(6px);
}
// Add polaroid-esque trim
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
box-shadow: 0 1px 3px rgba(0,0,0,.1);
.box-shadow(0 1px 3px rgba(0,0,0,.1));
}
// Perfect circle
.img-circle {
.border-radius(500px);
.border-radius(500px); // crank the border-radius so it works with most reasonably sized images
}

View File

@ -30,8 +30,6 @@
/* White icons with optional class, or on hover/active states of certain elements */
.icon-white,
.nav-tabs > .active > a > [class^="icon-"],
.nav-tabs > .active > a > [class*=" icon-"],
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],

View File

@ -133,7 +133,7 @@ table {
colgroup + tbody tr:first-child td:last-child {
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
}
@ -180,7 +180,7 @@ table [class*=span],
}
// Change the column widths to account for td/th padding
table {
.table {
.span1 { .tableColumns(1); }
.span2 { .tableColumns(2); }
.span3 { .tableColumns(3); }

View File

@ -98,6 +98,44 @@
<!-- Responsive images
================================================== -->
<div class="page-header">
<h1>Responsive images</h1>
</div>
<div class="row">
<div class="span4">
<img src="http://placehold.it/600x600" height="200">
</div>
<div class="span4">
<img src="http://placehold.it/600x600">
</div>
<div class="span4">
<img src="http://placehold.it/600x600">
</div>
</div>
<br>
<div class="row">
<div class="span4">
<img src="http://placehold.it/600x900" style="width: 200px;">
</div>
<div class="span4">
<img src="http://placehold.it/200x300">
</div>
<div class="span4">
<img src="http://placehold.it/600x600">
</div>
</div>
<br><br>
<!-- Fluid grid
================================================== -->

View File

@ -11,7 +11,7 @@ p {
}
.lead {
margin-bottom: @baseLineHeight;
font-size: 20px;
font-size: @baseFontSize * 1.5;
font-weight: 200;
line-height: @baseLineHeight * 1.5;
}
@ -32,9 +32,23 @@ em {
cite {
font-style: normal;
}
// Utility classes
.muted {
color: @grayLight;
}
.text-warning {
color: @warningText;
}
.text-error {
color: @errorText;
}
.text-info {
color: @infoText;
}
.text-success {
color: @successText;
}
// Headings

View File

@ -1,7 +1,7 @@
{
"name": "bootstrap"
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
, "version": "2.1.1"
, "version": "2.1.2"
, "keywords": ["bootstrap", "css"]
, "homepage": "http://twitter.github.com/bootstrap/"
, "author": "Twitter Inc."