Skip to content

B
bootstrap
Commit a3971306 authored by Jonathan Camile's avatar Jonathan Camile
Browse files
Options

Merge branch '2.0.2-wip' of https://github.com/twitter/bootstrap into features/warning_progress_bar

parents 15759d9e fbebb046
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1967 additions and 676 deletions
README.md
View file @ a3971306
TWITTER BOOTSTRAP [Twitter Bootstrap](http://twitter.github.com/bootstrap)
================= =================
Bootstrap is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more. Bootstrap provides simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. In other words, it's a front-end toolkit for faster, more beautiful web development. It's created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat) at Twitter.
To get started, checkout http://twitter.github.com/bootstrap!
Quick start
-----------
Clone the repo, `git clone git@github.com:twitter/bootstrap.git`, or [download the latest release](https://github.com/twitter/bootstrap/zipball/master).
To get started -- checkout http://twitter.github.com/bootstrap!
Versioning Versioning
...@@ -24,6 +32,7 @@ And constructed with the following guidelines: ...@@ -24,6 +32,7 @@ And constructed with the following guidelines:
For more information on SemVer, please visit http://semver.org/. For more information on SemVer, please visit http://semver.org/.
Bug tracker Bug tracker
----------- -----------
...@@ -32,10 +41,12 @@ Have a bug? Please create an issue here on GitHub! ...@@ -32,10 +41,12 @@ Have a bug? Please create an issue here on GitHub!
https://github.com/twitter/bootstrap/issues https://github.com/twitter/bootstrap/issues
Twitter account Twitter account
--------------- ---------------
Keep up to date on announcements and more by following Bootstrap on Twitter, <a href="http://twitter.com/TwBootstrap">@TwBootstrap</a>. Keep up to date on announcements and more by following Bootstrap on Twitter, [@TwBootstrap](http://twitter.com/TwBootstrap).
Mailing list Mailing list
...@@ -48,6 +59,7 @@ twitter-bootstrap@googlegroups.com ...@@ -48,6 +59,7 @@ twitter-bootstrap@googlegroups.com
http://groups.google.com/group/twitter-bootstrap http://groups.google.com/group/twitter-bootstrap
IRC IRC
--- ---
...@@ -56,6 +68,7 @@ Server: irc.freenode.net ...@@ -56,6 +68,7 @@ Server: irc.freenode.net
Channel: ##twitter-bootstrap (the double ## is not a typo) Channel: ##twitter-bootstrap (the double ## is not a typo)
Developers Developers
---------- ----------
...@@ -68,6 +81,7 @@ Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages. ...@@ -68,6 +81,7 @@ Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages.
This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem. This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
Authors Authors
------- -------
...@@ -82,6 +96,7 @@ Authors ...@@ -82,6 +96,7 @@ Authors
+ http://github.com/fat + http://github.com/fat
Copyright and license Copyright and license
--------------------- ---------------------
......
docs/assets/css/bootstrap-responsive.css
View file @ a3971306
...@@ -21,6 +21,52 @@ ...@@ -21,6 +21,52 @@
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.visible-phone {
display: none;
}
.visible-tablet {
display: none;
}
.visible-desktop {
display: block;
}
.hidden-phone {
display: block;
}
.hidden-tablet {
display: block;
}
.hidden-desktop {
display: none;
}
@media (max-width: 767px) {
.visible-phone {
display: block;
}
.hidden-phone {
display: none;
}
.hidden-desktop {
display: block;
}
.visible-desktop {
display: none;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.visible-tablet {
display: block;
}
.hidden-tablet {
display: none;
}
.hidden-desktop {
display: block;
}
.visible-desktop {
display: none;
}
}
@media (max-width: 480px) { @media (max-width: 480px) {
.nav-collapse { .nav-collapse {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
...@@ -128,6 +174,9 @@ ...@@ -128,6 +174,9 @@
float: left; float: left;
margin-left: 20px; margin-left: 20px;
} }
.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 724px;
}
.span1 { .span1 {
width: 42px; width: 42px;
} }
...@@ -161,7 +210,7 @@ ...@@ -161,7 +210,7 @@
.span11 { .span11 {
width: 662px; width: 662px;
} }
.span12, .container { .span12 {
width: 724px; width: 724px;
} }
.offset1 { .offset1 {
...@@ -197,6 +246,9 @@ ...@@ -197,6 +246,9 @@
.offset11 { .offset11 {
margin-left: 702px; margin-left: 702px;
} }
.offset12 {
margin-left: 764px;
}
.row-fluid { .row-fluid {
width: 100%; width: 100%;
*zoom: 1; *zoom: 1;
...@@ -251,40 +303,43 @@ ...@@ -251,40 +303,43 @@
.row-fluid > .span12 { .row-fluid > .span12 {
width: 99.999999993%; width: 99.999999993%;
} }
input.span1, textarea.span1, .uneditable-input.span1 { input, textarea, .uneditable-input {
margin-left: 0;
}
input > .span1, textarea > .span1, .uneditable-input > .span1 {
width: 32px; width: 32px;
} }
input.span2, textarea.span2, .uneditable-input.span2 { input > .span2, textarea > .span2, .uneditable-input > .span2 {
width: 94px; width: 94px;
} }
input.span3, textarea.span3, .uneditable-input.span3 { input > .span3, textarea > .span3, .uneditable-input > .span3 {
width: 156px; width: 156px;
} }
input.span4, textarea.span4, .uneditable-input.span4 { input > .span4, textarea > .span4, .uneditable-input > .span4 {
width: 218px; width: 218px;
} }
input.span5, textarea.span5, .uneditable-input.span5 { input > .span5, textarea > .span5, .uneditable-input > .span5 {
width: 280px; width: 280px;
} }
input.span6, textarea.span6, .uneditable-input.span6 { input > .span6, textarea > .span6, .uneditable-input > .span6 {
width: 342px; width: 342px;
} }
input.span7, textarea.span7, .uneditable-input.span7 { input > .span7, textarea > .span7, .uneditable-input > .span7 {
width: 404px; width: 404px;
} }
input.span8, textarea.span8, .uneditable-input.span8 { input > .span8, textarea > .span8, .uneditable-input > .span8 {
width: 466px; width: 466px;
} }
input.span9, textarea.span9, .uneditable-input.span9 { input > .span9, textarea > .span9, .uneditable-input > .span9 {
width: 528px; width: 528px;
} }
input.span10, textarea.span10, .uneditable-input.span10 { input > .span10, textarea > .span10, .uneditable-input > .span10 {
width: 590px; width: 590px;
} }
input.span11, textarea.span11, .uneditable-input.span11 { input > .span11, textarea > .span11, .uneditable-input > .span11 {
width: 652px; width: 652px;
} }
input.span12, textarea.span12, .uneditable-input.span12 { input > .span12, textarea > .span12, .uneditable-input > .span12 {
width: 714px; width: 714px;
} }
} }
...@@ -395,6 +450,7 @@ ...@@ -395,6 +450,7 @@
@media (min-width: 980px) { @media (min-width: 980px) {
.nav-collapse.collapse { .nav-collapse.collapse {
height: auto !important; height: auto !important;
overflow: visible !important;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
...@@ -413,6 +469,9 @@ ...@@ -413,6 +469,9 @@
float: left; float: left;
margin-left: 30px; margin-left: 30px;
} }
.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}
.span1 { .span1 {
width: 70px; width: 70px;
} }
...@@ -446,7 +505,7 @@ ...@@ -446,7 +505,7 @@
.span11 { .span11 {
width: 1070px; width: 1070px;
} }
.span12, .container { .span12 {
width: 1170px; width: 1170px;
} }
.offset1 { .offset1 {
...@@ -482,6 +541,9 @@ ...@@ -482,6 +541,9 @@
.offset11 { .offset11 {
margin-left: 1130px; margin-left: 1130px;
} }
.offset12 {
margin-left: 1230px;
}
.row-fluid { .row-fluid {
width: 100%; width: 100%;
*zoom: 1; *zoom: 1;
...@@ -536,40 +598,43 @@ ...@@ -536,40 +598,43 @@
.row-fluid > .span12 { .row-fluid > .span12 {
width: 100%; width: 100%;
} }
input.span1, textarea.span1, .uneditable-input.span1 { input, textarea, .uneditable-input {
margin-left: 0;
}
input > .span1, textarea > .span1, .uneditable-input > .span1 {
width: 60px; width: 60px;
} }
input.span2, textarea.span2, .uneditable-input.span2 { input > .span2, textarea > .span2, .uneditable-input > .span2 {
width: 160px; width: 160px;
} }
input.span3, textarea.span3, .uneditable-input.span3 { input > .span3, textarea > .span3, .uneditable-input > .span3 {
width: 260px; width: 260px;
} }
input.span4, textarea.span4, .uneditable-input.span4 { input > .span4, textarea > .span4, .uneditable-input > .span4 {
width: 360px; width: 360px;
} }
input.span5, textarea.span5, .uneditable-input.span5 { input > .span5, textarea > .span5, .uneditable-input > .span5 {
width: 460px; width: 460px;
} }
input.span6, textarea.span6, .uneditable-input.span6 { input > .span6, textarea > .span6, .uneditable-input > .span6 {
width: 560px; width: 560px;
} }
input.span7, textarea.span7, .uneditable-input.span7 { input > .span7, textarea > .span7, .uneditable-input > .span7 {
width: 660px; width: 660px;
} }
input.span8, textarea.span8, .uneditable-input.span8 { input > .span8, textarea > .span8, .uneditable-input > .span8 {
width: 760px; width: 760px;
} }
input.span9, textarea.span9, .uneditable-input.span9 { input > .span9, textarea > .span9, .uneditable-input > .span9 {
width: 860px; width: 860px;
} }
input.span10, textarea.span10, .uneditable-input.span10 { input > .span10, textarea > .span10, .uneditable-input > .span10 {
width: 960px; width: 960px;
} }
input.span11, textarea.span11, .uneditable-input.span11 { input > .span11, textarea > .span11, .uneditable-input > .span11 {
width: 1060px; width: 1060px;
} }
input.span12, textarea.span12, .uneditable-input.span12 { input > .span12, textarea > .span12, .uneditable-input > .span12 {
width: 1160px; width: 1160px;
} }
.thumbnails { .thumbnails {
......
docs/assets/css/bootstrap.css
View file @ a3971306
This diff is collapsed.
docs/assets/css/docs.css
View file @ a3971306
...@@ -79,6 +79,9 @@ hr.soften { ...@@ -79,6 +79,9 @@ hr.soften {
-moz-border-radius: 6px; -moz-border-radius: 6px;
border-radius: 6px; border-radius: 6px;
} }
.jumbotron .btn-large small {
font-size: 14px;
}
/* Masthead (docs home) */ /* Masthead (docs home) */
.masthead { .masthead {
...@@ -427,17 +430,17 @@ hr.soften { ...@@ -427,17 +430,17 @@ hr.soften {
.download-btn { .download-btn {
margin: 36px 0 108px; margin: 36px 0 108px;
} }
.download p, #download p,
.download h4 { #download h4 {
max-width: 50%; max-width: 50%;
margin: 0 auto; margin: 0 auto;
color: #999; color: #999;
text-align: center; text-align: center;
} }
.download h4 { #download h4 {
margin-bottom: 0; margin-bottom: 0;
} }
.download p { #download p {
margin-bottom: 18px; margin-bottom: 18px;
} }
.download-btn .btn { .download-btn .btn {
...@@ -482,8 +485,7 @@ hr.soften { ...@@ -482,8 +485,7 @@ hr.soften {
/* Misc /* Misc
-------------------------------------------------- */ -------------------------------------------------- */
img {
.browser-support {
max-width: 100%; max-width: 100%;
} }
...@@ -558,6 +560,70 @@ form.well { ...@@ -558,6 +560,70 @@ form.well {
background-color: #fff; background-color: #fff;
} }
/* Responsive table
------------------------- */
.responsive-utilities th small {
display: block;
font-weight: normal;
color: #999;
}
.responsive-utilities tbody th {
font-weight: normal;
}
.responsive-utilities td {
text-align: center;
}
.responsive-utilities td.is-visible {
color: #468847;
background-color: #dff0d8 !important;
}
.responsive-utilities td.is-hidden {
color: #ccc;
background-color: #f9f9f9 !important;
}
/* Responsive tests
------------------------- */
.responsive-utilities-test {
margin-top: 5px;
margin-left: 0;
list-style: none;
overflow: hidden; /* clear floats */
}
.responsive-utilities-test li {
position: relative;
float: left;
width: 25%;
height: 43px;
font-size: 14px;
font-weight: bold;
line-height: 43px;
color: #999;
text-align: center;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.responsive-utilities-test li + li {
margin-left: 10px;
}
.responsive-utilities-test span {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.responsive-utilities-test span {
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
}
/* Responsive Docs /* Responsive Docs
-------------------------------------------------- */ -------------------------------------------------- */
......
docs/assets/js/bootstrap-carousel.js
View file @ a3971306
...@@ -29,6 +29,9 @@ ...@@ -29,6 +29,9 @@
this.$element = $(element) this.$element = $(element)
this.options = $.extend({}, $.fn.carousel.defaults, options) this.options = $.extend({}, $.fn.carousel.defaults, options)
this.options.slide && this.slide(this.options.slide) this.options.slide && this.slide(this.options.slide)
this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this))
.on('mouseleave', $.proxy(this.cycle, this))
} }
Carousel.prototype = { Carousel.prototype = {
...@@ -83,14 +86,14 @@ ...@@ -83,14 +86,14 @@
, 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()
$next = $next.length ? $next : this.$element.find('.item')[fallback]() $next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if (!$.support.transition && this.$element.hasClass('slide')) { if (!$.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger('slide') this.$element.trigger('slide')
$active.removeClass('active') $active.removeClass('active')
...@@ -136,6 +139,7 @@ ...@@ -136,6 +139,7 @@
$.fn.carousel.defaults = { $.fn.carousel.defaults = {
interval: 5000 interval: 5000
, pause: 'hover'
} }
$.fn.carousel.Constructor = Carousel $.fn.carousel.Constructor = Carousel
......
docs/assets/js/bootstrap-tooltip.js
View file @ a3971306
...@@ -206,7 +206,7 @@ ...@@ -206,7 +206,7 @@
title = $e.attr('data-original-title') title = $e.attr('data-original-title')
|| (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
title = title.toString().replace(/(^\s*|\s*$)/, "") title = (title || '').toString().replace(/(^\s*|\s*$)/, "")
return title return title
} }
......
docs/base-css.html
View file @ a3971306
...@@ -166,7 +166,8 @@ ...@@ -166,7 +166,8 @@
Wraps abbreviations and acronyms to show the expanded version on hover Wraps abbreviations and acronyms to show the expanded version on hover
</td> </td>
<td> <td>
Include optional <code>title</code> for expanded text <p>Include optional <code>title</code> attribute for expanded text</p>
Use <code>.initialism</code> class for uppercase abbreviations.
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -205,8 +206,9 @@ ...@@ -205,8 +206,9 @@
</div> </div>
<div class="span4"> <div class="span4">
<h3>Example abbreviations</h3> <h3>Example abbreviations</h3>
<p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p> <p>Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p> <p>Add the <code>initialism</code> class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
</div> </div>
</div> </div>
...@@ -569,7 +571,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -569,7 +571,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<th>#</th> <th>#</th>
<th>First Name</th> <th>First Name</th>
<th>Last Name</th> <th>Last Name</th>
<th>Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -577,19 +579,19 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -577,19 +579,19 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td>Larry</td>
<td>Dent</td> <td>the Bird</td>
<td>HTML</td> <td>@twitter</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -614,7 +616,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -614,7 +616,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<th>#</th> <th>#</th>
<th>First Name</th> <th>First Name</th>
<th>Last Name</th> <th>Last Name</th>
<th>Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -622,19 +624,19 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -622,19 +624,19 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td>Larry</td>
<td>Dent</td> <td>the Bird</td>
<td>HTML</td> <td>@twitter</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -658,31 +660,31 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -658,31 +660,31 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<th>#</th> <th>#</th>
<th>First Name</th> <th>First Name</th>
<th>Last Name</th> <th>Last Name</th>
<th>Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>1</td> <td rowspan="2">1</td>
<td colspan="2">Mark Otto</td> <td>Mark</td>
<td>CSS</td> <td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td rowspan="2">Javascript</td> <td>@fat</td>
</tr>
</tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Brosef</td> <td colspan="2">Larry the Bird</td>
<td>Stalin</td> <td>@twitter</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -706,7 +708,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -706,7 +708,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<th>#</th> <th>#</th>
<th>First Name</th> <th>First Name</th>
<th>Last Name</th> <th>Last Name</th>
<th>Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -714,19 +716,18 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -714,19 +716,18 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td colspan="2">Larry the Bird</td>
<td>Dent</td> <td>@twitter</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -747,37 +748,36 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -747,37 +748,36 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<div class="span8"> <div class="span8">
<table class="table table-striped table-bordered table-condensed"> <table class="table table-striped table-bordered table-condensed">
<thead> <thead>
<tr>
<th></th>
<th colspan="2">Full name</th>
<th></th>
</tr>
<tr> <tr>
<th>#</th> <th>#</th>
<th class="yellow">First Name</th> <th>First Name</th>
<th class="blue">Last Name</th> <th>Last Name</th>
<th class="green">Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<tr> <tr>
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td colspan="2">Larry the Bird</td>
<td>Dent</td> <td>@twitter</td>
<td>HTML</td>
</tr>
<tr>
<td>4</td>
<td>Brosef</td>
<td>Stalin</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -862,6 +862,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -862,6 +862,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<form class="well"> <form class="well">
<label>Label name</label> <label>Label name</label>
<input type="text" class="span3" placeholder="Type something…"> <span class="help-inline">Associated help text!</span> <input type="text" class="span3" placeholder="Type something…"> <span class="help-inline">Associated help text!</span>
<p class="help-block">Example block-level help text here.</p>
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> Check me out <input type="checkbox"> Check me out
</label> </label>
...@@ -908,7 +909,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -908,7 +909,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<input type="text" class="input-small" placeholder="Email"> <input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password"> <input type="password" class="input-small" placeholder="Password">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> Remember? <input type="checkbox"> Remember me
</label> </label>
<button type="submit" class="btn">Sign in</button> <button type="submit" class="btn">Sign in</button>
</form> </form>
...@@ -916,7 +917,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -916,7 +917,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;form class="well form-inline"&gt; &lt;form class="well form-inline"&gt;
&lt;input type="text" class="input-small" placeholder="Email"&gt; &lt;input type="text" class="input-small" placeholder="Email"&gt;
&lt;input type="password" class="input-small" placeholder="Password"&gt; &lt;input type="password" class="input-small" placeholder="Password"&gt;
&lt;button type="submit" class="btn"&gt;Go&lt;/button&gt; &lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; Remember me
&lt;/label&gt;
&lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div> </div>
...@@ -1512,9 +1516,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -1512,9 +1516,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</ul> </ul>
</div> </div>
</div> </div>
<div class="alert alert-info">
<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to highlight the icon's size.
</div>
<br> <br>
...@@ -1527,7 +1528,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -1527,7 +1528,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div> </div>
<div class="span4"> <div class="span4">
<h3>How to use</h3> <h3>How to use</h3>
<p>With v2.0.1, we have opted to use an <code>&lt;i&gt;</code> tag for all our icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:</p> <p>Bootstrap uses an <code>&lt;i&gt;</code> tag for all icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;i class="icon-search"&gt;&lt;/i&gt; &lt;i class="icon-search"&gt;&lt;/i&gt;
</pre> </pre>
...@@ -1536,6 +1537,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -1536,6 +1537,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;i class="icon-search icon-white"&gt;&lt;/i&gt; &lt;i class="icon-search icon-white"&gt;&lt;/i&gt;
</pre> </pre>
<p>There are 120 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p> <p>There are 120 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
<p>
<span class="label label-info">Heads up!</span>
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing.
</p>
</div> </div>
<div class="span4"> <div class="span4">
<h3>Use cases</h3> <h3>Use cases</h3>
......
docs/components.html
View file @ a3971306
This diff is collapsed.
docs/download.html
View file @ a3971306
...@@ -108,6 +108,7 @@ ...@@ -108,6 +108,7 @@
<label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> Headings, body, etc</label> <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> Headings, body, etc</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> Code and pre</label> <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> Code and pre</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="labels.less"> Labels</label> <label class="checkbox"><input checked="checked" type="checkbox" value="labels.less"> Labels</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="badges.less"> Badges</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> Tables</label> <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> Tables</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> Forms</label> <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> Forms</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label> <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label>
...@@ -210,7 +211,7 @@ ...@@ -210,7 +211,7 @@
</div><!-- /span --> </div><!-- /span -->
<div class="span4"> <div class="span4">
<h4 class="muted">Heads up!</h4> <h4 class="muted">Heads up!</h4>
<p class="muted">All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p> <p class="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
</div><!-- /span --> </div><!-- /span -->
</div><!-- /row --> </div><!-- /row -->
</section> </section>
......
docs/examples/fluid.html
View file @ a3971306
...@@ -22,14 +22,14 @@ ...@@ -22,14 +22,14 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico"> <link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" href="../assets/ico/bootstrap-apple-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="../assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="../assets/ico/bootstrap-apple-114x114.png">
</head> </head>
<body> <body>
......
docs/examples/hero.html
View file @ a3971306
...@@ -19,14 +19,14 @@ ...@@ -19,14 +19,14 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico"> <link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" href="../assets/ico/bootstrap-apple-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="../assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="../assets/ico/bootstrap-apple-114x114.png">
</head> </head>
<body> <body>
......
docs/examples/starter-template.html
View file @ a3971306
...@@ -18,14 +18,14 @@ ...@@ -18,14 +18,14 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico"> <link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" href="../assets/ico/bootstrap-apple-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="../assets/ico/bootstrap-apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="../assets/ico/bootstrap-apple-114x114.png">
</head> </head>
<body> <body>
......
docs/index.html
View file @ a3971306
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
<p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p> <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
<p class="download-info"> <p class="download-info">
<a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">View project on GitHub</a> <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">View project on GitHub</a>
<a href="assets/bootstrap.zip" class="btn btn-large">Download Bootstrap</a> <a href="assets/bootstrap.zip" class="btn btn-large">Download Bootstrap <small>(v2.0.2)</small></a>
</p> </p>
</div> </div>
......
docs/javascript.html
View file @ a3971306
...@@ -214,8 +214,8 @@ ...@@ -214,8 +214,8 @@
<p>One fine body…</p> <p>One fine body…</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn">Close</a> <a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div> </div>
</div> </div>
</div> <!-- /well --> </div> <!-- /well -->
...@@ -237,10 +237,21 @@ ...@@ -237,10 +237,21 @@
<h4>Tooltips in a modal</h4> <h4>Tooltips in a modal</h4>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p> <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
<hr>
<h4>Overflowing text to show optional scrollbar</h4>
<p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn" data-dismiss="modal" >Close</a> <a href="#" class="btn" data-dismiss="modal" >Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div> </div>
</div> </div>
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
...@@ -265,7 +276,7 @@ ...@@ -265,7 +276,7 @@
<td>backdrop</td> <td>backdrop</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Includes a modal-backdrop element</td> <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
</tr> </tr>
<tr> <tr>
<td>keyboard</td> <td>keyboard</td>
...@@ -298,8 +309,8 @@ ...@@ -298,8 +309,8 @@
&lt;p&gt;One fine body…&lt;/p&gt; &lt;p&gt;One fine body…&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-footer"&gt; &lt;div class="modal-footer"&gt;
&lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
&lt;a href="#" class="btn"&gt;Close&lt;/a&gt; &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
&lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
...@@ -464,7 +475,7 @@ $('#myModal').on('hidden', function () { ...@@ -464,7 +475,7 @@ $('#myModal').on('hidden', function () {
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav pills"&gt; &lt;ul class="nav nav-pills"&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt;
&lt;li class="dropdown" id="menu1"&gt; &lt;li class="dropdown" id="menu1"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt; &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
...@@ -1299,10 +1310,16 @@ $('#myCollapsible').on('hidden', function () { ...@@ -1299,10 +1310,16 @@ $('#myCollapsible').on('hidden', function () {
<td>5000</td> <td>5000</td>
<td>The amount of time to delay between automatically cycling an item.</td> <td>The amount of time to delay between automatically cycling an item.</td>
</tr> </tr>
<tr>
<td>pause</td>
<td>string</td>
<td>"hover"</td>
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
</tr>
</tbody> </tbody>
</table> </table>
<h3>Markup</h3> <h3>Markup</h3>
<p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p> <p>Data attributes are used for the previous and next conrols. Check out the example markup below.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div id="myCarousel" class="carousel"&gt; &lt;div id="myCarousel" class="carousel"&gt;
&lt;!-- Carousel items --&gt; &lt;!-- Carousel items --&gt;
...@@ -1320,7 +1337,7 @@ $('#myCollapsible').on('hidden', function () { ...@@ -1320,7 +1337,7 @@ $('#myCollapsible').on('hidden', function () {
<h4>.carousel(options)</h4> <h4>.carousel(options)</h4>
<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p> <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('.myCarousel').carousel({ $('.carousel').carousel({
interval: 2000 interval: 2000
}) })
</pre> </pre>
...@@ -1335,7 +1352,7 @@ $('.myCarousel').carousel({ ...@@ -1335,7 +1352,7 @@ $('.myCarousel').carousel({
<h4>.carousel('next')</h4> <h4>.carousel('next')</h4>
<p>Cycles to the next item.</p> <p>Cycles to the next item.</p>
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p> <p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
......
docs/scaffolding.html
View file @ a3971306
This diff is collapsed.
docs/templates/pages/base-css.mustache
View file @ a3971306
...@@ -90,7 +90,8 @@ ...@@ -90,7 +90,8 @@
{{_i}}Wraps abbreviations and acronyms to show the expanded version on hover{{/i}} {{_i}}Wraps abbreviations and acronyms to show the expanded version on hover{{/i}}
</td> </td>
<td> <td>
{{_i}}Include optional <code>title</code> for expanded text{{/i}} <p>{{_i}}Include optional <code>title</code> attribute for expanded text{{/i}}</p>
{{_i}}Use <code>.initialism</code> class for uppercase abbreviations.{{/i}}
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -129,8 +130,9 @@ ...@@ -129,8 +130,9 @@
</div> </div>
<div class="span4"> <div class="span4">
<h3>{{_i}}Example abbreviations{{/i}}</h3> <h3>{{_i}}Example abbreviations{{/i}}</h3>
<p>{{_i}}Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.{{/i}}</p> <p>{{_i}}Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.{{/i}}</p>
<p>{{_i}}<abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.{{/i}}</p> <p>{{_i}}Add the <code>initialism</code> class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.{{/i}}</p>
<p>{{_i}}<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.{{/i}}</p>
<p>{{_i}}An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.{{/i}}</p> <p>{{_i}}An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.{{/i}}</p>
</div> </div>
</div> </div>
...@@ -493,7 +495,7 @@ ...@@ -493,7 +495,7 @@
<th>#</th> <th>#</th>
<th>{{_i}}First Name{{/i}}</th> <th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -501,19 +503,19 @@ ...@@ -501,19 +503,19 @@
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td>Larry</td>
<td>Dent</td> <td>the Bird</td>
<td>HTML</td> <td>@twitter</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -538,7 +540,7 @@ ...@@ -538,7 +540,7 @@
<th>#</th> <th>#</th>
<th>{{_i}}First Name{{/i}}</th> <th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -546,19 +548,19 @@ ...@@ -546,19 +548,19 @@
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td>Larry</td>
<td>Dent</td> <td>the Bird</td>
<td>HTML</td> <td>@twitter</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -582,31 +584,31 @@ ...@@ -582,31 +584,31 @@
<th>#</th> <th>#</th>
<th>{{_i}}First Name{{/i}}</th> <th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>1</td> <td rowspan="2">1</td>
<td colspan="2">Mark Otto</td> <td>Mark</td>
<td>CSS</td> <td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td rowspan="2">Javascript</td> <td>@fat</td>
</tr>
</tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Brosef</td> <td colspan="2">Larry the Bird</td>
<td>Stalin</td> <td>@twitter</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -630,7 +632,7 @@ ...@@ -630,7 +632,7 @@
<th>#</th> <th>#</th>
<th>{{_i}}First Name{{/i}}</th> <th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -638,19 +640,18 @@ ...@@ -638,19 +640,18 @@
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td colspan="2">Larry the Bird</td>
<td>Dent</td> <td>@twitter</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -671,37 +672,36 @@ ...@@ -671,37 +672,36 @@
<div class="span8"> <div class="span8">
<table class="table table-striped table-bordered table-condensed"> <table class="table table-striped table-bordered table-condensed">
<thead> <thead>
<tr>
<th></th>
<th colspan="2">{{_i}}Full name{{/i}}</th>
<th></th>
</tr>
<tr> <tr>
<th>#</th> <th>#</th>
<th class="yellow">{{_i}}First Name{{/i}}</th> <th>{{_i}}First Name{{/i}}</th>
<th class="blue">{{_i}}Last Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th class="green">{{_i}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<tr> <tr>
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td colspan="2">Larry the Bird</td>
<td>Dent</td> <td>@twitter</td>
<td>HTML</td>
</tr>
<tr>
<td>4</td>
<td>Brosef</td>
<td>Stalin</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -786,6 +786,7 @@ ...@@ -786,6 +786,7 @@
<form class="well"> <form class="well">
<label>{{_i}}Label name{{/i}}</label> <label>{{_i}}Label name{{/i}}</label>
<input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"> <span class="help-inline">Associated help text!</span> <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"> <span class="help-inline">Associated help text!</span>
<p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> {{_i}}Check me out{{/i}} <input type="checkbox"> {{_i}}Check me out{{/i}}
</label> </label>
...@@ -832,7 +833,7 @@ ...@@ -832,7 +833,7 @@
<input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"> <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"> <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> {{_i}}Remember?{{/i}} <input type="checkbox"> {{_i}}Remember me{{/i}}
</label> </label>
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
</form> </form>
...@@ -840,7 +841,10 @@ ...@@ -840,7 +841,10 @@
&lt;form class="well form-inline"&gt; &lt;form class="well form-inline"&gt;
&lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt; &lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt;
&lt;input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"&gt; &lt;input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Go{{/i}}&lt;/button&gt; &lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}}
&lt;/label&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div> </div>
...@@ -1436,9 +1440,6 @@ ...@@ -1436,9 +1440,6 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="alert alert-info">
{{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to highlight the icon's size.{{/i}}
</div>
<br> <br>
...@@ -1451,7 +1452,7 @@ ...@@ -1451,7 +1452,7 @@
</div> </div>
<div class="span4"> <div class="span4">
<h3>{{_i}}How to use{{/i}}</h3> <h3>{{_i}}How to use{{/i}}</h3>
<p>{{_i}}With v2.0.1, we have opted to use an <code>&lt;i&gt;</code> tag for all our icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p> <p>{{_i}}Bootstrap uses an <code>&lt;i&gt;</code> tag for all icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;i class="icon-search"&gt;&lt;/i&gt; &lt;i class="icon-search"&gt;&lt;/i&gt;
</pre> </pre>
...@@ -1460,6 +1461,10 @@ ...@@ -1460,6 +1461,10 @@
&lt;i class="icon-search icon-white"&gt;&lt;/i&gt; &lt;i class="icon-search icon-white"&gt;&lt;/i&gt;
</pre> </pre>
<p>{{_i}}There are 120 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p> <p>{{_i}}There are 120 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
<p>
<span class="label label-info">{{_i}}Heads up!{{/i}}</span>
{{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing.{{/i}}
</p>
</div> </div>
<div class="span4"> <div class="span4">
<h3>{{_i}}Use cases{{/i}}</h3> <h3>{{_i}}Use cases{{/i}}</h3>
......
docs/templates/pages/components.mustache
View file @ a3971306
This diff is collapsed.
docs/templates/pages/download.mustache
View file @ a3971306
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
<label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> {{_i}}Headings, body, etc{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> {{_i}}Headings, body, etc{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> {{_i}}Code and pre{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> {{_i}}Code and pre{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="labels.less"> {{_i}}Labels{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="labels.less"> {{_i}}Labels{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="badges.less"> {{_i}}Badges{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> {{_i}}Tables{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> {{_i}}Tables{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> {{_i}}Forms{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> {{_i}}Forms{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> {{_i}}Buttons{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> {{_i}}Buttons{{/i}}</label>
...@@ -134,7 +135,7 @@ ...@@ -134,7 +135,7 @@
</div><!-- /span --> </div><!-- /span -->
<div class="span4"> <div class="span4">
<h4 class="muted">{{_i}}Heads up!{{/i}}</h4> <h4 class="muted">{{_i}}Heads up!{{/i}}</h4>
<p class="muted">{{_i}}All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.{{/i}}</p> <p class="muted">{{_i}}All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.{{/i}}</p>
</div><!-- /span --> </div><!-- /span -->
</div><!-- /row --> </div><!-- /row -->
</section> </section>
......
docs/templates/pages/index.mustache
View file @ a3971306
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</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 <small>(v2.0.2)</small>{{/i}}</a>
</p> </p>
</div> </div>
......
docs/templates/pages/javascript.mustache
View file @ a3971306
...@@ -138,8 +138,8 @@ ...@@ -138,8 +138,8 @@
<p>{{_i}}One fine body…{{/i}}</p> <p>{{_i}}One fine body…{{/i}}</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
<a href="#" class="btn">{{_i}}Close{{/i}}</a> <a href="#" class="btn">{{_i}}Close{{/i}}</a>
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
</div> </div>
</div> </div>
</div> <!-- /well --> </div> <!-- /well -->
...@@ -161,10 +161,21 @@ ...@@ -161,10 +161,21 @@
<h4>{{_i}}Tooltips in a modal{{/i}}</h4> <h4>{{_i}}Tooltips in a modal{{/i}}</h4>
<p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p> <p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p>
<hr>
<h4>{{_i}}Overflowing text to show optional scrollbar{{/i}}</h4>
<p>{{_i}}We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.{{/i}}</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
<a href="#" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a> <a href="#" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
<a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
</div> </div>
</div> </div>
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
...@@ -189,7 +200,7 @@ ...@@ -189,7 +200,7 @@
<td>{{_i}}backdrop{{/i}}</td> <td>{{_i}}backdrop{{/i}}</td>
<td>{{_i}}boolean{{/i}}</td> <td>{{_i}}boolean{{/i}}</td>
<td>{{_i}}true{{/i}}</td> <td>{{_i}}true{{/i}}</td>
<td>{{_i}}Includes a modal-backdrop element{{/i}}</td> <td>{{_i}}Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td>{{_i}}keyboard{{/i}}</td> <td>{{_i}}keyboard{{/i}}</td>
...@@ -222,8 +233,8 @@ ...@@ -222,8 +233,8 @@
&lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt; &lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="modal-footer"&gt; &lt;div class="modal-footer"&gt;
&lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
&lt;a href="#" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt; &lt;a href="#" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
&lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
...@@ -388,7 +399,7 @@ $('#myModal').on('hidden', function () { ...@@ -388,7 +399,7 @@ $('#myModal').on('hidden', function () {
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav pills"&gt; &lt;ul class="nav nav-pills"&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt;
&lt;li class="dropdown" id="menu1"&gt; &lt;li class="dropdown" id="menu1"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt; &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
...@@ -1223,10 +1234,16 @@ $('#myCollapsible').on('hidden', function () { ...@@ -1223,10 +1234,16 @@ $('#myCollapsible').on('hidden', function () {
<td>5000</td> <td>5000</td>
<td>{{_i}}The amount of time to delay between automatically cycling an item.{{/i}}</td> <td>{{_i}}The amount of time to delay between automatically cycling an item.{{/i}}</td>
</tr> </tr>
<tr>
<td>{{_i}}pause{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>"hover"</td>
<td>{{_i}}Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.{{/i}}</td>
</tr>
</tbody> </tbody>
</table> </table>
<h3>{{_i}}Markup{{/i}}</h3> <h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.{{/i}}</p> <p>{{_i}}Data attributes are used for the previous and next conrols. Check out the example markup below.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div id="myCarousel" class="carousel"&gt; &lt;div id="myCarousel" class="carousel"&gt;
&lt;!-- {{_i}}Carousel items{{/i}} --&gt; &lt;!-- {{_i}}Carousel items{{/i}} --&gt;
...@@ -1244,7 +1261,7 @@ $('#myCollapsible').on('hidden', function () { ...@@ -1244,7 +1261,7 @@ $('#myCollapsible').on('hidden', function () {
<h4>.carousel({{_i}}options{{/i}})</h4> <h4>.carousel({{_i}}options{{/i}})</h4>
<p>{{_i}}Initializes the carousel with an optional options <code>object</code> and starts cycling through items.{{/i}}</p> <p>{{_i}}Initializes the carousel with an optional options <code>object</code> and starts cycling through items.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
$('.myCarousel').carousel({ $('.carousel').carousel({
interval: 2000 interval: 2000
}) })
</pre> </pre>
...@@ -1259,7 +1276,7 @@ $('.myCarousel').carousel({ ...@@ -1259,7 +1276,7 @@ $('.myCarousel').carousel({
<h4>.carousel('next')</h4> <h4>.carousel('next')</h4>
<p>{{_i}}Cycles to the next item.{{/i}}</p> <p>{{_i}}Cycles to the next item.{{/i}}</p>
<h3>{{_i}}Events{{/i}}</h3> <h3>{{_i}}Events{{/i}}</h3>
<p>{{_i}}Bootstrap's modal class exposes a few events for hooking into modal functionality.{{/i}}</p> <p>{{_i}}Bootstrap's carousel class exposes two events for hooking into carousel functionality.{{/i}}</p>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
......
docs/templates/pages/scaffolding.mustache
View file @ a3971306
This diff is collapsed.
js/bootstrap-carousel.js
View file @ a3971306
...@@ -29,6 +29,9 @@ ...@@ -29,6 +29,9 @@
this.$element = $(element) this.$element = $(element)
this.options = $.extend({}, $.fn.carousel.defaults, options) this.options = $.extend({}, $.fn.carousel.defaults, options)
this.options.slide && this.slide(this.options.slide) this.options.slide && this.slide(this.options.slide)
this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this))
.on('mouseleave', $.proxy(this.cycle, this))
} }
Carousel.prototype = { Carousel.prototype = {
...@@ -83,14 +86,14 @@ ...@@ -83,14 +86,14 @@
, 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()
$next = $next.length ? $next : this.$element.find('.item')[fallback]() $next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if (!$.support.transition && this.$element.hasClass('slide')) { if (!$.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger('slide') this.$element.trigger('slide')
$active.removeClass('active') $active.removeClass('active')
...@@ -136,6 +139,7 @@ ...@@ -136,6 +139,7 @@
$.fn.carousel.defaults = { $.fn.carousel.defaults = {
interval: 5000 interval: 5000
, pause: 'hover'
} }
$.fn.carousel.Constructor = Carousel $.fn.carousel.Constructor = Carousel
......
js/bootstrap-tooltip.js
View file @ a3971306
...@@ -206,7 +206,7 @@ ...@@ -206,7 +206,7 @@
title = $e.attr('data-original-title') title = $e.attr('data-original-title')
|| (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
title = title.toString().replace(/(^\s*|\s*$)/, "") title = (title || '').toString().replace(/(^\s*|\s*$)/, "")
return title return title
} }
......
less/alerts.less
View file @ a3971306
...@@ -9,10 +9,10 @@ ...@@ -9,10 +9,10 @@
background-color: @warningBackground; background-color: @warningBackground;
border: 1px solid @warningBorder; border: 1px solid @warningBorder;
.border-radius(4px); .border-radius(4px);
color: @warningText;
} }
.alert,
.alert-heading { .alert-heading {
color: @warningText; color: inherit;
} }
// Adjust close link position // Adjust close link position
...@@ -29,32 +29,20 @@ ...@@ -29,32 +29,20 @@
.alert-success { .alert-success {
background-color: @successBackground; background-color: @successBackground;
border-color: @successBorder; border-color: @successBorder;
}
.alert-success,
.alert-success .alert-heading {
color: @successText; color: @successText;
} }
.alert-danger, .alert-danger,
.alert-error { .alert-error {
background-color: @errorBackground; background-color: @errorBackground;
border-color: @errorBorder; border-color: @errorBorder;
}
.alert-danger,
.alert-error,
.alert-danger .alert-heading,
.alert-error .alert-heading {
color: @errorText; color: @errorText;
} }
.alert-info { .alert-info {
background-color: @infoBackground; background-color: @infoBackground;
border-color: @infoBorder; border-color: @infoBorder;
}
.alert-info,
.alert-info .alert-heading {
color: @infoText; color: @infoText;
} }
// Block alerts // Block alerts
// ------------------------ // ------------------------
.alert-block { .alert-block {
......
less/badges.less 0 → 100644
View file @ a3971306
// BADGES
// ------
// Base
.badge {
padding: 1px 9px 2px;
font-size: @baseFontSize * .925;
font-weight: bold;
white-space: nowrap;
color: @white;
background-color: @grayLight;
.border-radius(9px);
}
// Hover state
.badge:hover {
color: @white;
text-decoration: none;
cursor: pointer;
}
// Colors
.badge-error { background-color: @errorText; }
.badge-error:hover { background-color: darken(@errorText, 10%); }
.badge-warning { background-color: @orange; }
.badge-warning:hover { background-color: darken(@orange, 10%); }
.badge-success { background-color: @successText; }
.badge-success:hover { background-color: darken(@successText, 10%); }
.badge-info { background-color: @infoText; }
.badge-info:hover { background-color: darken(@infoText, 10%); }
.badge-inverse { background-color: @grayDark; }
.badge-inverse:hover { background-color: darken(@grayDark, 10%); }
\ No newline at end of file
less/bootstrap.less
View file @ a3971306
...@@ -53,6 +53,7 @@ ...@@ -53,6 +53,7 @@
// Components: Misc // Components: Misc
@import "thumbnails.less"; @import "thumbnails.less";
@import "labels.less"; @import "labels.less";
@import "badges.less";
@import "progress-bars.less"; @import "progress-bars.less";
@import "accordion.less"; @import "accordion.less";
@import "carousel.less"; @import "carousel.less";
......
less/breadcrumbs.less
View file @ a3971306
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
.breadcrumb { .breadcrumb {
padding: 7px 14px; padding: 7px 14px;
margin: 0 0 @baseLineHeight; margin: 0 0 @baseLineHeight;
list-style: none;
#gradient > .vertical(@white, #f5f5f5); #gradient > .vertical(@white, #f5f5f5);
border: 1px solid #ddd; border: 1px solid #ddd;
.border-radius(3px); .border-radius(3px);
......
less/button-groups.less
View file @ a3971306
...@@ -137,6 +137,7 @@ ...@@ -137,6 +137,7 @@
.btn-inverse { .btn-inverse {
.caret { .caret {
border-top-color: @white; border-top-color: @white;
border-bottom-color: @white;
.opacity(75); .opacity(75);
} }
} }
......
less/buttons.less
View file @ a3971306
...@@ -25,7 +25,6 @@ ...@@ -25,7 +25,6 @@
cursor: pointer; cursor: pointer;
// Give IE7 some love // Give IE7 some love
.reset-filter();
.ie7-restore-left-whitespace(); .ie7-restore-left-whitespace();
} }
...@@ -126,7 +125,7 @@ ...@@ -126,7 +125,7 @@
.btn-danger.active, .btn-danger.active,
.btn-success.active, .btn-success.active,
.btn-info.active, .btn-info.active,
.btn-dark.active { .btn-inverse.active {
color: rgba(255,255,255,.75); color: rgba(255,255,255,.75);
} }
...@@ -153,7 +152,7 @@ ...@@ -153,7 +152,7 @@
} }
// Inverse appears as dark gray // Inverse appears as dark gray
.btn-inverse { .btn-inverse {
.buttonBackground(#454545, #262626); .buttonBackground(@gray, @grayDarker);
} }
...@@ -172,11 +171,11 @@ input[type="submit"].btn { ...@@ -172,11 +171,11 @@ input[type="submit"].btn {
// IE7 has some default padding on button controls // IE7 has some default padding on button controls
*padding-top: 2px; *padding-top: 2px;
*padding-bottom: 2px; *padding-bottom: 2px;
&.large { &.btn-large {
*padding-top: 7px; *padding-top: 7px;
*padding-bottom: 7px; *padding-bottom: 7px;
} }
&.small { &.btn-small {
*padding-top: 3px; *padding-top: 3px;
*padding-bottom: 3px; *padding-bottom: 3px;
} }
......
less/code.less
View file @ a3971306
...@@ -14,7 +14,7 @@ pre { ...@@ -14,7 +14,7 @@ pre {
// Inline code // Inline code
code { code {
padding: 3px 4px; padding: 2px 4px;
color: #d14; color: #d14;
background-color: #f7f7f9; background-color: #f7f7f9;
border: 1px solid #e1e1e8; border: 1px solid #e1e1e8;
......
less/dropdowns.less
View file @ a3971306
...@@ -13,7 +13,9 @@ ...@@ -13,7 +13,9 @@
.open .dropdown-toggle { .open .dropdown-toggle {
outline: 0; outline: 0;
} }
// Dropdown arrow/caret // Dropdown arrow/caret
// --------------------
.caret { .caret {
display: inline-block; display: inline-block;
width: 0; width: 0;
...@@ -29,6 +31,7 @@ ...@@ -29,6 +31,7 @@
.opacity(30); .opacity(30);
content: "\2193"; content: "\2193";
} }
.dropdown .caret { .dropdown .caret {
margin-top: 8px; margin-top: 8px;
margin-left: 2px; margin-left: 2px;
...@@ -37,7 +40,9 @@ ...@@ -37,7 +40,9 @@
.open.dropdown .caret { .open.dropdown .caret {
.opacity(100); .opacity(100);
} }
// The dropdown menu (ul) // The dropdown menu (ul)
// ----------------------
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
top: 100%; top: 100%;
...@@ -46,7 +51,6 @@ ...@@ -46,7 +51,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;
_width: 160px;
padding: 4px 0; padding: 4px 0;
margin: 0; // override default ul margin: 0; // override default ul
list-style: none; list-style: none;
...@@ -63,27 +67,15 @@ ...@@ -63,27 +67,15 @@
*border-right-width: 2px; *border-right-width: 2px;
*border-bottom-width: 2px; *border-bottom-width: 2px;
// Allow for dropdowns to go bottom up (aka, dropup-menu) // Aligns the dropdown menu to right
&.bottom-up { &.pull-right {
top: auto; right: 0;
bottom: 100%; left: auto;
margin-bottom: 2px;
} }
// Dividers (basically an hr) within the dropdown // Dividers (basically an hr) within the dropdown
.divider { .divider {
height: 1px; .nav-divider();
margin: 5px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid @white;
// IE7 needs a set width since we gave a height. Restricting just
// to IE7 to keep the 1px left/right space in other browsers.
// It is unclear where IE is getting the extra space that we need
// to negative-margin away, but so it goes.
*width: 100%;
*margin: -5px 0 5px;
} }
// Links within the dropdown menu // Links within the dropdown menu
...@@ -99,6 +91,7 @@ ...@@ -99,6 +91,7 @@
} }
// Hover state // Hover state
// -----------
.dropdown-menu li > a:hover, .dropdown-menu li > a:hover,
.dropdown-menu .active > a, .dropdown-menu .active > a,
.dropdown-menu .active > a:hover { .dropdown-menu .active > a:hover {
...@@ -108,6 +101,7 @@ ...@@ -108,6 +101,7 @@
} }
// Open state for the dropdown // Open state for the dropdown
// ---------------------------
.dropdown.open { .dropdown.open {
// IE7's z-index only goes to the nearest positioned ancestor, which would // IE7's z-index only goes to the nearest positioned ancestor, which would
// make the menu appear below buttons that appeared later on the page // make the menu appear below buttons that appeared later on the page
...@@ -123,7 +117,34 @@ ...@@ -123,7 +117,34 @@
} }
} }
// Right aligned dropdowns
.pull-right .dropdown-menu {
left: auto;
right: 0;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
border-top: 0;
border-bottom: 4px solid @black;
content: "\2191";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
}
// Typeahead // Typeahead
// ---------
.typeahead { .typeahead {
margin-top: 2px; // give it some space to breathe margin-top: 2px; // give it some space to breathe
.border-radius(4px); .border-radius(4px);
......
less/forms.less
View file @ a3971306
...@@ -253,7 +253,7 @@ textarea[class*="span"], ...@@ -253,7 +253,7 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS // GRID SIZING FOR INPUTS
// ---------------------- // ----------------------
#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth); #grid > .input (@gridColumnWidth, @gridGutterWidth);
...@@ -301,7 +301,7 @@ select:focus:required:invalid { ...@@ -301,7 +301,7 @@ select:focus:required:invalid {
border-color: #ee5f5b; border-color: #ee5f5b;
&:focus { &:focus {
border-color: darken(#ee5f5b, 10%); border-color: darken(#ee5f5b, 10%);
.box-shadow(0 0 6px lighten(#ee5f5b, 20%)); .box-shadow(0 0 6px lighten(#ee5f5b, 20%));
} }
} }
...@@ -316,6 +316,7 @@ select:focus:required:invalid { ...@@ -316,6 +316,7 @@ select:focus:required:invalid {
margin-bottom: @baseLineHeight; margin-bottom: @baseLineHeight;
background-color: #f5f5f5; background-color: #f5f5f5;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
.clearfix(); // Adding clearfix to allow for .pull-right button containers
} }
// For text that needs to appear as an input but should not be an input // For text that needs to appear as an input but should not be an input
...@@ -335,17 +336,19 @@ select:focus:required:invalid { ...@@ -335,17 +336,19 @@ select:focus:required:invalid {
// HELP TEXT // HELP TEXT
// --------- // ---------
.help-block,
.help-inline {
color: @gray; // lighten the text some for contrast
}
.help-block { .help-block {
display: block; // account for any element using help-block display: block; // account for any element using help-block
margin-top: 5px; margin-bottom: @baseLineHeight / 2;
margin-bottom: 0;
color: @grayLight;
} }
.help-inline { .help-inline {
display: inline-block; display: inline-block;
.ie7-inline-block(); .ie7-inline-block();
margin-bottom: 9px;
vertical-align: middle; vertical-align: middle;
padding-left: 5px; padding-left: 5px;
} }
...@@ -361,6 +364,7 @@ select:focus:required:invalid { ...@@ -361,6 +364,7 @@ select:focus:required:invalid {
margin-bottom: 5px; margin-bottom: 5px;
.clearfix(); // Clear the float to prevent wrapping .clearfix(); // Clear the float to prevent wrapping
input, input,
select,
.uneditable-input { .uneditable-input {
.border-radius(0 3px 3px 0); .border-radius(0 3px 3px 0);
&:focus { &:focus {
...@@ -381,7 +385,6 @@ select:focus:required:invalid { ...@@ -381,7 +385,6 @@ select:focus:required:invalid {
padding: 4px 5px; padding: 4px 5px;
font-weight: normal; font-weight: normal;
line-height: @baseLineHeight; line-height: @baseLineHeight;
color: @grayLight;
text-align: center; text-align: center;
text-shadow: 0 1px 0 @white; text-shadow: 0 1px 0 @white;
background-color: #f5f5f5; background-color: #f5f5f5;
...@@ -400,13 +403,14 @@ select:focus:required:invalid { ...@@ -400,13 +403,14 @@ select:focus:required:invalid {
} }
.input-append { .input-append {
input, input,
select
.uneditable-input { .uneditable-input {
float: left; float: left;
.border-radius(3px 0 0 3px); .border-radius(3px 0 0 3px);
} }
.uneditable-input { .uneditable-input {
border-left-color: #eee; border-left-color: #eee;
border-right-color: #ccc; border-right-color: #ccc;
} }
.add-on { .add-on {
margin-right: 0; margin-right: 0;
...@@ -470,19 +474,30 @@ select:focus:required:invalid { ...@@ -470,19 +474,30 @@ select:focus:required:invalid {
} }
// Make the prepend and append add-on vertical-align: middle; // Make the prepend and append add-on vertical-align: middle;
.form-search .input-append .add-on, .form-search .input-append .add-on,
.form-inline .input-prepend .add-on, .form-search .input-prepend .add-on,
.form-search .input-append .add-on, .form-inline .input-append .add-on,
.form-inline .input-prepend .add-on { .form-inline .input-prepend .add-on {
vertical-align: middle; vertical-align: middle;
} }
// Inline checkbox/radio labels // Inline checkbox/radio labels (remove padding on left)
.form-search .radio, .form-search .radio,
.form-inline .radio,
.form-search .checkbox, .form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox { .form-inline .checkbox {
padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
// Remove float and margin, set to inline-block
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-left: 0;
margin-right: 3px;
}
// Margin to space out fieldsets // Margin to space out fieldsets
.control-group { .control-group {
...@@ -515,6 +530,11 @@ legend + .control-group { ...@@ -515,6 +530,11 @@ legend + .control-group {
.controls { .controls {
margin-left: 160px; margin-left: 160px;
} }
// Remove bottom margin on block level help text since that's accounted for on .control-group
.help-block {
margin-top: @baseLineHeight / 2;
margin-bottom: 0;
}
// Move over buttons in .form-actions to align with .controls // Move over buttons in .form-actions to align with .controls
.form-actions { .form-actions {
padding-left: 160px; padding-left: 160px;
......
less/grid.less
View file @ a3971306
// GRID SYSTEM
// -----------
// Fixed (940px) // Fixed (940px)
#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth); #grid > .core(@gridColumnWidth, @gridGutterWidth);
// Fluid (940px) // Fluid (940px)
#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth); #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
\ No newline at end of file
less/labels.less
View file @ a3971306
...@@ -3,10 +3,12 @@ ...@@ -3,10 +3,12 @@
// Base // Base
.label { .label {
padding: 2px 4px 3px; padding: 1px 4px 2px;
font-size: @baseFontSize * .85; font-size: @baseFontSize * .846;
font-weight: bold; font-weight: bold;
line-height: 13px; // ensure proper line-height if floated
color: @white; color: @white;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @grayLight; background-color: @grayLight;
.border-radius(3px); .border-radius(3px);
...@@ -30,3 +32,6 @@ ...@@ -30,3 +32,6 @@
.label-info { background-color: @infoText; } .label-info { background-color: @infoText; }
.label-info:hover { background-color: darken(@infoText, 10%); } .label-info:hover { background-color: darken(@infoText, 10%); }
.label-inverse { background-color: @grayDark; }
.label-inverse:hover { background-color: darken(@grayDark, 10%); }
\ No newline at end of file
less/mixins.less
View file @ a3971306
This diff is collapsed.
less/modals.less
View file @ a3971306
...@@ -33,7 +33,6 @@ ...@@ -33,7 +33,6 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: @zindexModal; z-index: @zindexModal;
max-height: 500px;
overflow: auto; overflow: auto;
width: 560px; width: 560px;
margin: -250px 0 0 -280px; margin: -250px 0 0 -280px;
...@@ -59,10 +58,12 @@ ...@@ -59,10 +58,12 @@
// Body (where all modal content resises) // Body (where all modal content resises)
.modal-body { .modal-body {
overflow-y: auto;
max-height: 400px;
padding: 15px; padding: 15px;
} }
// Remove bottom margin if need be // Remove bottom margin if need be
.modal-body .modal-form { .modal-form {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -70,13 +71,15 @@ ...@@ -70,13 +71,15 @@
.modal-footer { .modal-footer {
padding: 14px 15px 15px; padding: 14px 15px 15px;
margin-bottom: 0; margin-bottom: 0;
text-align: right; // right align buttons
background-color: #f5f5f5; background-color: #f5f5f5;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px); .border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @white); .box-shadow(inset 0 1px 0 @white);
.clearfix(); .clearfix(); // clear it in case folks use .pull-* classes on buttons
.btn {
float: right; // Properly space out buttons
.btn + .btn {
margin-left: 5px; margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
} }
......
less/navbar.less
View file @ a3971306
...@@ -20,6 +20,12 @@ ...@@ -20,6 +20,12 @@
.box-shadow(@shadow); .box-shadow(@shadow);
} }
// Set width to auto for default container
// We then reset it for fixed navbars in the #gridSystem mixin
.navbar .container {
width: auto;
}
// Navbar button for toggling navbar items in responsive layouts // Navbar button for toggling navbar items in responsive layouts
.btn-navbar { .btn-navbar {
display: none; display: none;
...@@ -50,6 +56,7 @@ ...@@ -50,6 +56,7 @@
// Brand, links, text, and buttons // Brand, links, text, and buttons
.navbar { .navbar {
color: @navbarText;
// Hover and active states // Hover and active states
.brand:hover { .brand:hover {
text-decoration: none; text-decoration: none;
...@@ -69,16 +76,11 @@ ...@@ -69,16 +76,11 @@
.navbar-text { .navbar-text {
margin-bottom: 0; margin-bottom: 0;
line-height: 40px; line-height: 40px;
color: @navbarText;
a:hover {
color: @white;
background-color: transparent;
}
} }
// Buttons in navbar // Buttons in navbar
.btn, .btn,
.btn-group { .btn-group {
margin-top: 5px; // make buttons vertically centered in navbar .navbarVerticalAlign(30px); // Vertically center in navbar
} }
.btn-group .btn { .btn-group .btn {
margin-top: 0; // then undo the margin here so we don't accidentally double it margin-top: 0; // then undo the margin here so we don't accidentally double it
...@@ -90,15 +92,16 @@ ...@@ -90,15 +92,16 @@
margin-bottom: 0; // remove default bottom margin margin-bottom: 0; // remove default bottom margin
.clearfix(); .clearfix();
input, input,
select,
.radio,
.checkbox {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
input,
select { select {
display: inline-block; display: inline-block;
margin-top: 5px;
margin-bottom: 0; margin-bottom: 0;
} }
.radio,
.checkbox {
margin-top: 5px;
}
input[type="image"], input[type="image"],
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
...@@ -118,7 +121,7 @@ ...@@ -118,7 +121,7 @@
.navbar-search { .navbar-search {
position: relative; position: relative;
float: left; float: left;
margin-top: 6px; .navbarVerticalAlign(28px); // Vertically center in navbar
margin-bottom: 0; margin-bottom: 0;
.search-query { .search-query {
padding: 4px 9px; padding: 4px 9px;
...@@ -156,22 +159,42 @@ ...@@ -156,22 +159,42 @@
} }
// FIXED NAVBAR // FIXED NAVBAR
// ------------ // ------------
.navbar-fixed-top { // Shared (top/bottom) styles
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed; position: fixed;
top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: @zindexFixedNavbar; z-index: @zindexFixedNavbar;
margin-bottom: 0; // remove 18px margin for static navbar
} }
.navbar-fixed-top .navbar-inner { .navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
.border-radius(0); .border-radius(0);
} }
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
#grid > .core > .span(@gridColumns);
}
// Fixed to top
.navbar-fixed-top {
top: 0;
}
// Fixed to bottom
.navbar-fixed-bottom {
bottom: 0;
}
// NAVIGATION // NAVIGATION
// ---------- // ----------
...@@ -262,11 +285,27 @@ ...@@ -262,11 +285,27 @@
left: 10px; left: 10px;
} }
} }
// Menu position and menu caret support for dropups via extra bottom-up class
.navbar-fixed-bottom .dropdown-menu {
&:before {
border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2);
border-bottom: 0;
bottom: -7px;
top: auto;
}
&:after {
border-top: 6px solid #ffffff;
border-bottom: 0;
bottom: -6px;
top: auto;
}
}
// Dropdown toggle caret // Dropdown toggle caret
.navbar .nav .dropdown-toggle .caret, .navbar .nav .dropdown-toggle .caret,
.navbar .nav .open.dropdown .caret { .navbar .nav .open.dropdown .caret {
border-top-color: @white; border-top-color: @white;
border-bottom-color: @white;
} }
.navbar .nav .active .caret { .navbar .nav .active .caret {
.opacity(100); .opacity(100);
...@@ -285,7 +324,9 @@ ...@@ -285,7 +324,9 @@
} }
// Right aligned menus need alt position // Right aligned menus need alt position
.navbar .nav.pull-right .dropdown-menu { // TODO: rejigger this at some point to simplify the selectors
.navbar .nav.pull-right .dropdown-menu,
.navbar .nav .dropdown-menu.pull-right {
left: auto; left: auto;
right: 0; right: 0;
&:before { &:before {
......
less/navs.less
View file @ a3971306
...@@ -64,6 +64,10 @@ ...@@ -64,6 +64,10 @@
.nav-list [class^="icon-"] { .nav-list [class^="icon-"] {
margin-right: 2px; margin-right: 2px;
} }
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
.nav-divider();
}
...@@ -102,8 +106,9 @@ ...@@ -102,8 +106,9 @@
// Actual tabs (as links) // Actual tabs (as links)
.nav-tabs > li > a { .nav-tabs > li > a {
padding-top: 9px; padding-top: 8px;
padding-bottom: 9px; padding-bottom: 8px;
line-height: @baseLineHeight;
border: 1px solid transparent; border: 1px solid transparent;
.border-radius(4px 4px 0 0); .border-radius(4px 4px 0 0);
&:hover { &:hover {
...@@ -200,11 +205,13 @@ ...@@ -200,11 +205,13 @@
.nav-tabs .dropdown-toggle .caret, .nav-tabs .dropdown-toggle .caret,
.nav-pills .dropdown-toggle .caret { .nav-pills .dropdown-toggle .caret {
border-top-color: @linkColor; border-top-color: @linkColor;
border-bottom-color: @linkColor;
margin-top: 6px; margin-top: 6px;
} }
.nav-tabs .dropdown-toggle:hover .caret, .nav-tabs .dropdown-toggle:hover .caret,
.nav-pills .dropdown-toggle:hover .caret { .nav-pills .dropdown-toggle:hover .caret {
border-top-color: @linkColorHover; border-top-color: @linkColorHover;
border-bottom-color: @linkColorHover;
} }
// Active dropdown links // Active dropdown links
...@@ -212,6 +219,7 @@ ...@@ -212,6 +219,7 @@
.nav-tabs .active .dropdown-toggle .caret, .nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret { .nav-pills .active .dropdown-toggle .caret {
border-top-color: @grayDark; border-top-color: @grayDark;
border-bottom-color: @grayDark;
} }
// Active:hover dropdown links // Active:hover dropdown links
...@@ -234,6 +242,7 @@ ...@@ -234,6 +242,7 @@
.nav .open.active .caret, .nav .open.active .caret,
.nav .open a:hover .caret { .nav .open a:hover .caret {
border-top-color: @white; border-top-color: @white;
border-bottom-color: @white;
.opacity(100); .opacity(100);
} }
...@@ -256,7 +265,8 @@ ...@@ -256,7 +265,8 @@
.clearfix(); .clearfix();
} }
.tab-content { .tab-content {
overflow: hidden; // prevent content from running below tabs display: table; // prevent content from running below tabs
width: 100%;
} }
// Remove border on bottom, left, right // Remove border on bottom, left, right
......
less/pagination.less
View file @ a3971306
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
color: @grayLight; color: @grayLight;
cursor: default; cursor: default;
} }
.pagination .disabled span,
.pagination .disabled a, .pagination .disabled a,
.pagination .disabled a:hover { .pagination .disabled a:hover {
color: @grayLight; color: @grayLight;
......
less/reset.less
View file @ a3971306
...@@ -75,7 +75,6 @@ sub { ...@@ -75,7 +75,6 @@ sub {
// ------------------------- // -------------------------
img { img {
max-width: 100%;
height: auto; height: auto;
border: 0; border: 0;
-ms-interpolation-mode: bicubic; -ms-interpolation-mode: bicubic;
......
less/responsive.less
View file @ a3971306
...@@ -31,6 +31,37 @@ ...@@ -31,6 +31,37 @@
visibility: hidden; visibility: hidden;
} }
// Visibility utilities
// For desktops
.visible-phone { display: none; }
.visible-tablet { display: none; }
.visible-desktop { display: block; }
.hidden-phone { display: block; }
.hidden-tablet { display: block; }
.hidden-desktop { display: none; }
// Phones only
@media (max-width: 767px) {
// Show
.visible-phone { display: block; }
// Hide
.hidden-phone { display: none; }
// Hide everything else
.hidden-desktop { display: block; }
.visible-desktop { display: none; }
}
// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
// Show
.visible-tablet { display: block; }
// Hide
.hidden-tablet { display: none; }
// Hide everything else
.hidden-desktop { display: block; }
.visible-desktop { display: none; }
}
// UP TO LANDSCAPE PHONE // UP TO LANDSCAPE PHONE
...@@ -157,13 +188,13 @@ ...@@ -157,13 +188,13 @@
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
// Fixed grid // Fixed grid
#gridSystem > .generate(12, 42px, 20px); #grid > .core(42px, 20px);
// Fluid grid // Fluid grid
#fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%); #grid > .fluid(5.801104972%, 2.762430939%);
// Input grid // Input grid
#inputGridSystem > .generate(12, 42px, 20px); #grid > .input(42px, 20px);
} }
...@@ -297,6 +328,7 @@ ...@@ -297,6 +328,7 @@
@media (min-width: 980px) { @media (min-width: 980px) {
.nav-collapse.collapse { .nav-collapse.collapse {
height: auto !important; height: auto !important;
overflow: visible !important;
} }
} }
...@@ -308,13 +340,13 @@ ...@@ -308,13 +340,13 @@
@media (min-width: 1200px) { @media (min-width: 1200px) {
// Fixed grid // Fixed grid
#gridSystem > .generate(12, 70px, 30px); #grid > .core(70px, 30px);
// Fluid grid // Fluid grid
#fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%); #grid > .fluid(5.982905983%, 2.564102564%);
// Input grid // Input grid
#inputGridSystem > .generate(12, 70px, 30px); #grid > .input(70px, 30px);
// Thumbnails // Thumbnails
.thumbnails { .thumbnails {
......
less/scaffolding.less
View file @ a3971306
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
// ------------------------------------------------------------------------------------------- // -------------------------------------------------------------------------------------------
// STRUCTURAL LAYOUT // Body reset
// ----------------- // ----------
body { body {
margin: 0; margin: 0;
...@@ -16,7 +16,7 @@ body { ...@@ -16,7 +16,7 @@ body {
} }
// LINKS // Links
// ----- // -----
a { a {
......
less/sprites.less
View file @ a3971306
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
// and background-position. Your resulting HTML will look like // and background-position. Your resulting HTML will look like
// <i class="icon-inbox"></i>. // <i class="icon-inbox"></i>.
// For the white version of the icons, just add the .icon-white class: // For the white version of the icons, just add the .icon-white class:
// <i class="icon-inbox icon-white"></i> // <i class="icon-inbox icon-white"></i>
[class^="icon-"], [class^="icon-"],
...@@ -21,14 +21,14 @@ ...@@ -21,14 +21,14 @@
height: 14px; height: 14px;
line-height: 14px; line-height: 14px;
vertical-align: text-top; vertical-align: text-top;
background-image: url(@iconSpritePath); background-image: url("@{iconSpritePath}");
background-position: 14px 14px; background-position: 14px 14px;
background-repeat: no-repeat; background-repeat: no-repeat;
.ie7-restore-right-whitespace(); .ie7-restore-right-whitespace();
} }
.icon-white { .icon-white {
background-image: url(@iconWhiteSpritePath); background-image: url("@{iconWhiteSpritePath}");
} }
.icon-glass { background-position: 0 0; } .icon-glass { background-position: 0 0; }
......
less/tables.less
View file @ a3971306
...@@ -64,13 +64,12 @@ table { ...@@ -64,13 +64,12 @@ table {
.table-bordered { .table-bordered {
border: 1px solid #ddd; border: 1px solid #ddd;
border-left: 0;
border-collapse: separate; // Done so we can round those corners! border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapsed; // IE7 can't round corners anyway *border-collapse: collapsed; // IE7 can't round corners anyway
.border-radius(4px); .border-radius(4px);
th + th, th,
td + td, td {
th + td,
td + th {
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
} }
// Prevent a double border // Prevent a double border
...@@ -78,6 +77,7 @@ table { ...@@ -78,6 +77,7 @@ table {
tbody:first-child tr:first-child th, tbody:first-child tr:first-child th,
tbody:first-child tr:first-child td { tbody:first-child tr:first-child td {
border-top: 0; border-top: 0;
border-bottom: 1px solid #ddd;
} }
// For first th or td in the first row in the first thead or tbody // For first th or td in the first row in the first thead or tbody
thead:first-child tr:first-child th:first-child, thead:first-child tr:first-child th:first-child,
...@@ -129,11 +129,6 @@ table { ...@@ -129,11 +129,6 @@ table {
// ----------------- // -----------------
// Change the columns // Change the columns
.tableColumns(@columnSpan: 1) {
float: none;
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16;
margin-left: 0;
}
table { table {
.span1 { .tableColumns(1); } .span1 { .tableColumns(1); }
.span2 { .tableColumns(2); } .span2 { .tableColumns(2); }
...@@ -147,4 +142,16 @@ table { ...@@ -147,4 +142,16 @@ table {
.span10 { .tableColumns(10); } .span10 { .tableColumns(10); }
.span11 { .tableColumns(11); } .span11 { .tableColumns(11); }
.span12 { .tableColumns(12); } .span12 { .tableColumns(12); }
.span13 { .tableColumns(13); }
.span14 { .tableColumns(14); }
.span15 { .tableColumns(15); }
.span16 { .tableColumns(16); }
.span17 { .tableColumns(17); }
.span18 { .tableColumns(18); }
.span19 { .tableColumns(19); }
.span20 { .tableColumns(20); }
.span21 { .tableColumns(21); }
.span22 { .tableColumns(22); }
.span23 { .tableColumns(23); }
.span24 { .tableColumns(24); }
} }
less/type.less
View file @ a3971306
...@@ -154,12 +154,14 @@ em { ...@@ -154,12 +154,14 @@ em {
} }
// Abbreviations and acronyms // Abbreviations and acronyms
abbr { abbr[title] {
font-size: 90%;
text-transform: uppercase;
border-bottom: 1px dotted #ddd; border-bottom: 1px dotted #ddd;
cursor: help; cursor: help;
} }
abbr.initialism {
font-size: 90%;
text-transform: uppercase;
}
// Blockquotes // Blockquotes
blockquote { blockquote {
......
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