Commit 169d2a4a authored by Mark Otto's avatar Mark Otto

Merge branch 'master' into v4

parents df2ca92d 1e646927
...@@ -19,7 +19,7 @@ and [submitting pull requests](#pull-requests), but please respect the following ...@@ -19,7 +19,7 @@ and [submitting pull requests](#pull-requests), but please respect the following
restrictions: restrictions:
* Please **do not** use the issue tracker for personal support requests. Stack * Please **do not** use the issue tracker for personal support requests. Stack
Overflow ([`twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3) tag) or [IRC](README.md#community) are better places to get help. Overflow ([`twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3) tag), [Slack](https://bootstrap-slack.herokuapp.com/) or [IRC](README.md#community) are better places to get help.
* Please **do not** derail or troll issues. Keep the discussion on topic and * Please **do not** derail or troll issues. Keep the discussion on topic and
respect the opinions of others. respect the opinions of others.
...@@ -65,7 +65,7 @@ Guidelines for bug reports: ...@@ -65,7 +65,7 @@ Guidelines for bug reports:
latest `master` or development branch in the repository. latest `master` or development branch in the repository.
3. **Isolate the problem** — ideally create a [reduced test 3. **Isolate the problem** — ideally create a [reduced test
case](http://css-tricks.com/6263-reduced-test-cases/) and a live example. case](https://css-tricks.com/reduced-test-cases/) and a live example.
[This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template. [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
...@@ -148,7 +148,7 @@ documentation source files and is managed separately by the Bootstrap Core Team. ...@@ -148,7 +148,7 @@ documentation source files and is managed separately by the Bootstrap Core Team.
Adhering to the following process is the best way to get your work Adhering to the following process is the best way to get your work
included in the project: included in the project:
1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork, 1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
and configure the remotes: and configure the remotes:
```bash ```bash
......
...@@ -492,7 +492,7 @@ module.exports = function (grunt) { ...@@ -492,7 +492,7 @@ module.exports = function (grunt) {
grunt.registerTask('lint-docs-js', ['jscs:assets']); grunt.registerTask('lint-docs-js', ['jscs:assets']);
grunt.registerTask('docs', ['docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']); grunt.registerTask('docs', ['docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);
grunt.registerTask('docs-github', ['jekyll:github']); grunt.registerTask('prep-release', ['dist', 'docs', 'jekyll:github', 'htmlmin', 'compress']);
// Task for updating the cached npm packages used by the Travis build (which are controlled by test-infra/npm-shrinkwrap.json). // Task for updating the cached npm packages used by the Travis build (which are controlled by test-infra/npm-shrinkwrap.json).
// This task should be run and the updated file should be committed whenever Bootstrap's dependencies change. // This task should be run and the updated file should be committed whenever Bootstrap's dependencies change.
......
# [Bootstrap](http://getbootstrap.com) # [Bootstrap](http://getbootstrap.com)
![Bower version](https://img.shields.io/bower/v/bootstrap.svg?style=flat)
[![npm version](https://img.shields.io/npm/v/bootstrap.svg?style=flat)](https://www.npmjs.com/package/bootstrap) [![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com)
[![Gem version](https://img.shields.io/gem/v/bootstrap.svg?style=flat)](https://rubygems.org/gems/bootstrap) ![Bower version](https://img.shields.io/bower/v/bootstrap.svg)
[![Build Status](https://img.shields.io/travis/twbs/bootstrap/master.svg?style=flat)](https://travis-ci.org/twbs/bootstrap) [![npm version](https://img.shields.io/npm/v/bootstrap.svg)](https://www.npmjs.com/package/bootstrap)
[![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap.svg?style=flat)](https://david-dm.org/twbs/bootstrap#info=devDependencies) [![Gem version](https://img.shields.io/gem/v/bootstrap.svg)](https://rubygems.org/gems/bootstrap)
[![Build Status](https://img.shields.io/travis/twbs/bootstrap/master.svg)](https://travis-ci.org/twbs/bootstrap)
[![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap.svg)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
[![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap) [![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thornton](https://twitter.com/fat), and maintained by the [core team](https://github.com/orgs/twbs/people) with the massive support and involvement of the community. Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thornton](https://twitter.com/fat), and maintained by the [core team](https://github.com/orgs/twbs/people) with the massive support and involvement of the community.
...@@ -25,7 +27,7 @@ To get started, check out <http://getbootstrap.com>! ...@@ -25,7 +27,7 @@ To get started, check out <http://getbootstrap.com>!
Several quick start options are available: Several quick start options are available:
- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.3.4.zip). - [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.3.5.zip).
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`. - Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
- Install with [Bower](http://bower.io): `bower install bootstrap`. - Install with [Bower](http://bower.io): `bower install bootstrap`.
- Install with [npm](https://www.npmjs.com): `npm install bootstrap`. - Install with [npm](https://www.npmjs.com): `npm install bootstrap`.
...@@ -49,8 +51,7 @@ bootstrap/ ...@@ -49,8 +51,7 @@ bootstrap/
└── bootstrap.min.js └── bootstrap.min.js
``` ```
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/chrome-developer-tools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
## Bugs and feature requests ## Bugs and feature requests
...@@ -92,12 +93,13 @@ Editor preferences are available in the [editor config](https://github.com/twbs/ ...@@ -92,12 +93,13 @@ Editor preferences are available in the [editor config](https://github.com/twbs/
## Community ## Community
Keep track of development and community news. Get updates on Bootstrap's development and chat with the project maintainers and community members.
- Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap). - Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
- Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com). - Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
- Join [the official Slack room](https://bootstrap-slack.herokuapp.com).
- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel. - Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
- Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3)). - Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3)).
- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability. - Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
......
...@@ -24,20 +24,14 @@ repo: https://github.com/twbs/bootstrap ...@@ -24,20 +24,14 @@ repo: https://github.com/twbs/bootstrap
sass_repo: https://github.com/twbs/bootstrap-sass sass_repo: https://github.com/twbs/bootstrap-sass
download: download:
source: https://github.com/twbs/bootstrap/archive/v3.3.4.zip source: https://github.com/twbs/bootstrap/archive/v3.3.5.zip
dist: https://github.com/twbs/bootstrap/releases/download/v3.3.4/bootstrap-3.3.4-dist.zip dist: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip
sass: https://github.com/twbs/bootstrap-sass/archive/v3.3.4.tar.gz sass: https://github.com/twbs/bootstrap-sass/archive/v3.3.5.tar.gz
blog: http://blog.getbootstrap.com blog: http://blog.getbootstrap.com
expo: http://expo.getbootstrap.com expo: http://expo.getbootstrap.com
cdn: cdn:
css: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css css: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
js: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js css_theme: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css
jquery: //code.jquery.com/jquery-2.1.1.min.js js: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.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/
@mixin reset-text {
font-family: $font-family-base;
// We deliberately do NOT reset font-size.
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-break: auto;
line-height: $line-height-base;
text-align: left; // Fallback for where `start` is not supported
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
}
{ {
"name": "bootstrap", "name": "bootstrap",
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.", "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
"version": "3.3.4",
"keywords": [ "keywords": [
"css", "css",
"js", "js",
...@@ -13,9 +12,10 @@ ...@@ -13,9 +12,10 @@
"web" "web"
], ],
"homepage": "http://getbootstrap.com", "homepage": "http://getbootstrap.com",
"license": "MIT",
"moduleType": "globals",
"main": [ "main": [
"scss/bootstrap.scss", "scss/bootstrap.scss",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js" "dist/js/bootstrap.js"
], ],
"ignore": [ "ignore": [
......
...@@ -88,6 +88,16 @@ ...@@ -88,6 +88,16 @@
origin: > origin: >
Bootstrap#15832 Bootstrap#15832
-
browser: >
Chrome
summary: >
Focus ring of image map within a modal is displayed in the wrong location.
upstream_bug: >
Chromium#475128
origin: >
Bootstrap#16180
- -
browser: > browser: >
Chrome Chrome
...@@ -128,6 +138,16 @@ ...@@ -128,6 +138,16 @@
origin: > origin: >
Bootstrap#16022 Bootstrap#16022
-
browser: >
Chrome
summary: >
`width: 1%` on nested table cell causes its table to hog horizontal space.
upstream_bug: >
Chromium#427994
origin: >
Bootstrap#16372
- -
browser: > browser: >
Chrome (Windows & Linux) Chrome (Windows & Linux)
...@@ -138,6 +158,16 @@ ...@@ -138,6 +158,16 @@
origin: > origin: >
Bootstrap#15298 Bootstrap#15298
-
browser: >
Safari
summary: >
`width: 1%` on nested table cell causes its table to hog horizontal space.
upstream_bug: >
WebKit#144696, Safari#20839572
origin: >
Bootstrap#16372
- -
browser: > browser: >
Safari (OS X) Safari (OS X)
...@@ -200,6 +230,26 @@ ...@@ -200,6 +230,26 @@
origin: > origin: >
Bootstrap#15832 Bootstrap#15832
-
browser: >
Safari (OS X)
summary: >
Focus ring of image map within a modal is displayed in the wrong location.
upstream_bug: >
WebKit#143527
origin: >
Bootstrap#16180
-
browser: >
Safari (OS X)
summary: >
Unnecessary line-wrapping of `.navbar-brand` text for no apparent reason
upstream_bug: >
WebKit#144990, Safari#20950962
origin: >
Bootstrap#15998
- -
browser: > browser: >
Safari (iOS) Safari (iOS)
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
- name: Korean - name: Korean
code: ko code: ko
description: Bootstrap 한국어 description: Bootstrap 한국어
url: http://bootstrapk.com/BS3/ url: http://bootstrapk.com/
- name: Russian - name: Russian
code: ru code: ru
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
{% if site.github %} {% if site.github %}
<script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script> <script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
......
<div class="bd-social"> <div class="bd-social">
<ul class="bd-social-buttons"> <ul class="bd-social-buttons">
<li> <li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe> <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
</li> </li>
<li> <li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe> <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
</li> </li>
<li class="follow-btn"> <li class="follow-btn">
<a href="https://twitter.com/getbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @getbootstrap</a> <a href="https://twitter.com/getbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @getbootstrap</a>
......
...@@ -8,9 +8,9 @@ Bootstrap is maintained by the founding team and a small group of invaluable cor ...@@ -8,9 +8,9 @@ Bootstrap is maintained by the founding team and a small group of invaluable cor
<div class="list-group bd-team"> <div class="list-group bd-team">
{% for member in site.data.core-team %} {% for member in site.data.core-team %}
<div class="list-group-item"> <div class="list-group-item">
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user={{ member.user }}&amp;type=follow"></iframe> <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user={{ member.user }}&amp;type=follow"></iframe>
<a class="team-member" href="https://github.com/{{ member.user }}"> <a class="team-member" href="https://github.com/{{ member.user }}">
<img src="http://www.gravatar.com/avatar/{{ member.gravatar }}" alt="@{{ member.user }}" width="32" height="32"> <img src="https://secure.gravatar.com/avatar/{{ member.gravatar }}" alt="@{{ member.user }}" width="32" height="32">
<strong>{{ member.name }}</strong> <small>@{{ member.user }}</small> <strong>{{ member.name }}</strong> <small>@{{ member.user }}</small>
</a> </a>
</div> </div>
......
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
// IT'S JUST JUNK FOR OUR DOCS! // IT'S JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++ // ++++++++++++++++++++++++++++++++++++++++++
/*! /*!
* Copyright 2014 Twitter, Inc. * Copyright 2014-2015 Twitter, Inc.
* *
* Licensed under the Creative Commons Attribution 3.0 Unported License. For * Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/. * details, see https://creativecommons.org/licenses/by/3.0/.
*/ */
// Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes. // Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
(function () { (function () {
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
function actualNonEmulatedIEMajorVersion() { function actualNonEmulatedIEMajorVersion() {
// Detects the actual version of IE in use, even if it's in an older-IE emulation mode. // Detects the actual version of IE in use, even if it's in an older-IE emulation mode.
// IE JavaScript conditional compilation docs: http://msdn.microsoft.com/en-us/library/ie/121hztk3(v=vs.94).aspx // IE JavaScript conditional compilation docs: https://msdn.microsoft.com/library/121hztk3%28v=vs.94%29.aspx
// @cc_on docs: http://msdn.microsoft.com/en-us/library/ie/8ka90k2e(v=vs.94).aspx // @cc_on docs: https://msdn.microsoft.com/library/8ka90k2e%28v=vs.94%29.aspx
var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // jshint ignore:line var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // jshint ignore:line
if (jscriptVersion === undefined) { if (jscriptVersion === undefined) {
return 11 // IE11+ not in emulation mode return 11 // IE11+ not in emulation mode
......
/*! /*!
* IE10 viewport hack for Surface/desktop Windows 8 bug * IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014 Twitter, Inc. * Copyright 2014-2015 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* details, see http://creativecommons.org/licenses/by/3.0/.
*/ */
// See the Getting Started docs for more information: // See the Getting Started docs for more information:
...@@ -20,4 +19,5 @@ ...@@ -20,4 +19,5 @@
) )
document.querySelector('head').appendChild(msViewportStyle) document.querySelector('head').appendChild(msViewportStyle)
} }
})(); })();
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
/*!
* JavaScript for Bootstrap's 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/.
*/
/* global ZeroClipboard, addAnchors */
!function ($) {
'use strict';
$(function () {
// // Scrollspy
// var $window = $(window)
// var $body = $(document.body)
// $body.scrollspy({
// target: '.active .bd-sidenav'
// })
// $window.on('load', function () {
// $body.scrollspy('refresh')
// })
// Kill links
// $('[href=#]').click(function (e) {
// e.preventDefault()
// })
// Tooltip and popover demos
$('.tooltip-demo').tooltip({
selector: '[data-toggle="tooltip"]',
container: 'body'
})
$('.popover-demo').popover({
selector: '[data-toggle="popover"]',
container: 'body'
})
// Demos within modals
$('.tooltip-test').tooltip()
$('.popover-test').popover()
// Popover demos
$('.bd-popover').popover()
// Button state demo
$('#loading-example-btn').on('click', function () {
var $btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 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
$('.bd-activate-animated-progressbar').on('click', function () {
$(this).prev('.progress-striped').toggleClass('progress-animated')
})
// Custom indeterminate checkbox
$('.bs-example-indeterminate input').prop('indeterminate', true)
// Config ZeroClipboard
ZeroClipboard.config({
moviePath: '/assets/flash/ZeroClipboard.swf',
hoverClass: 'btn-clipboard-hover'
})
// Insert copy to clipboard button before .highlight
$('.highlight').each(function () {
var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>'
$(this).before(btnHtml)
})
var zeroClipboard = new ZeroClipboard($('.btn-clipboard'))
var $htmlBridge = $('#global-zeroclipboard-html-bridge')
// Handlers for ZeroClipboard
zeroClipboard.on('load', function () {
htmlBridge
.data('placement', 'top')
.attr('title', 'Copy to clipboard')
.tooltip()
})
// Copy to clipboard
zeroClipboard.on('dataRequested', function (client) {
var highlight = $(this).parent().nextAll('.highlight').first()
client.setText(highlight.text())
})
// Notify copy success and reset tooltip title
zeroClipboard.on('complete', function () {
htmlBridge
.attr('title', 'Copied!')
.tooltip('fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('fixTitle')
})
// Notify copy failure
zeroClipboard.on('noflash wrongflash', function () {
htmlBridge
.attr('title', 'Flash required')
.tooltip('fixTitle')
.tooltip('show')
})
})
}(jQuery)
;(function () {
'use strict';
addAnchors('.bd-container > h2, .bd-container > h3, .bd-container > h4, .bd-container > h5');
})();
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
...@@ -7,6 +7,8 @@ Bootstrap currently works around several outstanding browser bugs in major brows ...@@ -7,6 +7,8 @@ Bootstrap currently works around several outstanding browser bugs in major brows
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). 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).
Also see [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o).
<div class="table-responsive"> <div class="table-responsive">
<table class="bd-browser-bugs table table-bordered table-hover"> <table class="bd-browser-bugs table table-bordered table-hover">
<thead> <thead>
......
This diff is collapsed.
...@@ -106,10 +106,10 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi ...@@ -106,10 +106,10 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
<button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1"> <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
...@@ -126,10 +126,10 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli ...@@ -126,10 +126,10 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<button type="button" class="btn btn-secondary">Button</button> <button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button> <button type="button" class="btn btn-secondary">Button</button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1"> <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
...@@ -137,28 +137,28 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli ...@@ -137,28 +137,28 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<button type="button" class="btn btn-secondary">Button</button> <button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button> <button type="button" class="btn btn-secondary">Button</button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2"> <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3"> <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4"> <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
......
...@@ -130,6 +130,8 @@ Do more with buttons. Control button states or create groups of buttons for more ...@@ -130,6 +130,8 @@ Do more with buttons. Control button states or create groups of buttons for more
Use JavaScript to change the text and "state" of a particular button. For the sake of this demonstration, we are using `data-loading-text` and `$().button('loading')`, but that's not the only state you can use. [Custom strings of text](#buttons-methods) can also be used with `$().button(string)`. Use JavaScript to change the text and "state" of a particular button. For the sake of this demonstration, we are using `data-loading-text` and `$().button('loading')`, but that's not the only state you can use. [Custom strings of text](#buttons-methods) can also be used with `$().button(string)`.
**This feature is deprecated since v3.3.5 and will be removed in v4.**
**Heads up!** You'll likely need to work around Firefox's [persisted form control states across page loads bug](https://github.com/twbs/bootstrap/issues/793) (e.g., disabled and checked states) with `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072) for details. **Heads up!** You'll likely need to work around Firefox's [persisted form control states across page loads bug](https://github.com/twbs/bootstrap/issues/793) (e.g., disabled and checked states) with `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072) for details.
{% example html %} {% example html %}
...@@ -199,7 +201,7 @@ Toggles push state. Gives the button the appearance that it has been activated. ...@@ -199,7 +201,7 @@ Toggles push state. Gives the button the appearance that it has been activated.
#### $().button('reset') #### $().button('reset')
Resets button state—swaps text to original text. Resets button state—swaps text to original text. **This method is asynchronous and returns before the resetting has actually completed.**
#### $().button(string) #### $().button(string)
......
...@@ -80,7 +80,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a ...@@ -80,7 +80,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="Third slide image"> <img data-src="holder.js/900x500/auto/#555:#555" alt="Third slide image">
<div class="carousel-caption"> <div class="carousel-caption">
<h3>Third slide label</h3> <h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
......
...@@ -16,18 +16,18 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another ...@@ -16,18 +16,18 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
{% example html %} {% example html %}
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li role="presentation"> <li>
<a role="menuitem" tabindex="-1" href="#">Action</a> <a href="#">Action</a>
</li> </li>
<li role="presentation"> <li>
<a role="menuitem" tabindex="-1" href="#">Another action</a> <a href="#">Another action</a>
</li> </li>
<li role="presentation"> <li>
<a role="menuitem" tabindex="-1" href="#">Something else here</a> <a href="#">Something else here</a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -44,7 +44,7 @@ Dropdowns are automatically positioned via CSS within the normal flow of the doc ...@@ -44,7 +44,7 @@ Dropdowns are automatically positioned via CSS within the normal flow of the doc
{% endcallout %} {% endcallout %}
{% highlight html %} {% highlight html %}
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel"> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
... ...
</ul> </ul>
{% endhighlight %} {% endhighlight %}
...@@ -54,13 +54,13 @@ Dropdowns are automatically positioned via CSS within the normal flow of the doc ...@@ -54,13 +54,13 @@ Dropdowns are automatically positioned via CSS within the normal flow of the doc
Add a header to label sections of actions in any dropdown menu. Add a header to label sections of actions in any dropdown menu.
{% example html %} {% example html %}
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu">
<li role="presentation" class="dropdown-header">Dropdown header</li> <li class="dropdown-header">Dropdown header</li>
<li role="presentation"> <li>
<a role="menuitem" tabindex="-1" href="#">Action</a> <a href="#">Action</a>
</li> </li>
<li role="presentation"> <li>
<a role="menuitem" tabindex="-1" href="#">Another action</a> <a href="#">Another action</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
...@@ -70,19 +70,19 @@ Add a header to label sections of actions in any dropdown menu. ...@@ -70,19 +70,19 @@ Add a header to label sections of actions in any dropdown menu.
Separate groups of related menu items with a divider. Separate groups of related menu items with a divider.
{% example html %} {% example html %}
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu">
<li role="presentation"> <li>
<a role="menuitem" tabindex="-1" href="#">Action</a> <a href="#">Action</a>
</li> </li>
<li role="presentation"> <li>
<a role="menuitem" tabindex="-1" href="#">Another action</a> <a href="#">Another action</a>
</li> </li>
<li role="presentation"> <li>
<a role="menuitem" tabindex="-1" href="#">Something else here</a> <a href="#">Something else here</a>
</li> </li>
<li role="presentation" class="dropdown-divider"></li> <li class="dropdown-divider"></li>
<li role="presentation"> <li>
<a role="menuitem" tabindex="-1" href="#">Separated link</a> <a href="#">Separated link</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
...@@ -92,15 +92,15 @@ Separate groups of related menu items with a divider. ...@@ -92,15 +92,15 @@ Separate groups of related menu items with a divider.
Add `.disabled` to a `<li>` in the dropdown to disable the link. Add `.disabled` to a `<li>` in the dropdown to disable the link.
{% example html %} {% example html %}
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu">
<li role="presentation"> <li>
<a role="menuitem" tabindex="-1" href="#">Regular link</a> <a href="#">Regular link</a>
</li> </li>
<li role="presentation" class="disabled"> <li class="disabled">
<a role="menuitem" tabindex="-1" href="#">Disabled link</a> <a href="#">Disabled link</a>
</li> </li>
<li role="presentation"> <li>
<a role="menuitem" tabindex="-1" href="#">Another link</a> <a href="#">Another link</a>
</li> </li>
</ul> </ul>
{% endexample %} {% endexample %}
...@@ -119,11 +119,10 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown. ...@@ -119,11 +119,10 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
{% highlight html %} {% highlight html %}
<div class="dropdown"> <div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown"> <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger Dropdown trigger
<span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <ul class="dropdown-menu" aria-labelledby="dLabel">
... ...
</ul> </ul>
</div> </div>
...@@ -133,12 +132,11 @@ To keep URLs intact with link buttons, use the `data-target` attribute instead o ...@@ -133,12 +132,11 @@ To keep URLs intact with link buttons, use the `data-target` attribute instead o
{% highlight html %} {% highlight html %}
<div class="dropdown"> <div class="dropdown">
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown"> <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger Dropdown trigger
<span class="caret"></span>
</a> </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <ul class="dropdown-menu" aria-labelledby="dLabel">
... ...
</ul> </ul>
</div> </div>
......
...@@ -306,7 +306,7 @@ For more structured form layouts, you can utilize Bootstrap's predefined grid cl ...@@ -306,7 +306,7 @@ For more structured form layouts, you can utilize Bootstrap's predefined grid cl
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
A checkbox or radio with the `disabled` attribute will be styled appropriately. To have the `<label>` for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the `.disabled` class to your `.radio`, `.radio-inline`, `.checkbox`, `.checkbox-inline`, or `<fieldset>`. Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent `<label>`, you'll need to add the <code>.disabled</code> class to the parent `.radio`, `.radio-inline`, `.checkbox`, or `.checkbox-inline`.
### Default (stacked) ### Default (stacked)
...@@ -806,4 +806,3 @@ The file input is the most gnarly of the bunch. Here's how it works: ...@@ -806,4 +806,3 @@ The file input is the most gnarly of the bunch. Here's how it works:
In other words, it's an entirely custom element, all generated via CSS. In other words, it's an entirely custom element, all generated via CSS.
**Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas. **Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.
...@@ -110,12 +110,14 @@ Buttons in input groups are a bit different and require one extra level of nesti ...@@ -110,12 +110,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<ul class="dropdown-menu" role="menu"> Action
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
<li class="divider"></li> <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div> </div>
...@@ -126,12 +128,14 @@ Buttons in input groups are a bit different and require one extra level of nesti ...@@ -126,12 +128,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button"> <input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<ul class="dropdown-menu dropdown-menu-right" role="menu"> Action
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
<li class="divider"></li> <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div> </div>
...@@ -148,14 +152,14 @@ Buttons in input groups are a bit different and require one extra level of nesti ...@@ -148,14 +152,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
<div class="input-group"> <div class="input-group">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-secondary">Action</button> <button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
<li class="divider"></li> <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div> </div>
...@@ -167,14 +171,14 @@ Buttons in input groups are a bit different and require one extra level of nesti ...@@ -167,14 +171,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown"> <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-secondary">Action</button> <button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-right" role="menu"> <ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
<li class="divider"></li> <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div> </div>
......
...@@ -60,6 +60,20 @@ Linkify list group items by using anchor tags instead of list items (that also m ...@@ -60,6 +60,20 @@ Linkify list group items by using anchor tags instead of list items (that also m
</div> </div>
{% endexample %} {% endexample %}
## Button items
List group items may be buttons instead of list items (that also means a parent `<div>` instead of an `<ul>`). No need for individual parents around each element. **Don't use the standard `.btn` classes here.**
{% example html %}
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
{% endexample %}
## Disabled items ## Disabled items
Add `.disabled` to a `.list-group-item` to gray it out to appear disabled. Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
......
...@@ -19,7 +19,7 @@ $('#myModal').on('shown.bs.modal', function () { ...@@ -19,7 +19,7 @@ $('#myModal').on('shown.bs.modal', function () {
{% endhighlight %} {% endhighlight %}
{% callout warning %} {% callout warning %}
#### Overlapping modals not supported #### Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code. Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
{% endcallout %} {% endcallout %}
...@@ -42,7 +42,7 @@ A rendered modal with header, body, and set of actions in the footer.</p> ...@@ -42,7 +42,7 @@ A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bd-example bd-example-modal"> <div class="bd-example bd-example-modal">
<div class="modal"> <div class="modal">
<div class="modal-dialog"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
...@@ -65,7 +65,7 @@ A rendered modal with header, body, and set of actions in the footer.</p> ...@@ -65,7 +65,7 @@ A rendered modal with header, body, and set of actions in the footer.</p>
{% highlight html %} {% highlight html %}
<div class="modal fade"> <div class="modal fade">
<div class="modal-dialog"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
...@@ -91,7 +91,7 @@ A rendered modal with header, body, and set of actions in the footer.</p> ...@@ -91,7 +91,7 @@ A rendered modal with header, body, and set of actions in the footer.</p>
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page. 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 id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
...@@ -147,7 +147,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a ...@@ -147,7 +147,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
...@@ -171,7 +171,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a ...@@ -171,7 +171,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
{% callout warning %} {% callout warning %}
#### Make modals accessible #### Make modals accessible
Be sure to add `role="dialog"` to `.modal`, `aria-labelledby="myModalLabel"` attribute to reference the modal title, and `aria-hidden="true"` to tell assistive technologies to skip the modal's DOM elements. Be sure to add `role="dialog"` and `aria-labelledby="..."``, referencing the modal title, to `.modal`, and `role="document"` to the `.modal-dialog` itself.
Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`.
{% endcallout %} {% endcallout %}
...@@ -267,7 +267,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta ...@@ -267,7 +267,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
{% example html %} {% example html %}
<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true"> <div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
...@@ -325,7 +325,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff ...@@ -325,7 +325,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
<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="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
......
...@@ -52,16 +52,16 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb ...@@ -52,16 +52,16 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
{% example html %} {% example html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item active" role="presentation"> <li class="nav-item active">
<a href="#" class="nav-link">Active</a> <a href="#" class="nav-link">Active</a>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item">
<a href="#" class="nav-link">Link</a> <a href="#" class="nav-link">Link</a>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a href="#" class="nav-link">Another link</a>
</li> </li>
<li class="nav-item disabled" role="presentation"> <li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a> <a href="#" class="nav-link">Disabled</a>
</li> </li>
</ul> </ul>
...@@ -73,16 +73,16 @@ Take that same HTML, but use `.nav-pills` instead: ...@@ -73,16 +73,16 @@ Take that same HTML, but use `.nav-pills` instead:
{% example html %} {% example html %}
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item active" role="presentation"> <li class="nav-item active">
<a href="#" class="nav-link">Active</a> <a href="#" class="nav-link">Active</a>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item">
<a href="#" class="nav-link">Link</a> <a href="#" class="nav-link">Link</a>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a href="#" class="nav-link">Another link</a>
</li> </li>
<li class="nav-item disabled" role="presentation"> <li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a> <a href="#" class="nav-link">Disabled</a>
</li> </li>
</ul> </ul>
...@@ -94,16 +94,16 @@ Just add `.nav-stacked` to the `.nav.nav-pills`. ...@@ -94,16 +94,16 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
{% example html %} {% example html %}
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li class="nav-item active" role="presentation"> <li class="nav-item active">
<a href="#" class="nav-link">Active</a> <a href="#" class="nav-link">Active</a>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item">
<a href="#" class="nav-link">Link</a> <a href="#" class="nav-link">Link</a>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a href="#" class="nav-link">Another link</a>
</li> </li>
<li class="nav-item disabled" role="presentation"> <li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a> <a href="#" class="nav-link">Disabled</a>
</li> </li>
</ul> </ul>
...@@ -117,23 +117,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin ...@@ -117,23 +117,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %} {% example html %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item active" role="presentation"> <li class="nav-item active">
<a href="#" class="nav-link">Active</a> <a href="#" class="nav-link">Active</a>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
<li class="divider"></li> <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a href="#" class="nav-link">Another link</a>
</li> </li>
<li class="nav-item disabled" role="presentation"> <li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a> <a href="#" class="nav-link">Disabled</a>
</li> </li>
</ul> </ul>
...@@ -143,23 +143,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin ...@@ -143,23 +143,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %} {% example html %}
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item active" role="presentation"> <li class="nav-item active">
<a href="#" class="nav-link">Active</a> <a href="#" class="nav-link">Active</a>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
<li class="divider"></li> <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a href="#" class="nav-link">Another link</a>
</li> </li>
<li class="nav-item disabled" role="presentation"> <li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a> <a href="#" class="nav-link">Disabled</a>
</li> </li>
</ul> </ul>
...@@ -171,20 +171,19 @@ Use the tab JavaScript plugin—include it individually or through the compiled ...@@ -171,20 +171,19 @@ Use the tab JavaScript plugin—include it individually or through the compiled
<div class="bd-example bd-example-tabs" role="tabpanel"> <div class="bd-example bd-example-tabs" role="tabpanel">
<ul id="myTab" class="nav nav-tabs" role="tablist"> <ul id="myTab" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"> <li class="active">
<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a> <a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
</li> </li>
<li role="presentation"> <li>
<a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a> <a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a>
</li> </li>
<li role="presentation" class="dropdown"> <li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">
Dropdown Dropdown
<span class="caret"></span>
</a> </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents"> <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
<li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li> <li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
<li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li> <li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
...@@ -212,10 +211,10 @@ You can activate a tab or pill navigation without writing any JavaScript by simp ...@@ -212,10 +211,10 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
{% highlight html %} {% highlight html %}
<!-- Nav tabs --> <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul> </ul>
<!-- Tab panes --> <!-- Tab panes -->
...@@ -269,16 +268,16 @@ Activates a tab element and content container. Tab should have either a `data-ta ...@@ -269,16 +268,16 @@ Activates a tab element and content container. Tab should have either a `data-ta
{% highlight html %} {% highlight html %}
<ul class="nav nav-tabs" role="tablist" id="myTab"> <ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active"> <li class="active">
<a href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a> <a href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
</li> </li>
<li role="presentation"> <li>
<a href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a> <a href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
</li> </li>
<li role="presentation"> <li>
<a href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a> <a href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a>
</li> </li>
<li role="presentation"> <li>
<a href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a> <a href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a>
</li> </li>
</ul> </ul>
...@@ -343,4 +342,3 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { ...@@ -343,4 +342,3 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous active tab e.relatedTarget // previous active tab
}) })
{% endhighlight %} {% endhighlight %}
...@@ -93,37 +93,37 @@ Four options are available: top, right, bottom, and left aligned. ...@@ -93,37 +93,37 @@ Four options are available: top, right, bottom, and left aligned.
<div class="bd-example popover-demo"> <div class="bd-example popover-demo">
<div class="bd-example-popovers"> <div class="bd-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."> <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 Popover on top
</button> </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>
<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."> <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 Popover on bottom
</button> </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."> <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 right Popover on left
</button> </button>
</div> </div>
</div> </div>
{% highlight html %} {% 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."> <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 Popover on top
</button> </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>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus <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."> sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom Popover on bottom
</button> </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."> <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 right Popover on left
</button> </button>
{% endhighlight %} {% endhighlight %}
...@@ -249,7 +249,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ...@@ -249,7 +249,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>trigger</td> <td>trigger</td>
<td>string</td> <td>string</td>
<td>'click'</td> <td>'click'</td>
<td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td> <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
</tr> </tr>
<tr> <tr>
<td>viewport</td> <td>viewport</td>
......
...@@ -29,12 +29,14 @@ The ScrollSpy plugin is for automatically updating nav targets based on scroll p ...@@ -29,12 +29,14 @@ The ScrollSpy plugin is for automatically updating nav targets based on scroll p
<li><a href="#fat">@fat</a></li> <li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li> <li><a href="#mdo">@mdo</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> Dropdown
<li><a href="#one" tabindex="-1">one</a></li> </a>
<li><a href="#two" tabindex="-1">two</a></li> <ul class="dropdown-menu" aria-labelledby="navbarDrop1">
<li class="divider"></li> <li><a href="#one">one</a></li>
<li><a href="#three" tabindex="-1">three</a></li> <li><a href="#two">two</a></li>
<li role="separator" class="divider"></li>
<li><a href="#three">three</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
...@@ -66,7 +68,7 @@ Scrollspy currently requires the use of a [Bootstrap nav component](/components/ ...@@ -66,7 +68,7 @@ Scrollspy currently requires the use of a [Bootstrap nav component](/components/
### Requires relative positioning ### Requires relative positioning
No matter the implementation method, scrollspy requires the use of `position: relative;` on the element you're spying on. In most cases this is the `<body>`. No matter the implementation method, scrollspy requires the use of `position: relative;` on the element you're spying on. In most cases this is the `<body>`. When scrollspying on elements other than the `<body>`, be sure to have a `height` set and `overflow-y: scroll;` applied.
### Via data attributes ### Via data attributes
......
...@@ -458,7 +458,7 @@ Firefox has some awkward fieldset styling involving `width` that interferes with ...@@ -458,7 +458,7 @@ Firefox has some awkward fieldset styling involving `width` that interferes with
} }
{% endhighlight %} {% endhighlight %}
For more information, read [this Stack Overflow answer](http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685). For more information, read [this Stack Overflow answer](https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685).
{% endcallout %} {% endcallout %}
<div class="bd-example"> <div class="bd-example">
......
...@@ -45,16 +45,16 @@ Hover over the links below to see tooltips: ...@@ -45,16 +45,16 @@ Hover over the links below to see tooltips:
Four options are available: top, right, bottom, and left aligned. Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-tooltip"> <div class="bd-example bd-example-tooltip">
<div class="tooltip left" role="tooltip"> <div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div> <div class="tooltip-arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Tooltip on the left Tooltip on the top
</div> </div>
</div> </div>
<div class="tooltip top" role="tooltip"> <div class="tooltip right" role="tooltip">
<div class="tooltip-arrow"></div> <div class="tooltip-arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Tooltip on the top Tooltip on the right
</div> </div>
</div> </div>
<div class="tooltip bottom" role="tooltip"> <div class="tooltip bottom" role="tooltip">
...@@ -63,10 +63,10 @@ Four options are available: top, right, bottom, and left aligned. ...@@ -63,10 +63,10 @@ Four options are available: top, right, bottom, and left aligned.
Tooltip on the bottom Tooltip on the bottom
</div> </div>
</div> </div>
<div class="tooltip right" role="tooltip"> <div class="tooltip left" role="tooltip">
<div class="tooltip-arrow"></div> <div class="tooltip-arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Tooltip on the right Tooltip on the left
</div> </div>
</div> </div>
</div> </div>
...@@ -77,25 +77,25 @@ Hover over the buttons below to see their tooltips. ...@@ -77,25 +77,25 @@ Hover over the buttons below to see their tooltips.
<div class="bd-example tooltip-demo"> <div class="bd-example tooltip-demo">
<div class="bd-example-tooltips"> <div class="bd-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="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> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</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="left" title="Tooltip on left">Tooltip on left</button>
</div> </div>
</div> </div>
{% highlight html %} {% 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"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top Tooltip on top
</button> </button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom Tooltip on bottom
</button> </button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on right Tooltip on left
</button> </button>
{% endhighlight %} {% endhighlight %}
...@@ -210,7 +210,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ...@@ -210,7 +210,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>trigger</td> <td>trigger</td>
<td>string</td> <td>string</td>
<td>'hover focus'</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> <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
</tr> </tr>
<tr> <tr>
<td>viewport</td> <td>viewport</td>
......
...@@ -163,7 +163,7 @@ ...@@ -163,7 +163,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
......
...@@ -177,10 +177,10 @@ ...@@ -177,10 +177,10 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! --> <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../../assets/js/vendor/holder.js"></script> <script src="../../assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body> </body>
......
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
......
...@@ -231,10 +231,10 @@ ...@@ -231,10 +231,10 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! --> <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../../assets/js/vendor/holder.js"></script> <script src="../../assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body> </body>
......
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>
...@@ -37,9 +37,8 @@ body { ...@@ -37,9 +37,8 @@ body {
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(0%, #f5f5f5), to(#e5e5e5)); background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
background-image: linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE9 */
background-repeat: repeat-x; /* Repeat the gradient */ background-repeat: repeat-x; /* Repeat the gradient */
border-bottom: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5;
} }
......
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="offcanvas.js"></script> <script src="offcanvas.js"></script>
</body> </body>
......
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>
...@@ -42,11 +42,11 @@ ...@@ -42,11 +42,11 @@
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
<li class="divider"></li> <li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li> <li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li> <li><a href="#">One more separated link</a></li>
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="tooltip-viewport.js"></script> <script src="tooltip-viewport.js"></script>
</body> </body>
......
...@@ -7,9 +7,8 @@ Stay up to date on the development of Bootstrap and reach out to the community w ...@@ -7,9 +7,8 @@ Stay up to date on the development of Bootstrap and reach out to the community w
- Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com/). - Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com/).
- Chat with fellow Bootstrappers using IRC in the `irc.freenode.net` server, in the [##twitter-bootstrap channel](irc://irc.freenode.net/%23twitter-bootstrap). - Chat with fellow Bootstrappers using IRC in the `irc.freenode.net` server, in the [##twitter-bootstrap channel](irc://irc.freenode.net/%23twitter-bootstrap).
- For help using Bootstrap, ask on [StackOverflow using the tag `twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3). - For help using Bootstrap, ask on [StackOverflow using the tag `twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3).
- Find inspiring examples of people building with Bootstrap at the [Bootstrap Expo](http://expo.getbootstrap.com). - Find inspiring examples of people building with Bootstrap at the [Bootstrap Expo](http://expo.getbootstrap.com).
- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability. - Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
You can also follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap) for the latest gossip and awesome music videos. You can also follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap) for the latest gossip and awesome music videos.
...@@ -12,7 +12,7 @@ Bootstrap uses [Grunt](http://gruntjs.com) for its build system, with convenient ...@@ -12,7 +12,7 @@ Bootstrap uses [Grunt](http://gruntjs.com) for its build system, with convenient
## Install Grunt ## Install Grunt
**To install Grunt, you must first [download and install node.js](http://nodejs.org/download/)** (which includes npm). npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js. **To install Grunt, you must first [download and install node.js](https://nodejs.org/download/)** (which includes npm). npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js.
From the command line: From the command line:
...@@ -22,7 +22,7 @@ From the command line: ...@@ -22,7 +22,7 @@ From the command line:
When completed, you'll be able to run the various Grunt commands provided from the command line. When completed, you'll be able to run the various Grunt commands provided from the command line.
**Unfamiliar with npm? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding. **Unfamiliar with npm? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js. [Download and install node.js](https://nodejs.org/download/) before proceeding.
[install-ruby]: https://www.ruby-lang.org/en/documentation/installation/ [install-ruby]: https://www.ruby-lang.org/en/documentation/installation/
[gembundler]: http://bundler.io/ [gembundler]: http://bundler.io/
......
...@@ -33,7 +33,7 @@ bootstrap/ ...@@ -33,7 +33,7 @@ bootstrap/
└── bootstrap.min.js └── bootstrap.min.js
{% endhighlight %} {% endhighlight %}
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/chrome-developer-tools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
## Bootstrap source code ## Bootstrap source code
......
...@@ -36,13 +36,13 @@ Need only a part of Bootstrap's CSS or JS? Use one of the custom builds to snag ...@@ -36,13 +36,13 @@ Need only a part of Bootstrap's CSS or JS? Use one of the custom builds to snag
Compiled and minified CSS and JavaScript. No docs or original source files are included. Compiled and minified CSS and JavaScript. No docs or original source files are included.
<a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a> <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
## Download source and docs ## Download source and docs
Source Sass, JavaScript, and documentation. **Requires a Sass compiler and [some setup](../compiling).** Source Sass, JavaScript, and documentation. **Requires a Sass compiler and [some setup](../compiling).**
<a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a> <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
## Package managers ## Package managers
...@@ -73,6 +73,8 @@ $ meteor add twbs:bootstrap ...@@ -73,6 +73,8 @@ $ meteor add twbs:bootstrap
### Composer ### Composer
You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using [Composer](https://getcomposer.org):
{% highlight bash %} {% highlight bash %}
$ composer require twbs/bootstrap $ composer require twbs/bootstrap
{% endhighlight %} {% endhighlight %}
......
...@@ -131,13 +131,15 @@ Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> a ...@@ -131,13 +131,15 @@ Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> a
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. 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. See [this StackOverflow question](https://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 Phone 8 ## Internet Explorer 10 in Windows Phone 8
Internet Explorer 10 in 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) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**. Internet Explorer 10 in 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) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**.
{% highlight js %} {% highlight js %}
// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) { if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style') var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild( msViewportStyle.appendChild(
...@@ -198,7 +200,7 @@ Out of the box, Android 4.1 (and even some newer releases apparently) ship with ...@@ -198,7 +200,7 @@ Out of the box, Android 4.1 (and even some newer releases apparently) ship with
#### Select menu #### 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. 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](https://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 %} {% highlight html %}
<script> <script>
......
...@@ -24,10 +24,9 @@ Copy the HTML below to begin working with a minimal Bootstrap document. ...@@ -24,10 +24,9 @@ Copy the HTML below to begin working with a minimal Bootstrap document.
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed --> <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
</body> </body>
</html> </html>
{% endhighlight %} {% endhighlight %}
...@@ -7,7 +7,7 @@ While we don't officially support any third party plugins or add-ons, we do offe ...@@ -7,7 +7,7 @@ While we don't officially support any third party plugins or add-ons, we do offe
## Box-sizing ## Box-sizing
Some third-party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. These widgets expect the box model to be `content-box` instead. Learn more about [box model and sizing at CSS Tricks](http://css-tricks.com/box-sizing/). Some third-party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. These widgets expect the box model to be `content-box` instead. Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
You can deal with this conflict by overriding the box model back to `content-box` just for the third-party widget's section of the page: You can deal with this conflict by overriding the box model back to `content-box` just for the third-party widget's section of the page:
......
/*!
* Bootstrap Grunt task for the CommonJS module generation
* http://getbootstrap.com
* Copyright 2014-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
'use strict'; 'use strict';
var fs = require('fs'); var fs = require('fs');
...@@ -15,8 +22,7 @@ module.exports = function generateCommonJSModule(grunt, srcFiles, destFilepath) ...@@ -15,8 +22,7 @@ module.exports = function generateCommonJSModule(grunt, srcFiles, destFilepath)
var moduleOutputJs = COMMONJS_BANNER + srcFiles.map(srcPathToDestRequire).join('\n'); var moduleOutputJs = COMMONJS_BANNER + srcFiles.map(srcPathToDestRequire).join('\n');
try { try {
fs.writeFileSync(destFilepath, moduleOutputJs); fs.writeFileSync(destFilepath, moduleOutputJs);
} } catch (err) {
catch (err) {
grunt.fail.warn(err); grunt.fail.warn(err);
} }
grunt.log.writeln('File ' + destFilepath.cyan + ' created.'); grunt.log.writeln('File ' + destFilepath.cyan + ' created.');
......
{ {
"paths": { "paths": {
"docsJs": [ "docsJs": [
"../assets/js/vendor/holder.min.js",
"assets/js/vendor/holder.js",
"assets/js/vendor/jekyll-search.js", "assets/js/vendor/jekyll-search.js",
"assets/js/vendor/ZeroClipboard.min.js", "../assets/js/vendor/ZeroClipboard.min.js",
"assets/js/vendor/anchor.js", "../assets/js/vendor/anchor.js",
"assets/js/src/application.js" "../assets/js/src/application.js"
] ]
}, },
"config": { "config": {
......
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
{ {
browserName: "iphone", browserName: "iphone",
platform: "OS X 10.10", platform: "OS X 10.10",
version: "8.1" version: "8.2"
}, },
# iOS Chrome not currently supported by Sauce Labs # iOS Chrome not currently supported by Sauce Labs
......
...@@ -186,7 +186,7 @@ $(function () { ...@@ -186,7 +186,7 @@ $(function () {
+ '<li><a href="#menu1">Menu 1</a></li>' + '<li><a href="#menu1">Menu 1</a></li>'
+ '<li class="dropdown" id="testmenu">' + '<li class="dropdown" id="testmenu">'
+ '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>' + '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>'
+ '<ul class="dropdown-menu" role="menu">' + '<ul class="dropdown-menu">'
+ '<li><a href="#sub1">Submenu 1</a></li>' + '<li><a href="#sub1">Submenu 1</a></li>'
+ '</ul>' + '</ul>'
+ '</li>' + '</li>'
...@@ -293,7 +293,7 @@ $(function () { ...@@ -293,7 +293,7 @@ $(function () {
var dropdownHTML = '<ul class="tabs">' var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">' + '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu" role="menu">' + '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>' + '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>' + '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"/>' + '<li class="divider"/>'
...@@ -333,7 +333,7 @@ $(function () { ...@@ -333,7 +333,7 @@ $(function () {
var dropdownHTML = '<ul class="tabs">' var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">' + '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu" role="menu">' + '<ul class="dropdown-menu">'
+ '<li class="disabled"><a href="#">Disabled link</a></li>' + '<li class="disabled"><a href="#">Disabled link</a></li>'
+ '<li><a href="#">Another link</a></li>' + '<li><a href="#">Another link</a></li>'
+ '</ul>' + '</ul>'
...@@ -355,7 +355,7 @@ $(function () { ...@@ -355,7 +355,7 @@ $(function () {
assert.expect(1) assert.expect(1)
var dropdownHTML = '<div class="btn-group">' var dropdownHTML = '<div class="btn-group">'
+ '<button type="button" data-toggle="dropdown">Dropdown</button>' + '<button type="button" data-toggle="dropdown">Dropdown</button>'
+ '<ul class="dropdown-menu" role="menu">' + '<ul class="dropdown-menu">'
+ '<li><input id="textField" type="text" /></li>' + '<li><input id="textField" type="text" /></li>'
+ '</ul>' + '</ul>'
+ '</div>' + '</div>'
...@@ -374,7 +374,7 @@ $(function () { ...@@ -374,7 +374,7 @@ $(function () {
assert.expect(1) assert.expect(1)
var dropdownHTML = '<div class="btn-group">' var dropdownHTML = '<div class="btn-group">'
+ '<button type="button" data-toggle="dropdown">Dropdown</button>' + '<button type="button" data-toggle="dropdown">Dropdown</button>'
+ '<ul class="dropdown-menu" role="menu">' + '<ul class="dropdown-menu">'
+ '<li><textarea id="textArea"></textarea></li>' + '<li><textarea id="textArea"></textarea></li>'
+ '</ul>' + '</ul>'
+ '</div>' + '</div>'
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
...@@ -30,35 +30,41 @@ ...@@ -30,35 +30,41 @@
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<ul class="nav navbar-nav pull-left"> <ul class="nav navbar-nav pull-left">
<li class="dropdown nav-item"> <li class="dropdown nav-item">
<a id="drop1" href="#" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a id="drop1" href="#" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> Dropdown
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li> </a>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li> <ul class="dropdown-menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li> <li><a href="https://twitter.com/fat">Action</a></li>
<li role="presentation" class="divider"></li> <li><a href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li> <li><a href="https://twitter.com/fat">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="https://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown nav-item"> <li class="dropdown nav-item">
<a href="#" id="drop2" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> <a href="#" id="drop2" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> Dropdown 2
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li> </a>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li> <ul class="dropdown-menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li> <li><a href="https://twitter.com/fat">Action</a></li>
<li role="presentation" class="divider"></li> <li><a href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li> <li><a href="https://twitter.com/fat">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="https://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
<ul class="nav navbar-nav pull-right"> <ul class="nav navbar-nav pull-right">
<li id="fat-menu" class="dropdown nav-item"> <li id="fat-menu" class="dropdown nav-item">
<a href="#" id="drop3" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> <a href="#" id="drop3" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> Dropdown 3
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li> </a>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li> <ul class="dropdown-menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li> <li><a href="https://twitter.com/fat">Action</a></li>
<li role="presentation" class="divider"></li> <li><a href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li> <li><a href="https://twitter.com/fat">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="https://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
...@@ -69,23 +75,27 @@ ...@@ -69,23 +75,27 @@
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="active nav-item"><a href="#" class="nav-link">Regular link</a></li> <li class="active nav-item"><a href="#" class="nav-link">Regular link</a></li>
<li class="dropdown nav-item"> <li class="dropdown nav-item">
<a id="drop4" class="nav-link" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <a id="drop4" class="nav-link" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> Dropdown
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li> </a>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li> <ul id="menu1" class="dropdown-menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li> <li><a href="https://twitter.com/fat">Action</a></li>
<li role="presentation" class="divider"></li> <li><a href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li> <li><a href="https://twitter.com/fat">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="https://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown nav-item"> <li class="dropdown nav-item">
<a id="drop5" class="nav-link" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a> <a id="drop5" class="nav-link" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5"> Dropdown 2
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li> </a>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li> <ul id="menu2" class="dropdown-menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li> <li><a href="https://twitter.com/fat">Action</a></li>
<li role="presentation" class="divider"></li> <li><a href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li> <li><a href="https://twitter.com/fat">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="https://twitter.com/fat">Separated link</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
......
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
</div> </div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li class=""><a href="#one" tabindex="-1">one</a></li> <li class=""><a href="#one" tabindex="-1">one</a></li>
<li><a href="#two" tabindex="-1">two</a></li> <li><a href="#two" tabindex="-1">two</a></li>
<li class="divider"></li> <li role="separator" class="divider"></li>
<li><a href="#three" tabindex="-1">three</a></li> <li><a href="#three" tabindex="-1">three</a></li>
</ul> </ul>
</li> </li>
......
.reset-text() {
font-family: @font-family-base;
// We deliberately do NOT reset font-size.
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-break: auto;
line-height: @line-height-base;
text-align: left; // Fallback for where `start` is not supported
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
}
// package metadata file for Meteor.js // package metadata file for Meteor.js
/* jshint strict:false */
/* global Package:true */
Package.describe({ Package.describe({
name: 'twbs:bootstrap', // http://atmospherejs.com/twbs/bootstrap name: 'twbs:bootstrap', // http://atmospherejs.com/twbs/bootstrap
summary: 'The most popular front-end framework for developing responsive, mobile first projects on the web.', summary: 'The most popular front-end framework for developing responsive, mobile first projects on the web.',
version: '3.3.4', version: '3.3.5',
git: 'https://github.com/twbs/bootstrap.git' git: 'https://github.com/twbs/bootstrap.git'
}); });
...@@ -17,6 +20,6 @@ Package.onUse(function (api) { ...@@ -17,6 +20,6 @@ Package.onUse(function (api) {
'dist/fonts/glyphicons-halflings-regular.woff', 'dist/fonts/glyphicons-halflings-regular.woff',
'dist/fonts/glyphicons-halflings-regular.woff2', 'dist/fonts/glyphicons-halflings-regular.woff2',
'dist/css/bootstrap.css', 'dist/css/bootstrap.css',
'dist/js/bootstrap.js', 'dist/js/bootstrap.js'
], 'client'); ], 'client');
}); });
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
color: $badge-color; color: $badge-color;
line-height: $line-height-base; line-height: $line-height-base;
text-align: center; text-align: center;
vertical-align: middle;
white-space: nowrap; white-space: nowrap;
background-color: $badge-bg; background-color: $badge-bg;
@include border-radius($badge-border-radius); @include border-radius($badge-border-radius);
......
...@@ -183,11 +183,11 @@ ...@@ -183,11 +183,11 @@
border-radius: 0; border-radius: 0;
} }
&:first-child:not(:last-child) { &:first-child:not(:last-child) {
border-top-right-radius: $border-radius-base; border-top-right-radius: $btn-border-radius-base;
@include border-bottom-radius(0); @include border-bottom-radius(0);
} }
&:last-child:not(:first-child) { &:last-child:not(:first-child) {
border-bottom-left-radius: $border-radius-base; border-bottom-left-radius: $btn-border-radius-base;
@include border-top-radius(0); @include border-top-radius(0);
} }
} }
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
border: $border-width solid transparent; border: $border-width solid transparent;
@include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base); @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
&, &,
...@@ -130,14 +130,14 @@ fieldset[disabled] a.btn { ...@@ -130,14 +130,14 @@ fieldset[disabled] a.btn {
.btn-lg { .btn-lg {
// line-height: ensure even-numbered height of button next to large input // line-height: ensure even-numbered height of button next to large input
@include button-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $border-radius-lg); @include button-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
} }
.btn-sm { .btn-sm {
// line-height: ensure proper height of button next to small input // line-height: ensure proper height of button next to small input
@include button-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $border-radius-sm); @include button-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
} }
.btn-xs { .btn-xs {
@include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-xs, $line-height-sm, $border-radius-sm); @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-xs, $line-height-sm, $btn-border-radius-sm);
} }
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
@media all and (transform-3d), (-webkit-transform-3d) { @media all and (transform-3d), (-webkit-transform-3d) {
transition: transform .6s ease-in-out; transition: transform .6s ease-in-out;
backface-visibility: hidden; backface-visibility: hidden;
perspective: 1000; perspective: 1000px;
&.next, &.next,
&.active.right { &.active.right {
...@@ -128,6 +128,7 @@ ...@@ -128,6 +128,7 @@
.icon-next { .icon-next {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -10px;
z-index: 5; z-index: 5;
display: inline-block; display: inline-block;
width: 20px; width: 20px;
...@@ -144,6 +145,7 @@ ...@@ -144,6 +145,7 @@
right: 50%; right: 50%;
margin-right: -10px; margin-right: -10px;
} }
.icon-prev { .icon-prev {
&:before { &:before {
content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
......
...@@ -33,6 +33,12 @@ ...@@ -33,6 +33,12 @@
height: $input-height-base; height: $input-height-base;
} }
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
background-color: transparent;
}
// Customize the `:focus` state to imitate native WebKit styles. // Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus(); @include form-control-focus();
...@@ -91,24 +97,26 @@ ...@@ -91,24 +97,26 @@
// set a pixel line-height that matches the given height of the input, but only // set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
// @media screen and (-webkit-min-device-pixel-ratio: 0) { @media screen and (-webkit-min-device-pixel-ratio: 0) {
// input[type="date"], input[type="date"],
// input[type="time"], input[type="time"],
// input[type="datetime-local"], input[type="datetime-local"],
// input[type="month"] { input[type="month"] {
// line-height: $input-height-base; &.form-control {
line-height: $input-height-base;
// &.input-sm, }
// .input-group-sm & {
// line-height: $input-height-sm; &.input-sm,
// } .input-group-sm &.form-control {
line-height: $input-height-sm;
// &.input-lg, }
// .input-group-lg & {
// line-height: $input-height-lg; &.input-lg,
// } .input-group-lg &.form-control {
// } line-height: $input-height-lg;
// } }
}
}
// Static form control text // Static form control text
......
...@@ -179,6 +179,7 @@ ...@@ -179,6 +179,7 @@
&:last-child { &:last-child {
> .btn, > .btn,
> .btn-group { > .btn-group {
z-index: 2;
margin-left: -1px; margin-left: -1px;
} }
} }
......
...@@ -45,12 +45,13 @@ ...@@ -45,12 +45,13 @@
} }
// Linked list items // Interactive list items
// //
// Use anchor elements instead of `li`s or `div`s to create linked list items. // Use anchor or button elements instead of `li`s or `div`s to create interactive
// Includes an extra `.active` modifier class for showing selected items. // list items. Includes an extra `.active` modifier class for selected items.
a.list-group-item { a.list-group-item,
button.list-group-item {
color: $list-group-link-color; color: $list-group-link-color;
.list-group-item-heading { .list-group-item-heading {
......
...@@ -47,6 +47,11 @@ ...@@ -47,6 +47,11 @@
.media-object { .media-object {
display: block; display: block;
// Fix collapse in webkit from max-width: 100% and display: table-cell.
&.img-thumbnail {
max-width: none;
}
} }
......
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
@import "mixins/screen-reader"; @import "mixins/screen-reader";
@import "mixins/size"; @import "mixins/size";
@import "mixins/tab-focus"; @import "mixins/tab-focus";
@import "mixins/reset-text";
@import "mixins/text-emphasis"; @import "mixins/text-emphasis";
@import "mixins/text-truncate"; @import "mixins/text-truncate";
......
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
// //
// 1. Set default font family to sans-serif. // 1. Set default font family to sans-serif.
// 2. Prevent iOS text size adjust after orientation change, without disabling // 2. Prevent iOS and IE text size adjust after device orientation change,
// user zoom. // without disabling user zoom.
// //
html { html {
...@@ -71,7 +71,7 @@ audio:not([controls]) { ...@@ -71,7 +71,7 @@ audio:not([controls]) {
// //
// Address `[hidden]` styling not present in IE 8/9/10. // Address `[hidden]` styling not present in IE 8/9/10.
// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. // Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
// //
[hidden], [hidden],
...@@ -91,7 +91,8 @@ a { ...@@ -91,7 +91,8 @@ a {
} }
// //
// Improve readability when focused and also mouse hovered in all browsers. // Improve readability of focused elements when they are also in an
// active/hover state.
// //
a { a {
...@@ -213,7 +214,6 @@ figure { ...@@ -213,7 +214,6 @@ figure {
// //
hr { hr {
-moz-box-sizing: content-box;
box-sizing: content-box; box-sizing: content-box;
height: 0; height: 0;
} }
...@@ -354,15 +354,12 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -354,15 +354,12 @@ input[type="number"]::-webkit-outer-spin-button {
// //
// 1. Address `appearance` set to `searchfield` in Safari and Chrome. // 1. Address `appearance` set to `searchfield` in Safari and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome // 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
// (include `-moz` to future-proof).
// //
input[type="search"] { input[type="search"] {
-webkit-appearance: textfield; // 1 -webkit-appearance: textfield; // 1
-moz-box-sizing: content-box; box-sizing: content-box; //2
-webkit-box-sizing: content-box; // 2
box-sizing: content-box;
} }
// //
......
...@@ -79,9 +79,9 @@ ...@@ -79,9 +79,9 @@
// //
.pagination-lg { .pagination-lg {
@include pagination-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $border-radius-lg); @include pagination-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $border-radius-lg);
} }
.pagination-sm { .pagination-sm {
@include pagination-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $border-radius-sm); @include pagination-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $border-radius-sm);
} }
...@@ -11,14 +11,10 @@ ...@@ -11,14 +11,10 @@
display: block; display: block;
max-width: $popover-max-width; max-width: $popover-max-width;
padding: 1px; padding: 1px;
// Reset font and text properties given new insertion method // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
font-family: $font-family-base; // So reset our font and text properties to avoid inheriting weird values.
font-size: $font-size-base; @include reset-text();
font-weight: normal; font-size: $font-size-sm;
line-height: $line-height-base;
text-align: left;
// Overrides for proper insertion
white-space: normal;
background-color: $popover-bg; background-color: $popover-bg;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid $popover-border-color; border: 1px solid $popover-border-color;
......
...@@ -8,11 +8,10 @@ ...@@ -8,11 +8,10 @@
position: absolute; position: absolute;
z-index: $zindex-tooltip; z-index: $zindex-tooltip;
display: block; display: block;
// Reset font and text properties given new insertion method // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
font-family: $font-family-base; // So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
font-size: $font-size-sm; font-size: $font-size-sm;
font-weight: normal;
line-height: 1.4;
opacity: 0; opacity: 0;
&.in { opacity: $tooltip-opacity; } &.in { opacity: $tooltip-opacity; }
...@@ -77,7 +76,6 @@ ...@@ -77,7 +76,6 @@
padding: 3px 8px; padding: 3px 8px;
color: $tooltip-color; color: $tooltip-color;
text-align: center; text-align: center;
text-decoration: none;
background-color: $tooltip-bg; background-color: $tooltip-bg;
@include border-radius($border-radius-base); @include border-radius($border-radius-base);
} }
......
...@@ -169,6 +169,11 @@ $btn-danger-border: darken($btn-danger-bg, 5%) !default; ...@@ -169,6 +169,11 @@ $btn-danger-border: darken($btn-danger-bg, 5%) !default;
$btn-link-disabled-color: $gray-light !default; $btn-link-disabled-color: $gray-light !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius-base: $border-radius-base;
$btn-border-radius-large: $border-radius-large;
$btn-border-radius-small: $border-radius-small;
// Forms // Forms
......
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
background-color: $background; background-color: $background;
} }
a.list-group-item-#{state} { a.list-group-item-#{state},
button.list-group-item-#{state} {
color: $color; color: $color;
.list-group-item-heading { .list-group-item-heading {
......
// Pagination // Pagination
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) { @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
> li { > li {
> a, > a,
> span { > span {
padding: $padding-vertical $padding-horizontal; padding: $padding-vertical $padding-horizontal;
font-size: $font-size; font-size: $font-size;
line-height: $line-height;
} }
&:first-child { &:first-child {
> a, > a,
......
...@@ -9,7 +9,7 @@ All the tarballs are stored in S3's Reduced Redundancy Storage (RRS) storage cla ...@@ -9,7 +9,7 @@ All the tarballs are stored in S3's Reduced Redundancy Storage (RRS) storage cla
`s3_cache.py` itself never deletes cache entries; deletion should either be done manually or using automatic S3 lifecycle rules on the bucket. `s3_cache.py` itself never deletes cache entries; deletion should either be done manually or using automatic S3 lifecycle rules on the bucket.
Similar to git, `s3_cache.py` makes the assumption that [SHA-256 will effectively never have a collision](http://stackoverflow.com/questions/4014090/is-it-safe-to-ignore-the-possibility-of-sha-collisions-in-practice). Similar to git, `s3_cache.py` makes the assumption that [SHA-256 will effectively never have a collision](https://stackoverflow.com/questions/4014090/is-it-safe-to-ignore-the-possibility-of-sha-collisions-in-practice).
### For Bootstrap specifically ### For Bootstrap specifically
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment