mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-21 13:24:08 +03:00
Merge branch '2.1.2-wip' into box-sizing-exercise
Conflicts: docs/assets/css/bootstrap-responsive.css docs/assets/css/bootstrap.css docs/base-css.html docs/templates/pages/base-css.mustache less/forms.less less/mixins.less
This commit is contained in:
Mark Otto
+11
@@ -504,6 +504,7 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
[class*="span"],
|
||||
.uneditable-input[class*="span"],
|
||||
.row-fluid [class*="span"] {
|
||||
display: block;
|
||||
float: none;
|
||||
@@ -588,6 +589,16 @@
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.media .pull-left,
|
||||
.media .pull-right {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.media-object {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.modal {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
|
||||
Vendored
+229
-77
@@ -101,7 +101,7 @@ input::-moz-focus-inner {
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="button"],
|
||||
html input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
@@ -406,18 +406,34 @@ cite {
|
||||
color: #c09853;
|
||||
}
|
||||
|
||||
a.text-warning:hover {
|
||||
color: #a47e3c;
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: #b94a48;
|
||||
}
|
||||
|
||||
a.text-error:hover {
|
||||
color: #953b39;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #3a87ad;
|
||||
}
|
||||
|
||||
a.text-info:hover {
|
||||
color: #2d6987;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #468847;
|
||||
}
|
||||
|
||||
a.text-success:hover {
|
||||
color: #356635;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
@@ -427,7 +443,7 @@ h6 {
|
||||
margin: 10px 0;
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
line-height: 20px;
|
||||
color: inherit;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
@@ -443,42 +459,42 @@ h6 small {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 38.5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
font-size: 31.5px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
font-size: 24.5px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
font-size: 17.5px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
font-size: 11.9px;
|
||||
}
|
||||
|
||||
h1 small {
|
||||
font-size: 24px;
|
||||
font-size: 24.5px;
|
||||
}
|
||||
|
||||
h2 small {
|
||||
font-size: 18px;
|
||||
font-size: 17.5px;
|
||||
}
|
||||
|
||||
h3 small {
|
||||
@@ -764,9 +780,10 @@ input[type="color"],
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #555555;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
input,
|
||||
@@ -920,14 +937,14 @@ textarea::-webkit-input-placeholder {
|
||||
|
||||
.radio,
|
||||
.checkbox {
|
||||
min-height: 18px;
|
||||
padding-left: 18px;
|
||||
min-height: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.radio input[type="radio"],
|
||||
.checkbox input[type="checkbox"] {
|
||||
float: left;
|
||||
margin-left: -18px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.controls > .radio:first-child,
|
||||
@@ -1202,7 +1219,8 @@ textarea[class*="span"],
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.controls-row [class*="span"] {
|
||||
.controls-row [class*="span"],
|
||||
.row-fluid .controls-row [class*="span"] {
|
||||
float: left;
|
||||
}
|
||||
|
||||
@@ -1440,6 +1458,17 @@ select:focus:required:invalid:focus {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.input-append input,
|
||||
.input-prepend input,
|
||||
.input-append select,
|
||||
.input-prepend select,
|
||||
.input-append .uneditable-input,
|
||||
.input-prepend .uneditable-input,
|
||||
.input-append .dropdown-menu,
|
||||
.input-prepend .dropdown-menu {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input-append input,
|
||||
.input-prepend input,
|
||||
.input-append select,
|
||||
@@ -1451,9 +1480,9 @@ select:focus:required:invalid:focus {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
-webkit-border-radius: 0 3px 3px 0;
|
||||
-moz-border-radius: 0 3px 3px 0;
|
||||
border-radius: 0 3px 3px 0;
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.input-append input:focus,
|
||||
@@ -1513,29 +1542,38 @@ select:focus:required:invalid:focus {
|
||||
|
||||
.input-prepend .add-on:first-child,
|
||||
.input-prepend .btn:first-child {
|
||||
-webkit-border-radius: 3px 0 0 3px;
|
||||
-moz-border-radius: 3px 0 0 3px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
-moz-border-radius: 4px 0 0 4px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.input-append input,
|
||||
.input-append select,
|
||||
.input-append .uneditable-input {
|
||||
-webkit-border-radius: 3px 0 0 3px;
|
||||
-moz-border-radius: 3px 0 0 3px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
-moz-border-radius: 4px 0 0 4px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.input-append input + .btn-group .btn,
|
||||
.input-append select + .btn-group .btn,
|
||||
.input-append .uneditable-input + .btn-group .btn {
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.input-append .add-on,
|
||||
.input-append .btn {
|
||||
.input-append .btn,
|
||||
.input-append .btn-group {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.input-append .add-on:last-child,
|
||||
.input-append .btn:last-child {
|
||||
-webkit-border-radius: 0 3px 3px 0;
|
||||
-moz-border-radius: 0 3px 3px 0;
|
||||
border-radius: 0 3px 3px 0;
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.input-prepend.input-append input,
|
||||
@@ -1546,20 +1584,32 @@ select:focus:required:invalid:focus {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.input-prepend.input-append input + .btn-group .btn,
|
||||
.input-prepend.input-append select + .btn-group .btn,
|
||||
.input-prepend.input-append .uneditable-input + .btn-group .btn {
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.input-prepend.input-append .add-on:first-child,
|
||||
.input-prepend.input-append .btn:first-child {
|
||||
margin-right: -1px;
|
||||
-webkit-border-radius: 3px 0 0 3px;
|
||||
-moz-border-radius: 3px 0 0 3px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
-moz-border-radius: 4px 0 0 4px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.input-prepend.input-append .add-on:last-child,
|
||||
.input-prepend.input-append .btn:last-child {
|
||||
margin-left: -1px;
|
||||
-webkit-border-radius: 0 3px 3px 0;
|
||||
-moz-border-radius: 0 3px 3px 0;
|
||||
border-radius: 0 3px 3px 0;
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.input-prepend.input-append .btn-group:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
input.search-query {
|
||||
@@ -2940,7 +2990,7 @@ button.close {
|
||||
.btn {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
padding: 4px 14px;
|
||||
padding: 4px 12px;
|
||||
margin-bottom: 0;
|
||||
*margin-left: .3em;
|
||||
font-size: 14px;
|
||||
@@ -3038,9 +3088,8 @@ button.close {
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 9px 14px;
|
||||
font-size: 16px;
|
||||
line-height: normal;
|
||||
padding: 11px 19px;
|
||||
font-size: 17.5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
@@ -3051,9 +3100,11 @@ button.close {
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 3px 9px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-small [class^="icon-"] {
|
||||
@@ -3061,9 +3112,11 @@ button.close {
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
line-height: 17px;
|
||||
padding: 1px 6px;
|
||||
font-size: 10.5px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
@@ -3354,10 +3407,13 @@ input[type="submit"].btn.btn-mini {
|
||||
|
||||
.btn-group {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*margin-left: .3em;
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.btn-group:first-child {
|
||||
@@ -3374,14 +3430,6 @@ input[type="submit"].btn.btn-mini {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.btn-toolbar .btn-group {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
/* IE7 inline-block hack */
|
||||
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.btn-toolbar .btn + .btn,
|
||||
.btn-toolbar .btn-group + .btn,
|
||||
.btn-toolbar .btn + .btn-group {
|
||||
@@ -3550,8 +3598,7 @@ input[type="submit"].btn.btn-mini {
|
||||
}
|
||||
|
||||
.dropup .btn-large .caret {
|
||||
border-top: 0;
|
||||
border-bottom: 5px solid #000000;
|
||||
border-bottom-width: 5px;
|
||||
}
|
||||
|
||||
.btn-primary .caret,
|
||||
@@ -4106,6 +4153,7 @@ input[type="submit"].btn.btn-mini {
|
||||
|
||||
.nav-collapse.collapse {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.navbar .brand {
|
||||
@@ -4222,7 +4270,6 @@ input[type="submit"].btn.btn-mini {
|
||||
|
||||
.navbar-static-top {
|
||||
position: static;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -4645,7 +4692,6 @@ input[type="submit"].btn.btn-mini {
|
||||
}
|
||||
|
||||
.pagination {
|
||||
height: 40px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@@ -4654,9 +4700,9 @@ input[type="submit"].btn.btn-mini {
|
||||
*display: inline;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
*zoom: 1;
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
@@ -4670,8 +4716,8 @@ input[type="submit"].btn.btn-mini {
|
||||
.pagination ul > li > a,
|
||||
.pagination ul > li > span {
|
||||
float: left;
|
||||
padding: 0 14px;
|
||||
line-height: 38px;
|
||||
padding: 4px 12px;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
@@ -4701,16 +4747,22 @@ input[type="submit"].btn.btn-mini {
|
||||
.pagination ul > li:first-child > a,
|
||||
.pagination ul > li:first-child > span {
|
||||
border-left-width: 1px;
|
||||
-webkit-border-radius: 3px 0 0 3px;
|
||||
-moz-border-radius: 3px 0 0 3px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-moz-border-radius-topleft: 4px;
|
||||
}
|
||||
|
||||
.pagination ul > li:last-child > a,
|
||||
.pagination ul > li:last-child > span {
|
||||
-webkit-border-radius: 0 3px 3px 0;
|
||||
-moz-border-radius: 0 3px 3px 0;
|
||||
border-radius: 0 3px 3px 0;
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
}
|
||||
|
||||
.pagination-centered {
|
||||
@@ -4721,6 +4773,68 @@ input[type="submit"].btn.btn-mini {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pagination-large ul > li > a,
|
||||
.pagination-large ul > li > span {
|
||||
padding: 11px 19px;
|
||||
font-size: 17.5px;
|
||||
}
|
||||
|
||||
.pagination-large ul > li:first-child > a,
|
||||
.pagination-large ul > li:first-child > span {
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
-moz-border-radius-bottomleft: 5px;
|
||||
-moz-border-radius-topleft: 5px;
|
||||
}
|
||||
|
||||
.pagination-large ul > li:last-child > a,
|
||||
.pagination-large ul > li:last-child > span {
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
-moz-border-radius-topright: 5px;
|
||||
-moz-border-radius-bottomright: 5px;
|
||||
}
|
||||
|
||||
.pagination-mini ul > li:first-child > a,
|
||||
.pagination-small ul > li:first-child > a,
|
||||
.pagination-mini ul > li:first-child > span,
|
||||
.pagination-small ul > li:first-child > span {
|
||||
-webkit-border-bottom-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
-webkit-border-top-left-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
-moz-border-radius-bottomleft: 3px;
|
||||
-moz-border-radius-topleft: 3px;
|
||||
}
|
||||
|
||||
.pagination-mini ul > li:last-child > a,
|
||||
.pagination-small ul > li:last-child > a,
|
||||
.pagination-mini ul > li:last-child > span,
|
||||
.pagination-small ul > li:last-child > span {
|
||||
-webkit-border-top-right-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
-webkit-border-bottom-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
-moz-border-radius-topright: 3px;
|
||||
-moz-border-radius-bottomright: 3px;
|
||||
}
|
||||
|
||||
.pagination-small ul > li > a,
|
||||
.pagination-small ul > li > span {
|
||||
padding: 2px 10px;
|
||||
font-size: 11.9px;
|
||||
}
|
||||
|
||||
.pagination-mini ul > li > a,
|
||||
.pagination-mini ul > li > span {
|
||||
padding: 1px 6px;
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
.pager {
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
@@ -4820,11 +4934,12 @@ input[type="submit"].btn.btn-mini {
|
||||
z-index: 1050;
|
||||
width: 560px;
|
||||
margin: -250px 0 0 -280px;
|
||||
overflow: auto;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #999;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
*border: 1px solid #999;
|
||||
/* IE6-7 */
|
||||
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
@@ -5018,7 +5133,7 @@ input[type="submit"].btn.btn-mini {
|
||||
}
|
||||
|
||||
.popover.top {
|
||||
margin-bottom: 10px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.popover.right {
|
||||
@@ -5030,7 +5145,7 @@ input[type="submit"].btn.btn-mini {
|
||||
}
|
||||
|
||||
.popover.left {
|
||||
margin-right: 10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
@@ -5194,6 +5309,43 @@ a.thumbnail:hover {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.media,
|
||||
.media-body {
|
||||
overflow: hidden;
|
||||
*overflow: visible;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.media,
|
||||
.media .media {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.media:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.media-object {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-heading {
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
|
||||
.media .pull-left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.media .pull-right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.media-list {
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.label,
|
||||
.badge {
|
||||
font-size: 11.844px;
|
||||
|
||||
@@ -133,7 +133,7 @@ hr.soften {
|
||||
|
||||
/* Download button */
|
||||
.masthead .btn {
|
||||
padding: 14px 24px;
|
||||
padding: 19px 24px;
|
||||
font-size: 24px;
|
||||
font-weight: 200;
|
||||
color: #fff; /* redeclare to override the `.jumbotron a` */
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
+6
-6
@@ -20,14 +20,14 @@
|
||||
|
||||
!function ($) {
|
||||
|
||||
"use strict"; // jshint ;_;
|
||||
|
||||
|
||||
/* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
|
||||
* ======================================================= */
|
||||
|
||||
$(function () {
|
||||
|
||||
"use strict"; // jshint ;_;
|
||||
|
||||
|
||||
/* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
|
||||
* ======================================================= */
|
||||
|
||||
$.support.transition = (function () {
|
||||
|
||||
var transitionEnd = (function () {
|
||||
|
||||
+10
-1
@@ -174,7 +174,7 @@
|
||||
.on('keypress', $.proxy(this.keypress, this))
|
||||
.on('keyup', $.proxy(this.keyup, this))
|
||||
|
||||
if ($.browser.chrome || $.browser.webkit || $.browser.msie) {
|
||||
if (this.eventSupported('keydown')) {
|
||||
this.$element.on('keydown', $.proxy(this.keydown, this))
|
||||
}
|
||||
|
||||
@@ -183,6 +183,15 @@
|
||||
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
|
||||
}
|
||||
|
||||
, eventSupported: function(eventName) {
|
||||
var isSupported = eventName in this.$element
|
||||
if (!isSupported) {
|
||||
this.$element.setAttribute(eventName, 'return;')
|
||||
isSupported = typeof this.$element[eventName] === 'function'
|
||||
}
|
||||
return isSupported
|
||||
}
|
||||
|
||||
, move: function (e) {
|
||||
if (!this.shown) return
|
||||
|
||||
|
||||
Vendored
+16
-7
@@ -20,14 +20,14 @@
|
||||
|
||||
!function ($) {
|
||||
|
||||
"use strict"; // jshint ;_;
|
||||
|
||||
|
||||
/* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
|
||||
* ======================================================= */
|
||||
|
||||
$(function () {
|
||||
|
||||
"use strict"; // jshint ;_;
|
||||
|
||||
|
||||
/* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
|
||||
* ======================================================= */
|
||||
|
||||
$.support.transition = (function () {
|
||||
|
||||
var transitionEnd = (function () {
|
||||
@@ -1797,7 +1797,7 @@
|
||||
.on('keypress', $.proxy(this.keypress, this))
|
||||
.on('keyup', $.proxy(this.keyup, this))
|
||||
|
||||
if ($.browser.chrome || $.browser.webkit || $.browser.msie) {
|
||||
if (this.eventSupported('keydown')) {
|
||||
this.$element.on('keydown', $.proxy(this.keydown, this))
|
||||
}
|
||||
|
||||
@@ -1806,6 +1806,15 @@
|
||||
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
|
||||
}
|
||||
|
||||
, eventSupported: function(eventName) {
|
||||
var isSupported = eventName in this.$element
|
||||
if (!isSupported) {
|
||||
this.$element.setAttribute(eventName, 'return;')
|
||||
isSupported = typeof this.$element[eventName] === 'function'
|
||||
}
|
||||
return isSupported
|
||||
}
|
||||
|
||||
, move: function (e) {
|
||||
if (!this.shown) return
|
||||
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+2
-4
File diff suppressed because one or more lines are too long
+132
-18
@@ -58,7 +58,7 @@
|
||||
<a href="./components.html">Components</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./javascript.html">Javascript</a>
|
||||
<a href="./javascript.html">JavaScript</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./customize.html">Customize</a>
|
||||
@@ -1131,21 +1131,21 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input id="prependedInput" size="16" type="text" placeholder="Username">
|
||||
<input id="prependedInput" type="text" placeholder="Username">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-append">
|
||||
<input id="appendedInput" size="16" type="text">
|
||||
<input id="appendedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input id="prependedInput" size="16" type="text" placeholder="Username">
|
||||
<input id="prependedInput" type="text" placeholder="Username">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input id="appendedInput" size="16" type="text">
|
||||
<input id="appendedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</pre>
|
||||
@@ -1155,14 +1155,14 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<form class="bs-docs-example form-inline">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span>
|
||||
<input id="appendedPrependedInput" size="16" type="text">
|
||||
<input id="appendedPrependedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span>
|
||||
<input id="appendedPrependedInput" size="16" type="text">
|
||||
<input id="appendedPrependedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</pre>
|
||||
@@ -1171,27 +1171,141 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<p>Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButton" size="16" type="text">
|
||||
<input id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
<br>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input class="span2" id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
</pre>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButtons" size="16" type="text">
|
||||
<input id="appendedInputButtons" type="text">
|
||||
<button class="btn" type="button">Search</button>
|
||||
<button class="btn" type="button">Options</button>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButton" size="16" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButtons" size="16" type="text">
|
||||
<input id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Search</button>
|
||||
<button class="btn" type="button">Options</button>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Button dropdowns</h4>
|
||||
<p></p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input class="span2" id="appendedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-append -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButtons" type="text">
|
||||
<input class="span2" id="appendedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input class="span2" id="prependedDropdownButton" type="text">
|
||||
</div><!-- /input-prepend -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<input class="span2" id="prependedDropdownButton" type="text">
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend input-append">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-prepend input-append -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend input-append">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Search form</h4>
|
||||
@@ -1409,9 +1523,9 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group info">
|
||||
<label class="control-label" for="inputError">Input with info</label>
|
||||
<label class="control-label" for="inputInfo">Input with info</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<input type="text" id="inputInfo">
|
||||
<span class="help-inline">Username is taken</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+226
-14
@@ -58,7 +58,7 @@
|
||||
<a href="./components.html">Components</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./javascript.html">Javascript</a>
|
||||
<a href="./javascript.html">JavaScript</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./customize.html">Customize</a>
|
||||
@@ -98,6 +98,7 @@
|
||||
<li><a href="#thumbnails"><i class="icon-chevron-right"></i> Thumbnails</a></li>
|
||||
<li><a href="#alerts"><i class="icon-chevron-right"></i> Alerts</a></li>
|
||||
<li><a href="#progress"><i class="icon-chevron-right"></i> Progress bars</a></li>
|
||||
<li><a href="#media"><i class="icon-chevron-right"></i> Media object</a></li>
|
||||
<li><a href="#misc"><i class="icon-chevron-right"></i> Misc</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -113,7 +114,7 @@
|
||||
</div>
|
||||
|
||||
<h2>Example</h2>
|
||||
<p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown javascript plugin</a>.</p>
|
||||
<p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
@@ -295,7 +296,7 @@
|
||||
|
||||
|
||||
<h4>Checkbox and radio flavors</h4>
|
||||
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p>
|
||||
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
|
||||
|
||||
<h4>Dropdowns in button groups</h4>
|
||||
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
|
||||
@@ -436,9 +437,9 @@
|
||||
</div><!-- /btn-toolbar -->
|
||||
</div>
|
||||
|
||||
<h3>Requires javascript</h3>
|
||||
<h3>Requires JavaScript</h3>
|
||||
<p>Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
|
||||
<p>In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.</p>
|
||||
<p>In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.</p>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
@@ -687,7 +688,7 @@
|
||||
</pre>
|
||||
|
||||
<h3>Disabled state</h3>
|
||||
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.</p>
|
||||
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom JavaScript is implemented to prevent those clicks.</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-pills">
|
||||
<li><a href="#">Clickable link</a></li>
|
||||
@@ -746,7 +747,7 @@
|
||||
|
||||
|
||||
<h2>Dropdowns</h2>
|
||||
<p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p>
|
||||
<p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
|
||||
|
||||
<h3>Tabs with dropdowns</h3>
|
||||
<div class="bs-docs-example">
|
||||
@@ -911,7 +912,7 @@
|
||||
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
|
||||
|
||||
<h4>Requires jQuery plugin</h4>
|
||||
<p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.</p>
|
||||
<p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the JavaScript docs page</a>.</p>
|
||||
|
||||
<h3>Tabbable in any direction</h3>
|
||||
|
||||
@@ -1157,7 +1158,7 @@
|
||||
<p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
|
||||
|
||||
<h3>Using dropdowns</h3>
|
||||
<p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p>
|
||||
<p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
<li class="dropdown">
|
||||
@@ -1171,7 +1172,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>Visit the <a href="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.</p>
|
||||
<p>Visit the <a href="./javascript.html#dropdowns">JavaScript dropdowns documentation</a> for more markup and information on calling dropdowns.</p>
|
||||
|
||||
<h3>Text</h3>
|
||||
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>
|
||||
@@ -1265,7 +1266,7 @@
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Title</a>
|
||||
<div class="nav-collapse">
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
@@ -1321,7 +1322,7 @@
|
||||
<a class="brand" href="#">Project name</a>
|
||||
|
||||
<!-- Everything you want hidden at 940px or less, place within here -->
|
||||
<div class="nav-collapse">
|
||||
<div class="nav-collapse collapse">
|
||||
<!-- .nav, .navbar-search, .navbar-form, etc -->
|
||||
</div>
|
||||
|
||||
@@ -1349,7 +1350,7 @@
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Title</a>
|
||||
<div class="nav-collapse subnav-collapse">
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
@@ -1508,6 +1509,77 @@
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Sizes</h3>
|
||||
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-large">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-small">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-mini">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination pagination-large">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-small">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-mini">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Alignment</h3>
|
||||
@@ -1945,6 +2017,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Alerts
|
||||
================================================== -->
|
||||
<section id="alerts">
|
||||
@@ -1973,7 +2046,7 @@
|
||||
<p>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>
|
||||
<pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">×</button></pre>
|
||||
|
||||
<h3>Dismiss alerts via javascript</h3>
|
||||
<h3>Dismiss alerts via JavaScript</h3>
|
||||
<p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
|
||||
|
||||
|
||||
@@ -2047,6 +2120,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Progress bars
|
||||
================================================== -->
|
||||
<section id="progress">
|
||||
@@ -2193,6 +2267,144 @@
|
||||
|
||||
|
||||
|
||||
<!-- Media object
|
||||
================================================== -->
|
||||
<section id="media">
|
||||
<div class="page-header">
|
||||
<h1>Media object</h1>
|
||||
</div>
|
||||
<p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
|
||||
|
||||
<h2>Default example</h2>
|
||||
<p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
...
|
||||
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Media list</h2>
|
||||
<p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="media-list">
|
||||
<li class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Nested media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Nested media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Nested media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<a class="pull-right" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="media-list">
|
||||
<li class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
...
|
||||
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Miscellaneous
|
||||
================================================== -->
|
||||
|
||||
+3
-2
@@ -58,7 +58,7 @@
|
||||
<a href="./components.html">Components</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./javascript.html">Javascript</a>
|
||||
<a href="./javascript.html">JavaScript</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./customize.html">Customize</a>
|
||||
@@ -74,7 +74,7 @@
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>Customize and download</h1>
|
||||
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.</p>
|
||||
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -143,6 +143,7 @@
|
||||
</div><!-- /span -->
|
||||
<div class="span3">
|
||||
<h3>Miscellaneous</h3>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> Media object</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> Wells</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
|
||||
|
||||
@@ -20,12 +20,12 @@
|
||||
</style>
|
||||
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!-- 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 -->
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
|
||||
@@ -17,12 +17,12 @@
|
||||
</style>
|
||||
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!-- 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 -->
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
|
||||
@@ -16,12 +16,12 @@
|
||||
</style>
|
||||
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!-- 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 -->
|
||||
<!-- Fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
|
||||
+14
-14
@@ -58,7 +58,7 @@
|
||||
<a href="./components.html">Components</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./javascript.html">Javascript</a>
|
||||
<a href="./javascript.html">JavaScript</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./customize.html">Customize</a>
|
||||
@@ -147,7 +147,7 @@
|
||||
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
|
||||
<p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
|
||||
|
||||
<h3>Javascript</h3>
|
||||
<h3>JavaScript</h3>
|
||||
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.</p>
|
||||
<pre class="prettyprint">
|
||||
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
|
||||
@@ -180,18 +180,18 @@
|
||||
|
||||
<h3>Setup file structure</h3>
|
||||
<p>Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:</p>
|
||||
<pre class="prettyprint">
|
||||
app/
|
||||
├── layouts/
|
||||
└── templates/
|
||||
public/
|
||||
├── css/
|
||||
│ ├── bootstrap.min.css
|
||||
├── js/
|
||||
│ ├── bootstrap.min.js
|
||||
└── img/
|
||||
├── glyphicons-halflings.png
|
||||
└── glyphicons-halflings-white.png
|
||||
<pre>
|
||||
<span class="icon-folder-open"></span> app/
|
||||
<span class="icon-folder-open"></span> layouts/
|
||||
<span class="icon-folder-open"></span> templates/
|
||||
<span class="icon-folder-open"></span> public/
|
||||
<span class="icon-folder-open"></span> css/
|
||||
<span class="icon-file"></span> bootstrap.min.css
|
||||
<span class="icon-folder-open"></span> js/
|
||||
<span class="icon-file"></span> bootstrap.min.js
|
||||
<span class="icon-folder-open"></span> img/
|
||||
<span class="icon-file"></span> glyphicons-halflings.png
|
||||
<span class="icon-file"></span> glyphicons-halflings-white.png
|
||||
</pre>
|
||||
|
||||
<h3>Utilize starter template</h3>
|
||||
|
||||
+32
-10
@@ -58,7 +58,7 @@
|
||||
<a href="./components.html">Components</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./javascript.html">Javascript</a>
|
||||
<a href="./javascript.html">JavaScript</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./customize.html">Customize</a>
|
||||
@@ -138,10 +138,9 @@
|
||||
├── js/
|
||||
│ ├── bootstrap.js
|
||||
│ ├── bootstrap.min.js
|
||||
├── img/
|
||||
│ ├── glyphicons-halflings.png
|
||||
│ ├── glyphicons-halflings-white.png
|
||||
└── README.md
|
||||
└── img/
|
||||
├── glyphicons-halflings.png
|
||||
└── glyphicons-halflings-white.png
|
||||
</pre>
|
||||
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
|
||||
<p>Please note that all JavaScript plugins require jQuery to be included.</p>
|
||||
@@ -164,11 +163,11 @@
|
||||
<p>Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <a href="http://glyphicons.com">Glyphicons</a>, a great little icon set.</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/components.html">Components</a></h4>
|
||||
<p>Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/javascript.html">Javascript plugins</a></h4>
|
||||
<p>Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/javascript.html">JavaScript plugins</a></h4>
|
||||
<p>Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.</p>
|
||||
|
||||
<h2>List of components</h2>
|
||||
<p>Together, the <strong>Components</strong> and <strong>Javascript plugins</strong> sections provide the following interface elements:</p>
|
||||
<p>Together, the <strong>Components</strong> and <strong>JavaScript plugins</strong> sections provide the following interface elements:</p>
|
||||
<ul>
|
||||
<li>Button groups</li>
|
||||
<li>Button dropdowns</li>
|
||||
@@ -220,7 +219,7 @@
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
@@ -261,8 +260,31 @@
|
||||
<img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
|
||||
</a>
|
||||
<h4>Starter template</h4>
|
||||
<p>A barebones HTML document with all the Bootstrap CSS and javascript included.</p>
|
||||
<p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
|
||||
</li>
|
||||
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/marketing-narrow.html">
|
||||
<img src="assets/img/examples/bootstrap-example-marketing-narrow.png" alt="">
|
||||
</a>
|
||||
<h4>Narrow marketing</h4>
|
||||
<p>Slim, lightweight marketing template for small projects or teams.</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/signin.html">
|
||||
<img src="assets/img/examples/bootstrap-example-signin.png" alt="">
|
||||
</a>
|
||||
<h4>Sign in</h4>
|
||||
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/carousel.html">
|
||||
<img src="assets/img/examples/bootstrap-example-carousel.png" alt="">
|
||||
</a>
|
||||
<h4>Carousel jumbotron</h4>
|
||||
<p>A more interactive riff on the basic marketing site featuring a prominent carousel.</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
+4
-4
@@ -58,7 +58,7 @@
|
||||
<a href="./components.html">Components</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./javascript.html">Javascript</a>
|
||||
<a href="./javascript.html">JavaScript</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./customize.html">Customize</a>
|
||||
@@ -122,7 +122,7 @@
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-bootstrap-features.png">
|
||||
<h2>Packed with features.</h2>
|
||||
<p>A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">javascript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
|
||||
<p>A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -143,8 +143,8 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
|
||||
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
|
||||
<a class="thumbnail" href="http://www.gathercontent.com/" target="_blank">
|
||||
<img src="assets/img/example-sites/gathercontent.png" alt="Gather Content">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
|
||||
+15
-5
@@ -58,7 +58,7 @@
|
||||
<a href="./components.html">Components</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./javascript.html">Javascript</a>
|
||||
<a href="./javascript.html">JavaScript</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./customize.html">Customize</a>
|
||||
@@ -120,7 +120,7 @@
|
||||
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
|
||||
<pre class="prettyprint linenums">$('body').off('.data-api')</pre>
|
||||
|
||||
<p>Alternatively, to target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:</p>
|
||||
<p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
|
||||
<pre class="prettyprint linenums">$('body').off('.alert.data-api')</pre>
|
||||
|
||||
<h3>Programmatic API</h3>
|
||||
@@ -132,10 +132,10 @@ $("#myModal").modal() // initialized with defaults
|
||||
$("#myModal").modal({ keyboard: false }) // initialized with no keyboard
|
||||
$("#myModal").modal('show') // initializes and invokes show immediately</p>
|
||||
</pre>
|
||||
<p>Each plugin also exposes it's raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
|
||||
<p>Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and it's past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
|
||||
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
|
||||
<p>All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myModal').on('show', function (e) {
|
||||
@@ -253,7 +253,7 @@ $('#myModal').on('show', function (e) {
|
||||
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
|
||||
|
||||
<-- Modal -->
|
||||
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">Modal header</h3>
|
||||
@@ -925,6 +925,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
|
||||
</div>
|
||||
|
||||
<h4>Four directions</h4>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
<a href="./components.html">Components</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./javascript.html">Javascript</a>
|
||||
<a href="./javascript.html">JavaScript</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="./customize.html">Customize</a>
|
||||
|
||||
Vendored
+1
-1
@@ -70,7 +70,7 @@
|
||||
<a href="./components.html">{{_i}}Components{{/i}}</a>
|
||||
</li>
|
||||
<li class="{{javascript}}">
|
||||
<a href="./javascript.html">{{_i}}Javascript{{/i}}</a>
|
||||
<a href="./javascript.html">{{_i}}JavaScript{{/i}}</a>
|
||||
</li>
|
||||
<li class="{{customize}}">
|
||||
<a href="./customize.html">{{_i}}Customize{{/i}}</a>
|
||||
|
||||
+131
-17
@@ -1068,21 +1068,21 @@
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
|
||||
<input id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-append">
|
||||
<input id="appendedInput" size="16" type="text">
|
||||
<input id="appendedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
|
||||
<input id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input id="appendedInput" size="16" type="text">
|
||||
<input id="appendedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</pre>
|
||||
@@ -1092,14 +1092,14 @@
|
||||
<form class="bs-docs-example form-inline">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span>
|
||||
<input id="appendedPrependedInput" size="16" type="text">
|
||||
<input id="appendedPrependedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span>
|
||||
<input id="appendedPrependedInput" size="16" type="text">
|
||||
<input id="appendedPrependedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</pre>
|
||||
@@ -1108,27 +1108,141 @@
|
||||
<p>{{_i}}Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButton" size="16" type="text">
|
||||
<input id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
<br>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input class="span2" id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
</pre>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButtons" size="16" type="text">
|
||||
<input id="appendedInputButtons" type="text">
|
||||
<button class="btn" type="button">Search</button>
|
||||
<button class="btn" type="button">Options</button>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButton" size="16" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButtons" size="16" type="text">
|
||||
<input id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Search</button>
|
||||
<button class="btn" type="button">Options</button>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>{{_i}}Button dropdowns{{/i}}</h4>
|
||||
<p>{{_i}}{{/i}}</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input class="span2" id="appendedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-append -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButtons" type="text">
|
||||
<input class="span2" id="appendedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
{{_i}}Action{{/i}}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input class="span2" id="prependedDropdownButton" type="text">
|
||||
</div><!-- /input-prepend -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
{{_i}}Action{{/i}}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<input class="span2" id="prependedDropdownButton" type="text">
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend input-append">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-prepend input-append -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend input-append">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
{{_i}}Action{{/i}}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
{{_i}}Action{{/i}}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>{{_i}}Search form{{/i}}</h4>
|
||||
@@ -1346,9 +1460,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group info">
|
||||
<label class="control-label" for="inputError">{{_i}}Input with info{{/i}}</label>
|
||||
<label class="control-label" for="inputInfo">{{_i}}Input with info{{/i}}</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputError">
|
||||
<input type="text" id="inputInfo">
|
||||
<span class="help-inline">{{_i}}Username is taken{{/i}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+225
-13
@@ -27,6 +27,7 @@
|
||||
<li><a href="#thumbnails"><i class="icon-chevron-right"></i> {{_i}}Thumbnails{{/i}}</a></li>
|
||||
<li><a href="#alerts"><i class="icon-chevron-right"></i> {{_i}}Alerts{{/i}}</a></li>
|
||||
<li><a href="#progress"><i class="icon-chevron-right"></i> {{_i}}Progress bars{{/i}}</a></li>
|
||||
<li><a href="#media"><i class="icon-chevron-right"></i> {{_i}}Media object{{/i}}</a></li>
|
||||
<li><a href="#misc"><i class="icon-chevron-right"></i> {{_i}}Misc{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -42,7 +43,7 @@
|
||||
</div>
|
||||
|
||||
<h2>{{_i}}Example{{/i}}</h2>
|
||||
<p>{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown javascript plugin</a>.{{/i}}</p>
|
||||
<p>{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
@@ -224,7 +225,7 @@
|
||||
|
||||
|
||||
<h4>{{_i}}Checkbox and radio flavors{{/i}}</h4>
|
||||
<p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
|
||||
<p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.{{/i}}</p>
|
||||
|
||||
<h4>{{_i}}Dropdowns in button groups{{/i}}</h4>
|
||||
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
|
||||
@@ -365,9 +366,9 @@
|
||||
</div><!-- /btn-toolbar -->
|
||||
</div>{{! /example }}
|
||||
|
||||
<h3>{{_i}}Requires javascript{{/i}}</h3>
|
||||
<h3>{{_i}}Requires JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
|
||||
<p>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p>
|
||||
<p>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.{{/i}}</p>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
@@ -616,7 +617,7 @@
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Disabled state{{/i}}</h3>
|
||||
<p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.{{/i}}</p>
|
||||
<p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless custom JavaScript is implemented to prevent those clicks.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="nav nav-pills">
|
||||
<li><a href="#">{{_i}}Clickable link{{/i}}</a></li>
|
||||
@@ -675,7 +676,7 @@
|
||||
|
||||
|
||||
<h2>{{_i}}Dropdowns{{/i}}</h2>
|
||||
<p>{{_i}}Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p>
|
||||
<p>{{_i}}Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
|
||||
<div class="bs-docs-example">
|
||||
@@ -840,7 +841,7 @@
|
||||
<p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
|
||||
|
||||
<h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
|
||||
<p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p>
|
||||
<p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the JavaScript docs page</a>.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Tabbable in any direction{{/i}}</h3>
|
||||
|
||||
@@ -1086,7 +1087,7 @@
|
||||
<p>{{_i}}Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Using dropdowns{{/i}}</h3>
|
||||
<p>{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p>
|
||||
<p>{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
<li class="dropdown">
|
||||
@@ -1100,7 +1101,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>{{_i}}Visit the <a href="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p>
|
||||
<p>{{_i}}Visit the <a href="./javascript.html#dropdowns">JavaScript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Text{{/i}}</h3>
|
||||
<p>{{_i}}Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.{{/i}}</p>
|
||||
@@ -1194,7 +1195,7 @@
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
||||
<div class="nav-collapse">
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
||||
@@ -1250,7 +1251,7 @@
|
||||
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
|
||||
|
||||
<!-- {{_i}}Everything you want hidden at 940px or less, place within here{{/i}} -->
|
||||
<div class="nav-collapse">
|
||||
<div class="nav-collapse collapse">
|
||||
<!-- .nav, .navbar-search, .navbar-form, etc -->
|
||||
</div>
|
||||
|
||||
@@ -1278,7 +1279,7 @@
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
||||
<div class="nav-collapse subnav-collapse">
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
||||
@@ -1437,6 +1438,77 @@
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Sizes{{/i}}</h3>
|
||||
<p>{{_i}}Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="pagination pagination-large">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-small">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-mini">
|
||||
<ul>
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="pagination pagination-large">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-small">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pagination pagination-mini">
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Alignment{{/i}}</h3>
|
||||
@@ -1874,6 +1946,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Alerts
|
||||
================================================== -->
|
||||
<section id="alerts">
|
||||
@@ -1902,7 +1975,7 @@
|
||||
<p>{{_i}}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>
|
||||
<pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">×</button></pre>
|
||||
|
||||
<h3>{{_i}}Dismiss alerts via javascript{{/i}}</h3>
|
||||
<h3>{{_i}}Dismiss alerts via JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.{{/i}}</p>
|
||||
|
||||
|
||||
@@ -1976,6 +2049,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Progress bars
|
||||
================================================== -->
|
||||
<section id="progress">
|
||||
@@ -2122,6 +2196,144 @@
|
||||
|
||||
|
||||
|
||||
<!-- Media object
|
||||
================================================== -->
|
||||
<section id="media">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Media object{{/i}}</h1>
|
||||
</div>
|
||||
<p class="lead">{{_i}}Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.{{/i}}</p>
|
||||
|
||||
<h2>{{_i}}Default example{{/i}}</h2>
|
||||
<p>{{_i}}The default media allow to float a media object (images, video, audio) to the left or right of a content block.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>{{! /.bs-docs-example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
...
|
||||
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Media list{{/i}}</h2>
|
||||
<p>{{_i}}With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<ul class="media-list">
|
||||
<li class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<a class="pull-right" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="media-list">
|
||||
<li class="media">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="http://placehold.it/64x64">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
|
||||
...
|
||||
|
||||
<!-- Nested media object -->
|
||||
<div class="media">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Miscellaneous
|
||||
================================================== -->
|
||||
|
||||
+2
-1
@@ -3,7 +3,7 @@
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>{{_i}}Customize and download{{/i}}</h1>
|
||||
<p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, javascript plugins, and more.{{/i}}</p>
|
||||
<p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.{{/i}}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -72,6 +72,7 @@
|
||||
</div><!-- /span -->
|
||||
<div class="span3">
|
||||
<h3>{{_i}}Miscellaneous{{/i}}</h3>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> {{_i}}Media object{{/i}}</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> {{_i}}Wells{{/i}}</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> {{_i}}Close icon{{/i}}</label>
|
||||
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
|
||||
|
||||
Vendored
+13
-13
@@ -76,7 +76,7 @@
|
||||
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
|
||||
<p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Javascript{{/i}}</h3>
|
||||
<h3>{{_i}}JavaScript{{/i}}</h3>
|
||||
<p>{{_i}}<a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.{{/i}}</p>
|
||||
<pre class="prettyprint">
|
||||
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
|
||||
@@ -109,18 +109,18 @@
|
||||
|
||||
<h3>{{_i}}Setup file structure{{/i}}</h3>
|
||||
<p>{{_i}}Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:{{/i}}</p>
|
||||
<pre class="prettyprint">
|
||||
app/
|
||||
├── layouts/
|
||||
└── templates/
|
||||
public/
|
||||
├── css/
|
||||
│ ├── bootstrap.min.css
|
||||
├── js/
|
||||
│ ├── bootstrap.min.js
|
||||
└── img/
|
||||
├── glyphicons-halflings.png
|
||||
└── glyphicons-halflings-white.png
|
||||
<pre>
|
||||
<span class="icon-folder-open"></span> app/
|
||||
<span class="icon-folder-open"></span> layouts/
|
||||
<span class="icon-folder-open"></span> templates/
|
||||
<span class="icon-folder-open"></span> public/
|
||||
<span class="icon-folder-open"></span> css/
|
||||
<span class="icon-file"></span> bootstrap.min.css
|
||||
<span class="icon-folder-open"></span> js/
|
||||
<span class="icon-file"></span> bootstrap.min.js
|
||||
<span class="icon-folder-open"></span> img/
|
||||
<span class="icon-file"></span> glyphicons-halflings.png
|
||||
<span class="icon-file"></span> glyphicons-halflings-white.png
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Utilize starter template{{/i}}</h3>
|
||||
|
||||
+31
-9
@@ -67,10 +67,9 @@
|
||||
├── js/
|
||||
│ ├── bootstrap.js
|
||||
│ ├── bootstrap.min.js
|
||||
├── img/
|
||||
│ ├── glyphicons-halflings.png
|
||||
│ ├── glyphicons-halflings-white.png
|
||||
└── README.md
|
||||
└── img/
|
||||
├── glyphicons-halflings.png
|
||||
└── glyphicons-halflings-white.png
|
||||
</pre>
|
||||
<p>{{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.{{/i}}</p>
|
||||
<p>{{_i}}Please note that all JavaScript plugins require jQuery to be included.{{/i}}</p>
|
||||
@@ -93,11 +92,11 @@
|
||||
<p>{{_i}}Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <a href="http://glyphicons.com">Glyphicons</a>, a great little icon set.{{/i}}</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/components.html">{{_i}}Components{{/i}}</a></h4>
|
||||
<p>{{_i}}Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.{{/i}}</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/javascript.html">{{_i}}Javascript plugins{{/i}}</a></h4>
|
||||
<p>{{_i}}Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}</p>
|
||||
<h4><a href="http://twitter.github.com/bootstrap/javascript.html">{{_i}}JavaScript plugins{{/i}}</a></h4>
|
||||
<p>{{_i}}Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}</p>
|
||||
|
||||
<h2>{{_i}}List of components{{/i}}</h2>
|
||||
<p>{{_i}}Together, the <strong>Components</strong> and <strong>Javascript plugins</strong> sections provide the following interface elements:{{/i}}</p>
|
||||
<p>{{_i}}Together, the <strong>Components</strong> and <strong>JavaScript plugins</strong> sections provide the following interface elements:{{/i}}</p>
|
||||
<ul>
|
||||
<li>{{_i}}Button groups{{/i}}</li>
|
||||
<li>{{_i}}Button dropdowns{{/i}}</li>
|
||||
@@ -149,7 +148,7 @@
|
||||
<head>
|
||||
<title>Bootstrap 101 Template</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
@@ -190,8 +189,31 @@
|
||||
<img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Starter template{{/i}}</h4>
|
||||
<p>{{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}</p>
|
||||
<p>{{_i}}A barebones HTML document with all the Bootstrap CSS and JavaScript included.{{/i}}</p>
|
||||
</li>
|
||||
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/marketing-narrow.html">
|
||||
<img src="assets/img/examples/bootstrap-example-marketing-narrow.png" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Narrow marketing{{/i}}</h4>
|
||||
<p>{{_i}}Slim, lightweight marketing template for small projects or teams.{{/i}}</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/signin.html">
|
||||
<img src="assets/img/examples/bootstrap-example-signin.png" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Sign in{{/i}}</h4>
|
||||
<p>{{_i}}Barebones sign in form with custom, larger form controls and a flexible layout.{{/i}}</p>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="examples/carousel.html">
|
||||
<img src="assets/img/examples/bootstrap-example-carousel.png" alt="">
|
||||
</a>
|
||||
<h4>{{_i}}Carousel jumbotron{{/i}}</h4>
|
||||
<p>{{_i}}A more interactive riff on the basic marketing site featuring a prominent carousel.{{/i}}</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
Vendored
+8
-8
@@ -1,12 +1,12 @@
|
||||
<div class="jumbotron masthead">
|
||||
<div class="container">
|
||||
<h1>Bootstrap</h1>
|
||||
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
|
||||
<h1>{{_i}}Bootstrap{{/i}}</h1>
|
||||
<p>{{_i}}Sleek, intuitive, and powerful front-end framework for faster and easier web development.{{/i}}</p>
|
||||
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.2']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p>
|
||||
<ul class="masthead-links">
|
||||
<li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>GitHub project</a></li>
|
||||
<li><a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>Extend</a></li>
|
||||
<li>Version 2.1.2</li>
|
||||
<li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>{{_i}}GitHub project{{/i}}</a></li>
|
||||
<li><a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>{{_i}}Extend{{/i}}</a></li>
|
||||
<li>{{_i}}Version 2.1.2{{/i}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -51,7 +51,7 @@
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-bootstrap-features.png">
|
||||
<h2>{{_i}}Packed with features.{{/i}}</h2>
|
||||
<p>{{_i}}A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">javascript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
|
||||
<p>{{_i}}A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,8 +72,8 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
|
||||
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
|
||||
<a class="thumbnail" href="http://www.gathercontent.com/" target="_blank">
|
||||
<img src="assets/img/example-sites/gathercontent.png" alt="Gather Content">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
|
||||
+14
-4
@@ -49,7 +49,7 @@
|
||||
<p>{{_i}}That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:{{/i}}
|
||||
<pre class="prettyprint linenums">$('body').off('.data-api')</pre>
|
||||
|
||||
<p>{{_i}}Alternatively, to target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:{{/i}}</p>
|
||||
<p>{{_i}}Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('body').off('.alert.data-api')</pre>
|
||||
|
||||
<h3>{{_i}}Programmatic API{{/i}}</h3>
|
||||
@@ -61,10 +61,10 @@ $("#myModal").modal() // initialized with defaults
|
||||
$("#myModal").modal({ keyboard: false }) // initialized with no keyboard
|
||||
$("#myModal").modal('show') // initializes and invokes show immediately</p>
|
||||
</pre>
|
||||
<p>{{_i}}Each plugin also exposes it's raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.{{/i}}</p>
|
||||
<p>{{_i}}Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Events{{/i}}</h3>
|
||||
<p>{{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and it's past participle form (ex. <code>shown</code>) is trigger on the completion of an action.{{/i}}</p>
|
||||
<p>{{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.{{/i}}</p>
|
||||
<p>{{_i}}All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myModal').on('show', function (e) {
|
||||
@@ -183,7 +183,7 @@ $('#myModal').on('show', function (e) {
|
||||
<a href="#myModal" role="button" class="btn" data-toggle="modal">{{_i}}Launch demo modal{{/i}}</a>
|
||||
|
||||
<-- Modal -->
|
||||
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">Modal header</h3>
|
||||
@@ -855,6 +855,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Click to toggle popover{{/i}}</a>
|
||||
</div>
|
||||
|
||||
<h4>{{_i}}Four directions{{/i}}</h4>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
</ul>
|
||||
</div>{{! /example }}
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user