destination: _gh_pages
host: 0.0.0.0
port: 9001
- baseurl: /
url: http://getbootstrap.com
encoding: UTF-8
+exclude: [assets/less/, assets/js/src/]
# Custom vars
- current_version: 3.2.0
+ current_version: 3.3.0
repo: https://github.com/twbs/bootstrap
sass_repo: https://github.com/twbs/bootstrap-sass
expo: http://expo.getbootstrap.com
cdn:
- css: https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
- css_theme: https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css
- js: https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js
+ css: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css
- css_theme: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css
+ js: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js
+ jquery: //code.jquery.com/jquery-2.1.1.min.js
+
+bug:
+ firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=
+ webkit: https://bugs.webkit.org/show_bug.cgi?id=
+ chrome: https://code.google.com/p/chromium/issues/detail?id=
+ github: https://github.com/twbs/bootstrap/issues/
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
- {% if jekyll.environment == "development" %}
- <script src="{{ site.baseurl }}dist/js/bootstrap.min.js"></script>
-
+ {% if site.github %}
+ <script src="../dist/js/bootstrap.min.js"></script>
{% else %}
- <script src="{{ site.baseurl }}dist/js/bootstrap.js"></script>
+ <script src="../dist/js/bootstrap.js"></script>
{% endif %}
- {% if jekyll.environment == "development" %}
- <script src="{{ site.baseurl }}assets/js/docs.min.js"></script>
+
+ {% if site.github %}
+ <script src="../assets/js/docs.min.js"></script>
{% else %}
- <script src="{{ site.baseurl }}assets/js/vendor/holder.js"></script>
- <script src="{{ site.baseurl }}assets/js/vendor/ZeroClipboard.min.js"></script>
- <script src="{{ site.baseurl }}assets/js/src/application.js"></script>
+ {% for file in site.data.configBridge.paths.docsJs %}
+ <script src="{{ file }}"></script>
+ {% endfor %}
{% endif %}
+
{% if page.slug == "customize" %}
- <script src="{{ site.baseurl }}assets/js/customize.min.js"></script>
+ <script>var __configBridge = {{ site.data.configBridge.config | jsonify }}</script>
+ {% if site.github %}
+ <script src="../assets/js/customize.min.js"></script>
+ {% else %}
+ {% for file in site.data.configBridge.paths.customizerJs %}
- <script src="{{ file }}"></script>
++ <script src="{{ file }}"></script>
+ {% endfor %}
+ {% endif %}
{% endif %}
+
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../assets/js/ie10-viewport-bug-workaround.js"></script>
}, 3000)
})
+ // Modal relatedTarget demo
+ $('#exampleModal').on('show.bs.modal', function (event) {
+ var button = $(event.relatedTarget) // Button that triggered the modal
+ var recipient = button.data('whatever') // Extract info from data-* attributes
+ // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
+ // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
+ var modal = $(this)
+ modal.find('.modal-title').text('New message to ' + recipient)
+ modal.find('.modal-body input').val(recipient)
+ })
+
// Activate animated progress bar
$('.bs-docs-activate-animated-progressbar').on('click', function () {
- $(this).siblings('.progress').find('.progress-bar-striped').toggleClass('active')
+ $(this).prev('.progress-striped').toggleClass('progress-animated')
})
// Config ZeroClipboard
--- /dev/null
- .bs-customizer-input {
- float: left;
- width: 33.333333%;
- padding-right: 1rem;
- padding-left: 1rem;
- }
-
+/*!
+ * Bootstrap Docs (http://getbootstrap.com)
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under the Creative Commons Attribution 3.0 Unported License. For
+ * details, see http://creativecommons.org/licenses/by/3.0/.
+ */
+
+// Import Bootstrap variables and mixins
+@import "../../../less/_variables.less";
+@import "../../../less/_mixins.less";
+
+// Import the syntax highlighting
+@import "syntax.less";
+
+// Local docs variables
+@bs-purple: #563d7c;
+@bs-purple-light: #cdbfe3;
+@bs-yellow: #ffe484;
+@bs-danger: #d9534f;
+@bs-warning: #f0ad4e;
+@bs-info: #5bc0de;
+
+
+// Scaffolding
+//
+// Update the basics of our documents to prep for docs content.
+
+body {
+ position: relative; // For scrollspy?
+}
+
+
+//
+// Buttons
+//
+
+.btn-outline {
+ color: @bs-purple;
+ background-color: transparent;
+ border-color: @bs-purple;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: #fff;
+ background-color:@bs-purple;
+ border-color: @bs-purple;
+ }
+}
+
+.btn-outline-inverse {
+ color: #fff;
+ background-color: transparent;
+ border-color: @bs-purple-light;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: @bs-purple;
+ text-shadow: none;
+ background-color: #fff;
+ border-color: #fff;
+ }
+}
+
+
+//
+// Bootstrap "B" icon
+//
+
+.bs-docs-booticon {
+ display: block;
+ width: 9rem;
+ height: 9rem;
+ font-size: 6.5rem;
+ font-weight: 500;
+ line-height: 8.8rem;
+ color: #fff;
+ text-align: center;
+ cursor: default;
+ background-color: @bs-purple;
+ border-radius: 15%;
+
+ &.inverse {
+ color: @bs-purple;
+ background-color: #fff;
+ }
+ &.outline {
+ background-color: transparent;
+ border: 1px solid @bs-purple-light;
+ }
+}
+
+
+//
+// Main navigation
+//
+
+.bs-docs-nav {
+ margin-bottom: 0;
+ background-color: #563d7c;
+ border-bottom: 0;
+}
+.bs-home-nav .bs-nav-b {
+ display: none;
+}
+.bs-docs-nav .navbar-brand,
+.bs-docs-nav .navbar-nav > li > a {
+ font-weight: 500;
+ color: #cdbfe3;
+}
+.bs-docs-nav .navbar-brand {
+ color: #fff;
+}
+.bs-docs-nav .navbar-nav > li > a:hover,
+.bs-docs-nav .navbar-nav > .active > a,
+.bs-docs-nav .navbar-nav > .active > a:hover {
+ color: #fff;
+ background-color: #563d7c;
+}
+.bs-docs-nav .navbar-toggle .icon-bar {
+ background-color: #fff;
+}
+.bs-docs-nav .navbar-header .navbar-toggle {
+ border-color: #322f38;
+}
+.bs-docs-nav .navbar-header .navbar-toggle:hover,
+.bs-docs-nav .navbar-header .navbar-toggle:focus {
+ background-color: #29262f;
+ border-color: #29262f;
+}
+
+
+//
+// Footer
+//
+
+.bs-docs-footer {
+ margin-top: 6rem;
+ font-size: 85%;
+ color: #777;
+ text-align: center;
+ border-top: 1px solid #e5e5e5;
+}
+.bs-docs-footer-links {
+ padding-left: 0;
+ margin-top: 20px;
+ color: #999;
+}
+.bs-docs-footer-links li {
+ display: inline;
+ padding: 0 2px;
+}
+.bs-docs-footer-links li:first-child {
+ padding-left: 0;
+}
+
+@media (min-width: 768px) {
+ .bs-docs-footer p {
+ margin-bottom: 0;
+ }
+ .bs-docs .bs-docs-footer {
+ text-align: left;
+ }
+}
+
+
+//
+// Social buttons
+//
+
+.bs-docs-social {
+ margin-bottom: 1.5rem;
+ text-align: center;
+}
+.bs-docs-social-buttons {
+ display: inline-block;
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
+}
+.bs-docs-social-buttons li {
+ display: inline-block;
+ padding: .25rem .5rem;
+ line-height: 1;
+}
+.bs-docs-social-buttons .twitter-follow-button {
+ width: 225px !important;
+}
+.bs-docs-social-buttons .twitter-share-button {
+ width: 98px !important;
+}
+
+// Style the GitHub buttons via CSS instead of inline attributes
+.github-btn {
+ overflow: hidden;
+ border: 0;
+}
+
+@media (min-width: 768px) {
+ .bs-docs .bs-docs-social {
+ margin-left: -.5rem;
+ text-align: left;
+ }
+}
+
+
+//
+// Homepage
+//
+
+// Masthead (headings and download button)
+.bs-docs-masthead {
+ position: relative;
+ padding: 2rem 1rem;
+ color: #cdbfe3;
+ text-align: center;
+ text-shadow: 0 1px 0 rgba(0,0,0,.1);
+ background-color: #6f5499;
+ #gradient > .vertical(@bs-purple, #6f5499);
+}
+
+.bs-docs-masthead .bs-docs-booticon {
+ margin: 0 auto 2rem;
+}
+.bs-docs-masthead h1 {
+ font-weight: 300;
+ line-height: 1;
+ color: #fff;
+}
+.bs-docs-masthead .lead {
+ margin: 0 auto 2rem;
+ font-size: 1.25rem;
+ color: #fff;
+}
+.bs-docs-masthead .version {
+ margin-top: -1rem;
+ margin-bottom: 2rem;
+ color: #9783b9;
+}
+.bs-docs-masthead .btn {
+ width: 100%;
+ padding: 1rem 2rem;
+ font-size: 1.25rem;
+}
+
+@media (min-width: 480px) {
+ .bs-docs-masthead .btn {
+ width: auto;
+ }
+}
+
+@media (min-width: 768px) {
+ .bs-docs-masthead {
+ padding: 5rem 0;
+ }
+ .bs-docs-masthead h1 {
+ font-size: 4rem;
+ }
+ .bs-docs-masthead .lead {
+ font-size: 1.5rem;
+ }
+}
+
+@media (min-width: 992px) {
+ .bs-docs-masthead .lead {
+ width: 80%;
+ font-size: 2rem;
+ }
+}
+
+
+//
+// Page headers
+//
+
+.bs-docs-header {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ margin-bottom: 2rem;
+ font-size: 1.25rem;
+ background-color: @bs-purple;
+}
+.bs-docs-header h1 {
+ margin-top: 0;
+ color: #fff;
+}
+.bs-docs-header p {
+ margin-bottom: 0;
+ font-weight: 300;
+ line-height: 1.4;
+ color: rgba(255,255,255,.65);
+}
+.bs-docs-header .container {
+ position: relative;
+}
+
+@media (min-width: 768px) {
+ .bs-docs-header {
+ font-size: 1.5rem;
+ text-align: left;
+ }
+ .bs-docs-header h1 {
+ font-size: 4rem;
+ line-height: 1;
+ }
+}
+
+@media (min-width: 992px) {
+ .bs-docs-header {
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+ }
+ .bs-docs-header h1,
+ .bs-docs-header p {
+ margin-right: 380px;
+ }
+}
+
+
+//
+// Carbon ads
+//
+
+.carbonad {
+ width: auto !important;
+ height: auto !important;
+ padding: 1.25rem !important;
+ margin: 2rem -2rem -2rem !important;
+ overflow: hidden; /* clearfix */
+ font-size: .8rem !important;
+ line-height: 1rem !important;
+ color: @bs-purple-light !important;
+ text-align: left;
+ background: transparent !important;
+ border: solid #866ab3 !important;
+ border-width: 1px 0 !important;
+}
+.carbonad-img {
+ margin: 0 !important;
+}
+.carbonad-text,
+.carbonad-tag {
+ display: block !important;
+ float: none !important;
+ width: auto !important;
+ height: auto !important;
+ margin-left: 145px !important;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+}
+.carbonad-text {
+ padding-top: 0 !important;
+}
+.carbonad-tag {
+ color: inherit !important;
+ text-align: left !important;
+}
+.carbonad-text a,
+.carbonad-tag a {
+ color: #fff !important;
+}
+.carbonad #azcarbon > img {
+ display: none; // hide what I assume are tracking images
+}
+
+// In the lighter page headers
+// .bs-docs-header .carbonad {
+// color: #777;
+// background-color: #fff !important;
+// border-color: #eee !important;
+// }
+// .bs-docs-header .carbonad-text a,
+// .bs-docs-header .carbonad-tag a {
+// color: @bs-purple !important;
+// }
+
+@media (min-width: 480px) {
+ .carbonad {
+ width: 330px !important;
+ margin: 1.5rem auto !important;
+ border-width: 1px !important;
+ border-radius: .25rem;
+ }
+ .bs-docs-masthead .carbonad {
+ margin: 3rem auto 0 !important;
+ }
+}
+
+@media (min-width: 768px) {
+ .carbonad {
+ margin-right: 0 !important;
+ margin-left: 0 !important;
+ }
+}
+
+@media (min-width: 992px) {
+ .carbonad {
+ position: absolute;
+ top: 2rem;
+ right: 4rem;
+ width: 330px !important;
+ padding: 1rem !important;
+ margin: 0 !important;
+ }
+ .bs-docs-masthead .carbonad {
+ position: static;
+ }
+}
+
+
+//
+// Homepage featurettes
+//
+
+.bs-docs-featurette {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+ font-size: 1rem;
+ line-height: 1.5;
+ color: #555;
+ text-align: center;
+ background-color: #fff;
+ border-bottom: 1px solid #e5e5e5;
+}
+.bs-docs-featurette + .bs-docs-footer {
+ margin-top: 0;
+ border-top: 0;
+}
+
+.bs-docs-featurette-title {
+ margin-bottom: .5rem;
+ font-size: 2rem;
+ font-weight: normal;
+ color: #333;
+}
+.half-rule {
+ width: 6rem;
+ margin: 2.5rem auto;
+}
+.bs-docs-featurette h3 {
+ margin-bottom: .5rem;
+ font-weight: normal;
+ color: #333;
+}
+.bs-docs-featurette-img {
+ display: block;
+ margin-bottom: 1.25rem;
+ color: #333;
+}
+.bs-docs-featurette-img:hover {
+ color: @brand-primary;
+ text-decoration: none;
+}
+.bs-docs-featurette-img img {
+ display: block;
+ margin-bottom: 1rem;
+}
+
+@media (min-width: 480px) {
+ .bs-docs-featurette .img-responsive {
+ margin-top: 2rem;
+ }
+}
+@media (min-width: 768px) {
+ .bs-docs-featurette {
+ padding-top: 6rem;
+ padding-bottom: 6rem;
+ }
+ .bs-docs-featurette-title {
+ font-size: 2.5rem;
+ }
+ .bs-docs-featurette .lead {
+ max-width: 80%;
+ margin-right: auto;
+ margin-left: auto;
+ }
+ .bs-docs-featurette .img-responsive {
+ margin-top: 0;
+ }
+}
+
+
+//
+// Featured Expo sites
+//
+
+.bs-docs-featured-sites {
+ margin-right: -1px;
+ margin-left: -1px;
+}
+.bs-docs-featured-sites .col-xs-6 {
+ padding: 1px;
+}
+.bs-docs-featured-sites .img-responsive {
+ margin-top: 0;
+}
+
+@media (min-width: 768px) {
+ .bs-docs-featured-sites .col-sm-3:first-child img {
+ border-top-left-radius: .25rem;
+ border-bottom-left-radius: .25rem;
+ }
+ .bs-docs-featured-sites .col-sm-3:last-child img {
+ border-top-right-radius: .25rem;
+ border-bottom-right-radius: .25rem;
+ }
+}
+
+
+//
+// Examples
+//
+
+.bs-examples .thumbnail {
+ margin-bottom: .75rem;
+}
+.bs-examples h4 {
+ margin-bottom: .25rem;
+}
+.bs-examples p {
+ margin-bottom: 1.25rem;
+}
+
+@media (max-width: 480px) {
+ .bs-examples {
+ margin-right: -.75rem;
+ margin-left: -.75rem;
+ }
+ .bs-examples > [class^="col-"] {
+ padding-right: .75rem;
+ padding-left: .75rem;
+ }
+}
+
+
+//
+// Custom container
+//
+
+.bs-docs-container {
+ position: relative;
+ max-width: 62rem;
+ padding: 1rem;
+ margin-right: auto;
+ margin-left: auto;
+
+ @media (min-width: 768px) {
+ padding: 2rem;
+ }
+
+ @media (min-width: 992px) {
+ padding: 2rem 4rem;
+ }
+}
+
+
+//
+// Side navigation
+//
+
+.bs-docs-sidebar {
+ padding: 0;
+ margin-bottom: 0;
+ background-color: #322f38;
+}
+
+.bs-docs-sidebar .navbar-toggle {
+ position: absolute;
+ top: 5px;
+ right: 0;
+ z-index: 5;
+}
+.bs-docs-sidebar .navbar-toggle .icon-bar {
+ background-color: #fff;
+}
+
+.bs-docs-sidebar .navbar-header {
+ float: none;
+ margin-right: -15px;
+}
+
+.bs-docs-sidebar .navbar-collapse {
+ padding: 0;
+ border: 0;
+}
+
+@media (min-width: 992px) {
+ .bs-docs {
+ padding-left: 240px;
+ }
+ .bs-docs-sidebar {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 240px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ #gradient > .vertical(#29262f, #322f38);
+ }
+ .bs-docs-sidebar .navbar-brand {
+ margin-bottom: 15px;
+ }
+}
+
+.bs-docs-sidebar .navbar-brand {
+ display: block;
+ float: none;
+ height: auto;
+ padding: 2rem 1.25rem;
+ /*padding: 20px;*/
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 1;
+ color: #fff;
+ /*border-bottom: 1px solid rgba(255,255,255,.1);*/
+}
+.bs-docs-sidebar-brand:hover,
+.bs-docs-sidebar-brand:focus {
+ color: #fff;
+ text-decoration: none;
+}
+
+.bs-docs-sidenav {
+ display: none;
+}
+
+.bs-docs-toc-link {
+ display: block;
+ padding: 4px 20px;
+ font-size: 16px;
+ color: #fff;
+}
+.bs-docs-toc-link:hover,
+.bs-docs-toc-link:focus {
+ color: @bs-yellow;
+ text-decoration: none;
+}
+.active > .bs-docs-toc-link {
+ font-weight: 500;
+ color: @bs-yellow;
+}
+.active > .bs-docs-sidenav {
+ display: block;
+}
+
+.bs-docs-toc-item.active {
+ margin-top: 15px;
+ margin-bottom: 15px;
+}
+.bs-docs-toc-item:first-child {
+ margin-top: 0;
+}
+.bs-docs-toc-item:last-child {
+ margin-bottom: 30px;
+}
+
+// All levels of nav
+.bs-docs-sidebar .nav > li > a {
+ display: block;
+ padding: 4px 20px;
+ font-size: 14px;
+ color: #99979c;
+}
+.bs-docs-sidebar .nav > li > a:hover,
+.bs-docs-sidebar .nav > li > a:focus {
+ color: @bs-yellow;
+ text-decoration: none;
+ background-color: transparent;
+}
+.bs-docs-sidebar .nav > .active > a,
+.bs-docs-sidebar .nav > .active:hover > a,
+.bs-docs-sidebar .nav > .active:focus > a {
+ font-weight: 500;
+ color: @bs-yellow;
+ background-color: transparent;
+}
+
+// Nav: second level (shown on .active)
+.bs-docs-sidebar .nav .nav {
+ display: none; // Hide by default, but at >768px, show it
+ padding-bottom: 10px;
+}
+.bs-docs-sidebar .nav .nav > li > a {
+ padding-top: 1px;
+ padding-bottom: 1px;
+ padding-left: 30px;
+ font-size: 12px;
+ font-weight: normal;
+}
+.bs-docs-sidebar .nav .nav > .active > a,
+.bs-docs-sidebar .nav .nav > .active:hover > a,
+.bs-docs-sidebar .nav .nav > .active:focus > a {
+ font-weight: 500;
+}
+
+.bs-docs-sidebar .nav > .active > .nav {
+ display: block;
+}
+.bs-docs-sidebar .nav .nav > li > a {
+ padding-top: 2px;
+ padding-bottom: 2px;
+ padding-left: 30px;
+ font-size: 13px;
+}
+
+
+//
+// Docs sections
+//
+
+.bs-docs-content {
+ > h1 {
+ padding-top: 2rem;
+ margin-top: 3rem;
+
+ &:first-child {
+ margin-top: 0;
+ }
+
+ + p {
+ font-size: 1.25rem;
+ font-weight: 300;
+ }
+ }
+
+ > h2 {
+ margin-top: 2.5rem;
+ }
+
+ > h3 {
+ margin-top: 1.5rem;
+ }
+}
+
+
+//
+// Callouts
+//
+
+.bs-callout {
+ padding: 1.25rem;
+ margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
+ border: 1px solid #eee;
+ border-left-width: .25rem;
+ border-radius: .25rem;
+}
+.bs-callout h4 {
+ margin-top: 0;
+ margin-bottom: .25rem;
+}
+.bs-callout p:last-child {
+ margin-bottom: 0;
+}
+.bs-callout code {
+ border-radius: .25rem;
+}
+
+.bs-callout + .bs-callout {
+ margin-top: -.25rem;
+}
+
+// Variations
+.bs-callout-variant(@color) {
+ border-left-color: @color;
+
+ h4 { color: @color; }
+}
+.bs-callout-danger { .bs-callout-variant(@bs-danger); }
+.bs-callout-warning { .bs-callout-variant(@bs-warning); }
+.bs-callout-info { .bs-callout-variant(@bs-info); }
+
+
+//
+// Color swatches
+//
+
+.color-swatches {
+ margin: 0 -5px;
+ overflow: hidden; // clearfix
+}
+
+.color-swatch {
+ float: left;
+ width: 4rem;
+ height: 4rem;
+ margin-right: .25rem;
+ margin-left: .25rem;
+ border-radius: .25rem;
+
+ @media (min-width: 768px) {
+ width: 6rem;
+ height: 6rem;
+ }
+}
+
+// Docs colors
+.color-swatches {
+ .bs-purple {
+ background-color: @bs-purple;
+ }
+ .bs-purple-light {
+ background-color: @bs-purple-light;
+ }
+ .bs-purple-lighter {
+ background-color: #e5e1ea;
+ }
+ .bs-gray {
+ background-color: #f9f9f9;
+ }
+}
+
+
+//
+// Team members
+//
+
+.bs-team {
+ .team-member {
+ line-height: 2rem;
+ color: #555;
+ }
+ .team-member:hover {
+ color: #333;
+ text-decoration: none;
+ }
+ .github-btn {
+ float: right;
+ width: 180px;
+ height: 1.25rem;
+ margin-top: .25rem;
+ }
+ img {
+ float: left;
+ width: 2rem;
+ margin-right: .5rem;
+ border-radius: .25rem;
+ }
+}
+
+
++// Wall of Browser Bugs
++//
++// Better display for the responsive table on the Wall of Browser Bugs.
++
++.bs-docs-browser-bugs {
++ td p {
++ margin-bottom: 0;
++ }
++ th:first-child {
++ width: 18%;
++ }
++}
++
+//
+// Grid examples
+//
+
+.bs-example > .row {
+ margin-bottom: 1rem;
+}
+.bs-example > .row > [class^="col-"] {
+ padding-top: .75rem;
+ padding-bottom: .75rem;
+ background-color: rgba(86,61,124,.15);
+ border: 1px solid rgba(86,61,124,.2);
+}
+
+
+//
+// Docs examples
+//
+
+.bs-example {
+ position: relative;
+ padding: 1.5rem;
+ margin-top: 1rem;
+ margin-bottom: -1rem;
+ border: solid #f7f7f9;
+ border-width: .2rem 0 0;
+ .clearfix();
+
+ @media (min-width: 480px) {
+ border-width: .2rem;
+ }
+
+ // Undo width of container
+ .container {
+ width: auto;
+ }
+
+ // Card examples should be horizontal
+ > .card {
+ float: left;
+ max-width: 15rem;
+ margin: .25rem;
+ }
+
+ > .nav + .nav {
+ margin-top: 1rem;
+ }
+}
+
+
+// Tweak content of examples for optimum awesome
+.bs-example > *:last-child,
+.bs-example > .table-responsive:last-child > .table {
+ margin-bottom: 0 !important;
+}
+.bs-example > .close {
+ float: none;
+}
+
+// Typography
+.bs-example-type .table .type-info {
+ color: #999;
+ vertical-align: middle;
+}
+.bs-example-type .table td {
+ padding: 1rem 0;
+ border-color: #eee;
+}
+.bs-example-type .table tr:first-child td {
+ border-top: 0;
+}
+.bs-example-type h1,
+.bs-example-type h2,
+.bs-example-type h3,
+.bs-example-type h4,
+.bs-example-type h5,
+.bs-example-type h6 {
+ margin: 0;
+}
+
+// Contextual background colors
+.bs-example-bg-classes p {
+ padding: 1rem;
+}
+
+// Images
+.bs-example > .img-circle,
+.bs-example > .img-rounded,
+.bs-example > .img-thumbnail {
+ margin: .25rem;
+}
+
+// Tables
+// .bs-example > .table-responsive > .table {
+// background-color: #fff;
+// }
+
+// Buttons
+.bs-example > .btn-group {
+ margin-top: .25rem;
+ margin-bottom: .25rem;
+}
+.bs-example > .btn-toolbar + .btn-toolbar {
+ margin-top: .5rem;
+}
+
+// Forms
+.bs-example-control-sizing select,
+.bs-example-control-sizing input[type="text"] + input[type="text"] {
+ margin-top: .5rem;
+}
+.bs-example-form .input-group {
+ margin-bottom: .5rem;
+}
+.bs-example > textarea.form-control {
+ resize: vertical;
+}
+
+// List groups
+.bs-example > .list-group {
+ max-width: 400px;
+}
+
+// Navbars
+.bs-example .navbar:last-child {
+ margin-bottom: 0;
+}
+.bs-navbar-top-example,
+.bs-navbar-bottom-example {
+ z-index: 1;
+ padding: 0;
+ overflow: hidden; // cut the drop shadows off
+}
+.bs-navbar-top-example .navbar-header,
+.bs-navbar-bottom-example .navbar-header {
+ margin-left: 0;
+}
+.bs-navbar-top-example .navbar-fixed-top,
+.bs-navbar-bottom-example .navbar-fixed-bottom {
+ position: relative;
+ margin-right: 0;
+ margin-left: 0;
+}
+.bs-navbar-top-example {
+ padding-bottom: 45px;
+}
+.bs-navbar-top-example .navbar-fixed-top {
+ top: -1px;
+}
+.bs-navbar-bottom-example {
+ padding-top: 45px;
+}
+.bs-navbar-bottom-example .navbar-fixed-bottom {
+ bottom: -1px;
+}
+.bs-navbar-bottom-example .navbar {
+ margin-bottom: 0;
+}
+@media (min-width: 768px) {
+ .bs-navbar-top-example .navbar-fixed-top,
+ .bs-navbar-bottom-example .navbar-fixed-bottom {
+ position: absolute;
+ }
+}
+
+// Pagination
+.bs-example .pagination {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+}
+
+// Pager
+.bs-example > .pager {
+ margin-top: 0;
+}
+
+// Example modals
+.bs-example-modal {
+ background-color: #f5f5f5;
+}
+.bs-example-modal .modal {
+ position: relative;
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ z-index: 1;
+ display: block;
+}
+.bs-example-modal .modal-dialog {
+ left: auto;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+// Example dropdowns
+.bs-example > .dropdown > .dropdown-toggle {
+ float: left;
+}
+.bs-example > .dropdown > .dropdown-menu {
+ position: static;
+ display: block;
+ margin-bottom: .25rem;
+ clear: left;
+}
+
+// Example tabbable tabs
+.bs-example-tabs .nav-tabs {
+ margin-bottom: 1rem;
+}
+
+// Tooltips
+.bs-example-tooltips {
+ text-align: center;
+}
+.bs-example-tooltips > .btn {
+ margin-top: .25rem;
+ margin-bottom: .25rem;
+}
+
+// Popovers
+.bs-example-popover {
+ padding-bottom: 1.5rem;
+ background-color: #f9f9f9;
+}
+.bs-example-popover .popover {
+ position: relative;
+ display: block;
+ float: left;
+ width: 260px;
+ margin: 1.25rem;
+}
+
+// Tooltips
+.bs-example-tooltip .tooltip {
+ position: relative;
+ display: inline-block;
+ margin: 10px 20px;
+ opacity: 1;
+}
+
+// Scrollspy demo on fixed height div
+.scrollspy-example {
+ position: relative;
+ height: 200px;
+ margin-top: .5rem;
+ overflow: auto;
+}
+
+
+//
+// Code snippets
+//
+
+.highlight {
+ padding: 1.5rem;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ background-color: #f7f7f9;
+}
+.highlight pre {
+ padding: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+ background-color: transparent;
+ border: 0;
+}
+.highlight pre code {
+ font-size: inherit;
+ color: @gray-dark; // Effectively the base text color
+}
+
+
+//
+// Responsive tests
+//
+
+// Responsive (scrollable) doc tables
+.table-responsive .highlight pre {
+ white-space: normal;
+}
+
+// Utility classes table
+.bs-table th small,
+.responsive-utilities th small {
+ display: block;
+ font-weight: normal;
+ color: #999;
+}
+.responsive-utilities tbody th {
+ font-weight: normal;
+}
+.responsive-utilities td {
+ text-align: center;
+}
+.responsive-utilities td.is-visible {
+ color: #468847;
+ background-color: #dff0d8 !important;
+}
+.responsive-utilities td.is-hidden {
+ color: #ccc;
+ background-color: #f9f9f9 !important;
+}
+
+// Responsive tests
+.responsive-utilities-test {
+ margin-top: .25rem;
+}
+.responsive-utilities-test .col-xs-6 {
+ margin-bottom: .5rem;
+}
+.responsive-utilities-test span {
+ display: block;
+ padding: 1rem .5rem;
+ font-size: 1rem;
+ font-weight: bold;
+ line-height: 1.1;
+ text-align: center;
+ border-radius: .25rem;
+}
+.visible-on,
+.hidden-on {
+ .col-xs-6 {
+ .hidden-xs,
+ .hidden-sm,
+ .hidden-md,
+ .hidden-lg {
+ color: #999;
+ border: 1px solid #ddd;
+ }
+ }
+}
+.visible-on,
+.hidden-on {
+ .col-xs-6 {
+ .visible-xs-block,
+ .visible-sm-block,
+ .visible-md-block,
+ .visible-lg-block {
+ color: #468847;
+ background-color: #dff0d8;
+ border: 1px solid #d6e9c6;
+ }
+ }
+}
+
+
+//
+// Customizer
+//
+
+.bs-customizer .toggle {
+ float: right;
+ margin-top: 1.5rem;
+}
+
+// Headings and form controls
+.bs-customizer label {
+ margin-top: .5rem;
+ font-weight: 500;
+ color: #555;
+}
+.bs-customizer h2 {
+ padding-top: 2rem;
+ margin-top: 0;
+ margin-bottom: .25rem;
+}
+.bs-customizer h3 {
+ margin-bottom: 0;
+}
+.bs-customizer h4 {
+ margin-top: 1rem;
+ margin-bottom: 0;
+}
+.bs-customizer .bs-callout h4 {
+ margin-top: 0; // lame, but due to specificity we have to duplicate
+ margin-bottom: .25rem;
+}
+.bs-customizer input[type="text"] {
+ font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+ background-color: #fafafa;
+}
+.bs-customizer .help-block {
+ margin-bottom: .25rem;
+ font-size: 75%;
+}
+
+// For the variables, use regular weight
+#less-section label {
+ font-weight: normal;
+}
+
+// Downloads
+.bs-customize-download .btn-outline {
+ padding: 20px;
+}
+
+// Error handling
+.bs-customizer-alert {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 1030;
+ padding: 1rem 0;
+ color: #fff;
+ background-color: #d9534f;
+ border-bottom: 1px solid #b94441;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
+}
+.bs-customizer-alert .close {
+ margin-top: -.25rem;
+ font-size: 1.5rem;
+}
+.bs-customizer-alert p {
+ margin-bottom: 0;
+}
+.bs-customizer-alert .glyphicon {
+ margin-right: .25rem;
+}
+.bs-customizer-alert pre {
+ margin: .5rem 0 0;
+ color: #fff;
+ background-color: #a83c3a;
+ border-color: #973634;
+ -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
+ box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
+}
+
+// Drag and drop
+.bs-dropzone {
+ position: relative;
+ padding: 20px;
+ margin-bottom: 20px;
+ color: #777;
+ text-align: center;
+ border: 2px dashed #eee;
+ border-radius: 4px;
+}
+.bs-dropzone h2 {
+ margin-top: 0;
+ margin-bottom: 5px;
+}
+.bs-dropzone .lead {
+ margin-bottom: 10px;
+ font-weight: normal;
+ color: #333;
+}
+.bs-dropzone hr {
+ width: 100px;
+}
+#import-manual-trigger {
+ cursor: pointer;
+}
+.bs-dropzone p:last-child {
+ margin-bottom: 0;
+}
+
+
+//
+// Brand guidelines
+//
+
+// Logo series wrapper
+.bs-brand-logos {
+ display: table;
+ width: 100%;
+ margin-bottom: 1rem;
+ overflow: hidden;
+ color: #563d7c;
+ background-color: #f9f9f9;
+ border-radius: .25rem;
+}
+
+// Individual items
+.bs-brand-item {
+ padding: 4rem 0;
+ text-align: center;
+}
+.bs-brand-item + .bs-brand-item {
+ border-top: 1px solid #fff;
+}
+.bs-brand-logos .inverse {
+ color: #fff;
+ background-color: #563d7c;
+}
+.bs-brand-item .svg {
+ width: 9rem;
+ height: 9rem;
+}
+
+// Heading content within
+.bs-brand-item h1,
+.bs-brand-item h3 {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.bs-brand-item .bs-docs-booticon {
+ margin-right: auto;
+ margin-left: auto;
+}
+
+// Make the icons stand out on what is/isn't okay
+// .bs-brand-item .glyphicon {
+// width: 30px;
+// height: 30px;
+// margin: 10px auto -10px;
+// line-height: 30px;
+// color: #fff;
+// border-radius: 50%;
+// }
+// .bs-brand-item .glyphicon-ok {
+// background-color: #5cb85c;
+// }
+// .bs-brand-item .glyphicon-remove {
+// background-color: #d9534f;
+// }
+
+@media (min-width: 768px) {
+ .bs-brand-item {
+ display: table-cell;
+ width: 1%;
+ }
+ .bs-brand-item + .bs-brand-item {
+ border-top: 0;
+ border-left: 1px solid #fff;
+ }
+ .bs-brand-item h1 {
+ font-size: 4rem;
+ }
+}
+
+
+//
+// ZeroClipboard styles
+//
+
+.zero-clipboard {
+ position: relative;
+ display: none;
+ float: right;
+}
+.btn-clipboard {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 10;
+ display: block;
+ padding: .25rem .5rem;
+ font-size: 75%;
+ color: #818a91;
+ cursor: pointer;
+ background-color: #eceeef;
+ border-radius: 0 .2rem 0 .2rem;
+}
+.btn-clipboard-hover {
+ color: #fff;
+ background-color: #027de7;
+}
+
+@media (min-width: 768px) {
+ .zero-clipboard {
+ display: block;
+ }
+}
+
+
+//
+// Miscellaneous
+//
+
+// Pseudo :focus state for showing how it looks in the docs
+#focusedInput {
+ border-color: @input-border-focus;
+ outline: 0;
+ outline: thin dotted \9; // IE9
+ box-shadow: 0 0 .5rem @input-box-shadow-focus;
+}
--- /dev/null
- <table class="table table-bordered table-hover">
+---
+layout: default
+title: Wall of browser bugs
+---
+
+Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.
+
+We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs](../getting-started/#support).
+
+<div class="table-responsive">
- <td>Internet Explorer 11</td>
- <td>Hovered element still remains in <code>:hover</code> state after scrolling away</td>
- <td><a href="https://connect.microsoft.com/IE/feedback/details/926665/ie-11-hovering-over-an-element-and-then-scrolling-without-moving-the-mouse-pointer-leaves-the-element-in-hover-state">IE bug #926665</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/14211">#14211</a></td>
- </tr>
- <tr>
- <td>Internet Explorer 11</td>
- <td>When hovering over a <code><select></code> menu item, the cursor for the element underneath the menu is displayed</td>
- <td><a href="https://connect.microsoft.com/IE/feedbackdetail/view/963961">IE bug #963961</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/14528">#14528</a></td>
- </tr>
- <tr>
- <td>Firefox</td>
- <td><code>.table-bordered</code> with an empty <code><tbody></code> is missing borders</td>
- <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023761">Mozilla bug #1023761</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/13453">#13453</a></td>
- </tr>
- <tr>
- <td>Firefox</td>
- <td><code>max-width: 100%;</code> doesn't work inside tables</td>
- <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=975632">Mozilla bug #975632</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/10690">#10690</a></td>
- </tr>
- <tr>
- <td>Firefox</td>
- <td>Java applets that are descendants of elements with forced hardware acceleration using <code>translate3d(0,0,0)</code> are invisible on Windows</td>
- <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1048279">Mozilla bug #1048279</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/14124">#14124</a></td>
- </tr>
- <tr>
- <td>Firefox</td>
- <td>Button elements with <code>width: 100%</code> become cropped in long tables.</td>
- <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1060131">Mozilla bug #1060131</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/14320">#14320</a></td>
- </tr>
- <tr>
- <td>Firefox</td>
- <td>If the disabled state of a form control is changed via JavaScript, the normal state doesn't return after refreshing the page.</td>
- <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/793">#793</a></td>
- </tr>
- <tr>
- <td>Chrome</td>
- <td>Clicking above <code><input type="number"></code> increment button flashes the decrement button</td>
- <td><a href="https://code.google.com/p/chromium/issues/detail?id=419108"></a></td>
- <td>Offshoot of <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a> & <a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a></td>
- </tr>
- <tr>
- <td>Chrome</td>
- <td><code>display: table;</code> within <code>display: block;</code> forces sibling content to new line</td>
- <td><a href="https://code.google.com/p/chromium/issues/detail?id=309483">Chromium issue #309483</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/9950">#9950</a></td>
- </tr>
- <tr>
- <td>Chrome</td>
- <td>Incorrect viewport size used for media queries when printing</td>
- <td><a href="https://code.google.com/p/chromium/issues/detail?id=273306">Chromium issue #273306</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/12078">#12078</a></td>
- </tr>
- <tr>
- <td>Chrome & Safari</td>
- <td>OS X scrollbar clipped in <code>select[multiple]</code> with padding</td>
- <td><a href="https://code.google.com/p/chromium/issues/detail?id=342208">Chromium issue #342208</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=128489">WebKit bug #128489</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/12536">#12536</a></td>
- </tr>
- <tr>
- <td>Chrome</td>
- <td><code>display: table-cell; width: 100%;</code> doesn't work correctly on date <code><input></code></td>
- <td><a href="https://code.google.com/p/chromium/issues/detail?id=346051">Chromium issue #346051</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/12548">#12548</a></td>
- </tr>
- <tr>
- <td>Chrome</td>
- <td><code><input type="password"></code> sporadically causes bad widths on floated elements</td>
- <td><a href="https://code.google.com/p/chromium/issues/detail?id=377346">Chrome issue #377346</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/13892">#13892</a></td>
- </tr>
- <tr>
- <td>Safari</td>
- <td>Weird button behavior with some number <code><input></code>s</td>
- <td><a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a></td>
- <td><a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>, <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a></td>
- </tr>
- <tr>
- <td>Safari</td>
- <td>Justified nav rendering bug</td>
- <td>(No public bug tracker)</td>
- <td><a href="https://github.com/twbs/bootstrap/issues/9774">#9774</a></td>
++ <table class="bs-docs-browser-bugs table table-bordered table-hover">
+ <thead>
+ <tr>
+ <th>Browser(s)</th>
+ <th>Summary of bug</th>
+ <th>Upstream bug(s)</th>
+ <th>Bootstrap issue(s)</th>
+ </tr>
+ </thead>
+ <tbody>
++ {% for bug in site.data.browser-bugs %}
+ <tr>
++ <td>{{ bug.browser }}</td>
++ <td>{{ bug.summary | markdownify | bugify }}</td>
++ <td>{{Â bug.upstream_bug | bugify }}</td>
++ <td>{{ bug.origin | bugify }}</td>
+ </tr>
++ {% endfor %}
+ </tbody>
+ </table>
+</div>
--- /dev/null
- <a class="btn btn-secondary" role="button">Left</a>
- <a class="btn btn-secondary" role="button">Middle</a>
- <a class="btn btn-secondary" role="button">Right</a>
+---
+layout: page
+title: Button group
+---
+
+Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](../javascript/#buttons).
+
+<div class="bs-callout bs-callout-warning">
+ <h4>Tooltips & popovers in button groups require special setting</h4>
+ <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
+</div>
+
+### Basic example
+
+Wrap a series of buttons with `.btn` in `.btn-group`.
+
+{% example html %}
+<div class="btn-group">
+ <button type="button" class="btn btn-secondary">Left</button>
+ <button type="button" class="btn btn-secondary">Middle</button>
+ <button type="button" class="btn btn-secondary">Right</button>
+</div>
+{% endexample %}
+
+### Button toolbar
+
+Combine sets of button groups into button toolbars for more complex components.
+
+{% example html %}
+<div class="btn-toolbar" role="toolbar">
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary">1</button>
+ <button type="button" class="btn btn-secondary">2</button>
+ <button type="button" class="btn btn-secondary">3</button>
+ <button type="button" class="btn btn-secondary">4</button>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary">5</button>
+ <button type="button" class="btn btn-secondary">6</button>
+ <button type="button" class="btn btn-secondary">7</button>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary">8</button>
+ </div>
+</div>
+{% endexample %}
+
+### Sizing
+
+Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to the `.btn-group`.
+
+<div class="bs-example">
+ <div class="btn-toolbar" role="toolbar">
+ <div class="btn-group btn-group-lg">
+ <button type="button" class="btn btn-secondary">Left</button>
+ <button type="button" class="btn btn-secondary">Middle</button>
+ <button type="button" class="btn btn-secondary">Right</button>
+ </div>
+ </div>
+ <div class="btn-toolbar" role="toolbar">
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary">Left</button>
+ <button type="button" class="btn btn-secondary">Middle</button>
+ <button type="button" class="btn btn-secondary">Right</button>
+ </div>
+ </div>
+ <div class="btn-toolbar" role="toolbar">
+ <div class="btn-group btn-group-sm">
+ <button type="button" class="btn btn-secondary">Left</button>
+ <button type="button" class="btn btn-secondary">Middle</button>
+ <button type="button" class="btn btn-secondary">Right</button>
+ </div>
+ </div>
+ <div class="btn-toolbar" role="toolbar">
+ <div class="btn-group btn-group-xs">
+ <button type="button" class="btn btn-secondary">Left</button>
+ <button type="button" class="btn btn-secondary">Middle</button>
+ <button type="button" class="btn btn-secondary">Right</button>
+ </div>
+ </div>
+</div>
+
+{% highlight html %}
+<div class="btn-group btn-group-lg">...</div>
+<div class="btn-group">...</div>
+<div class="btn-group btn-group-sm">...</div>
+<div class="btn-group btn-group-xs">...</div>
+{% endhighlight %}
+
+### Nesting
+
+Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
+
+{% example html %}
+<div class="btn-group">
+ <button type="button" class="btn btn-secondary">1</button>
+ <button type="button" class="btn btn-secondary">2</button>
+
+ <div class="btn-group">
+ <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+ Dropdown
+ </button>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+</div>
+{% endexample %}
+
+### Vertical variation
+
+Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
+
+<div class="bs-example">
+ <div class="btn-group-vertical">
+ <button type="button" class="btn btn-secondary">Button</button>
+ <button type="button" class="btn btn-secondary">Button</button>
+ <div class="btn-group">
+ <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+ Dropdown
+ </button>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ <button type="button" class="btn btn-secondary">Button</button>
+ <button type="button" class="btn btn-secondary">Button</button>
+ <div class="btn-group">
+ <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+ Dropdown
+ </button>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+ Dropdown
+ </button>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ <div class="btn-group">
+ <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+ Dropdown
+ </button>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
+ <li><a href="#">Dropdown link</a></li>
+ <li><a href="#">Dropdown link</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+{% highlight html %}
+<div class="btn-group-vertical">
+ ...
+</div>
+{% endhighlight %}
+
+### Justified button groups
+
+Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.
+
+<div class="bs-callout bs-callout-warning">
+ <h4>Handling borders</h4>
+ <p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
+</div>
+
+#### With `<a>` elements
+
+Just wrap a series of `.btn`s in `.btn-group.btn-group-justified`.
+
+<div class="bs-example">
+ <div class="btn-group btn-group-justified">
- <a class="btn btn-secondary" role="button">Left</a>
- <a class="btn btn-secondary" role="button">Middle</a>
++ <a class="btn btn-secondary" href="#" role="button">Left</a>
++ <a class="btn btn-secondary" href="#" role="button">Middle</a>
++ <a class="btn btn-secondary" href="#" role="button">Right</a>
+ </div>
+ <br>
+ <div class="btn-group btn-group-justified">
- <a class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
++ <a class="btn btn-secondary" href="#" role="button">Left</a>
++ <a class="btn btn-secondary" href="#" role="button">Middle</a>
+ <div class="btn-group">
++ <a class="btn btn-secondary dropdown-toggle" href="#" data-toggle="dropdown">
+ Dropdown
+ </a>
+ <ul class="dropdown-menu" role="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>
+ </div>
+</div>
+
+{% highlight html %}
+<div class="btn-group btn-group-justified">
+ ...
+</div>
+{% endhighlight %}
+
+#### With `<button>` elements
+
+To use justified button groups with `<button>` elements, **you must wrap each button in a button group**. Most browsers don't properly apply our CSS for justification to `<button>` elements, but since we support button dropdowns, we can workaround that.
+
+<div class="bs-example">
+ <div class="btn-group btn-group-justified">
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary">Left</button>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary">Middle</button>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary">Right</button>
+ </div>
+ </div>
+</div>
+
+{% highlight html %}
+<div class="btn-group btn-group-justified">
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary">Left</button>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary">Middle</button>
+ </div>
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary">Right</button>
+ </div>
+</div>
+{% endhighlight %}
--- /dev/null
- <p class="lead"><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
+---
+layout: page
+title: Jumbotron
+---
+
+A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
+
+{% example html %}
+<div class="jumbotron">
+ <h1 class="jumbotron-heading">Hello, world!</h1>
+ <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
- <p class="lead"><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
++ <p class="lead"><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
+</div>
+{% endexample %}
+
+To make the jumbotron full width, and without rounded corners, place it outside all `.container`s and instead add a `.container` within.
+
+{% highlight html %}
+<div class="jumbotron">
+ <div class="container">
+ ...
+ </div>
+</div>
+{% endhighlight %}
+
+Jumbotrons also come with an adaptive `hr`—just add `.jumbotron-hr` to the element and the `border-top-color` will be tinted based on the jumbotron background.
+
+{% example html %}
+<div class="jumbotron">
+ <h1 class="jumbotron-heading">Jumbotron <code>hr</code></h1>
+ <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+ <hr class="jumbotron-hr">
++ <p class="lead"><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
+</div>
+{% endexample %}
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
- </div>
+ </footer>
- <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
+ <!-- Bootstrap core JavaScript
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
--- /dev/null
- ### Printer viewports
+---
+layout: page
+title: Browser and device support
+---
+
+Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.
+
+### Supported browsers
+
+Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 9-11**. More specific support information is provided below.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <td></td>
+ <th>Chrome</th>
+ <th>Firefox</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>Android</th>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
+ <td class="text-danger">Not supported</td>
+ <td class="text-muted">N/A</td>
+ </tr>
+ <tr>
+ <th>iOS</th>
+ <td class="text-success">Supported</td>
+ <td class="text-muted">N/A</td>
+ <td class="text-danger">Not supported</td>
+ <td class="text-success">Supported</td>
+ </tr>
+ <tr>
+ <th>Mac OS X</th>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ </tr>
+ <tr>
+ <th>Windows</th>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-success">Supported</td>
+ <td class="text-danger">Not supported</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.
+
+For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs](../browser-bugs/).
+
+### Internet Explorer 9
+
+Internet Explorer 9 is also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th scope="col">Feature</th>
+ <th scope="col">Status</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row"><code>border-radius</code></th>
+ <td class="text-success">Supported</td>
+ </tr>
+ <tr>
+ <th scope="row"><code>box-shadow</code></th>
+ <td class="text-success">Supported</td>
+ </tr>
+ <tr>
+ <th scope="row"><code>transform</code></th>
+ <td class="text-success">Supported, with <code>-ms</code> prefix</td>
+ </tr>
+ <tr>
+ <th scope="row"><code>transition</code></th>
+ <td class="text-danger">Not supported</td>
+ </tr>
+ <tr>
+ <th scope="row"><code>placeholder</code></th>
+ <td class="text-danger">Not supported</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+Visit [Can I use...](http://caniuse.com/) for details on browser support of CSS3 and HTML5 features.
+
+### Supporting Internet Explorer 8
+
+As of v4, Bootstrap no longer supports IE8. **If you require IE8 support, we recommend you use Bootstrap 3.** It's still supported by our team for bugfixes and documentation changes, but no new features will be added to it.
+
+Alternatively, you can add the some third party JavaScript to backfill support for the browser. You'll need the following:
+
+* [The HTML5 shiv](http://en.wikipedia.org/wiki/HTML5_Shiv)
+* [Respond.js](https://github.com/scottjehl/Respond)
+* [Rem unit polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill)
+
+### IE Compatibility modes
+
+Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate `<meta>` tag in your pages:
+
+{% highlight html %}
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+{% endhighlight %}
+
+Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".
+
+This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.
+
+See [this StackOverflow question](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge) for more information.
+
+### Internet Explorer 10 in Windows 8 and Windows Phone 8
+
+Internet Explorer 10 doesn't differentiate **device width** from **viewport width**, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:
+
+{% highlight scss %}
+@-ms-viewport { width: device-width; }
+{% endhighlight %}
+
+However, this doesn't work for devices running Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx), as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to **include the following CSS and JavaScript to work around the bug**.
+
+{% highlight scss %}
+@-webkit-viewport { width: device-width; }
+@-moz-viewport { width: device-width; }
+@-ms-viewport { width: device-width; }
+@-o-viewport { width: device-width; }
+@viewport { width: device-width; }
+{% endhighlight %}
+
+{% highlight js %}
+if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
+ var msViewportStyle = document.createElement('style')
+ msViewportStyle.appendChild(
+ document.createTextNode(
+ '@-ms-viewport{width:auto!important}'
+ )
+ )
+ document.querySelector('head').appendChild(msViewportStyle)
+}
+{% endhighlight %}
+
+For more information and usage guidelines, read [Windows Phone 8 and Device-Width](http://timkadlec.com/2013/01/windows-phone-8-and-device-width/).
+
+As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.
+
+### Safari percent rounding
+
+The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our `.col-*-1` grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:
+
+- Add `.pull-right` to your last grid column to get the hard-right alignment
+- Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)
+
+We'll keep an eye on this though and update our code if we have an easy solution.
+
+### Modals, navbars, and virtual keyboards
+
+#### Overflow and scrolling
+
+Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll.
+
+#### Virtual keyboards
+
+Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to `position: absolute;` or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.
+
+#### Navbar Dropdowns
+
+The `.dropdown-backdrop` element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).
+
+### Browser zooming
+
+Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.
+
- Even in some modern browsers, printing can be quirky. In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:
++### Printing
+
- - Embrace the extra-small grid and make sure your page looks acceptable under it.
- - Customize the values of the `@screen-*` Less variables so that your printer paper is considered larger than extra-small.
- - Add custom media queries to change the grid size breakpoints for print media only.
++Even in some modern browsers, printing can be quirky.
+
++In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. [See #12078 for some details.](https://github.com/twbs/bootstrap/issues/12078) Suggested workarounds:
++
++Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:</p>
++
++{% highlight css %}
++@media print {
++ .container {
++ width: auto;
++ }
++}
++{% endhighlight %}
+
+### Android stock browser
+
+Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.
+
+#### Select menu
+
+On `<select>` elements, the Android stock browser will not display the side controls if there is a `border-radius` and/or `border` applied. (See [this StackOverflow question](http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with) for details.) Use the snippet of code below to remove the offending CSS and render the `<select>` as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.
+
+{% highlight html %}
+<script>
+$(function () {
+ var nua = navigator.userAgent
+ var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
+ if (isAndroid) {
+ $('select.form-control').removeClass('form-control').css('width', '100%')
+ }
+})
+</script>
+{% endhighlight %}
+
+Want to see an example? [Check out this JS Bin demo.](http://jsbin.com/OyaqoDO/2)
+
+### Validators
+
+In order to provide the best possible experience to old and buggy browsers, Bootstrap uses [CSS browser hacks](http://browserhacks.com) in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.
+
+These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.
+
+Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of [X-UA-Compatible `<meta>` tags](#ie-compatibility-modes) to avoid Internet Explorer issues and our inclusion of a workaround for [a certain Firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
--- /dev/null
- <span class="caret"></span>
+---
+layout: page
+title: Dropdowns
+---
+
+Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.
+
+### Within navbars
+
+<div class="bs-example">
+ <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Project Name</a>
+ </div>
+ <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
+ <ul class="nav navbar-nav">
+ <li class="dropdown">
+ <button id="drop1" type="button" class="dropdown-toggle" data-toggle="dropdown">
+ Dropdown
+ </button>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+ </ul>
+ </li>
+ <li class="dropdown">
+ <button id="drop2" type="button" class="dropdown-toggle" data-toggle="dropdown">
+ Dropdown 2
+ </button>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+ <li id="fat-menu" class="dropdown">
+ <button id="drop3" type="button" class="dropdown-toggle" data-toggle="dropdown">
+ Dropdown 3
+ </button>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- /.nav-collapse -->
+ </div><!-- /.container-fluid -->
+ </nav> <!-- /navbar-example -->
+</div> <!-- /example -->
+
+### Within pills
+
+<div class="bs-example">
+ <ul class="nav nav-pills" role="tablist">
+ <li role="presentation" class="active"><a href="#">Regular link</a></li>
+ <li role="presentation" class="dropdown">
+ <button id="drop4" type="button" data-toggle="dropdown">
+ Dropdown
+ </button>
+ <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+ </ul>
+ </li>
+ <li role="presentation" class="dropdown">
+ <button id="drop5" type="button" data-toggle="dropdown">
+ Dropdown 2
+ </button>
+ <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+ </ul>
+ </li>
+ <li role="presentation" class="dropdown">
+ <button id="drop6" type="button" data-toggle="dropdown">
+ Dropdown 3
+ </button>
+ <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+</div>
+
+## Usage
+
+Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.open` class on the parent list item.
+
+On mobile devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. **This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.**
+
+Note: The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
+
+### Via data attributes
+
+Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
+
+{% highlight html %}
+<div class="dropdown">
+ <button id="dLabel" type="button" data-toggle="dropdown">
+ Dropdown trigger
++ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+ ...
+ </ul>
+</div>
+{% endhighlight %}
+
+To keep URLs intact with link buttons, use the `data-target` attribute instead of `href="#"`.
+
+{% highlight html %}
+<div class="dropdown">
+ <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown">
+ Dropdown trigger
+ <span class="caret"></span>
+ </a>
+
+ <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+ ...
+ </ul>
+</div>
+{% endhighlight %}
+
+### Via JavaScript
+
+Call the dropdowns via JavaScript:
+
+{% highlight js %}
+$('.dropdown-toggle').dropdown()
+{% endhighlight %}
+
+<div class="bs-callout bs-callout-info">
+ <h4><code>data-toggle="dropdown"</code> still required</h4>
+ <p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code>data-toggle="dropdown"</code> is always required to be present on the dropdown's trigger element.</p>
+</div>
+
+### Options
+
+*None.*
+
+### Methods
+
+#### $().dropdown('toggle')
+
+Toggles the dropdown menu of a given navbar or tabbed navigation.
+
+### Events
+
+All dropdown events are fired at the `.dropdown-menu`'s parent element.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.dropdown</td>
+ <td>This event fires immediately when the show instance method is called. The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.dropdown</td>
+ <td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
+ </tr>
+ <tr>
+ <td>hide.bs.dropdown</td>
+ <td>This event is fired immediately when the hide instance method has been called. The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.dropdown</td>
+ <td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('#myDropdown').on('show.bs.dropdown', function () {
+ // do something…
+})
+{% endhighlight %}
--- /dev/null
+---
+layout: page
+title: Modal
+---
+
+Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
+
+**Due to how HTML5 defines its semantics, the `autofocus` HTML attribute has no effect in Bootstrap modals.**
+
+<div class="bs-callout bs-callout-warning" id="callout-stacked-modals">
+ <h4>Overlapping modals not supported</h4>
+ <p>Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.</p>
+</div>
+<div class="bs-callout bs-callout-warning" id="callout-modal-markup-placement">
+ <h4>Modal markup placement</h4>
+ <p>Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.</p>
+</div>
+<div class="bs-callout bs-callout-warning">
+ <h4>Mobile device caveats</h4>
+ <p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
+</div>
+
+### Static example
+
+A rendered modal with header, body, and set of actions in the footer.</p>
+
+<div class="bs-example bs-example-modal">
+ <div class="modal">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
+ <h4 class="modal-title">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+</div>
+
+{% highlight html %}
+<div class="modal fade">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
+ <h4 class="modal-title">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+{% endhighlight %}
+
+### Live demo
+
+Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
+
+<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
+ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <h4>Text in a modal</h4>
+ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+
+ <h4>Popover in a modal</h4>
+ <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
+
+ <h4>Tooltips in a modal</h4>
+ <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
+
+ <hr>
+
+ <h4>Overflowing text to show scroll behavior</h4>
+ <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+</div>
+
+<div class="bs-example" style="padding-bottom: 24px;">
+ <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+ Launch demo modal
+ </button>
+</div>
+
+{% highlight html %}
+<!-- Button trigger modal -->
+<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+ Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
+ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div>
+ </div>
+</div>
+{% endhighlight %}
+
+<div class="bs-callout bs-callout-warning">
+ <h4>Make modals accessible</h4>
+ <p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p>
+ <p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
+</div>
+
+<div class="bs-callout bs-callout-info">
+ <h4>Embedding YouTube videos</h4>
+ <p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <a href="http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p>
+</div>
+
+## Optional sizes
+
+Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`.
+
+<div class="bs-example">
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
+</div>
+
+{% highlight html %}
+<!-- Large modal -->
+<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
+
+<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+ ...
+ </div>
+ </div>
+</div>
+
+<!-- Small modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
+
+<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+ ...
+ </div>
+ </div>
+</div>
+{% endhighlight %}
+
+<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
+ <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
+ <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ </div>
+ </div>
+</div>
+
+## Remove animation
+
+For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
+
+{% highlight html %}
+<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
+ ...
+</div>
+{% endhighlight %}
+
++## Varying modal content based on trigger button
++
++Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.
++
++<div class="bs-example" style="padding-bottom: 24px;">
++ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
++ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
++ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
++
++ <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
++ <div class="modal-dialog">
++ <div class="modal-content">
++ <div class="modal-header">
++ <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
++ <h4 class="modal-title" id="exampleModalLabel">New message</h4>
++ </div>
++ <div class="modal-body">
++ <form role="form">
++ <div class="form-group">
++ <label for="recipient-name" class="control-label">Recipient:</label>
++ <input type="text" class="form-control" id="recipient-name">
++ </div>
++ <div class="form-group">
++ <label for="message-text" class="control-label">Message:</label>
++ <textarea class="form-control" id="message-text"></textarea>
++ </div>
++ </form>
++ </div>
++ <div class="modal-footer">
++ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
++ <button type="button" class="btn btn-primary">Send message</button>
++ </div>
++ </div>
++ </div>
++ </div>
++</div>
++
++{% highlight html %}
++<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
++<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
++<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
++
++<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
++ <div class="modal-dialog">
++ <div class="modal-content">
++ <div class="modal-header">
++ <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
++ <h4 class="modal-title" id="exampleModalLabel">New message</h4>
++ </div>
++ <div class="modal-body">
++ <form role="form">
++ <div class="form-group">
++ <label for="recipient-name" class="control-label">Recipient:</label>
++ <input type="text" class="form-control" id="recipient-name">
++ </div>
++ <div class="form-group">
++ <label for="message-text" class="control-label">Message:</label>
++ <textarea class="form-control" id="message-text"></textarea>
++ </div>
++ </form>
++ </div>
++ <div class="modal-footer">
++ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
++ <button type="button" class="btn btn-primary">Send message</button>
++ </div>
++ </div>
++ </div>
++</div>
++{% endhighlight %}
++
++{% highlight js %}
++$('#exampleModal').on('show.bs.modal', function (event) {
++ var button = $(event.relatedTarget) // Button that triggered the modal
++ var recipient = button.data('whatever') // Extract info from data-* attributes
++ // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
++ // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
++ var modal = $(this)
++ modal.find('.modal-title').text('New message to ' + recipient)
++ modal.find('.modal-body input').val(recipient)
++})
++{% endhighlight %}
++
+## Usage
+
+The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
+
+### Via data attributes
+
+Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a controller element, like a button, along with a `data-target="#foo"` or `href="#foo"` to target a specific modal to toggle.
+
+{% highlight html %}
+<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
+{% endhighlight %}
+
+### Via JavaScript
+
+Call a modal with id `myModal` with a single line of JavaScript:
+
+{% highlight js %}$('#myModal').modal(options){% endhighlight %}
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 50px;">type</th>
+ <th style="width: 50px;">default</th>
+ <th>description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>backdrop</td>
+ <td>boolean or the string <code>'static'</code></td>
+ <td>true</td>
+ <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
+ </tr>
+ <tr>
+ <td>keyboard</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Closes the modal when escape key is pressed</td>
+ </tr>
+ <tr>
+ <td>show</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Shows the modal when initialized.</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+### Methods
+
+#### .modal(options)
+
+Activates your content as a modal. Accepts an optional options `object`.
+
+{% highlight js %}
+$('#myModal').modal({
+ keyboard: false
+})
+{% endhighlight %}
+
+#### .modal('toggle')
+
+Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
+
+{% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
+
+#### .modal('show')
+
+Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).
+
+{% highlight js %}$('#myModal').modal('show'){% endhighlight %}
+
+#### .modal('hide')
+
+Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
+
+{% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
+
+### Events
+
+Bootstrap's modal class exposes a few events for hooking into modal functionality.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.modal</td>
+ <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.modal</td>
+ <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
+ </tr>
+ <tr>
+ <td>hide.bs.modal</td>
+ <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.modal</td>
+ <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ <tr>
+ <td>loaded.bs.modal</td>
+ <td>This event is fired when the modal has loaded content using the <code>remote</code> option.</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('#myModal').on('hidden.bs.modal', function (e) {
+ // do something...
+})
+{% endhighlight %}
--- /dev/null
+---
+layout: page
+title: Popovers
+---
+
+Add small overlays of content, like those on the iPad, to any element for housing secondary information.
+
+Popovers whose both title and content are zero-length are never displayed.
+
+<div class="bs-callout bs-callout-danger">
+ <h4>Plugin dependency</h4>
+ <p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
+</div>
+<div class="bs-callout bs-callout-danger">
+ <h4>Opt-in functionality</h4>
+ <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
++ <p>One way to initialize all popovers on a page would be to select them by their <code>data-toggle</code> attribute:</p>
++{% highlight js %}
++$(function () {
++ $('[data-toggle="popover"]').popover()
++})
++{% endhighlight %}
+</div>
+<div class="bs-callout bs-callout-warning">
+ <h4>Popovers in button groups and input groups require special setting</h4>
+ <p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
+</div>
+<div class="bs-callout bs-callout-warning">
+ <h4>Don't try to show popovers on hidden elements</h4>
+ <p>Invoking <code>$(...).popover('show')</code> when the target element is <code>display: none;</code> will cause the popover to be incorrectly positioned.</p>
+</div>
+<div class="bs-callout bs-callout-info">
+ <h4>Popovers on disabled elements require wrapper elements</h4>
+ <p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the popover to that <code><div></code> instead.</p>
+</div>
+<div class="bs-callout bs-callout-info">
+ <h4>Multiple-line links</h4>
+ <p>Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
+</div>
+
+### Static popover
+
+Four options are available: top, right, bottom, and left aligned.
+
+<div class="bs-example bs-example-popover">
+ <div class="popover top">
+ <div class="arrow"></div>
+ <h3 class="popover-title">Popover top</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
+ </div>
+
+ <div class="popover right">
+ <div class="arrow"></div>
+ <h3 class="popover-title">Popover right</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
+ </div>
+
+ <div class="popover bottom">
+ <div class="arrow"></div>
+ <h3 class="popover-title">Popover bottom</h3>
+
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
+ </div>
+
+ <div class="popover left">
+ <div class="arrow"></div>
+ <h3 class="popover-title">Popover left</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
+ </div>
+
+ <div class="clearfix"></div>
+</div>
+
+### Live demo
+
+{% example html %}
+<button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+{% endexample %}
+
+#### Four directions
+
+<div class="bs-example popover-demo">
+ <div class="bs-example-popovers">
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on left
+ </button>
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on top
+ </button>
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on bottom
+ </button>
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on right
+ </button>
+ </div>
+</div>
+
+{% highlight html %}
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on left
+</button>
+
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on top
+</button>
+
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
+sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on bottom
+</button>
+
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on right
+</button>
+{% endhighlight %}
+
+#### Dismiss on next click
+
+Use the `focus` trigger to dismiss popovers on the next click that the user makes.
+
+<div class="bs-callout bs-callout-danger">
+ <h4>Specific markup required for dismiss-on-next-click</h4>
+ <p>For proper cross-browser and cross-platform behavior, you must use the <code><a></code> tag, <i>not</i> the <code><button></code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attribute.</p>
+</div>
+
+{% example html %}
+<a href="#" tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
+{% endexample %}
+
+{% highlight js %}
+$('.popover-dismiss').popover({
+ trigger: 'focus'
+})
+{% endhighlight %}
+
+
+
+## Usage
+
+Enable popovers via JavaScript:
+
+{% highlight js %}$('#example').popover(options){% endhighlight %}
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 100px;">Type</th>
+ <th style="width: 50px;">Default</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>animation</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Apply a CSS fade transition to the popover</td>
+ </tr>
+ <tr>
+ <td>container</td>
+ <td>string | false</td>
+ <td>false</td>
+ <td>
+ <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element -Â which will prevent the popover from floating away from the triggering element during a window resize.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>content</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>
+ <p>Default content value if <code>data-content</code> attribute isn't present.</p>
+ <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>delay</td>
+ <td>number | object</td>
+ <td>0</td>
+ <td>
+ <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>
+ <tr>
+ <td>html</td>
+ <td>boolean</td>
+ <td>false</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>placement</td>
+ <td>string | function</td>
+ <td>'right'</td>
+ <td>
+ <p>How to position the popover - top | bottom | left | right | auto.<br>When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.</p>
+ <p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>selector</td>
+ <td>string</td>
+ <td>false</td>
+ <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+ </tr>
+ <tr>
+ <td>template</td>
+ <td>string</td>
+ <td><code>'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td>
+ <td>
+ <p>Base HTML to use when creating the popover.</p>
+ <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
+ <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
+ <p><code>.arrow</code> will become the popover's arrow.</p>
+ <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>title</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>
+ <p>Default title value if <code>title</code> attribute isn't present.</p>
+ <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>trigger</td>
+ <td>string</td>
+ <td>'click'</td>
+ <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
+ </tr>
+ <tr>
+ <td>viewport</td>
+ <td>string | object</td>
+ <td>{ selector: 'body', padding: 0 }</td>
+ <td>
+ <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+<div class="bs-callout bs-callout-info">
+ <h4>Data attributes for individual popovers</h4>
+ <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
+</div>
+
+### Methods
+
+#### $().popover(options)
+
+Initializes popovers for an element collection.
+
+#### .popover('show')
+
+Reveals an element's popover. Popovers whose both title and content are zero-length are never displayed.
+
+{% highlight js %}$('#element').popover('show'){% endhighlight %}
+
+#### .popover('hide')
+
+Hides an element's popover.
+
+{% highlight js %}$('#element').popover('hide'){% endhighlight %}
+
+#### .popover('toggle')
+
+Toggles an element's popover.
+
+{% highlight js %}$('#element').popover('toggle'){% endhighlight %}
+
+#### .popover('destroy')
+
+Hides and destroys an element's popover.
+
+{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
+
+### Events
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.popover</td>
+ <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.popover</td>
+ <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ <tr>
+ <td>hide.bs.popover</td>
+ <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.popover</td>
+ <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('#myPopover').on('hidden.bs.popover', function () {
+ // do something…
+})
+{% endhighlight %}
--- /dev/null
+---
+layout: page
+title: Tooltips
+---
+
+## Examples
+
+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.
+
+Tooltips with zero-length titles are never displayed.
+
+Hover over the links below to see tooltips:
+
+<div class="bs-example tooltip-demo">
+ <p class="muted">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>
+
+### Static demo
+
+Four options are available: top, right, bottom, and left aligned.
+
+<div class="bs-example bs-example-tooltip">
+ <div class="tooltip left" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
+ Tooltip on the left
+ </div>
+ </div>
+ <div class="tooltip top" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
+ Tooltip on the top
+ </div>
+ </div>
+ <div class="tooltip bottom" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
+ Tooltip on the bottom
+ </div>
+ </div>
+ <div class="tooltip right" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
+ Tooltip on the right
+ </div>
+ </div>
+</div>
+
+### Interactive demo
+
+Hover over the buttons below to see their tooltips.
+
+<div class="bs-example tooltip-demo">
+ <div class="bs-example-tooltips">
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
+ </div>
+</div>
+
+{% highlight html %}
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+ Tooltip on left
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
+ Tooltip on top
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
+ Tooltip on bottom
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
+ Tooltip on right
+</button>
+{% endhighlight %}
+
+<div class="bs-callout bs-callout-danger">
+ <h4>Opt-in functionality</h4>
+ <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
++ <p>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p>
++{% highlight js %}
++$(function () {
++ $('[data-toggle="tooltip"]').tooltip()
++})
++{% endhighlight %}
+</div>
+<div class="bs-callout bs-callout-warning">
+ <h4>Tooltips in button groups and input groups require special setting</h4>
+ <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
+</div>
+<div class="bs-callout bs-callout-warning">
+ <h4>Don't try to show tooltips on hidden elements</h4>
+ <p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p>
+</div>
+<div class="bs-callout bs-callout-info">
+ <h4>Tooltips on disabled elements require wrapper elements</h4>
+ <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the tooltip to that <code><div></code> instead.</p>
+</div>
+
+## Usage
+
+The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
+
+Trigger the tooltip via JavaScript:
+
+{% highlight js %}
+$('#example').tooltip(options)
+{% endhighlight %}
+
+### Markup
+
+The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
+
+<div class="bs-callout bs-callout-warning">
+ <h4>Multiple-line links</h4>
+ <p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
+</div>
+
+{% highlight html %}
+<!-- HTML to write -->
+<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
+
+<!-- Generated markup by the plugin -->
+<div class="tooltip top" role="tooltip">
+ <div class="tooltip-arrow"></div>
+ <div class="tooltip-inner">
+ Some tooltip text!
+ </div>
+</div>
+{% endhighlight %}
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 100px;">Type</th>
+ <th style="width: 50px;">Default</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>animation</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Apply a CSS fade transition to the tooltip</td>
+ </tr>
+ <tr>
+ <td>container</td>
+ <td>string | false</td>
+ <td>false</td>
+ <td>
+ <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element -Â which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>delay</td>
+ <td>number | object</td>
+ <td>0</td>
+ <td>
+ <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>
+ <tr>
+ <td>html</td>
+ <td>boolean</td>
+ <td>false</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>placement</td>
+ <td>string | function</td>
+ <td>'top'</td>
+ <td>
+ <p>How to position the tooltip - top | bottom | left | right | auto.<br>When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</p>
+ <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>selector</td>
+ <td>string</td>
+ <td>false</td>
+ <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+ </tr>
+ <tr>
+ <td>template</td>
+ <td>string</td>
+ <td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'</code></td>
+ <td>
+ <p>Base HTML to use when creating the tooltip.</p>
+ <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
+ <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
+ <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>title</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>
+ <p>Default title value if <code>title</code> attribute isn't present.</p>
+ <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>trigger</td>
+ <td>string</td>
+ <td>'hover focus'</td>
+ <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
+ </tr>
+ <tr>
+ <td>viewport</td>
+ <td>string | object</td>
+ <td>{ selector: 'body', padding: 0 }</td>
+ <td>
+ <p>Keeps the tooltip within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+<div class="bs-callout bs-callout-info">
+ <h4>Data attributes for individual tooltips</h4>
+ <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
+</div>
+
+### Methods
+
+#### $().tooltip(options)
+
+Attaches a tooltip handler to an element collection.
+
+#### .tooltip('show')
+
+Reveals an element's tooltip. Tooltips with zero-length titles are never displayed.
+
+{% highlight js %}$('#element').tooltip('show'){% endhighlight %}
+
+#### .tooltip('hide')
+
+Hides an element's tooltip.
+
+{% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
+
+#### .tooltip('toggle')
+
+Toggles an element's tooltip.
+
+{% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
+
+#### .tooltip('destroy')
+
+Hides and destroys an element's tooltip.
+
+{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
+
+### Events
+
+<div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.tooltip</td>
+ <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.tooltip</td>
+ <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ <tr>
+ <td>hide.bs.tooltip</td>
+ <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.tooltip</td>
+ <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+{% highlight js %}
+$('#myTooltip').on('hidden.bs.tooltip', function () {
+ // do something…
+})
+{% endhighlight %}
--- /dev/null
- <a class="pull-left" href="#">
+---
+layout: page
+title: Media
+---
+
+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.
+
+### Default media
+
+The default media allow to float a media object (images, video, audio) to the left or right of a content block.
+
+{% example html %}
+<div class="media">
- ### Nested media
++ <a class="media-left" href="#">
+ <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+ </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>
+{% endexample %}
+
- <a class="pull-left" href="#">
++### Nesting
+
+Media components can also be nested.
+
+{% example html %}
+<div class="media">
- <a class="pull-left" href="#">
++ <a class="media-left" href="#">
+ <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+ </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">
- ### Media alignment
++ <a class="media-left" href="#">
+ <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+ </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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+ </div>
+ </div>
+ </div>
+</div>
+{% endexample %}
+
- <a class="pull-left" href="#">
++### Alignment
+
+The images or other media can be aligned top, middle, or bottom. The default is top aligned.
+
+{% example html %}
+<div class="media">
+ <a class="media-left" href="#">
+ <img data-src="holder.js/64x64" alt="Generic placeholder image">
+ </a>
+ <div class="media-body">
+ <h4 class="media-heading">Top aligned media</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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+ <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ </div>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="media">
+ <a class="media-left media-middle" href="#">
+ <img data-src="holder.js/64x64" alt="Generic placeholder image">
+ </a>
+ <div class="media-body">
+ <h4 class="media-heading">Middle aligned media</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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+ <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ </div>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="media">
+ <a class="media-left media-bottom" href="#">
+ <img data-src="holder.js/64x64" alt="Generic placeholder image">
+ </a>
+ <div class="media-body">
+ <h4 class="media-heading">Bottom aligned media</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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+ <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ </div>
+</div>
+{% endexample %}
+
+### Media list
+
+With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
+
+{% example html %}
+<ul class="media-list">
+ <li class="media">
- <a class="pull-left" href="#">
++ <a class="media-left" href="#">
+ <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+ </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="#">
++ <a class="media-left" href="#">
+ <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+ </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="#">
++ <a class="media-left" href="#">
+ <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+ </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-right" href="#">
++ <a class="media-left" href="#">
+ <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+ </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="media-right" href="#">
+ <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
+ </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>
+{% endexample %}
&.disabled,
&[disabled],
fieldset[disabled] & {
- cursor: not-allowed;
+ cursor: @cursor-disabled;
pointer-events: none; // Future-proof disabling of clicks
- .opacity(.65);
+ opacity: .65;
.box-shadow(none);
}
}
--- /dev/null
- cursor: not-allowed;
+//
+// Navs
+// --------------------------------------------------
+
+.nav {
+ margin-bottom: 0;
+ .list-unstyled();
+ &:extend(.clearfix all);
+}
+
+.nav-item {
+ position: relative;
+ display: inline-block;
+}
+
+.nav-link {
+ display: inline-block;
+ padding: @nav-link-padding;
+ line-height: @line-height-base;
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ background-color: @nav-link-hover-bg;
+ }
+
+ // Disabled state sets text to gray and nukes hover/tab effects
+ .disabled > &,
+ &.disabled {
+ color: @nav-disabled-link-color;
+
+ &,
+ &:hover,
+ &:focus {
+ color: @nav-disabled-link-hover-color;
+ background-color: transparent;
++ cursor: @cursor-disabled;
+ }
+ }
+}
+
+
+//
+// Tabs
+//
+
+.nav-tabs {
+ border-bottom: 1px solid @nav-tabs-border-color;
+
+ .nav-item {
+ float: left;
+ // Make the list-items overlay the bottom border
+ margin-bottom: -1px;
+
+ + .nav-item {
+ margin-left: .2rem;
+ }
+ }
+
+ .nav-link {
+ display: block;
+ border: 1px solid transparent;
+ .border-radius(@border-radius-base @border-radius-base 0 0);
+
+ &:hover,
+ &:focus {
+ border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
+ }
+ }
+
+ .open > .nav-link,
+ .active > .nav-link,
+ .nav-link.open,
+ .nav-link.active {
+ &,
+ &:hover,
+ &:focus {
+ color: @nav-tabs-active-link-hover-color;
+ background-color: @nav-tabs-active-link-hover-bg;
+ border-color: @nav-tabs-active-link-hover-border-color @nav-tabs-active-link-hover-border-color transparent;
+ }
+ }
+
+ .disabled > .nav-link,
+ .nav-link.disabled {
+ &,
+ &:hover,
+ &:focus {
+ color: @nav-disabled-link-color;
+ background-color: transparent;
+ border-color: transparent;
+ }
+ }
+}
+
+
+//
+// Pills
+//
+
+.nav-pills {
+ .nav-item {
+ float: left;
+
+ + .nav-item {
+ margin-left: .2rem;
+ }
+ }
+
+ .nav-link {
+ display: block;
+ .border-radius(@nav-pills-border-radius);
+ }
+
+ .open > .nav-link,
+ .active > .nav-link,
+ .nav-link.open,
+ .nav-link.active {
+ &,
+ &:hover,
+ &:focus {
+ color: @component-active-color;
+ background-color: @component-active-bg;
+ cursor: default;
+ }
+ }
+}
+
+.nav-stacked {
+ .nav-item {
+ float: none;
+ display: block;
+
+ + .nav-item {
+ margin-top: .2rem;
+ margin-left: 0;
+ }
+ }
+}
+
+
+//
+// Tabbable tabs
+//
+
+// Hide tabbable panes to start, show them when `.active`
+.tab-content {
+ > .tab-pane {
+ display: none;
+ visibility: hidden;
+ }
+ > .active {
+ display: block;
+ visibility: visible;
+ }
+}
+
+
+//
+// Dropdowns
+//
+
+.nav-tabs .dropdown-menu {
+ // Make dropdown border overlap tab border
+ margin-top: -1px;
+ // Remove the top rounded corners here since there is a hard edge above the menu
+ .border-top-radius(0);
+}
z-index: @zindex-tooltip;
display: block;
visibility: visible;
- font-size: @font-size-small;
+ // Reset font and text propertes given new insertion method
+ font-family: @font-family-base;
+ font-size: @font-size-sm;
+ font-weight: normal;
line-height: 1.4;
- .opacity(0);
+ opacity: 0;
- &.in { .opacity(@tooltip-opacity); }
+ &.in { opacity: @tooltip-opacity; }
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
projects / thirdparty / bootstrap.git / commitdiff
