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
restrictions:
* 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
respect the opinions of others.
......@@ -65,7 +65,7 @@ Guidelines for bug reports:
latest `master` or development branch in the repository.
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.
......@@ -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
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:
```bash
......
......@@ -492,7 +492,7 @@ module.exports = function (grunt) {
grunt.registerTask('lint-docs-js', ['jscs:assets']);
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).
// This task should be run and the updated file should be committed whenever Bootstrap's dependencies change.
......
# [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)
[![Gem version](https://img.shields.io/gem/v/bootstrap.svg?style=flat)](https://rubygems.org/gems/bootstrap)
[![Build Status](https://img.shields.io/travis/twbs/bootstrap/master.svg?style=flat)](https://travis-ci.org/twbs/bootstrap)
[![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap.svg?style=flat)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
[![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com)
![Bower version](https://img.shields.io/bower/v/bootstrap.svg)
[![npm version](https://img.shields.io/npm/v/bootstrap.svg)](https://www.npmjs.com/package/bootstrap)
[![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)
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>!
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`.
- Install with [Bower](http://bower.io): `bower install bootstrap`.
- Install with [npm](https://www.npmjs.com): `npm install bootstrap`.
......@@ -49,8 +51,7 @@ bootstrap/
└── 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
......@@ -92,12 +93,13 @@ Editor preferences are available in the [editor config](https://github.com/twbs/
## 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).
- 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.
- 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.
......
......@@ -24,20 +24,14 @@ repo: https://github.com/twbs/bootstrap
sass_repo: https://github.com/twbs/bootstrap-sass
download:
source: https://github.com/twbs/bootstrap/archive/v3.3.4.zip
dist: https://github.com/twbs/bootstrap/releases/download/v3.3.4/bootstrap-3.3.4-dist.zip
sass: https://github.com/twbs/bootstrap-sass/archive/v3.3.4.tar.gz
source: https://github.com/twbs/bootstrap/archive/v3.3.5.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.5.tar.gz
blog: http://blog.getbootstrap.com
expo: http://expo.getbootstrap.com
cdn:
css: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
js: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
jquery: //code.jquery.com/jquery-2.1.1.min.js
bug:
firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=
webkit: https://bugs.webkit.org/show_bug.cgi?id=
chrome: https://code.google.com/p/chromium/issues/detail?id=
github: https://github.com/twbs/bootstrap/issues/
css: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
css_theme: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css
js: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
@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",
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
"version": "3.3.4",
"keywords": [
"css",
"js",
......@@ -13,9 +12,10 @@
"web"
],
"homepage": "http://getbootstrap.com",
"license": "MIT",
"moduleType": "globals",
"main": [
"scss/bootstrap.scss",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
],
"ignore": [
......
......@@ -88,6 +88,16 @@
origin: >
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: >
Chrome
......@@ -128,6 +138,16 @@
origin: >
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: >
Chrome (Windows & Linux)
......@@ -138,6 +158,16 @@
origin: >
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: >
Safari (OS X)
......@@ -200,6 +230,26 @@
origin: >
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: >
Safari (iOS)
......
......@@ -26,7 +26,7 @@
- name: Korean
code: ko
description: Bootstrap 한국어
url: http://bootstrapk.com/BS3/
url: http://bootstrapk.com/
- name: Russian
code: ru
......
......@@ -35,7 +35,7 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- 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 %}
<script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
......
<div class="bd-social">
<ul class="bd-social-buttons">
<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>
<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 class="follow-btn">
<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
<div class="list-group bd-team">
{% for member in site.data.core-team %}
<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 }}">
<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>
</a>
</div>
......
......@@ -2,10 +2,10 @@
// 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
* 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.
(function () {
......@@ -23,8 +23,8 @@
function actualNonEmulatedIEMajorVersion() {
// 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
// @cc_on docs: http://msdn.microsoft.com/en-us/library/ie/8ka90k2e(v=vs.94).aspx
// IE JavaScript conditional compilation docs: https://msdn.microsoft.com/library/121hztk3%28v=vs.94%29.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
if (jscriptVersion === undefined) {
return 11 // IE11+ not in emulation mode
......
/*!
* IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/.
* Copyright 2014-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// See the Getting Started docs for more information:
......@@ -20,4 +19,5 @@
)
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
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">
<table class="bd-browser-bugs table table-bordered table-hover">
<thead>
......
This diff is collapsed.
......@@ -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>
<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
</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>
</ul>
......@@ -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>
<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
</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>
</ul>
......@@ -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>
<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
</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>
</ul>
</div>
<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
</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>
</ul>
</div>
<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
</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>
</ul>
......
......@@ -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)`.
**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.
{% example html %}
......@@ -199,7 +201,7 @@ Toggles push state. Gives the button the appearance that it has been activated.
#### $().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)
......
......@@ -80,7 +80,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
</div>
</div>
<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">
<h3>Third slide label</h3>
<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
{% example html %}
<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
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Action</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<a href="#">Action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Another action</a>
<li>
<a href="#">Another action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Something else here</a>
<li>
<a href="#">Something else here</a>
</li>
</ul>
</div>
......@@ -44,7 +44,7 @@ Dropdowns are automatically positioned via CSS within the normal flow of the doc
{% endcallout %}
{% 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>
{% endhighlight %}
......@@ -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.
{% example html %}
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Action</a>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header</li>
<li>
<a href="#">Action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Another action</a>
<li>
<a href="#">Another action</a>
</li>
</ul>
{% endexample %}
......@@ -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.
{% example html %}
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Action</a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Another action</a>
<li>
<a href="#">Another action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Something else here</a>
<li>
<a href="#">Something else here</a>
</li>
<li role="presentation" class="dropdown-divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
<li class="dropdown-divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
{% endexample %}
......@@ -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.
{% example html %}
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Regular link</a>
<ul class="dropdown-menu">
<li>
<a href="#">Regular link</a>
</li>
<li role="presentation" class="disabled">
<a role="menuitem" tabindex="-1" href="#">Disabled link</a>
<li class="disabled">
<a href="#">Disabled link</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Another link</a>
<li>
<a href="#">Another link</a>
</li>
</ul>
{% endexample %}
......@@ -119,11 +119,10 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
{% highlight html %}
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
......@@ -133,12 +132,11 @@ To keep URLs intact with link buttons, use the `data-target` attribute instead o
{% highlight html %}
<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
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
......
......@@ -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.
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)
......@@ -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.
**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
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
<ul class="dropdown-menu" role="menu">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
......@@ -126,12 +128,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
......@@ -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-btn">
<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>
</button>
<ul class="dropdown-menu" role="menu">
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
......@@ -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">
<div class="input-group-btn">
<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>
</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="#">Another action</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>
</ul>
</div>
......
......@@ -60,6 +60,20 @@ Linkify list group items by using anchor tags instead of list items (that also m
</div>
{% 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
Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
......
......@@ -19,7 +19,7 @@ $('#myModal').on('shown.bs.modal', function () {
{% endhighlight %}
{% 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.
{% endcallout %}
......@@ -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="modal">
<div class="modal-dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<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>
{% highlight html %}
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<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>
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
......@@ -147,7 +147,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
<!-- Modal -->
<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-header">
<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
{% callout warning %}
#### 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`.
{% endcallout %}
......@@ -267,7 +267,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
{% example html %}
<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-header">
<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
<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>
<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-header">
<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
{% example html %}
<ul class="nav nav-tabs">
<li class="nav-item active" role="presentation">
<li class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li class="nav-item" role="presentation">
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item" role="presentation">
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled" role="presentation">
<li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
......@@ -73,16 +73,16 @@ Take that same HTML, but use `.nav-pills` instead:
{% example html %}
<ul class="nav nav-pills">
<li class="nav-item active" role="presentation">
<li class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li class="nav-item" role="presentation">
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item" role="presentation">
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled" role="presentation">
<li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
......@@ -94,16 +94,16 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
{% example html %}
<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>
</li>
<li class="nav-item" role="presentation">
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item" role="presentation">
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled" role="presentation">
<li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
......@@ -117,23 +117,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %}
<ul class="nav nav-tabs">
<li class="nav-item active" role="presentation">
<li class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" role="menu">
<li class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item" role="presentation">
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled" role="presentation">
<li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
......@@ -143,23 +143,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %}
<ul class="nav nav-pills">
<li class="nav-item active" role="presentation">
<li class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" role="menu">
<li class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item" role="presentation">
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled" role="presentation">
<li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
......@@ -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">
<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>
</li>
<li role="presentation">
<li>
<a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a>
</li>
<li role="presentation" class="dropdown">
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="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="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
<ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
<li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
<li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
</ul>
</li>
</ul>
......@@ -212,10 +211,10 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
{% highlight html %}
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" 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 role="presentation"><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 class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
......@@ -269,16 +268,16 @@ Activates a tab element and content container. Tab should have either a `data-ta
{% highlight html %}
<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>
</li>
<li role="presentation">
<li>
<a href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
</li>
<li role="presentation">
<li>
<a href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a>
</li>
<li role="presentation">
<li>
<a href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a>
</li>
</ul>
......@@ -343,4 +342,3 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous active tab
})
{% endhighlight %}
......@@ -93,37 +93,37 @@ Four options are available: top, right, bottom, and left aligned.
<div class="bd-example popover-demo">
<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.">
Popover on top
</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.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
<button 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>
</div>
</div>
{% highlight html %}
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="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.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
<button 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>
{% endhighlight %}
......@@ -249,7 +249,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>trigger</td>
<td>string</td>
<td>'click'</td>
<td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
<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>
<td>viewport</td>
......
......@@ -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="#mdo">@mdo</a></li>
<li class="dropdown">
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
<li><a href="#one" tabindex="-1">one</a></li>
<li><a href="#two" tabindex="-1">two</a></li>
<li class="divider"></li>
<li><a href="#three" tabindex="-1">three</a></li>
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDrop1">
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li role="separator" class="divider"></li>
<li><a href="#three">three</a></li>
</ul>
</li>
</ul>
......@@ -66,7 +68,7 @@ Scrollspy currently requires the use of a [Bootstrap nav component](/components/
### 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
......
......@@ -458,7 +458,7 @@ Firefox has some awkward fieldset styling involving `width` that interferes with
}
{% 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 %}
<div class="bd-example">
......
......@@ -45,16 +45,16 @@ Hover over the links below to see tooltips:
Four options are available: top, right, bottom, and left aligned.
<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-inner">
Tooltip on the left
Tooltip on the top
</div>
</div>
<div class="tooltip top" role="tooltip">
<div class="tooltip right" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the top
Tooltip on the right
</div>
</div>
<div class="tooltip bottom" role="tooltip">
......@@ -63,10 +63,10 @@ Four options are available: top, right, bottom, and left aligned.
Tooltip on the bottom
</div>
</div>
<div class="tooltip right" role="tooltip">
<div class="tooltip left" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the right
Tooltip on the left
</div>
</div>
</div>
......@@ -77,25 +77,25 @@ Hover over the buttons below to see their tooltips.
<div class="bd-example tooltip-demo">
<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="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="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>
{% highlight html %}
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="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="right" title="Tooltip on right">
Tooltip on right
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
{% endhighlight %}
......@@ -210,7 +210,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>trigger</td>
<td>string</td>
<td>'hover focus'</td>
<td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
<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>
<td>viewport</td>
......
......@@ -163,7 +163,7 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- 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>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
......
......@@ -177,10 +177,10 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- 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>
<!-- 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 -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
......
......@@ -63,7 +63,7 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- 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>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
......
......@@ -231,10 +231,10 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- 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>
<!-- 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 -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
......
......@@ -78,7 +78,7 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- 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>
</body>
</html>
......@@ -37,9 +37,8 @@ body {
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: -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(top, #f5f5f5 0%, #e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE9 */
background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-repeat: repeat-x; /* Repeat the gradient */
border-bottom: 1px solid #d5d5d5;
}
......
......@@ -52,7 +52,7 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- 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>
</body>
</html>
......@@ -117,7 +117,7 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- 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="offcanvas.js"></script>
</body>
......
......@@ -51,7 +51,7 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- 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>
</body>
</html>
......@@ -42,11 +42,11 @@
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<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="#">Another action</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><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
......@@ -76,7 +76,7 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- 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>
</body>
</html>
......@@ -42,7 +42,7 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- 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="tooltip-viewport.js"></script>
</body>
......
......@@ -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/).
- 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).
- 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.
......@@ -12,7 +12,7 @@ Bootstrap uses [Grunt](http://gruntjs.com) for its build system, with convenient
## 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:
......@@ -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.
**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/
[gembundler]: http://bundler.io/
......
......@@ -33,7 +33,7 @@ bootstrap/
└── bootstrap.min.js
{% 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
......
......@@ -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.
<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
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
......@@ -73,6 +73,8 @@ $ meteor add twbs:bootstrap
### Composer
You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using [Composer](https://getcomposer.org):
{% highlight bash %}
$ composer require twbs/bootstrap
{% endhighlight %}
......
......@@ -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.
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 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 %}
// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
......@@ -198,7 +200,7 @@ Out of the box, Android 4.1 (and even some newer releases apparently) ship with
#### 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 %}
<script>
......
......@@ -24,10 +24,9 @@ Copy the HTML below to begin working with a minimal Bootstrap document.
<h1>Hello, world!</h1>
<!-- 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 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
{% endhighlight %}
......@@ -7,7 +7,7 @@ While we don't officially support any third party plugins or add-ons, we do offe
## 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:
......
/*!
* 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';
var fs = require('fs');
......@@ -15,8 +22,7 @@ module.exports = function generateCommonJSModule(grunt, srcFiles, destFilepath)
var moduleOutputJs = COMMONJS_BANNER + srcFiles.map(srcPathToDestRequire).join('\n');
try {
fs.writeFileSync(destFilepath, moduleOutputJs);
}
catch (err) {
} catch (err) {
grunt.fail.warn(err);
}
grunt.log.writeln('File ' + destFilepath.cyan + ' created.');
......
{
"paths": {
"docsJs": [
"assets/js/vendor/holder.js",
"../assets/js/vendor/holder.min.js",
"assets/js/vendor/jekyll-search.js",
"assets/js/vendor/ZeroClipboard.min.js",
"assets/js/vendor/anchor.js",
"assets/js/src/application.js"
"../assets/js/vendor/ZeroClipboard.min.js",
"../assets/js/vendor/anchor.js",
"../assets/js/src/application.js"
]
},
"config": {
......
......@@ -46,7 +46,7 @@
{
browserName: "iphone",
platform: "OS X 10.10",
version: "8.1"
version: "8.2"
},
# iOS Chrome not currently supported by Sauce Labs
......
......@@ -186,7 +186,7 @@ $(function () {
+ '<li><a href="#menu1">Menu 1</a></li>'
+ '<li class="dropdown" id="testmenu">'
+ '<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>'
+ '</ul>'
+ '</li>'
......@@ -293,7 +293,7 @@ $(function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<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="#">Something else here</a></li>'
+ '<li class="divider"/>'
......@@ -333,7 +333,7 @@ $(function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<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><a href="#">Another link</a></li>'
+ '</ul>'
......@@ -355,7 +355,7 @@ $(function () {
assert.expect(1)
var dropdownHTML = '<div class="btn-group">'
+ '<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>'
+ '</ul>'
+ '</div>'
......@@ -374,7 +374,7 @@ $(function () {
assert.expect(1)
var dropdownHTML = '<div class="btn-group">'
+ '<button type="button" data-toggle="dropdown">Dropdown</button>'
+ '<ul class="dropdown-menu" role="menu">'
+ '<ul class="dropdown-menu">'
+ '<li><textarea id="textArea"></textarea></li>'
+ '</ul>'
+ '</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 @@
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<ul class="nav navbar-nav pull-left">
<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>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
<a id="drop1" href="#" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="drop1">
<li><a href="https://twitter.com/fat">Action</a></li>
<li><a href="https://twitter.com/fat">Another action</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>
</li>
<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>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
<a href="#" id="drop2" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown 2
</a>
<ul class="dropdown-menu" aria-labelledby="drop2">
<li><a href="https://twitter.com/fat">Action</a></li>
<li><a href="https://twitter.com/fat">Another action</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>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<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>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
<a href="#" id="drop3" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown 3
</a>
<ul class="dropdown-menu" aria-labelledby="drop3">
<li><a href="https://twitter.com/fat">Action</a></li>
<li><a href="https://twitter.com/fat">Another action</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>
</li>
</ul>
......@@ -69,23 +75,27 @@
<ul class="nav nav-pills">
<li class="active nav-item"><a href="#" class="nav-link">Regular link</a></li>
<li class="dropdown nav-item">
<a id="drop4" class="nav-link" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
<a id="drop4" class="nav-link" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul id="menu1" class="dropdown-menu" aria-labelledby="drop4">
<li><a href="https://twitter.com/fat">Action</a></li>
<li><a href="https://twitter.com/fat">Another action</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>
</li>
<li class="dropdown nav-item">
<a id="drop5" class="nav-link" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
<a id="drop5" class="nav-link" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
Dropdown 2
</a>
<ul id="menu2" class="dropdown-menu" aria-labelledby="drop5">
<li><a href="https://twitter.com/fat">Action</a></li>
<li><a href="https://twitter.com/fat">Another action</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>
</li>
</ul>
......
......@@ -55,7 +55,7 @@
</div>
<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-header">
......
......@@ -33,7 +33,7 @@
<ul class="dropdown-menu" role="menu">
<li class=""><a href="#one" tabindex="-1">one</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>
</ul>
</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
/* jshint strict:false */
/* global Package:true */
Package.describe({
name: 'twbs:bootstrap', // http://atmospherejs.com/twbs/bootstrap
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'
});
......@@ -17,6 +20,6 @@ Package.onUse(function (api) {
'dist/fonts/glyphicons-halflings-regular.woff',
'dist/fonts/glyphicons-halflings-regular.woff2',
'dist/css/bootstrap.css',
'dist/js/bootstrap.js',
'dist/js/bootstrap.js'
], 'client');
});
......@@ -14,6 +14,7 @@
color: $badge-color;
line-height: $line-height-base;
text-align: center;
vertical-align: middle;
white-space: nowrap;
background-color: $badge-bg;
@include border-radius($badge-border-radius);
......
......@@ -183,11 +183,11 @@
border-radius: 0;
}
&: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);
}
&: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);
}
}
......
......@@ -17,7 +17,7 @@
cursor: pointer;
user-select: none;
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;
&,
......@@ -130,14 +130,14 @@ fieldset[disabled] a.btn {
.btn-lg {
// 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 {
// 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 {
@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 @@
@media all and (transform-3d), (-webkit-transform-3d) {
transition: transform .6s ease-in-out;
backface-visibility: hidden;
perspective: 1000;
perspective: 1000px;
&.next,
&.active.right {
......@@ -128,6 +128,7 @@
.icon-next {
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 5;
display: inline-block;
width: 20px;
......@@ -144,6 +145,7 @@
right: 50%;
margin-right: -10px;
}
.icon-prev {
&:before {
content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
......
......@@ -33,6 +33,12 @@
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.
@include form-control-focus();
......@@ -91,24 +97,26 @@
// 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
// @media screen and (-webkit-min-device-pixel-ratio: 0) {
// input[type="date"],
// input[type="time"],
// input[type="datetime-local"],
// input[type="month"] {
// line-height: $input-height-base;
// &.input-sm,
// .input-group-sm & {
// line-height: $input-height-sm;
// }
// &.input-lg,
// .input-group-lg & {
// line-height: $input-height-lg;
// }
// }
// }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
&.form-control {
line-height: $input-height-base;
}
&.input-sm,
.input-group-sm &.form-control {
line-height: $input-height-sm;
}
&.input-lg,
.input-group-lg &.form-control {
line-height: $input-height-lg;
}
}
}
// Static form control text
......
......@@ -179,6 +179,7 @@
&:last-child {
> .btn,
> .btn-group {
z-index: 2;
margin-left: -1px;
}
}
......
......@@ -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.
// Includes an extra `.active` modifier class for showing selected items.
// Use anchor or button elements instead of `li`s or `div`s to create interactive
// 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;
.list-group-item-heading {
......
......@@ -47,6 +47,11 @@
.media-object {
display: block;
// Fix collapse in webkit from max-width: 100% and display: table-cell.
&.img-thumbnail {
max-width: none;
}
}
......
......@@ -35,6 +35,7 @@
@import "mixins/screen-reader";
@import "mixins/size";
@import "mixins/tab-focus";
@import "mixins/reset-text";
@import "mixins/text-emphasis";
@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.
// 2. Prevent iOS text size adjust after orientation change, without disabling
// user zoom.
// 2. Prevent iOS and IE text size adjust after device orientation change,
// without disabling user zoom.
//
html {
......@@ -71,7 +71,7 @@ audio:not([controls]) {
//
// 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],
......@@ -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 {
......@@ -213,7 +214,6 @@ figure {
//
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
......@@ -354,15 +354,12 @@ input[type="number"]::-webkit-outer-spin-button {
//
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome
// (include `-moz` to future-proof).
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
//
input[type="search"] {
-webkit-appearance: textfield; // 1
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // 2
box-sizing: content-box;
box-sizing: content-box; //2
}
//
......
......@@ -79,9 +79,9 @@
//
.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 {
@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 @@
display: block;
max-width: $popover-max-width;
padding: 1px;
// Reset font and text properties given new insertion method
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: normal;
line-height: $line-height-base;
text-align: left;
// Overrides for proper insertion
white-space: normal;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
font-size: $font-size-sm;
background-color: $popover-bg;
background-clip: padding-box;
border: 1px solid $popover-border-color;
......
......@@ -8,11 +8,10 @@
position: absolute;
z-index: $zindex-tooltip;
display: block;
// Reset font and text properties given new insertion method
font-family: $font-family-base;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
font-size: $font-size-sm;
font-weight: normal;
line-height: 1.4;
opacity: 0;
&.in { opacity: $tooltip-opacity; }
......@@ -77,7 +76,6 @@
padding: 3px 8px;
color: $tooltip-color;
text-align: center;
text-decoration: none;
background-color: $tooltip-bg;
@include border-radius($border-radius-base);
}
......
......@@ -169,6 +169,11 @@ $btn-danger-border: darken($btn-danger-bg, 5%) !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
......
......@@ -6,7 +6,8 @@
background-color: $background;
}
a.list-group-item-#{state} {
a.list-group-item-#{state},
button.list-group-item-#{state} {
color: $color;
.list-group-item-heading {
......
// 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 {
> a,
> span {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
}
&:first-child {
> a,
......
......@@ -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.
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
......
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