mirror of
https://github.com/twbs/bootstrap.git
synced 2024-09-27 21:47:18 +00:00
Merge branch '2.0.4-wip'
This commit is contained in:
Jacob Thornton
commit
5657ab46c5
11
docs/assets/css/bootstrap-responsive.css
vendored
11
docs/assets/css/bootstrap-responsive.css
vendored
@ -683,11 +683,18 @@
|
||||
body {
|
||||
padding-top: 0;
|
||||
}
|
||||
.navbar-fixed-top {
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
position: static;
|
||||
}
|
||||
.navbar-fixed-top {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.navbar-fixed-top .navbar-inner {
|
||||
.navbar-fixed-bottom {
|
||||
margin-top: 18px;
|
||||
}
|
||||
.navbar-fixed-top .navbar-inner,
|
||||
.navbar-fixed-bottom .navbar-inner {
|
||||
padding: 5px;
|
||||
}
|
||||
.navbar .container {
|
||||
|
||||
237
docs/assets/css/bootstrap.css
vendored
237
docs/assets/css/bootstrap.css
vendored
@ -73,6 +73,10 @@ img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
#map_canvas img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
@ -418,9 +422,6 @@ a:hover {
|
||||
|
||||
p {
|
||||
margin: 0 0 9px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
p small {
|
||||
@ -603,7 +604,7 @@ em {
|
||||
|
||||
abbr[title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted #ddd;
|
||||
border-bottom: 1px dotted #999999;
|
||||
}
|
||||
|
||||
abbr.initialism {
|
||||
@ -740,7 +741,7 @@ legend {
|
||||
line-height: 36px;
|
||||
color: #333333;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
legend small {
|
||||
@ -768,79 +769,119 @@ textarea {
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: inline-block;
|
||||
width: 210px;
|
||||
height: 18px;
|
||||
padding: 4px;
|
||||
margin-bottom: 9px;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #cccccc;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
}
|
||||
|
||||
.uneditable-textarea {
|
||||
width: auto;
|
||||
height: auto;
|
||||
textarea:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="color"]:focus,
|
||||
.uneditable-input:focus {
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
outline: 0;
|
||||
outline: thin dotted \9;
|
||||
/* IE6-9 */
|
||||
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
|
||||
label input,
|
||||
label textarea,
|
||||
label select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type="image"],
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 3px 0;
|
||||
*margin-top: 0;
|
||||
/* IE7 */
|
||||
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0 \9;
|
||||
/* IE9 and down */
|
||||
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[type="image"] {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
width: auto;
|
||||
padding: initial;
|
||||
line-height: initial;
|
||||
background-color: #ffffff;
|
||||
background-color: initial;
|
||||
border: initial;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
input[type="button"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.uneditable-textarea {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
@ -856,13 +897,9 @@ input[type="file"] {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
line-height: 18px \9;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 220px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
|
||||
select[multiple],
|
||||
@ -870,18 +907,13 @@ select[size] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
input[type="image"] {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
input[type="hidden"] {
|
||||
display: none;
|
||||
select:focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.radio,
|
||||
@ -914,42 +946,6 @@ input[type="hidden"] {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
outline: 0;
|
||||
outline: thin dotted \9;
|
||||
/* IE6-9 */
|
||||
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus,
|
||||
select:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.input-mini {
|
||||
width: 60px;
|
||||
}
|
||||
@ -986,6 +982,15 @@ textarea[class*="span"],
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.input-append input[class*="span"],
|
||||
.input-append .uneditable-input[class*="span"],
|
||||
.input-prepend input[class*="span"],
|
||||
.input-prepend .uneditable-input[class*="span"],
|
||||
.row-fluid .input-prepend [class*="span"],
|
||||
.row-fluid .input-append [class*="span"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
@ -1088,6 +1093,8 @@ input[type="checkbox"][readonly] {
|
||||
color: #c09853;
|
||||
}
|
||||
|
||||
.control-group.warning .checkbox,
|
||||
.control-group.warning .radio,
|
||||
.control-group.warning input,
|
||||
.control-group.warning select,
|
||||
.control-group.warning textarea {
|
||||
@ -1095,6 +1102,8 @@ input[type="checkbox"][readonly] {
|
||||
border-color: #c09853;
|
||||
}
|
||||
|
||||
.control-group.warning .checkbox:focus,
|
||||
.control-group.warning .radio:focus,
|
||||
.control-group.warning input:focus,
|
||||
.control-group.warning select:focus,
|
||||
.control-group.warning textarea:focus {
|
||||
@ -1117,6 +1126,8 @@ input[type="checkbox"][readonly] {
|
||||
color: #b94a48;
|
||||
}
|
||||
|
||||
.control-group.error .checkbox,
|
||||
.control-group.error .radio,
|
||||
.control-group.error input,
|
||||
.control-group.error select,
|
||||
.control-group.error textarea {
|
||||
@ -1124,6 +1135,8 @@ input[type="checkbox"][readonly] {
|
||||
border-color: #b94a48;
|
||||
}
|
||||
|
||||
.control-group.error .checkbox:focus,
|
||||
.control-group.error .radio:focus,
|
||||
.control-group.error input:focus,
|
||||
.control-group.error select:focus,
|
||||
.control-group.error textarea:focus {
|
||||
@ -1146,6 +1159,8 @@ input[type="checkbox"][readonly] {
|
||||
color: #468847;
|
||||
}
|
||||
|
||||
.control-group.success .checkbox,
|
||||
.control-group.success .radio,
|
||||
.control-group.success input,
|
||||
.control-group.success select,
|
||||
.control-group.success textarea {
|
||||
@ -1153,6 +1168,8 @@ input[type="checkbox"][readonly] {
|
||||
border-color: #468847;
|
||||
}
|
||||
|
||||
.control-group.success .checkbox:focus,
|
||||
.control-group.success .radio:focus,
|
||||
.control-group.success input:focus,
|
||||
.control-group.success select:focus,
|
||||
.control-group.success textarea:focus {
|
||||
@ -1190,7 +1207,7 @@ select:focus:required:invalid:focus {
|
||||
margin-top: 18px;
|
||||
margin-bottom: 18px;
|
||||
background-color: #f5f5f5;
|
||||
border-top: 1px solid #ddd;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
@ -1219,6 +1236,10 @@ select:focus:required:invalid:focus {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
@ -2433,11 +2454,11 @@ table .span24 {
|
||||
*z-index: 1000;
|
||||
}
|
||||
|
||||
.open .dropdown-menu {
|
||||
.open > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pull-right .dropdown-menu {
|
||||
.pull-right > .dropdown-menu {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
@ -2499,7 +2520,6 @@ table .span24 {
|
||||
|
||||
.fade {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
-webkit-transition: opacity 0.15s linear;
|
||||
-moz-transition: opacity 0.15s linear;
|
||||
-ms-transition: opacity 0.15s linear;
|
||||
@ -2509,7 +2529,6 @@ table .span24 {
|
||||
|
||||
.fade.in {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
|
||||
.collapse {
|
||||
@ -3701,6 +3720,10 @@ input[type="submit"].btn.btn-mini {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.navbar-search .search-query:-ms-input-placeholder {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.navbar-search .search-query::-webkit-input-placeholder {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
@ -649,6 +649,11 @@ form.well {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
.marketing .bs-icon {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Adjust the jumbotron */
|
||||
.jumbotron h1,
|
||||
.jumbotron p {
|
||||
|
||||
4
docs/assets/js/bootstrap-tooltip.js
vendored
4
docs/assets/js/bootstrap-tooltip.js
vendored
@ -84,9 +84,9 @@
|
||||
, leave: function (e) {
|
||||
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
|
||||
|
||||
if (this.timeout) clearTimeout(this.timeout)
|
||||
if (!self.options.delay || !self.options.delay.hide) return self.hide()
|
||||
|
||||
clearTimeout(this.timeout)
|
||||
self.hoverState = 'out'
|
||||
this.timeout = setTimeout(function() {
|
||||
if (self.hoverState == 'out') self.hide()
|
||||
@ -272,4 +272,4 @@
|
||||
, delay: 0
|
||||
}
|
||||
|
||||
}(window.jQuery);
|
||||
}(window.jQuery);
|
||||
|
||||
5
docs/assets/js/bootstrap.js
vendored
5
docs/assets/js/bootstrap.js
vendored
@ -968,9 +968,9 @@
|
||||
, leave: function (e) {
|
||||
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
|
||||
|
||||
if (this.timeout) clearTimeout(this.timeout)
|
||||
if (!self.options.delay || !self.options.delay.hide) return self.hide()
|
||||
|
||||
clearTimeout(this.timeout)
|
||||
self.hoverState = 'out'
|
||||
this.timeout = setTimeout(function() {
|
||||
if (self.hoverState == 'out') self.hide()
|
||||
@ -1156,7 +1156,8 @@
|
||||
, delay: 0
|
||||
}
|
||||
|
||||
}(window.jQuery);/* ===========================================================
|
||||
}(window.jQuery);
|
||||
/* ===========================================================
|
||||
* bootstrap-popover.js v2.0.3
|
||||
* http://twitter.github.com/bootstrap/javascript.html#popovers
|
||||
* ===========================================================
|
||||
|
||||
2
docs/assets/js/bootstrap.min.js
vendored
2
docs/assets/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -24,6 +24,7 @@
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".subnav" data-offset="50">
|
||||
@ -34,11 +35,11 @@
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="brand" href="./index.html">Bootstrap</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
@ -111,8 +112,10 @@
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Example body text</h3>
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
|
||||
<h3>Lead body copy</h3>
|
||||
<p>Make a paragraph stand out by adding <code>.lead</code>.</p>
|
||||
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="well">
|
||||
@ -1272,7 +1275,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
Option two can is something else and selecting it will deselect option one
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -1590,7 +1593,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<pre class="prettyprint linenums">
|
||||
<i class="icon-search icon-white"></i>
|
||||
</pre>
|
||||
<p>There are 120 classes to choose from for your icons. Just add an <code><i></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 140 classes to choose from for your icons. Just add an <code><i></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><i></code> tag for proper spacing.
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".subnav" data-offset="50">
|
||||
@ -34,11 +35,11 @@
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="brand" href="./index.html">Bootstrap</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
@ -813,7 +814,7 @@
|
||||
<h3>Straightforward markup</h3>
|
||||
<p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="tabbable"> <-- Only required for left/right tabs -->
|
||||
<div class="tabbable"> <!-- Only required for left/right tabs -->
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
|
||||
@ -1665,7 +1666,7 @@
|
||||
|
||||
|
||||
|
||||
<!-- Alerts & Messages
|
||||
<!-- Alerts
|
||||
================================================== -->
|
||||
<section id="alerts">
|
||||
<div class="page-header">
|
||||
@ -1688,7 +1689,7 @@
|
||||
<h3>Example alerts</h3>
|
||||
<p>Wrap your message and an optional close icon in a div with simple class.</p>
|
||||
<div class="alert">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Warning!</strong> Best check yo self, you're not looking too good.
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
@ -1697,10 +1698,10 @@
|
||||
<strong>Warning!</strong> Best check yo self, you're not looking too good.
|
||||
</div>
|
||||
</pre>
|
||||
<p><span class="label label-info">Heads up!</span> iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code>button</code> element with the data attribute, which we have opted to do for our docs.</p>
|
||||
<p><span class="label label-info">Heads up!</span> iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.</p>
|
||||
<p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
|
||||
<div class="alert alert-block">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<h4 class="alert-heading">Warning!</h4>
|
||||
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
|
||||
</div>
|
||||
@ -1719,7 +1720,7 @@
|
||||
<div class="span4">
|
||||
<h3>Error or danger</h3>
|
||||
<div class="alert alert-error">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
@ -1731,7 +1732,7 @@
|
||||
<div class="span4">
|
||||
<h3>Success</h3>
|
||||
<div class="alert alert-success">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Well done!</strong> You successfully read this important alert message.
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
@ -1743,7 +1744,7 @@
|
||||
<div class="span4">
|
||||
<h3>Information</h3>
|
||||
<div class="alert alert-info">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".subnav" data-offset="50">
|
||||
@ -34,11 +35,11 @@
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="brand" href="./index.html">Bootstrap</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
@ -408,7 +409,7 @@
|
||||
</h1>
|
||||
</div>
|
||||
<div class="download-btn">
|
||||
<a class="btn btn-primary" href="#">Customize and Download</a>
|
||||
<a class="btn btn-primary" href="#" >Customize and Download</a>
|
||||
<h4>What's included?</h4>
|
||||
<p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
|
||||
</div>
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".subnav" data-offset="50">
|
||||
@ -34,11 +35,11 @@
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="brand" href="./index.html">Bootstrap</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".subnav" data-offset="50">
|
||||
@ -34,11 +35,11 @@
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="brand" href="./index.html">Bootstrap</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
@ -82,8 +83,8 @@
|
||||
<h1>Bootstrap, from Twitter</h1>
|
||||
<p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
|
||||
<p class="download-info">
|
||||
<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 <small>(v2.0.3)</small></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 <small>(v2.0.4)</small></a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".subnav" data-offset="50">
|
||||
@ -34,11 +35,11 @@
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="brand" href="./index.html">Bootstrap</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
@ -107,82 +108,58 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#modals">Modals</a></h3>
|
||||
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#modals">Modals</a></h3>
|
||||
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3>
|
||||
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3>
|
||||
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3>
|
||||
<p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3>
|
||||
<p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#tabs">Togglable tabs</a></h3>
|
||||
<p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#tabs">Togglable tabs</a></h3>
|
||||
<p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#tooltips">Tooltips</a></h3>
|
||||
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#tooltips">Tooltips</a></h3>
|
||||
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3>
|
||||
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
|
||||
<p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3>
|
||||
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
|
||||
<p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#alerts">Alert messages</a></h3>
|
||||
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#alerts">Alert messages</a></h3>
|
||||
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#buttons">Buttons</a></h3>
|
||||
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#buttons">Buttons</a></h3>
|
||||
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row" style="margin-bottom: 9px;">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#collapse">Collapse</a></h3>
|
||||
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#collapse">Collapse</a></h3>
|
||||
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#carousel">Carousel</a></h3>
|
||||
<p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#carousel">Carousel</a></h3>
|
||||
<p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
|
||||
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
|
||||
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3>Transitions <small class="muted">*</small></h3>
|
||||
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
|
||||
<p class="muted"><strong>*</strong> Required for animation in plugins</p>
|
||||
</label>
|
||||
<h3>Transitions <small class="muted">*</small></h3>
|
||||
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
|
||||
<p class="muted"><strong>*</strong> Required for animation in plugins</p>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="alert alert-info"><strong>Heads up!</strong> All javascript plugins require the latest version of jQuery.</div>
|
||||
@ -208,7 +185,7 @@
|
||||
<div class="well modal-example" style="background-color: #888; border: none;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;">
|
||||
<div class="modal-header">
|
||||
<button class="close" data-dismiss="modal">×</button>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h3>Modal header</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -226,7 +203,7 @@
|
||||
<!-- sample modal content -->
|
||||
<div id="myModal" class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<button class="close" data-dismiss="modal">×</button>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h3>Modal Heading</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -301,16 +278,16 @@
|
||||
</pre>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="modal" id="myModal">
|
||||
<div class="modal hide" id="myModal">
|
||||
<div class="modal-header">
|
||||
<button class="close" data-dismiss="modal">×</button>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h3>Modal header</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn">Close</a>
|
||||
<a href="#" class="btn" data-dismiss="modal">Close</a>
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -978,11 +955,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<h2>Example alerts</h2>
|
||||
<p>The alerts plugin works on regular alert messages, and block messages.</p>
|
||||
<div class="alert fade in">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
|
||||
</div>
|
||||
<div class="alert alert-block alert-error fade in">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<h4 class="alert-heading">Oh snap! You got an error!</h4>
|
||||
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
<p>
|
||||
@ -1371,7 +1348,7 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<h3>Markup</h3>
|
||||
<p>Data attributes are used for the previous and next conrols. Check out the example markup below.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="myCarousel" class="carousel">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<!-- Carousel items -->
|
||||
<div class="carousel-inner">
|
||||
<div class="active item">…</div>
|
||||
|
||||
993
docs/less.html
993
docs/less.html
File diff suppressed because it is too large
Load Diff
@ -24,6 +24,7 @@
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".subnav" data-offset="50">
|
||||
@ -34,11 +35,11 @@
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="brand" href="./index.html">Bootstrap</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
@ -75,22 +76,22 @@
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<h1>Scaffolding</h1>
|
||||
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
|
||||
<div class="subnav">
|
||||
<ul class="nav nav-pills">
|
||||
<li><a href="#global">Global styles</a></li>
|
||||
<li><a href="#gridSystem">Grid system</a></li>
|
||||
<li><a href="#fluidGridSystem">Fluid grid system</a></li>
|
||||
<li><a href="#gridCustomization">Customizing</a></li>
|
||||
<li><a href="#layouts">Layouts</a></li>
|
||||
<li><a href="#responsive">Responsive design</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<h1>Scaffolding</h1>
|
||||
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
|
||||
<div class="subnav">
|
||||
<ul class="nav nav-pills">
|
||||
<li><a href="#global">Global styles</a></li>
|
||||
<li><a href="#gridSystem">Grid system</a></li>
|
||||
<li><a href="#fluidGridSystem">Fluid grid system</a></li>
|
||||
<li><a href="#gridCustomization">Customizing</a></li>
|
||||
<li><a href="#layouts">Layouts</a></li>
|
||||
<li><a href="#responsive">Responsive design</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
@ -172,8 +173,7 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
|
||||
<p>It also has four responsive variations for various devices and resolutions: phone, tablet portrait, tablet landscape and small desktops, and large widescreen desktops.</p>
|
||||
<p>The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. </p>
|
||||
</div><!-- /.span -->
|
||||
<div class="span4">
|
||||
<pre class="prettyprint linenums">
|
||||
@ -234,11 +234,11 @@
|
||||
<div class="span6">
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
Level 1 of column
|
||||
<div class="span6">
|
||||
Level 1 column
|
||||
<div class="row">
|
||||
<div class="span6">Level 2</div>
|
||||
<div class="span6">Level 2</div>
|
||||
<div class="span3">Level 2</div>
|
||||
<div class="span3">Level 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -529,16 +529,16 @@
|
||||
</div><!-- /.span -->
|
||||
<div class="span8">
|
||||
<pre class="prettyprint linenums">
|
||||
// Landscape phones and down
|
||||
/* Landscape phones and down */
|
||||
@media (max-width: 480px) { ... }
|
||||
|
||||
// Landscape phone to portrait tablet
|
||||
/* Landscape phone to portrait tablet */
|
||||
@media (max-width: 767px) { ... }
|
||||
|
||||
// Portrait tablet to landscape and desktop
|
||||
/* Portrait tablet to landscape and desktop */
|
||||
@media (min-width: 768px) and (max-width: 979px) { ... }
|
||||
|
||||
// Large desktop
|
||||
/* Large desktop */
|
||||
@media (min-width: 1200px) { ... }
|
||||
</pre>
|
||||
</div><!-- /.span -->
|
||||
|
||||
17
docs/templates/layout.mustache
vendored
17
docs/templates/layout.mustache
vendored
@ -24,6 +24,19 @@
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
|
||||
{{#production}}
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-146052-10']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
{{/production}}
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".subnav" data-offset="50">
|
||||
@ -34,11 +47,11 @@
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="brand" href="./index.html">Bootstrap</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
|
||||
10
docs/templates/pages/base-css.mustache
vendored
10
docs/templates/pages/base-css.mustache
vendored
@ -34,8 +34,10 @@
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Example body text{{/i}}</h3>
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
|
||||
<h3>{{_i}}Lead body copy{{/i}}</h3>
|
||||
<p>{{_i}}Make a paragraph stand out by adding <code>.lead</code>.{{/i}}</p>
|
||||
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="well">
|
||||
@ -1195,7 +1197,7 @@
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
{{_i}}Option two can is something else and selecting it will deselect option one{{/i}}
|
||||
{{_i}}Option two can be something else and selecting it will deselect option one{{/i}}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -1513,7 +1515,7 @@
|
||||
<pre class="prettyprint linenums">
|
||||
<i class="icon-search icon-white"></i>
|
||||
</pre>
|
||||
<p>{{_i}}There are 120 classes to choose from for your icons. Just add an <code><i></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 140 classes to choose from for your icons. Just add an <code><i></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><i></code> tag for proper spacing.{{/i}}
|
||||
|
||||
18
docs/templates/pages/components.mustache
vendored
18
docs/templates/pages/components.mustache
vendored
@ -736,7 +736,7 @@
|
||||
<h3>{{_i}}Straightforward markup{{/i}}</h3>
|
||||
<p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="tabbable"> <-- Only required for left/right tabs -->
|
||||
<div class="tabbable"> <!-- Only required for left/right tabs -->
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#tab1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
|
||||
@ -1252,7 +1252,7 @@
|
||||
<span class="label label-success">{{_i}}Success{{/i}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-success">{{/_i}}Success{{/i}}</span></code>
|
||||
<code><span class="label label-success">{{_i}}Success{{/i}}</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -1588,7 +1588,7 @@
|
||||
|
||||
|
||||
|
||||
<!-- Alerts & Messages
|
||||
<!-- Alerts
|
||||
================================================== -->
|
||||
<section id="alerts">
|
||||
<div class="page-header">
|
||||
@ -1611,7 +1611,7 @@
|
||||
<h3>{{_i}}Example alerts{{/i}}</h3>
|
||||
<p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
|
||||
<div class="alert">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
@ -1620,10 +1620,10 @@
|
||||
<strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
|
||||
</div>
|
||||
</pre>
|
||||
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code>button</code> element with the data attribute, which we have opted to do for our docs.{{/i}}</p>
|
||||
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
|
||||
<p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
|
||||
<div class="alert alert-block">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
|
||||
<p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
|
||||
</div>
|
||||
@ -1642,7 +1642,7 @@
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Error or danger{{/i}}</h3>
|
||||
<div class="alert alert-error">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>{{_i}}Oh snap!{{/i}}</strong> {{_i}}Change a few things up and try submitting again.{{/i}}
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
@ -1654,7 +1654,7 @@
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Success{{/i}}</h3>
|
||||
<div class="alert alert-success">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>{{_i}}Well done!{{/i}}</strong> {{_i}}You successfully read this important alert message.{{/i}}
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
@ -1666,7 +1666,7 @@
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Information{{/i}}</h3>
|
||||
<div class="alert alert-info">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}This alert needs your attention, but it's not super important.{{/i}}
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
|
||||
2
docs/templates/pages/download.mustache
vendored
2
docs/templates/pages/download.mustache
vendored
@ -331,7 +331,7 @@
|
||||
</h1>
|
||||
</div>
|
||||
<div class="download-btn">
|
||||
<a class="btn btn-primary" href="#">{{_i}}Customize and Download{{/i}}</a>
|
||||
<a class="btn btn-primary" href="#" {{#production}}onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);"{{/production}}>Customize and Download</a>
|
||||
<h4>{{_i}}What's included?{{/i}}</h4>
|
||||
<p>{{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}</p>
|
||||
</div>
|
||||
|
||||
4
docs/templates/pages/index.mustache
vendored
4
docs/templates/pages/index.mustache
vendored
@ -5,8 +5,8 @@
|
||||
<h1>{{_i}}Bootstrap, from Twitter{{/i}}</h1>
|
||||
<p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
|
||||
<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="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap <small>(v2.0.3)</small>{{/i}}</a>
|
||||
<a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'GitHub Project', 'View project on GitHub']);"{{/production}}>{{_i}}View project on GitHub{{/i}}</a>
|
||||
<a href="assets/bootstrap.zip" class="btn btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.0.4']);"{{/production}}>{{_i}}Download Bootstrap <small>(v2.0.4)</small>{{/i}}</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
92
docs/templates/pages/javascript.mustache
vendored
92
docs/templates/pages/javascript.mustache
vendored
@ -30,82 +30,58 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#modals">{{_i}}Modals{{/i}}</a></h3>
|
||||
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#modals">{{_i}}Modals{{/i}}</a></h3>
|
||||
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#dropdowns">{{_i}}Dropdowns{{/i}}</a></h3>
|
||||
<p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#dropdowns">{{_i}}Dropdowns{{/i}}</a></h3>
|
||||
<p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></h3>
|
||||
<p>{{_i}}Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.{{/i}}</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></h3>
|
||||
<p>{{_i}}Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#tabs">{{_i}}Togglable tabs{{/i}}</a></h3>
|
||||
<p>{{_i}}Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.{{/i}}</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#tabs">{{_i}}Togglable tabs{{/i}}</a></h3>
|
||||
<p>{{_i}}Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.{{/i}}</p>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a></h3>
|
||||
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a></h3>
|
||||
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#popovers">{{_i}}Popovers{{/i}}</a> <small class="muted">*</small></h3>
|
||||
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
|
||||
<p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltips</a> to be included{{/i}}</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#popovers">{{_i}}Popovers{{/i}}</a> <small class="muted">*</small></h3>
|
||||
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
|
||||
<p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltips</a> to be included{{/i}}</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#alerts">{{_i}}Alert messages{{/i}}</a></h3>
|
||||
<p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#alerts">{{_i}}Alert messages{{/i}}</a></h3>
|
||||
<p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#buttons">{{_i}}Buttons{{/i}}</a></h3>
|
||||
<p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#buttons">{{_i}}Buttons{{/i}}</a></h3>
|
||||
<p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row" style="margin-bottom: 9px;">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></h3>
|
||||
<p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></h3>
|
||||
<p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></h3>
|
||||
<p>{{_i}}Create a merry-go-round of any content you wish to provide an interactive slideshow of content.{{/i}}</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></h3>
|
||||
<p>{{_i}}Create a merry-go-round of any content you wish to provide an interactive slideshow of content.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
|
||||
<p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
|
||||
</label>
|
||||
<h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
|
||||
<p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3>{{_i}}Transitions{{/i}} <small class="muted">*</small></h3>
|
||||
<p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
|
||||
<p class="muted"><strong>*</strong> {{_i}}Required for animation in plugins{{/i}}</p>
|
||||
</label>
|
||||
<h3>{{_i}}Transitions{{/i}} <small class="muted">*</small></h3>
|
||||
<p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
|
||||
<p class="muted"><strong>*</strong> {{_i}}Required for animation in plugins{{/i}}</p>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="alert alert-info"><strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}All javascript plugins require the latest version of jQuery.{{/i}}</div>
|
||||
@ -131,7 +107,7 @@
|
||||
<div class="well modal-example" style="background-color: #888; border: none;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;">
|
||||
<div class="modal-header">
|
||||
<button class="close" data-dismiss="modal">×</button>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h3>{{_i}}Modal header{{/i}}</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -149,7 +125,7 @@
|
||||
<!-- sample modal content -->
|
||||
<div id="myModal" class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<button class="close" data-dismiss="modal">×</button>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h3>{{_i}}Modal Heading{{/i}}</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -224,16 +200,16 @@
|
||||
</pre>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="modal" id="myModal">
|
||||
<div class="modal hide" id="myModal">
|
||||
<div class="modal-header">
|
||||
<button class="close" data-dismiss="modal">×</button>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h3>Modal header</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>{{_i}}One fine body…{{/i}}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn">{{_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>
|
||||
@ -901,11 +877,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<h2>{{_i}}Example alerts{{/i}}</h2>
|
||||
<p>{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}</p>
|
||||
<div class="alert fade in">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
|
||||
</div>
|
||||
<div class="alert alert-block alert-error fade in">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
|
||||
<p>{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}</p>
|
||||
<p>
|
||||
@ -1294,7 +1270,7 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<p>{{_i}}Data attributes are used for the previous and next conrols. Check out the example markup below.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="myCarousel" class="carousel">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<!-- {{_i}}Carousel items{{/i}} -->
|
||||
<div class="carousel-inner">
|
||||
<div class="active item">…</div>
|
||||
|
||||
988
docs/templates/pages/less.mustache
vendored
988
docs/templates/pages/less.mustache
vendored
File diff suppressed because it is too large
Load Diff
51
docs/templates/pages/scaffolding.mustache
vendored
51
docs/templates/pages/scaffolding.mustache
vendored
@ -1,19 +1,19 @@
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<h1>{{_i}}Scaffolding{{/i}}</h1>
|
||||
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
|
||||
<div class="subnav">
|
||||
<ul class="nav nav-pills">
|
||||
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
|
||||
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
|
||||
<li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
|
||||
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
|
||||
<li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
|
||||
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<h1>{{_i}}Scaffolding{{/i}}</h1>
|
||||
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
|
||||
<div class="subnav">
|
||||
<ul class="nav nav-pills">
|
||||
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
|
||||
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
|
||||
<li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
|
||||
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
|
||||
<li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
|
||||
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
@ -95,8 +95,7 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<p>{{_i}}The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.{{/i}}</p>
|
||||
<p>{{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, tablet landscape and small desktops, and large widescreen desktops.{{/i}}</p>
|
||||
<p>{{_i}}The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. {{/i}}</p>
|
||||
</div><!-- /.span -->
|
||||
<div class="span4">
|
||||
<pre class="prettyprint linenums">
|
||||
@ -157,11 +156,11 @@
|
||||
<div class="span6">
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
{{_i}}Level 1 of column{{/i}}
|
||||
<div class="span6">
|
||||
{{_i}}Level 1 column{{/i}}
|
||||
<div class="row">
|
||||
<div class="span6">{{_i}}Level 2{{/i}}</div>
|
||||
<div class="span6">{{_i}}Level 2{{/i}}</div>
|
||||
<div class="span3">{{_i}}Level 2{{/i}}</div>
|
||||
<div class="span3">{{_i}}Level 2{{/i}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -452,16 +451,16 @@
|
||||
</div><!-- /.span -->
|
||||
<div class="span8">
|
||||
<pre class="prettyprint linenums">
|
||||
// {{_i}}Landscape phones and down{{/i}}
|
||||
/* {{_i}}Landscape phones and down{{/i}} */
|
||||
@media (max-width: 480px) { ... }
|
||||
|
||||
// {{_i}}Landscape phone to portrait tablet{{/i}}
|
||||
/* {{_i}}Landscape phone to portrait tablet{{/i}} */
|
||||
@media (max-width: 767px) { ... }
|
||||
|
||||
// {{_i}}Portrait tablet to landscape and desktop{{/i}}
|
||||
/* {{_i}}Portrait tablet to landscape and desktop{{/i}} */
|
||||
@media (min-width: 768px) and (max-width: 979px) { ... }
|
||||
|
||||
// {{_i}}Large desktop{{/i}}
|
||||
/* {{_i}}Large desktop{{/i}} */
|
||||
@media (min-width: 1200px) { ... }
|
||||
</pre>
|
||||
</div><!-- /.span -->
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".subnav" data-offset="50">
|
||||
@ -34,11 +35,11 @@
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
</button>
|
||||
<a class="brand" href="./index.html">Bootstrap</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
|
||||
10
js/README.md
10
js/README.md
@ -5,9 +5,9 @@ These are the high-level design rules which guide the development of Bootstrap's
|
||||
|
||||
### DATA-ATTRIBUTE API
|
||||
|
||||
We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript. This is bootstraps first class api.
|
||||
We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API.
|
||||
|
||||
We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
|
||||
We acknowledge that this isn't always the most performant and it may sometimes be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
|
||||
|
||||
$('body').off('.data-api')
|
||||
|
||||
@ -19,7 +19,7 @@ To target a specific plugin, just include the plugins name as a namespace along
|
||||
|
||||
### PROGRAMATIC API
|
||||
|
||||
We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API.
|
||||
We also believe you should be able to use all plugins provided by Bootstrap purely through the JavaScript API.
|
||||
|
||||
All public APIs should be single, chainable methods, and return the collection acted upon.
|
||||
|
||||
@ -45,7 +45,7 @@ An options definition should take the following form:
|
||||
|
||||
*noun*: *adjective* - describes or modifies a quality of an instance
|
||||
|
||||
examples:
|
||||
Examples:
|
||||
|
||||
backdrop: true
|
||||
keyboard: false
|
||||
@ -93,7 +93,7 @@ Data attributes should take the following form:
|
||||
- data-target || href^=# - defined on "control" element (if element controls an element other than self)
|
||||
- data-{{noun}} - defines class instance options
|
||||
|
||||
examples:
|
||||
Examples:
|
||||
|
||||
// control other targets
|
||||
data-toggle="modal" data-target="#foo"
|
||||
|
||||
4
js/bootstrap-tooltip.js
vendored
4
js/bootstrap-tooltip.js
vendored
@ -84,9 +84,9 @@
|
||||
, leave: function (e) {
|
||||
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
|
||||
|
||||
if (this.timeout) clearTimeout(this.timeout)
|
||||
if (!self.options.delay || !self.options.delay.hide) return self.hide()
|
||||
|
||||
clearTimeout(this.timeout)
|
||||
self.hoverState = 'out'
|
||||
this.timeout = setTimeout(function() {
|
||||
if (self.hoverState == 'out') self.hide()
|
||||
@ -272,4 +272,4 @@
|
||||
, delay: 0
|
||||
}
|
||||
|
||||
}(window.jQuery);
|
||||
}(window.jQuery);
|
||||
|
||||
43
js/tests/unit/bootstrap-tooltip.js
vendored
43
js/tests/unit/bootstrap-tooltip.js
vendored
@ -33,7 +33,7 @@ $(function () {
|
||||
.tooltip({placement: 'bottom'})
|
||||
.tooltip('show')
|
||||
|
||||
ok($(".tooltip").hasClass('fade bottom in'), 'has correct classes applied')
|
||||
ok($(".tooltip").is('.fade.bottom.in'), 'has correct classes applied')
|
||||
tooltip.tooltip('hide')
|
||||
})
|
||||
|
||||
@ -69,10 +69,29 @@ $(function () {
|
||||
tooltip.trigger('mouseenter')
|
||||
|
||||
setTimeout(function () {
|
||||
ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
|
||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
||||
tooltip.trigger('mouseout')
|
||||
setTimeout(function () {
|
||||
ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
|
||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
||||
start()
|
||||
}, 200)
|
||||
}, 100)
|
||||
})
|
||||
|
||||
test("should not show tooltip if leave event occurs before delay expires, even if hide delay is 0", function () {
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.tooltip({ delay: { show: 200, hide: 0} })
|
||||
|
||||
stop()
|
||||
|
||||
tooltip.trigger('mouseenter')
|
||||
|
||||
setTimeout(function () {
|
||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
||||
tooltip.trigger('mouseout')
|
||||
setTimeout(function () {
|
||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
||||
start()
|
||||
}, 200)
|
||||
}, 100)
|
||||
@ -85,10 +104,10 @@ $(function () {
|
||||
stop()
|
||||
tooltip.trigger('mouseenter')
|
||||
setTimeout(function () {
|
||||
ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
|
||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
||||
tooltip.trigger('mouseout')
|
||||
setTimeout(function () {
|
||||
ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
|
||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
||||
start()
|
||||
}, 100)
|
||||
}, 50)
|
||||
@ -97,16 +116,16 @@ $(function () {
|
||||
test("should show tooltip if leave event hasn't occured before delay expires", function () {
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.tooltip({ delay: 200 })
|
||||
.tooltip({ delay: 150 })
|
||||
stop()
|
||||
tooltip.trigger('mouseenter')
|
||||
setTimeout(function () {
|
||||
ok(!$(".tooltip").hasClass('fade in'), 'tooltip is not faded in')
|
||||
setTimeout(function () {
|
||||
ok(!$(".tooltip").hasClass('fade in'), 'tooltip has faded in')
|
||||
start()
|
||||
}, 200)
|
||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
||||
}, 100)
|
||||
setTimeout(function () {
|
||||
ok($(".tooltip").is('.fade.in'), 'tooltip has faded in')
|
||||
start()
|
||||
}, 200)
|
||||
})
|
||||
|
||||
test("should detect if title string is html or text: foo", function () {
|
||||
@ -133,4 +152,4 @@ $(function () {
|
||||
ok($.fn.tooltip.Constructor.prototype.isHTML($('<div></div>')), 'correctly detected html')
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
// --------------------
|
||||
|
||||
.fade {
|
||||
.opacity(0);
|
||||
opacity: 0;
|
||||
.transition(opacity .15s linear);
|
||||
&.in {
|
||||
.opacity(100);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,4 +17,4 @@
|
||||
&.in {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
|
||||
// Dividers (basically an hr) within the dropdown
|
||||
.divider {
|
||||
.nav-divider();
|
||||
.nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
|
||||
}
|
||||
|
||||
// Links within the dropdown menu
|
||||
@ -103,14 +103,14 @@
|
||||
// make the menu appear below buttons that appeared later on the page
|
||||
*z-index: @zindexDropdown;
|
||||
|
||||
.dropdown-menu {
|
||||
& > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Right aligned dropdowns
|
||||
// ---------------------------
|
||||
.pull-right .dropdown-menu {
|
||||
.pull-right > .dropdown-menu {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
187
less/forms.less
187
less/forms.less
@ -27,7 +27,7 @@ legend {
|
||||
line-height: @baseLineHeight * 2;
|
||||
color: @grayDark;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
// Small
|
||||
small {
|
||||
@ -55,72 +55,101 @@ textarea {
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: @grayDark;
|
||||
}
|
||||
|
||||
// Inputs, Textareas, Selects
|
||||
input,
|
||||
textarea,
|
||||
// Form controls
|
||||
// -------------------------
|
||||
|
||||
// Shared size and type resets
|
||||
select,
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: inline-block;
|
||||
width: 210px;
|
||||
height: @baseLineHeight;
|
||||
padding: 4px;
|
||||
margin-bottom: 9px;
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
color: @gray;
|
||||
}
|
||||
|
||||
// Reset appearance properties for textual inputs and textarea
|
||||
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
|
||||
input,
|
||||
textarea {
|
||||
width: 210px;
|
||||
}
|
||||
// Reset height since textareas have rows
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
// Everything else
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
background-color: @inputBackground;
|
||||
border: 1px solid @inputBorder;
|
||||
.border-radius(@inputBorderRadius);
|
||||
}
|
||||
.uneditable-textarea {
|
||||
width: auto;
|
||||
height: auto;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
||||
@transition: border linear .2s, box-shadow linear .2s;
|
||||
.transition(@transition);
|
||||
|
||||
// Focus state
|
||||
&:focus {
|
||||
border-color: rgba(82,168,236,.8);
|
||||
outline: 0;
|
||||
outline: thin dotted \9; /* IE6-9 */
|
||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
|
||||
}
|
||||
}
|
||||
|
||||
// Inputs within a label
|
||||
label input,
|
||||
label textarea,
|
||||
label select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Mini reset for unique input types
|
||||
input[type="image"],
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
// Position radios and checkboxes better
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 3px 0;
|
||||
*margin-top: 0; /* IE7 */
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0 \9; /* IE9 and down */
|
||||
.border-radius(0);
|
||||
}
|
||||
input[type="image"] {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Reset the file input to browser defaults
|
||||
input[type="file"] {
|
||||
width: auto;
|
||||
padding: initial;
|
||||
line-height: initial;
|
||||
background-color: @inputBackground;
|
||||
background-color: initial;
|
||||
border: initial;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Help out input buttons
|
||||
input[type="button"],
|
||||
// Reset width of input buttons, radios, checkboxes
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
input[type="button"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
width: auto; // Override of generic input selector
|
||||
}
|
||||
|
||||
// Make uneditable textareas behave like a textarea
|
||||
.uneditable-textarea {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
@ -133,15 +162,10 @@ input[type="file"] {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
// Reset line-height for IE
|
||||
input[type="file"] {
|
||||
line-height: 18px \9;
|
||||
}
|
||||
|
||||
// Chrome on Linux and Mobile Safari need background-color
|
||||
// Make select elements obey height by applying a border
|
||||
select {
|
||||
width: 220px; // default input width + 10px of padding that doesn't get applied
|
||||
background-color: @inputBackground;
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
@ -150,19 +174,12 @@ select[size] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Remove shadow from image inputs
|
||||
input[type="image"] {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Make textarea height behave
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Hidden inputs
|
||||
input[type="hidden"] {
|
||||
display: none;
|
||||
// Focus for select, file, radio, and checkbox
|
||||
select:focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
|
||||
|
||||
@ -204,32 +221,6 @@ input[type="hidden"] {
|
||||
|
||||
|
||||
|
||||
// FOCUS STATE
|
||||
// -----------
|
||||
|
||||
input,
|
||||
textarea {
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
||||
@transition: border linear .2s, box-shadow linear .2s;
|
||||
.transition(@transition);
|
||||
}
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border-color: rgba(82,168,236,.8);
|
||||
outline: 0;
|
||||
outline: thin dotted \9; /* IE6-9 */
|
||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
|
||||
}
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus,
|
||||
select:focus {
|
||||
.tab-focus();
|
||||
.box-shadow(none); // override for file inputs
|
||||
}
|
||||
|
||||
|
||||
|
||||
// INPUT SIZES
|
||||
// -----------
|
||||
|
||||
@ -254,14 +245,22 @@ textarea[class*="span"],
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
// Ensure input-prepend/append never wraps
|
||||
.input-append input[class*="span"],
|
||||
.input-append .uneditable-input[class*="span"],
|
||||
.input-prepend input[class*="span"],
|
||||
.input-prepend .uneditable-input[class*="span"],
|
||||
.row-fluid .input-prepend [class*="span"],
|
||||
.row-fluid .input-append [class*="span"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// GRID SIZING FOR INPUTS
|
||||
// ----------------------
|
||||
|
||||
#grid > .input (@gridColumnWidth, @gridGutterWidth);
|
||||
|
||||
#grid > .input(@gridColumnWidth, @gridGutterWidth);
|
||||
|
||||
|
||||
|
||||
@ -329,7 +328,7 @@ select:focus:required:invalid {
|
||||
margin-top: @baseLineHeight;
|
||||
margin-bottom: @baseLineHeight;
|
||||
background-color: @formActionsBackground;
|
||||
border-top: 1px solid #ddd;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
.clearfix(); // Adding clearfix to allow for .pull-right button containers
|
||||
}
|
||||
|
||||
@ -344,7 +343,7 @@ select:focus:required:invalid {
|
||||
}
|
||||
|
||||
// Placeholder text gets special styles; can't be bundled together though for some reason
|
||||
.placeholder(@grayLight);
|
||||
.placeholder();
|
||||
|
||||
|
||||
|
||||
|
||||
@ -81,10 +81,13 @@
|
||||
// Placeholder text
|
||||
// -------------------------
|
||||
.placeholder(@color: @placeholderText) {
|
||||
:-moz-placeholder {
|
||||
&:-moz-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
&:-ms-input-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
@ -166,6 +169,8 @@
|
||||
color: @textColor;
|
||||
}
|
||||
// Style inputs accordingly
|
||||
.checkbox,
|
||||
.radio,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
@ -312,6 +317,16 @@
|
||||
column-gap: @columnGap;
|
||||
}
|
||||
|
||||
// Optional hyphenation
|
||||
.hyphens(@mode: auto) {
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: @mode;
|
||||
-moz-hyphens: @mode;
|
||||
-ms-hyphens: @mode;
|
||||
-o-hyphens: @mode;
|
||||
hyphens: @mode;
|
||||
}
|
||||
|
||||
// Opacity
|
||||
.opacity(@opacity) {
|
||||
opacity: @opacity / 100;
|
||||
@ -417,7 +432,7 @@
|
||||
// Horizontal dividers
|
||||
// -------------------------
|
||||
// Dividers (basically an hr) within dropdowns and nav lists
|
||||
.nav-divider() {
|
||||
.nav-divider(@top: #e5e5e5, @bottom: @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
|
||||
@ -427,8 +442,8 @@
|
||||
margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
|
||||
*margin: -5px 0 5px;
|
||||
overflow: hidden;
|
||||
background-color: #e5e5e5;
|
||||
border-bottom: 1px solid @white;
|
||||
background-color: @top;
|
||||
border-bottom: 1px solid @bottom;
|
||||
}
|
||||
|
||||
// Button backgrounds
|
||||
|
||||
@ -123,13 +123,7 @@
|
||||
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
|
||||
.transition(none);
|
||||
|
||||
// Placeholder text gets special styles; can't be a grouped selector
|
||||
&:-moz-placeholder {
|
||||
color: @navbarSearchPlaceholderColor;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: @navbarSearchPlaceholderColor;
|
||||
}
|
||||
.placeholder(@navbarSearchPlaceholderColor);
|
||||
|
||||
// Focus states (we use .focused since IE7-8 and down doesn't support :focus)
|
||||
&:focus,
|
||||
|
||||
@ -81,6 +81,11 @@ img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
// Prevent max-width from affecting Google Maps
|
||||
#map_canvas img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
|
||||
|
||||
@ -9,11 +9,18 @@
|
||||
padding-top: 0;
|
||||
}
|
||||
// Unfix the navbar
|
||||
.navbar-fixed-top {
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
position: static;
|
||||
}
|
||||
.navbar-fixed-top {
|
||||
margin-bottom: @baseLineHeight;
|
||||
}
|
||||
.navbar-fixed-top .navbar-inner {
|
||||
.navbar-fixed-bottom {
|
||||
margin-top: @baseLineHeight;
|
||||
}
|
||||
.navbar-fixed-top .navbar-inner,
|
||||
.navbar-fixed-bottom .navbar-inner {
|
||||
padding: 5px;
|
||||
}
|
||||
.navbar .container {
|
||||
|
||||
@ -30,6 +30,7 @@ h4 {
|
||||
|
||||
|
||||
/* Fluid row inputs */
|
||||
#rowInputs .row > [class*=span],
|
||||
#fluidRowInputs .row-fluid > [class*=span] {
|
||||
background-color: rgba(255,0,0,.1);
|
||||
}
|
||||
|
||||
@ -500,67 +500,157 @@
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
|
||||
<h4>Fluid prepended and appended inputs</h4>
|
||||
<div class="row-fluid">
|
||||
<div class="span6">
|
||||
<form>
|
||||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<div class="input-append">
|
||||
<input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">@</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span><input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Fixed row with inputs</h4>
|
||||
<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
|
||||
|
||||
<div class="rowInputs">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span1" placeholder="span1">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span2" placeholder="span2">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span3" placeholder="span3">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span4" placeholder="span4">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span5" placeholder="span5">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span6" placeholder="span6">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span7" placeholder="span7">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span8" placeholder="span8">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span9" placeholder="span9">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span10" placeholder="span10">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span11" placeholder="span11">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<input type="text" class="span12" placeholder="span12">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<h4>Fluid row with inputs</h4>
|
||||
<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
|
||||
<div id="fluidRowInputs">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span1" placeholder="span1">
|
||||
<input type="text" class="span1" placeholder="span1">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span2" placeholder="span2">
|
||||
<input type="text" class="span2" placeholder="span2">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span3" placeholder="span3">
|
||||
<input type="text" class="span3" placeholder="span3">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span4" placeholder="span4">
|
||||
<input type="text" class="span4" placeholder="span4">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span5" placeholder="span5">
|
||||
<input type="text" class="span5" placeholder="span5">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span6" placeholder="span6">
|
||||
<input type="text" class="span6" placeholder="span6">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span7" placeholder="span7">
|
||||
<input type="text" class="span7" placeholder="span7">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span8" placeholder="span8">
|
||||
<input type="text" class="span8" placeholder="span8">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span9" placeholder="span9">
|
||||
<input type="text" class="span9" placeholder="span9">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span10" placeholder="span10">
|
||||
<input type="text" class="span10" placeholder="span10">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span11" placeholder="span11">
|
||||
<input type="text" class="span11" placeholder="span11">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<input class="span12" placeholder="span12">
|
||||
<input type="text" class="span12" placeholder="span12">
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</div>
|
||||
|
||||
179
less/tests/forms.html
Normal file
179
less/tests/forms.html
Normal file
@ -0,0 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap, from Twitter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<form class="container">
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Form controls</h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
|
||||
<label>Select</label>
|
||||
<select>
|
||||
<option>Select</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
|
||||
<hr>
|
||||
|
||||
<label>textarea</label>
|
||||
<textarea>Textarea</textarea>
|
||||
|
||||
<hr>
|
||||
|
||||
<label>text</label>
|
||||
<input type="text" value="Text input">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>password</label>
|
||||
<input type="password" value="Password input">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>checkbox</label>
|
||||
<input type="checkbox" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>radio</label>
|
||||
<input type="radio" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>button</label>
|
||||
<input type="button" value="Button">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>submit</label>
|
||||
<input type="submit" value="Submit">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>reset</label>
|
||||
<input type="reset" value="Reset">
|
||||
|
||||
</div><!-- /span4 -->
|
||||
<div class="span4">
|
||||
|
||||
<label>file</label>
|
||||
<input type="file" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>hidden</label>
|
||||
<input type="hidden" value="hidden">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>image</label>
|
||||
<input type="image" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>datetime</label>
|
||||
<input type="datetime" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>datetime-local</label>
|
||||
<input type="datetime-local" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>date</label>
|
||||
<input type="date" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>month</label>
|
||||
<input type="month" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>time</label>
|
||||
<input type="time" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>week</label>
|
||||
<input type="week" value="">
|
||||
|
||||
</div><!-- /span4 -->
|
||||
<div class="span4">
|
||||
|
||||
<label>number</label>
|
||||
<input type="number" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>range</label>
|
||||
<input type="range" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>email</label>
|
||||
<input type="email" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>url</label>
|
||||
<input type="url" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>search</label>
|
||||
<input type="search" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>tel</label>
|
||||
<input type="tel" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>color</label>
|
||||
<input type="color" value="">
|
||||
|
||||
</div><!-- /span4 -->
|
||||
</div><!-- /row -->
|
||||
|
||||
</form> <!-- /container -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
108
less/tests/navbar.html
Normal file
108
less/tests/navbar.html
Normal file
@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap, from Twitter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Fixed navbar -->
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Static navbar -->
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||
<div class="hero-unit">
|
||||
<h1>Navbar example</h1>
|
||||
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
|
||||
<p>
|
||||
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../assets/js/bootstrap-alert.js"></script>
|
||||
<script src="../assets/js/bootstrap-modal.js"></script>
|
||||
<script src="../assets/js/bootstrap-dropdown.js"></script>
|
||||
<script src="../assets/js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../assets/js/bootstrap-tab.js"></script>
|
||||
<script src="../assets/js/bootstrap-tooltip.js"></script>
|
||||
<script src="../assets/js/bootstrap-popover.js"></script>
|
||||
<script src="../assets/js/bootstrap-button.js"></script>
|
||||
<script src="../assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../assets/js/bootstrap-typeahead.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -8,9 +8,6 @@
|
||||
|
||||
p {
|
||||
margin: 0 0 @baseLineHeight / 2;
|
||||
font-family: @baseFontFamily;
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
small {
|
||||
font-size: @baseFontSize - 2;
|
||||
color: @grayLight;
|
||||
@ -171,7 +168,7 @@ em {
|
||||
// Abbreviations and acronyms
|
||||
abbr[title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted #ddd;
|
||||
border-bottom: 1px dotted @grayLight;
|
||||
}
|
||||
abbr.initialism {
|
||||
font-size: 90%;
|
||||
|
||||
@ -107,7 +107,8 @@
|
||||
@dropdownLinkColor: @grayDark;
|
||||
@dropdownLinkColorHover: @white;
|
||||
@dropdownLinkBackgroundHover: @linkColor;
|
||||
|
||||
@dropdownDividerTop: #e5e5e5;
|
||||
@dropdownDividerBottom: @white;
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user