# recess & uglifyjs are required
#
- bootstrap:
- mkdir -p bootstrap/fonts
- mkdir -p bootstrap/css
-bootstrap: bootstrap-img bootstrap-css bootstrap-js
++bootstrap: bootstrap-fonts bootstrap-css bootstrap-js
+
+
+ #
+ # JS COMPILE
+ #
+ bootstrap-js: bootstrap/js/*.js
+
+ bootstrap/js/*.js: js/*.js
mkdir -p bootstrap/js
- cp fonts/* bootstrap/fonts/
- ./node_modules/.bin/recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
- ./node_modules/.bin/recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js
./node_modules/.bin/uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js
echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js
-# IMAGES
+ #
+ # CSS COMPLILE
+ #
+
+ bootstrap-css: bootstrap/css/*.css
+
+ bootstrap/css/*.css: less/*.less
+ mkdir -p bootstrap/css
+ ./node_modules/.bin/recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
+ ./node_modules/.bin/recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
+ ./node_modules/.bin/recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css
+ ./node_modules/.bin/recess --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css
+
+ #
-bootstrap-img: bootstrap/img/*
++# FONTS
+ #
+
-bootstrap/img/*: img/*
- mkdir -p bootstrap/img
- cp img/* bootstrap/img/
++bootstrap-fonts: bootstrap/fonts/*
+
++bootstrap/fonts/*: fonts/*
++ mkdir -p bootstrap/fonts
++ cp fonts/* bootstrap/fonts/
+
+
#
# MAKE FOR GH-PAGES 4 FAT & MDO ONLY (O_O )
#
watchr -e "watch('less/.*\.less') { system 'make' }"
- .PHONY: docs watch gh-pages
-.PHONY: docs watch gh-pages bootstrap-img bootstrap-css bootstrap-js
++.PHONY: docs watch gh-pages bootstrap-img bootstrap-css bootstrap-js
- # [Twitter Bootstrap v3.0.0](http://twitter.github.com/bootstrap) [](http://travis-ci.org/twitter/bootstrap)
+ <a href="http://getbootstrap.com">
+ <img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-docs-readme.png" width="100px">
+ </a>
+
-# [Bootstrap v2.3.0](http://twitter.github.com/bootstrap) [](http://travis-ci.org/twitter/bootstrap)
++# [Bootstrap v3.0.0](http://twitter.github.com/bootstrap) [](http://travis-ci.org/twitter/bootstrap)
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat).
}
.table-bordered thead:first-child tr:first-child > th:first-child,
- .table-bordered tbody:first-child tr:first-child > td:first-child {
+ .table-bordered tbody:first-child tr:first-child > td:first-child,
+ .table-bordered tbody:first-child tr:first-child > th:first-child {
- -webkit-border-top-left-radius: 4px;
- border-top-left-radius: 4px;
- -moz-border-radius-topleft: 4px;
+ border-top-left-radius: 4px;
}
.table-bordered thead:first-child tr:first-child > th:last-child,
- .table-bordered tbody:first-child tr:first-child > td:last-child {
+ .table-bordered tbody:first-child tr:first-child > td:last-child,
+ .table-bordered tbody:first-child tr:first-child > th:last-child {
- -webkit-border-top-right-radius: 4px;
- border-top-right-radius: 4px;
- -moz-border-radius-topright: 4px;
+ border-top-right-radius: 4px;
}
.table-bordered thead:last-child tr:last-child > th:first-child,
.table-bordered tbody:last-child tr:last-child > td:first-child,
- .table-bordered tfoot:last-child tr:last-child > td:first-child {
+ .table-bordered tbody:last-child tr:last-child > th:first-child,
+ .table-bordered tfoot:last-child tr:last-child > td:first-child,
+ .table-bordered tfoot:last-child tr:last-child > th:first-child {
- -webkit-border-bottom-left-radius: 4px;
- border-bottom-left-radius: 4px;
- -moz-border-radius-bottomleft: 4px;
+ border-bottom-left-radius: 4px;
}
.table-bordered thead:last-child tr:last-child > th:last-child,
.table-bordered tbody:last-child tr:last-child > td:last-child,
- .table-bordered tfoot:last-child tr:last-child > td:last-child {
+ .table-bordered tbody:last-child tr:last-child > th:last-child,
+ .table-bordered tfoot:last-child tr:last-child > td:last-child,
+ .table-bordered tfoot:last-child tr:last-child > th:last-child {
- -webkit-border-bottom-right-radius: 4px;
- border-bottom-right-radius: 4px;
- -moz-border-radius-bottomright: 4px;
+ border-bottom-right-radius: 4px;
}
-.table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
- -webkit-border-bottom-left-radius: 0;
- border-bottom-left-radius: 0;
- -moz-border-radius-bottomleft: 0;
+.table-bordered tfoot + tbody:last-child tr:last-child > td:first-child {
+ border-bottom-left-radius: 0;
}
-.table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
- -webkit-border-bottom-right-radius: 0;
- border-bottom-right-radius: 0;
- -moz-border-radius-bottomright: 0;
+.table-bordered tfoot + tbody:last-child tr:last-child > td:last-child {
+ border-bottom-right-radius: 0;
}
.table-bordered caption + thead tr:first-child th:first-child,
margin-left: 0;
}
- .table tbody tr.success td {
-.table td.span1,
-.table th.span1 {
- float: none;
- width: 44px;
- margin-left: 0;
++.table tbody tr.success > td {
+ background-color: #dff0d8;
+}
+
- .table tbody tr.error td {
++.table tbody tr.error > td {
+ background-color: #f2dede;
+}
+
- .table tbody tr.warning td {
++.table tbody tr.warning > td {
+ background-color: #fcf8e3;
+}
+
- .table tbody tr.info td {
++.table tbody tr.info > td {
+ background-color: #d9edf7;
+}
+
- .table-hover tbody tr.success:hover td {
++.table-hover tbody tr.success:hover > td {
+ background-color: #d0e9c6;
+}
+
- .table-hover tbody tr.error:hover td {
++.table-hover tbody tr.error:hover > td {
+ background-color: #ebcccc;
+}
+
- .table-hover tbody tr.warning:hover td {
++.table-hover tbody tr.warning:hover > td {
+ background-color: #faf2cc;
+}
+
- .table-hover tbody tr.info:hover td {
++.table-hover tbody tr.info:hover > td {
+ background-color: #c4e3f3;
}
-.table td.span2,
-.table th.span2 {
- float: none;
- width: 124px;
- margin-left: 0;
+@font-face {
+ font-family: 'Glyphicons Halflings';
+ font-style: normal;
+ font-weight: normal;
+ src: url('../fonts/glyphiconshalflings-regular.eot');
+ src: url('../fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphiconshalflings-regular.woff') format('woff'), url('../fonts/glyphiconshalflings-regular.ttf') format('truetype'), url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
-.table td.span3,
-.table th.span3 {
- float: none;
- width: 204px;
- margin-left: 0;
+[class^="glyphicon-"]:before {
+ font-family: 'Glyphicons Halflings';
+ font-style: normal;
+ line-height: 1;
}
-.table td.span4,
-.table th.span4 {
- float: none;
- width: 284px;
- margin-left: 0;
+.glyphicon-glass:before {
+ content: "\e001";
}
-.table td.span5,
-.table th.span5 {
- float: none;
- width: 364px;
- margin-left: 0;
+.glyphicon-music:before {
+ content: "\e002";
}
-.table td.span6,
-.table th.span6 {
- float: none;
- width: 444px;
- margin-left: 0;
+.glyphicon-search:before {
+ content: "\e003";
}
-.table td.span7,
-.table th.span7 {
- float: none;
- width: 524px;
- margin-left: 0;
+.glyphicon-envelope:before {
+ content: "\2709";
}
-.table td.span8,
-.table th.span8 {
- float: none;
- width: 604px;
- margin-left: 0;
+.glyphicon-heart:before {
+ content: "\e005";
}
-.table td.span9,
-.table th.span9 {
- float: none;
- width: 684px;
- margin-left: 0;
+.glyphicon-star:before {
+ content: "\e006";
}
-.table td.span10,
-.table th.span10 {
- float: none;
- width: 764px;
- margin-left: 0;
+.glyphicon-star-empty:before {
+ content: "\e007";
}
-.table td.span11,
-.table th.span11 {
- float: none;
- width: 844px;
- margin-left: 0;
+.glyphicon-user:before {
+ content: "\e008";
}
-.table td.span12,
-.table th.span12 {
- float: none;
- width: 924px;
- margin-left: 0;
+.glyphicon-film:before {
+ content: "\e009";
}
-.table tbody tr.success > td {
- background-color: #dff0d8;
+.glyphicon-th-large:before {
+ content: "\e010";
}
-.table tbody tr.error > td {
- background-color: #f2dede;
+.glyphicon-th:before {
+ content: "\e011";
}
-.table tbody tr.warning > td {
- background-color: #fcf8e3;
+.glyphicon-th-list:before {
+ content: "\e012";
}
-.table tbody tr.info > td {
- background-color: #d9edf7;
+.glyphicon-ok:before {
+ content: "\e013";
}
-.table-hover tbody tr.success:hover > td {
- background-color: #d0e9c6;
+.glyphicon-remove:before {
+ content: "\e014";
}
-.table-hover tbody tr.error:hover > td {
- background-color: #ebcccc;
+.glyphicon-zoom-in:before {
+ content: "\e015";
}
-.table-hover tbody tr.warning:hover > td {
- background-color: #faf2cc;
+.glyphicon-zoom-out:before {
+ content: "\e016";
}
-.table-hover tbody tr.info:hover > td {
- background-color: #c4e3f3;
+.glyphicon-off:before {
+ content: "\e017";
}
-[class^="icon-"],
-[class*=" icon-"] {
- display: inline-block;
- width: 14px;
- height: 14px;
- margin-top: 1px;
- *margin-right: .3em;
- line-height: 14px;
- vertical-align: text-top;
- background-image: url("../img/glyphicons-halflings.png");
- background-position: 14px 14px;
- background-repeat: no-repeat;
+.glyphicon-signal:before {
+ content: "\e018";
}
-/* White icons with optional class, or on hover/active states of certain elements */
+.glyphicon-cog:before {
+ content: "\e019";
+}
-.icon-white,
-.nav-pills > .active > a > [class^="icon-"],
-.nav-pills > .active > a > [class*=" icon-"],
-.nav-list > .active > a > [class^="icon-"],
-.nav-list > .active > a > [class*=" icon-"],
-.navbar-inverse .nav > .active > a > [class^="icon-"],
-.navbar-inverse .nav > .active > a > [class*=" icon-"],
-.dropdown-menu > li > a:hover > [class^="icon-"],
-.dropdown-menu > li > a:hover > [class*=" icon-"],
-.dropdown-menu > .active > a > [class^="icon-"],
-.dropdown-menu > .active > a > [class*=" icon-"],
-.dropdown-submenu:hover > a > [class^="icon-"],
-.dropdown-submenu:hover > a > [class*=" icon-"] {
- background-image: url("../img/glyphicons-halflings-white.png");
+.glyphicon-trash:before {
+ content: "\e020";
}
-.icon-glass {
- background-position: 0 0;
+.glyphicon-home:before {
+ content: "\e021";
}
-.icon-music {
- background-position: -24px 0;
+.glyphicon-file:before {
+ content: "\e022";
}
-.icon-search {
- background-position: -48px 0;
+.glyphicon-time:before {
+ content: "\e023";
}
-.icon-envelope {
- background-position: -72px 0;
+.glyphicon-road:before {
+ content: "\e024";
}
-.icon-heart {
- background-position: -96px 0;
+.glyphicon-download-alt:before {
+ content: "\e025";
}
-.icon-star {
- background-position: -120px 0;
+.glyphicon-download:before {
+ content: "\e026";
}
-.icon-star-empty {
- background-position: -144px 0;
+.glyphicon-upload:before {
+ content: "\e027";
}
-.icon-user {
- background-position: -168px 0;
+.glyphicon-inbox:before {
+ content: "\e028";
}
-.icon-film {
- background-position: -192px 0;
+.glyphicon-play-circle:before {
+ content: "\e029";
}
-.icon-th-large {
- background-position: -216px 0;
+.glyphicon-repeat:before {
+ content: "\e030";
}
-.icon-th {
- background-position: -240px 0;
+.glyphicon-refresh:before {
+ content: "\e031";
}
-.icon-th-list {
- background-position: -264px 0;
+.glyphicon-list-alt:before {
+ content: "\e032";
}
-.icon-ok {
- background-position: -288px 0;
+.glyphicon-lock:before {
+ content: "\e033";
}
-.icon-remove {
- background-position: -312px 0;
+.glyphicon-flag:before {
+ content: "\e034";
}
-.icon-zoom-in {
- background-position: -336px 0;
+.glyphicon-headphones:before {
+ content: "\e035";
}
-.icon-zoom-out {
- background-position: -360px 0;
+.glyphicon-volume-off:before {
+ content: "\e036";
}
-.icon-off {
- background-position: -384px 0;
+.glyphicon-volume-down:before {
+ content: "\e037";
}
-.icon-signal {
- background-position: -408px 0;
+.glyphicon-volume-up:before {
+ content: "\e038";
}
-.icon-cog {
- background-position: -432px 0;
+.glyphicon-qrcode:before {
+ content: "\e039";
}
-.icon-trash {
- background-position: -456px 0;
+.glyphicon-barcode:before {
+ content: "\e040";
}
-.icon-home {
- background-position: 0 -24px;
+.glyphicon-tag:before {
+ content: "\e041";
}
-.icon-file {
- background-position: -24px -24px;
+.glyphicon-tags:before {
+ content: "\e042";
}
-.icon-time {
- background-position: -48px -24px;
+.glyphicon-book:before {
+ content: "\e043";
}
-.icon-road {
- background-position: -72px -24px;
+.glyphicon-bookmark:before {
+ content: "\e044";
}
-.icon-download-alt {
- background-position: -96px -24px;
+.glyphicon-print:before {
+ content: "\e045";
}
-.icon-download {
- background-position: -120px -24px;
+.glyphicon-camera:before {
+ content: "\e046";
}
-.icon-upload {
- background-position: -144px -24px;
+.glyphicon-font:before {
+ content: "\e047";
}
-.icon-inbox {
- background-position: -168px -24px;
+.glyphicon-bold:before {
+ content: "\e048";
}
-.icon-play-circle {
- background-position: -192px -24px;
+.glyphicon-italic:before {
+ content: "\e049";
}
-.icon-repeat {
- background-position: -216px -24px;
+.glyphicon-text-height:before {
+ content: "\e050";
}
-.icon-refresh {
- background-position: -240px -24px;
+.glyphicon-text-width:before {
+ content: "\e051";
}
-.icon-list-alt {
- background-position: -264px -24px;
+.glyphicon-align-left:before {
+ content: "\e052";
}
-.icon-lock {
- background-position: -287px -24px;
+.glyphicon-align-center:before {
+ content: "\e053";
}
-.icon-flag {
- background-position: -312px -24px;
+.glyphicon-align-right:before {
+ content: "\e054";
}
-.icon-headphones {
- background-position: -336px -24px;
+.glyphicon-align-justify:before {
+ content: "\e055";
}
-.icon-volume-off {
- background-position: -360px -24px;
+.glyphicon-list:before {
+ content: "\e056";
}
-.icon-volume-down {
- background-position: -384px -24px;
+.glyphicon-indent-left:before {
+ content: "\e057";
}
-.icon-volume-up {
- background-position: -408px -24px;
+.glyphicon-indent-right:before {
+ content: "\e058";
}
-.icon-qrcode {
- background-position: -432px -24px;
+.glyphicon-facetime-video:before {
+ content: "\e059";
}
-.icon-barcode {
- background-position: -456px -24px;
+.glyphicon-picture:before {
+ content: "\e060";
}
-.icon-tag {
- background-position: 0 -48px;
+.glyphicon-pencil:before {
+ content: "\270f";
}
-.icon-tags {
- background-position: -25px -48px;
+.glyphicon-map-marker:before {
+ content: "\e062";
}
-.icon-book {
- background-position: -48px -48px;
+.glyphicon-adjust:before {
+ content: "\e063";
}
-.icon-bookmark {
- background-position: -72px -48px;
+.glyphicon-tint:before {
+ content: "\e064";
}
-.icon-print {
- background-position: -96px -48px;
+.glyphicon-edit:before {
+ content: "\e065";
}
-.icon-camera {
- background-position: -120px -48px;
+.glyphicon-share:before {
+ content: "\e066";
}
-.icon-font {
- background-position: -144px -48px;
+.glyphicon-check:before {
+ content: "\e067";
}
-.icon-bold {
- background-position: -167px -48px;
+.glyphicon-move:before {
+ content: "\e068";
}
-.icon-italic {
- background-position: -192px -48px;
+.glyphicon-step-backward:before {
+ content: "\e069";
}
-.icon-text-height {
- background-position: -216px -48px;
+.glyphicon-fast-backward:before {
+ content: "\e070";
}
-.icon-text-width {
- background-position: -240px -48px;
+.glyphicon-backward:before {
+ content: "\e071";
}
-.icon-align-left {
- background-position: -264px -48px;
+.glyphicon-play:before {
+ content: "\e072";
}
-.icon-align-center {
- background-position: -288px -48px;
+.glyphicon-pause:before {
+ content: "\e073";
}
-.icon-align-right {
- background-position: -312px -48px;
+.glyphicon-stop:before {
+ content: "\e074";
}
-.icon-align-justify {
- background-position: -336px -48px;
+.glyphicon-forward:before {
+ content: "\e075";
}
-.icon-list {
- background-position: -360px -48px;
+.glyphicon-fast-forward:before {
+ content: "\e076";
}
-.icon-indent-left {
- background-position: -384px -48px;
+.glyphicon-step-forward:before {
+ content: "\e077";
}
-.icon-indent-right {
- background-position: -408px -48px;
+.glyphicon-eject:before {
+ content: "\e078";
}
-.icon-facetime-video {
- background-position: -432px -48px;
+.glyphicon-chevron-left:before {
+ content: "\e079";
}
-.icon-picture {
- background-position: -456px -48px;
+.glyphicon-chevron-right:before {
+ content: "\e080";
}
-.icon-pencil {
- background-position: 0 -72px;
+.glyphicon-plus-sign:before {
+ content: "\e081";
}
-.icon-map-marker {
- background-position: -24px -72px;
+.glyphicon-minus-sign:before {
+ content: "\e082";
}
-.icon-adjust {
- background-position: -48px -72px;
+.glyphicon-remove-sign:before {
+ content: "\e083";
}
-.icon-tint {
- background-position: -72px -72px;
+.glyphicon-ok-sign:before {
+ content: "\e084";
}
-.icon-edit {
- background-position: -96px -72px;
+.glyphicon-question-sign:before {
+ content: "\e085";
}
-.icon-share {
- background-position: -120px -72px;
+.glyphicon-info-sign:before {
+ content: "\e086";
}
-.icon-check {
- background-position: -144px -72px;
+.glyphicon-screenshot:before {
+ content: "\e087";
}
-.icon-move {
- background-position: -168px -72px;
+.glyphicon-remove-circle:before {
+ content: "\e088";
}
-.icon-step-backward {
- background-position: -192px -72px;
+.glyphicon-ok-circle:before {
+ content: "\e089";
}
-.icon-fast-backward {
- background-position: -216px -72px;
+.glyphicon-ban-circle:before {
+ content: "\e090";
}
-.icon-backward {
- background-position: -240px -72px;
+.glyphicon-arrow-left:before {
+ content: "\e091";
}
-.icon-play {
- background-position: -264px -72px;
+.glyphicon-arrow-right:before {
+ content: "\e092";
}
-.icon-pause {
- background-position: -288px -72px;
+.glyphicon-arrow-up:before {
+ content: "\e093";
}
-.icon-stop {
- background-position: -312px -72px;
+.glyphicon-arrow-down:before {
+ content: "\e094";
}
-.icon-forward {
- background-position: -336px -72px;
+.glyphicon-share-alt:before {
+ content: "\e095";
}
-.icon-fast-forward {
- background-position: -360px -72px;
+.glyphicon-resize-full:before {
+ content: "\e096";
}
-.icon-step-forward {
- background-position: -384px -72px;
+.glyphicon-resize-small:before {
+ content: "\e097";
}
-.icon-eject {
- background-position: -408px -72px;
+.glyphicon-plus:before {
+ content: "\002b";
}
-.icon-chevron-left {
- background-position: -432px -72px;
+.glyphicon-minus:before {
+ content: "\2212";
}
-.icon-chevron-right {
- background-position: -456px -72px;
+.glyphicon-asterisk:before {
+ content: "\002a";
}
-.icon-plus-sign {
- background-position: 0 -96px;
+.glyphicon-exclamation-sign:before {
+ content: "\e101";
}
-.icon-minus-sign {
- background-position: -24px -96px;
+.glyphicon-gift:before {
+ content: "\e102";
}
-.icon-remove-sign {
- background-position: -48px -96px;
+.glyphicon-leaf:before {
+ content: "\e103";
}
-.icon-ok-sign {
- background-position: -72px -96px;
+.glyphicon-fire:before {
+ content: "\e104";
}
-.icon-question-sign {
- background-position: -96px -96px;
+.glyphicon-eye-open:before {
+ content: "\e105";
}
-.icon-info-sign {
- background-position: -120px -96px;
+.glyphicon-eye-close:before {
+ content: "\e106";
}
-.icon-screenshot {
- background-position: -144px -96px;
+.glyphicon-warning-sign:before {
+ content: "\e107";
}
-.icon-remove-circle {
- background-position: -168px -96px;
+.glyphicon-plane:before {
+ content: "\e108";
}
-.icon-ok-circle {
- background-position: -192px -96px;
+.glyphicon-calendar:before {
+ content: "\e109";
}
-.icon-ban-circle {
- background-position: -216px -96px;
+.glyphicon-random:before {
+ content: "\e110";
}
-.icon-arrow-left {
- background-position: -240px -96px;
+.glyphicon-comment:before {
+ content: "\e111";
}
-.icon-arrow-right {
- background-position: -264px -96px;
+.glyphicon-magnet:before {
+ content: "\e112";
}
-.icon-arrow-up {
- background-position: -289px -96px;
+.glyphicon-chevron-up:before {
+ content: "\e113";
}
-.icon-arrow-down {
- background-position: -312px -96px;
+.glyphicon-chevron-down:before {
+ content: "\e114";
}
-.icon-share-alt {
- background-position: -336px -96px;
+.glyphicon-retweet:before {
+ content: "\e115";
}
-.icon-resize-full {
- background-position: -360px -96px;
+.glyphicon-shopping-cart:before {
+ content: "\e116";
}
-.icon-resize-small {
- background-position: -384px -96px;
+.glyphicon-folder-close:before {
+ content: "\e117";
}
-.icon-plus {
- background-position: -408px -96px;
+.glyphicon-folder-open:before {
+ content: "\e118";
}
-.icon-minus {
- background-position: -433px -96px;
+.glyphicon-resize-vertical:before {
+ content: "\e119";
}
-.icon-asterisk {
- background-position: -456px -96px;
+.glyphicon-resize-horizontal:before {
+ content: "\e120";
}
-.icon-exclamation-sign {
- background-position: 0 -120px;
+.glyphicon-hdd:before {
+ content: "\e121";
}
-.icon-gift {
- background-position: -24px -120px;
+.glyphicon-bullhorn:before {
+ content: "\e122";
}
-.icon-leaf {
- background-position: -48px -120px;
+.glyphicon-bell:before {
+ content: "\e123";
}
-.icon-fire {
- background-position: -72px -120px;
+.glyphicon-certificate:before {
+ content: "\e124";
}
-.icon-eye-open {
- background-position: -96px -120px;
+.glyphicon-thumbs-up:before {
+ content: "\e125";
}
-.icon-eye-close {
- background-position: -120px -120px;
+.glyphicon-thumbs-down:before {
+ content: "\e126";
}
-.icon-warning-sign {
- background-position: -144px -120px;
+.glyphicon-hand-right:before {
+ content: "\e127";
}
-.icon-plane {
- background-position: -168px -120px;
+.glyphicon-hand-left:before {
+ content: "\e128";
}
-.icon-calendar {
- background-position: -192px -120px;
+.glyphicon-hand-up:before {
+ content: "\e129";
}
-.icon-random {
- width: 16px;
- background-position: -216px -120px;
+.glyphicon-hand-down:before {
+ content: "\e130";
}
-.icon-comment {
- background-position: -240px -120px;
+.glyphicon-circle-arrow-right:before {
+ content: "\e131";
}
-.icon-magnet {
- background-position: -264px -120px;
+.glyphicon-circle-arrow-left:before {
+ content: "\e132";
}
-.icon-chevron-up {
- background-position: -288px -120px;
+.glyphicon-circle-arrow-up:before {
+ content: "\e133";
}
-.icon-chevron-down {
- background-position: -313px -119px;
+.glyphicon-circle-arrow-down:before {
+ content: "\e134";
}
-.icon-retweet {
- background-position: -336px -120px;
+.glyphicon-globe:before {
+ content: "\e135";
}
-.icon-shopping-cart {
- background-position: -360px -120px;
+.glyphicon-wrench:before {
+ content: "\e136";
}
-.icon-folder-close {
- background-position: -384px -120px;
+.glyphicon-tasks:before {
+ content: "\e137";
}
-.icon-folder-open {
- width: 16px;
- background-position: -408px -120px;
+.glyphicon-filter:before {
+ content: "\e138";
}
-.icon-resize-vertical {
- background-position: -432px -119px;
+.glyphicon-briefcase:before {
+ content: "\e139";
}
-.icon-resize-horizontal {
- background-position: -456px -118px;
+.glyphicon-fullscreen:before {
+ content: "\e140";
}
-.icon-hdd {
- background-position: 0 -144px;
+.glyphicon-dashboard:before {
+ content: "\e141";
}
-.icon-bullhorn {
- background-position: -24px -144px;
+.glyphicon-paperclip:before {
+ content: "\e142";
}
-.icon-bell {
- background-position: -48px -144px;
+.glyphicon-heart-empty:before {
+ content: "\e143";
}
-.icon-certificate {
- background-position: -72px -144px;
+.glyphicon-link:before {
+ content: "\e144";
}
-.icon-thumbs-up {
- background-position: -96px -144px;
+.glyphicon-phone:before {
+ content: "\e145";
}
-.icon-thumbs-down {
- background-position: -120px -144px;
+.glyphicon-pushpin:before {
+ content: "\e146";
}
-.icon-hand-right {
- background-position: -144px -144px;
+.glyphicon-euro:before {
+ content: "\20ac";
}
-.icon-hand-left {
- background-position: -168px -144px;
+.glyphicon-usd:before {
+ content: "\e148";
}
-.icon-hand-up {
- background-position: -192px -144px;
+.glyphicon-gbp:before {
+ content: "\e149";
}
-.icon-hand-down {
- background-position: -216px -144px;
+.glyphicon-sort:before {
+ content: "\e150";
}
-.icon-circle-arrow-right {
- background-position: -240px -144px;
+.glyphicon-sort-by-alphabet:before {
+ content: "\e151";
}
-.icon-circle-arrow-left {
- background-position: -264px -144px;
+.glyphicon-sort-by-alphabet-alt:before {
+ content: "\e152";
}
-.icon-circle-arrow-up {
- background-position: -288px -144px;
+.glyphicon-sort-by-order:before {
+ content: "\e153";
}
-.icon-circle-arrow-down {
- background-position: -312px -144px;
+.glyphicon-sort-by-order-alt:before {
+ content: "\e154";
}
-.icon-globe {
- background-position: -336px -144px;
+.glyphicon-sort-by-attributes:before {
+ content: "\e155";
}
-.icon-wrench {
- background-position: -360px -144px;
+.glyphicon-sort-by-attributes-alt:before {
+ content: "\e156";
}
-.icon-tasks {
- background-position: -384px -144px;
+.glyphicon-unchecked:before {
+ content: "\e157";
}
-.icon-filter {
- background-position: -408px -144px;
+.glyphicon-expand:before {
+ content: "\e158";
}
-.icon-briefcase {
- background-position: -432px -144px;
+.glyphicon-collapse:before {
+ content: "\e159";
}
-.icon-fullscreen {
- background-position: -456px -144px;
+.glyphicon-collapse-top:before {
+ content: "\e160";
}
.dropup,
line-height: 18px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
- -webkit-border-radius: 5px 5px 0 0;
- -moz-border-radius: 5px 5px 0 0;
- border-radius: 5px 5px 0 0;
+ border-radius: 5px 5px 0 0;
}
+ .popover-title:empty {
+ display: none;
+ }
+
.popover-content {
padding: 9px 14px;
}
return this
}
- }(window.jQuery);/* ===========================================================
+ }(window.jQuery);
+ /* ===========================================================
- * bootstrap-popover.js v2.2.2
+ * bootstrap-popover.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#popovers
* ===========================================================
* Copyright 2012 Twitter, Inc.
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
...
</ul>
+ </pre>
+
+ <h3>Disabled menu options</h3>
+ <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</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;">
+ <li><a tabindex="-1" href="#">Regular link</a></li>
+ <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
+ <li><a tabindex="-1" href="#">Another link</a></li>
+ </ul>
+ </div>
+ </div>
+ <pre class="prettyprint linenums">
+ <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+ <li><a tabindex="-1" href="#">Regular link</a></li>
+ <li><a tabindex="-1" href="#">Disabled link</a></li>
+ <li><a tabindex="-1" href="#">Another link</a></li>
+ </ul>
</pre>
-
- <h3>Sub menus on dropdowns</h3>
- <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
- <div class="bs-docs-example bs-docs-example-submenus">
-
- <div class="pull-left">
- <p class="muted">Default</p>
- <div class="dropdown clearfix">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
-
- <div class="pull-left">
- <p class="muted">Dropup</p>
- <div class="dropup">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
-
- <div class="pull-left">
- <p class="muted">Left submenu</p>
- <div class="dropdown">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu pull-left">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
-
- </div>
-<pre class="prettyprint linenums">
-<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- ...
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- ...
- </ul>
- </li>
-</ul>
-</pre>
-
</section>
<h1>5. Examples</h1>
</div>
<p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
- <ul class="thumbnails bootstrap-examples">
- <li class="span3">
+ <div class="row bootstrap-examples">
+ <div class="span4">
<a class="thumbnail" href="examples/starter-template.html">
- <img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
+ <img src="assets/img/examples/bootstrap-example-starter.png" alt="">
</a>
<h4>Starter template</h4>
<p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
- </li>
- <li class="span3">
+ </div>
+ <div class="span4">
<a class="thumbnail" href="examples/hero.html">
- <img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
+ <img src="assets/img/examples/bootstrap-example-marketing.png" alt="">
</a>
<h4>Basic marketing site</h4>
<p>Featuring a hero unit for a primary message and three supporting elements.</p>
</a>
<h4>Narrow marketing</h4>
<p>Slim, lightweight marketing template for small projects or teams.</p>
- </li>
- <li class="span3">
+ </div>
++ <div class="span4">
+ <a class="thumbnail" href="examples/justified-nav.html">
+ <img src="assets/img/examples/bootstrap-example-justified-nav.png" alt="">
+ </a>
+ <h4>Justified nav</h4>
+ <p>Marketing page with equal-width navigation links in a modified navbar.</p>
- </li>
- <li class="span3">
++ </div>
+ <div class="span4">
<a class="thumbnail" href="examples/signin.html">
<img src="assets/img/examples/bootstrap-example-signin.png" alt="">
</a>
<h2>Examples</h2>
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
- <p>For performance reasons, the tooltip and popover data-apis are opt in, meaning <strong>you must initialize them yourself</strong>.</p>
<p>Hover over the links below to see tooltips:</p>
<div class="bs-docs-example tooltip-demo">
- <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
- <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="A much longer tooltip belongs right here to demonstrate the max-width we apply.">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
++ <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
</div>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
...
</ul>
- <h3>{{_i}}Disabled menu options{{/i}}</h3>
- <p>{{_i}}Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.{{/i}}</p>
+ </pre>
+
- <li><a tabindex="-1" href="#">{{_i}}Regular link{{/i}}</a></li>
- <li class="disabled"><a tabindex="-1" href="#">{{_i}}Disabled link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Another link{{/i}}</a></li>
++ <h3>Disabled menu options</h3>
++ <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</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;">
- <li><a tabindex="-1" href="#">{{_i}}Regular link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Disabled link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Another link{{/i}}</a></li>
++ <li><a tabindex="-1" href="#">Regular link</a></li>
++ <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
++ <li><a tabindex="-1" href="#">Another link</a></li>
+ </ul>
+ </div>
+ </div>{{! /example }}
+ <pre class="prettyprint linenums">
+ <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
++ <li><a tabindex="-1" href="#">Regular link</a></li>
++ <li><a tabindex="-1" href="#">Disabled link</a></li>
++ <li><a tabindex="-1" href="#">Another link</a></li>
+ </ul>
</pre>
-
- <h3>{{_i}}Sub menus on dropdowns{{/i}}</h3>
- <p>{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.{{/i}}</p>
- <div class="bs-docs-example bs-docs-example-submenus">
-
- <div class="pull-left">
- <p class="muted">Default</p>
- <div class="dropdown clearfix">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>{{! /.pull-left }}
-
- <div class="pull-left">
- <p class="muted">Dropup</p>
- <div class="dropup">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>{{! /.pull-left }}
-
- <div class="pull-left">
- <p class="muted">Left submenu</p>
- <div class="dropdown">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu pull-left">
- <a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>{{! /.pull-left }}
-
- </div>{{! /example }}
-<pre class="prettyprint linenums">
-<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- ...
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
- <ul class="dropdown-menu">
- ...
- </ul>
- </li>
-</ul>
-</pre>
-
</section>
<p><button class="close" style="float: none;">×</button></p>
</div>
<pre class="prettyprint linenums"><button class="close">&times;</button></pre>
- <p>iOS devices require an href="#" for click events if you would rather use an anchor.</p>
- <p>{{_i}}iOS devices require an <code>href="#"</code> for click events if you would rather use an anchor.{{/i}}</p>
++ <p>iOS devices require an <code>href="#"</code> for click events if you would rather use an anchor.</p>
<pre class="prettyprint linenums"><a class="close" href="#">&times;</a></pre>
- <h2>{{_i}}Helper classes{{/i}}</h2>
- <p>{{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}</p>
+ <h2>Helper classes</h2>
+ <p>Simple, focused classes for small display or behavior tweaks.</p>
- <h4>{{_i}}.pull-left{{/i}}</h4>
- <p>{{_i}}Float an element left{{/i}}</p>
+ <h4>.pull-left</h4>
+ <p>Float an element left</p>
<pre class="prettyprint linenums">
class="pull-left"
</pre>
================================================== -->
<section id="html-template">
<div class="page-header">
- <h1>{{_i}}4. Basic HTML template{{/i}}</h1>
+ <h1>4. Basic HTML template</h1>
</div>
- <p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.</p>
- <p class="lead">{{_i}}With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.{{/i}}</p>
- <p>{{_i}}Now, here's a look at a <strong>typical HTML file</strong>:{{/i}}</p>
++ <p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.</p>
+ <p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
<pre class="prettyprint linenums">
<!DOCTYPE html>
<html>
================================================== -->
<section id="examples">
<div class="page-header">
- <h1>{{_i}}5. Examples{{/i}}</h1>
+ <h1>5. Examples</h1>
</div>
- <p class="lead">{{_i}}Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}</p>
- <ul class="thumbnails bootstrap-examples">
- <li class="span3">
+ <p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
+ <div class="row bootstrap-examples">
+ <div class="span4">
<a class="thumbnail" href="examples/starter-template.html">
- <img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
+ <img src="assets/img/examples/bootstrap-example-starter.png" alt="">
</a>
- <h4>{{_i}}Starter template{{/i}}</h4>
- <p>{{_i}}A barebones HTML document with all the Bootstrap CSS and JavaScript included.{{/i}}</p>
- </li>
- <li class="span3">
+ <h4>Starter template</h4>
+ <p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
+ </div>
+ <div class="span4">
<a class="thumbnail" href="examples/hero.html">
- <img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
+ <img src="assets/img/examples/bootstrap-example-marketing.png" alt="">
</a>
- <h4>{{_i}}Basic marketing site{{/i}}</h4>
- <p>{{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}</p>
- </li>
- <li class="span3">
- <a class="thumbnail" href="examples/fluid.html">
- <img src="assets/img/examples/bootstrap-example-fluid.png" alt="">
- </a>
- <h4>{{_i}}Fluid layout{{/i}}</h4>
- <p>{{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}</p>
- </li>
-
- <li class="span3">
+ <h4>Basic marketing site</h4>
+ <p>Featuring a hero unit for a primary message and three supporting elements.</p>
+ </div>
+ <div class="span4">
<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">
+ <h4>Narrow marketing</h4>
+ <p>Slim, lightweight marketing template for small projects or teams.</p>
+ </div>
++ <div class="span4">
+ <a class="thumbnail" href="examples/justified-nav.html">
+ <img src="assets/img/examples/bootstrap-example-justified-nav.png" alt="">
+ </a>
+ <h4>{{_i}}Justified nav{{/i}}</h4>
+ <p>{{_i}}Marketing page with equal-width navigation links in a modified navbar.{{/i}}</p>
- </li>
- <li class="span3">
++ </div>
+ <div class="span4">
<a class="thumbnail" href="examples/signin.html">
<img src="assets/img/examples/bootstrap-example-signin.png" alt="">
</a>
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
- <a class="brand" href="#">{{_i}}Project Name{{/i}}</a>
+ <a class="brand" href="#">Project Name</a>
<ul class="nav" role="navigation">
<li class="dropdown">
- <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+ <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
- <li><a tabindex="-1" href="http://google.com">Action</a></li>
- <li><a tabindex="-1" href="#anotherAction">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a tabindex="-1" href="#">Separated link</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">{{_i}}Action{{/i}}</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">{{_i}}Another action{{/i}}</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
- <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 2 {{/i}}<b class="caret"></b></a>
+ <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a tabindex="-1" href="#">Separated link</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
- <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
+ <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a tabindex="-1" href="#">Separated link</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div> <!-- /navbar-example -->
</div> {{! /example }}
- <h3>{{_i}}Within tabs{{/i}}</h3>
+ <h3>Within tabs</h3>
<div class="bs-docs-example">
<ul class="nav nav-pills">
- <li class="active"><a href="#">{{_i}}Regular link{{/i}}</a></li>
+ <li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
- <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+ <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a tabindex="-1" href="#">Separated link</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
- <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 2{{/i}} <b class="caret"></b></a>
+ <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a tabindex="-1" href="#">Separated link</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
- <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">{{_i}}Dropdown 3{{/i}} <b class="caret"></b></a>
+ <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a tabindex="-1" href="#">Separated link</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
++ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul> <!-- /tabs -->
</div>
- <h2>{{_i}}Examples{{/i}}</h2>
- <p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
- <p>{{_i}}For performance reasons, the tooltip and popover data-apis are opt in, meaning <strong>you must initialize them yourself</strong>.{{/i}}</p>
- <p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
+ <h2>Examples</h2>
+ <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
+ <p>Hover over the links below to see tooltips:</p>
<div class="bs-docs-example tooltip-demo">
- <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
- <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="A much longer tooltip belongs right here to demonstrate the max-width we apply.">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
++ <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
</div>{{! /example }}
- <h3>{{_i}}Four directions{{/i}}</h3>
+ <h3>Four directions</h3>
<div class="bs-docs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
- <li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
- <li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
- <li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
- <li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
+ <li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
+ <li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
+ <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
+ <li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
</ul>
</div>{{! /example }}
</thead>
<tbody>
<tr>
- <td>{{_i}}animation{{/i}}</td>
- <td>{{_i}}boolean{{/i}}</td>
+ <td>animation</td>
+ <td>boolean</td>
<td>true</td>
- <td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
+ <td>apply a css fade transition to the tooltip</td>
</tr>
<tr>
- <td>{{_i}}html{{/i}}</td>
- <td>{{_i}}boolean{{/i}}</td>
+ <td>html</td>
+ <td>boolean</td>
<td>false</td>
- <td>{{_i}}Insert html into the tooltip. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}</td>
+ <td>Insert html into the tooltip. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
- <td>{{_i}}placement{{/i}}</td>
- <td>{{_i}}string | function{{/i}}</td>
+ <td>placement</td>
- <td>string|function</td>
++ <td>string | function</td>
<td>'top'</td>
- <td>{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right</td>
+ <td>how to position the tooltip - top | bottom | left | right</td>
</tr>
<tr>
- <td>{{_i}}selector{{/i}}</td>
- <td>{{_i}}string{{/i}}</td>
+ <td>selector</td>
+ <td>string</td>
<td>false</td>
- <td>{{_i}}If a selector is provided, tooltip objects will be delegated to the specified targets.{{/i}}</td>
+ <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
</tr>
<tr>
- <td>{{_i}}title{{/i}}</td>
- <td>{{_i}}string | function{{/i}}</td>
+ <td>title</td>
+ <td>string | function</td>
<td>''</td>
- <td>{{_i}}default title value if `title` tag isn't present{{/i}}</td>
+ <td>default title value if `title` tag isn't present</td>
</tr>
<tr>
- <td>{{_i}}trigger{{/i}}</td>
- <td>{{_i}}string{{/i}}</td>
+ <td>trigger</td>
+ <td>string</td>
- <td>'hover'</td>
- <td>how tooltip is triggered - click | hover | focus | manual</td>
+ <td>'hover focus'</td>
- <td>{{_i}}how tooltip is triggered{{/i}} - click | hover | focus | manual. {{_i}}Note you case pass trigger mutliple, space seperated, trigger types.{{/i}}</td>
++ <td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.</td>
</tr>
<tr>
- <td>{{_i}}delay{{/i}}</td>
- <td>{{_i}}number | object{{/i}}</td>
+ <td>delay</td>
+ <td>number | object</td>
<td>0</td>
<td>
- <p>{{_i}}delay showing and hiding the tooltip (ms) - does not apply to manual trigger type{{/i}}</p>
- <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
- <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
+ <p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
+ <p>If a number is supplied, delay is applied to both hide/show</p>
+ <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
</td>
</tr>
- <td>{{_i}}container{{/i}}</td>
- <td>{{_i}}string | false{{/i}}</td>
- <td>{{_i}}false{{/i}}</td>
+ <tr>
- <p>{{_i}}Appends the tooltip to a specific element <code>container: 'body'</code>{{/i}}</p>
++ <td>container</td>
++ <td>string | false</td>
++ <td>false</td>
+ <td>
++ <p>Appends the tooltip to a specific element <code>container: 'body'</code></p>
+ </td>
+ </tr>
</tbody>
</table>
<div class="alert alert-info">
- <strong>{{_i}}Heads up!{{/i}}</strong>
- {{_i}}Options for individual tooltips can alternatively be specified through the use of data attributes.{{/i}}
+ <strong>Heads up!</strong>
+ Options for individual tooltips can alternatively be specified through the use of data attributes.
</div>
- <h3>{{_i}}Markup{{/i}}</h3>
- <pre class="prettyprint linenums"><a href="#" data-toggle="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a></pre>
+ <h3>Markup</h3>
- <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
- <pre class="prettyprint linenums"><a href="#" rel="tooltip" title="first tooltip">hover over me</a></pre>
++ <pre class="prettyprint linenums"><a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a></pre>
- <h3>{{_i}}Methods{{/i}}</h3>
- <h4>$().tooltip({{_i}}options{{/i}})</h4>
- <p>{{_i}}Attaches a tooltip handler to an element collection.{{/i}}</p>
+ <h3>Methods</h3>
+ <h4>$().tooltip(options)</h4>
+ <p>Attaches a tooltip handler to an element collection.</p>
<h4>.tooltip('show')</h4>
- <p>{{_i}}Reveals an element's tooltip.{{/i}}</p>
+ <p>Reveals an element's tooltip.</p>
<pre class="prettyprint linenums">$('#element').tooltip('show')</pre>
<h4>.tooltip('hide')</h4>
- <p>{{_i}}Hides an element's tooltip.{{/i}}</p>
+ <p>Hides an element's tooltip.</p>
<pre class="prettyprint linenums">$('#element').tooltip('hide')</pre>
<h4>.tooltip('toggle')</h4>
- <p>{{_i}}Toggles an element's tooltip.{{/i}}</p>
+ <p>Toggles an element's tooltip.</p>
<pre class="prettyprint linenums">$('#element').tooltip('toggle')</pre>
<h4>.tooltip('destroy')</h4>
- <p>{{_i}}Hides and destroys an element's tooltip.{{/i}}</p>
+ <p>Hides and destroys an element's tooltip.</p>
<pre class="prettyprint linenums">$('#element').tooltip('destroy')</pre>
</section>
<h3>Live demo</h3>
<div class="bs-docs-example" style="padding-bottom: 24px;">
- <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>
- <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Click to toggle popover{{/i}}</a>
++ <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
- <h4>{{_i}}Four directions{{/i}}</h4>
+ <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>
+ <li><a href="#" class="btn" data-toggle="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" data-toggle="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" data-toggle="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" data-toggle="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 }}
</thead>
<tbody>
<tr>
- <td>{{_i}}animation{{/i}}</td>
- <td>{{_i}}boolean{{/i}}</td>
+ <td>animation</td>
+ <td>boolean</td>
<td>true</td>
- <td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
+ <td>apply a css fade transition to the tooltip</td>
</tr>
<tr>
- <td>{{_i}}html{{/i}}</td>
- <td>{{_i}}boolean{{/i}}</td>
+ <td>html</td>
+ <td>boolean</td>
<td>false</td>
- <td>{{_i}}Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}</td>
+ <td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
- <td>{{_i}}placement{{/i}}</td>
- <td>{{_i}}string | function{{/i}}</td>
+ <td>placement</td>
- <td>string|function</td>
++ <td>string | function</td>
<td>'right'</td>
- <td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
+ <td>how to position the popover - top | bottom | left | right</td>
</tr>
<tr>
- <td>{{_i}}selector{{/i}}</td>
- <td>{{_i}}string{{/i}}</td>
+ <td>selector</td>
+ <td>string</td>
<td>false</td>
- <td>{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}</td>
+ <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
</tr>
<tr>
- <td>{{_i}}trigger{{/i}}</td>
- <td>{{_i}}string{{/i}}</td>
+ <td>trigger</td>
+ <td>string</td>
<td>'click'</td>
- <td>{{_i}}how popover is triggered{{/i}} - click | hover | focus | manual</td>
+ <td>how popover is triggered - click | hover | focus | manual</td>
</tr>
<tr>
- <td>{{_i}}title{{/i}}</td>
- <td>{{_i}}string | function{{/i}}</td>
+ <td>title</td>
+ <td>string | function</td>
<td>''</td>
- <td>{{_i}}default title value if `title` attribute isn't present{{/i}}</td>
+ <td>default title value if `title` attribute isn't present</td>
</tr>
<tr>
- <td>{{_i}}content{{/i}}</td>
- <td>{{_i}}string | function{{/i}}</td>
+ <td>content</td>
+ <td>string | function</td>
<td>''</td>
- <td>{{_i}}default content value if `data-content` attribute isn't present{{/i}}</td>
+ <td>default content value if `data-content` attribute isn't present</td>
</tr>
<tr>
- <td>{{_i}}delay{{/i}}</td>
- <td>{{_i}}number | object{{/i}}</td>
+ <td>delay</td>
+ <td>number | object</td>
<td>0</td>
<td>
- <p>{{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}</p>
- <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
- <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
+ <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
+ <p>If a number is supplied, delay is applied to both hide/show</p>
+ <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
</td>
</tr>
</tbody>
</div>{{! /example }}
<pre class="prettyprint linenums">
<div id="myCarousel" class="carousel slide">
- <!-- {{_i}}Carousel items{{/i}} -->
+ <ol class="carousel-indicators">
+ <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+ <li data-target="#myCarousel" data-slide-to="1"></li>
+ <li data-target="#myCarousel" data-slide-to="2"></li>
+ </ol>
+ <!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<hr class="bs-docs-separator">
- <h2>{{_i}}Usage{{/i}}</h2>
+ <h2>Usage</h2>
- <h3>{{_i}}Via data attributes{{/i}}</h3>
- <p>{{_i}}Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to it's current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which jump's the slide position to a particular index beginning with <code>0</code>.{{/i}}</p>
+ <h3>Via data attributes</h3>
- <p>...</p>
++ <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to it's current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which jump's the slide position to a particular index beginning with <code>0</code>.</p>
- <h3>{{_i}}Via JavaScript{{/i}}</h3>
- <p>{{_i}}Call carousel manually with:{{/i}}</p>
+ <h3>Via JavaScript</h3>
+ <p>Call carousel manually with:</p>
<pre class="prettyprint linenums">$('.carousel').carousel()</pre>
- <h3>{{_i}}Options{{/i}}</h3>
- <p>{{_i}}Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.{{/i}}</p>
+ <h3>Options</h3>
+ <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
// Alternate buttons
// --------------------------------------------------
-// Provide *some* extra contrast for those who can get it
-.btn-primary.active,
-.btn-warning.active,
-.btn-danger.active,
-.btn-success.active,
-.btn-info.active,
-.btn-inverse.active {
- color: rgba(255,255,255,.75);
+.btn {
+ color: #fff;
+ background-color: @btn-background;
+ border-color: @btn-border;
+ &:hover,
+ &:focus,
+ &:active {
+ background-color: darken(@btn-background, 5%);
+ border-color: darken(@btn-border, 10%);
+ }
}
- // Primary appears as blue
-
-// Set the backgrounds
-// -------------------------
.btn-primary {
- .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
+ background-color: @btn-background-primary;
+ border-color: @btn-border-primary;
+ &:hover,
+ &:focus,
+ &:active {
+ background-color: darken(@btn-background-primary, 5%);
+ border-color: darken(@btn-border-primary, 10%);
+ }
}
// Warning appears are orange
.btn-warning {
// Caret should match text color on hover
.navbar .nav li.dropdown > a:hover .caret {
- border-top-color: @navbar-link-color-active;
- border-bottom-color: @navbar-link-color-active;
- border-top-color: @navbarLinkColorHover;
- border-bottom-color: @navbarLinkColorHover;
++ border-top-color: @navbar-link-color-hover;
++ border-bottom-color: @navbar-link-color-hover;
}
// Remove background color from open dropdown
position: absolute;
top: 0;
left: 0;
- z-index: @zindexPopover;
+ z-index: @zindex-popover;
display: none;
- width: 236px;
+ max-width: 276px;
padding: 1px;
text-align: left; // Reset given new insertion method
- background-color: @popoverBackground;
+ background-color: @popover-background;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
font-size: 14px;
font-weight: normal;
line-height: 18px;
- background-color: @popoverTitleBackground;
- border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
- .border-radius(5px 5px 0 0);
+ background-color: @popover-title-background;
+ border-bottom: 1px solid darken(@popover-title-background, 5%);
+ border-radius: 5px 5px 0 0;
+
+ &:empty {
+ display: none;
+ }
}
.popover-content {
display: block;
width: 100%;
margin-left: 0;
- .box-sizing(border-box);
- }
- .span12,
- .row-fluid .span12 {
- width: 100%;
- .box-sizing(border-box);
- }
- .row-fluid [class*="offset"]:first-child {
- margin-left: 0;
}
-
// FORM FIELDS
// -----------
// Make span* classes full width
tbody:first-child tr:first-child td {
border-top: 0;
}
- // For first th or td in the first row in the first thead or tbody
+ // For first th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:first-child,
- tbody:first-child tr:first-child > td:first-child {
+ tbody:first-child tr:first-child > td:first-child,
+ tbody:first-child tr:first-child > th:first-child {
- .border-top-left-radius(@baseBorderRadius);
+ border-top-left-radius: @border-radius-base;
}
+ // For last th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:last-child,
- tbody:first-child tr:first-child > td:last-child {
+ tbody:first-child tr:first-child > td:last-child,
+ tbody:first-child tr:first-child > th:last-child {
- .border-top-right-radius(@baseBorderRadius);
+ border-top-right-radius: @border-radius-base;
}
- // For first th or td in the last row in the last thead or tbody
+ // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
thead:last-child tr:last-child > th:first-child,
tbody:last-child tr:last-child > td:first-child,
- tfoot:last-child tr:last-child > td:first-child {
+ tbody:last-child tr:last-child > th:first-child,
+ tfoot:last-child tr:last-child > td:first-child,
+ tfoot:last-child tr:last-child > th:first-child {
- .border-bottom-left-radius(@baseBorderRadius);
+ border-bottom-left-radius: @border-radius-base;
}
+ // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
thead:last-child tr:last-child > th:last-child,
tbody:last-child tr:last-child > td:last-child,
- tfoot:last-child tr:last-child > td:last-child {
+ tbody:last-child tr:last-child > th:last-child,
+ tfoot:last-child tr:last-child > td:last-child,
+ tfoot:last-child tr:last-child > th:last-child {
- .border-bottom-right-radius(@baseBorderRadius);
+ border-bottom-right-radius: @border-radius-base;
}
// Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
// Placed here since it has to come after the potential zebra striping
.table-hover {
tbody {
- tr:hover td,
- tr:hover th {
+ tr:hover > td,
+ tr:hover > th {
- background-color: @tableBackgroundHover;
+ background-color: @table-background-hover;
}
}
}
// Exact selectors below required to override .table-striped
.table tbody tr {
- &.success td {
+ &.success > td {
- background-color: @successBackground;
+ background-color: @state-success-background;
}
- &.error td {
+ &.error > td {
- background-color: @errorBackground;
+ background-color: @state-error-background;
}
- &.warning td {
+ &.warning > td {
- background-color: @warningBackground;
+ background-color: @state-warning-background;
}
- &.info td {
+ &.info > td {
- background-color: @infoBackground;
+ background-color: @state-info-background;
}
}
// Hover states for .table-hover
.table-hover tbody tr {
- &.success:hover td {
+ &.success:hover > td {
- background-color: darken(@successBackground, 5%);
+ background-color: darken(@state-success-background, 5%);
}
- &.error:hover td {
+ &.error:hover > td {
- background-color: darken(@errorBackground, 5%);
+ background-color: darken(@state-error-background, 5%);
}
- &.warning:hover td {
+ &.warning:hover > td {
- background-color: darken(@warningBackground, 5%);
+ background-color: darken(@state-warning-background, 5%);
}
- &.info:hover td {
+ &.info:hover > td {
- background-color: darken(@infoBackground, 5%);
+ background-color: darken(@state-info-background, 5%);
}
}
visibility: visible;
padding: 5px;
font-size: 11px;
+ line-height: 1.4;
.opacity(0);
- &.in { .opacity(80); }
+ &.in { .opacity(100); }
&.top { margin-top: -3px; }
&.right { margin-left: 3px; }
&.bottom { margin-top: 3px; }
border-left: 5px solid @grayLighter;
p {
margin-bottom: 0;
- #font > .shorthand(16px,300,@line-height-base * 1.25);
- font-size: @baseFontSize * 1.25;
++ font-size: @font-size-base * 1.25;
+ font-weight: 300;
+ line-height: 1.25;
}
small {
display: block;
projects / thirdparty / bootstrap.git / commitdiff
