mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-20 17:54:23 +01:00
3.3.1
This commit is contained in:
Mark Otto
parent
79d0cdbef4
commit
46edabe554
@ -245,15 +245,18 @@
|
||||
<div class="bs-brand-logos">
|
||||
<div class="bs-brand-item">
|
||||
<h3>Bootstrap</h3>
|
||||
<span class="glyphicon glyphicon-ok"></span>
|
||||
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
|
||||
<span class="sr-only">(correct)</span>
|
||||
</div>
|
||||
<div class="bs-brand-item">
|
||||
<h3 class="text-muted">BootStrap</h3>
|
||||
<span class="glyphicon glyphicon-remove"></span>
|
||||
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
|
||||
<span class="sr-only">(incorrect)</span>
|
||||
</div>
|
||||
<div class="bs-brand-item">
|
||||
<h3 class="text-muted">Twitter Bootstrap</h3>
|
||||
<span class="glyphicon glyphicon-remove"></span>
|
||||
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
|
||||
<span class="sr-only">(incorrect)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -270,6 +273,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
@ -292,6 +296,7 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -321,7 +326,7 @@
|
||||
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="bs-docs-footer-links muted">
|
||||
<li>Currently v3.3.0</li>
|
||||
<li>Currently v3.3.1</li>
|
||||
<li>·</li>
|
||||
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
|
||||
<li>·</li>
|
||||
|
||||
2
assets/css/docs.min.css
vendored
2
assets/css/docs.min.css
vendored
File diff suppressed because one or more lines are too long
@ -437,7 +437,7 @@ body {
|
||||
color: #333;
|
||||
}
|
||||
.bs-docs-featurette-img:hover {
|
||||
color: #428bca;
|
||||
color: #337ab7;
|
||||
text-decoration: none;
|
||||
}
|
||||
.bs-docs-featurette-img img {
|
||||
@ -771,7 +771,7 @@ h1[id] {
|
||||
background-color: #eee;
|
||||
}
|
||||
.color-swatches .brand-primary {
|
||||
background-color: #428bca;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
.color-swatches .brand-success {
|
||||
background-color: #5cb85c;
|
||||
@ -829,6 +829,21 @@ h1[id] {
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Wall of Browser Bugs
|
||||
*
|
||||
* Better display for the responsive table on the Wall of Browser Bugs.
|
||||
*/
|
||||
|
||||
.bs-docs-browser-bugs td p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bs-docs-browser-bugs th:first-child {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Grid examples
|
||||
*
|
||||
|
||||
24
assets/js/customize.min.js
vendored
24
assets/js/customize.min.js
vendored
File diff suppressed because one or more lines are too long
2
assets/js/docs.min.js
vendored
2
assets/js/docs.min.js
vendored
@ -23,4 +23,4 @@ License: http://opensource.org/licenses/MIT
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
||||
* details, see http://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
!function(a){"use strict";a(function(){var b=a(window),c=a(document.body);c.scrollspy({target:".bs-docs-sidebar"}),b.on("load",function(){c.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()}),setTimeout(function(){var b=a(".bs-docs-sidebar");b.affix({offset:{top:function(){var c=b.offset().top,d=parseInt(b.children(0).css("margin-top"),10),e=a(".bs-docs-nav").height();return this.top=c-e-d},bottom:function(){return this.bottom=a(".bs-docs-footer").outerHeight(!0)}}})},100),setTimeout(function(){a(".bs-top").affix()},100),function(){var b=a("#bs-theme-stylesheet"),c=a(".bs-docs-theme-toggle"),d=function(){b.attr("href",b.attr("data-href")),c.text("Disable theme preview"),localStorage.setItem("previewTheme",!0)};localStorage.getItem("previewTheme")&&d(),c.click(function(){var a=b.attr("href");a&&0!==a.indexOf("data")?(b.attr("href",""),c.text("Preview theme"),localStorage.removeItem("previewTheme")):d()})}(),a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".popover-demo").popover({selector:'[data-toggle="popover"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-popover").popover(),a("#loading-example-btn").on("click",function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)}),a(".bs-docs-activate-animated-progressbar").on("click",function(){a(this).siblings(".progress").find(".progress-bar-striped").toggleClass("active")}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';a(this).before(b)});var d=new ZeroClipboard(a(".btn-clipboard")),e=a("#global-zeroclipboard-html-bridge");d.on("load",function(){e.data("placement","top").attr("title","Copy to clipboard").tooltip()}),d.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),d.on("complete",function(){e.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")}),d.on("noflash wrongflash",function(){e.attr("title","Flash required").tooltip("fixTitle").tooltip("show")})})}(jQuery);
|
||||
!function(a){"use strict";a(function(){var b=a(window),c=a(document.body);c.scrollspy({target:".bs-docs-sidebar"}),b.on("load",function(){c.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()}),setTimeout(function(){var b=a(".bs-docs-sidebar");b.affix({offset:{top:function(){var c=b.offset().top,d=parseInt(b.children(0).css("margin-top"),10),e=a(".bs-docs-nav").height();return this.top=c-e-d},bottom:function(){return this.bottom=a(".bs-docs-footer").outerHeight(!0)}}})},100),setTimeout(function(){a(".bs-top").affix()},100),function(){var b=a("#bs-theme-stylesheet"),c=a(".bs-docs-theme-toggle"),d=function(){b.attr("href",b.attr("data-href")),c.text("Disable theme preview"),localStorage.setItem("previewTheme",!0)};localStorage.getItem("previewTheme")&&d(),c.click(function(){var a=b.attr("href");a&&0!==a.indexOf("data")?(b.attr("href",""),c.text("Preview theme"),localStorage.removeItem("previewTheme")):d()})}(),a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".popover-demo").popover({selector:'[data-toggle="popover"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-popover").popover(),a("#loading-example-btn").on("click",function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)}),a("#exampleModal").on("show.bs.modal",function(b){var c=a(b.relatedTarget),d=c.data("whatever"),e=a(this);e.find(".modal-title").text("New message to "+d),e.find(".modal-body input").val(d)}),a(".bs-docs-activate-animated-progressbar").on("click",function(){a(this).siblings(".progress").find(".progress-bar-striped").toggleClass("active")}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';a(this).before(b)});var d=new ZeroClipboard(a(".btn-clipboard")),e=a("#global-zeroclipboard-html-bridge");d.on("load",function(){e.data("placement","top").attr("title","Copy to clipboard").tooltip()}),d.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),d.on("complete",function(){e.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")}),d.on("noflash wrongflash",function(){e.attr("title","Flash required").tooltip("fixTitle").tooltip("show")})})}(jQuery);
|
||||
6
assets/js/raw-files.min.js
vendored
6
assets/js/raw-files.min.js
vendored
File diff suppressed because one or more lines are too long
@ -109,6 +109,17 @@
|
||||
}, 3000)
|
||||
})
|
||||
|
||||
// Modal relatedTarget demo
|
||||
$('#exampleModal').on('show.bs.modal', function (event) {
|
||||
var button = $(event.relatedTarget) // Button that triggered the modal
|
||||
var recipient = button.data('whatever') // Extract info from data-* attributes
|
||||
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
|
||||
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
|
||||
var modal = $(this)
|
||||
modal.find('.modal-title').text('New message to ' + recipient)
|
||||
modal.find('.modal-body input').val(recipient)
|
||||
})
|
||||
|
||||
// Activate animated progress bar
|
||||
$('.bs-docs-activate-animated-progressbar').on('click', function () {
|
||||
$(this).siblings('.progress').find('.progress-bar-striped').toggleClass('active')
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
* details, see http://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
/* global JSZip, less, saveAs, UglifyJS, __js, __less, __fonts */
|
||||
/* global JSZip, less, autoprefixer, saveAs, UglifyJS, __configBridge, __js, __less, __fonts */
|
||||
|
||||
window.onload = function () { // wait for load in a dumb way because B-0
|
||||
'use strict';
|
||||
var cw = '/*!\n' +
|
||||
' * Bootstrap v3.3.0 (http://getbootstrap.com)\n' +
|
||||
' * Copyright 2011-2014 Twitter, Inc.\n' +
|
||||
' * Bootstrap v3.3.1 (http://getbootstrap.com)\n' +
|
||||
' * Copyright 2011-' + new Date().getFullYear() + ' Twitter, Inc.\n' +
|
||||
' * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n' +
|
||||
' */\n\n'
|
||||
|
||||
@ -22,8 +22,8 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
||||
function showError(msg, err) {
|
||||
$('<div id="bsCustomizerAlert" class="bs-customizer-alert">' +
|
||||
'<div class="container">' +
|
||||
'<a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right">×</a>' +
|
||||
'<p class="bs-customizer-alert-text"><span class="glyphicon glyphicon-warning-sign"></span>' + msg + '</p>' +
|
||||
'<a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right" aria-label="Close" role="button"><span aria-hidden="true">×</span></a>' +
|
||||
'<p class="bs-customizer-alert-text"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span><span class="sr-only">Warning:</span>' + msg + '</p>' +
|
||||
(err.extract ? '<pre class="bs-customizer-alert-extract">' + err.extract.join('\n') + '</pre>' : '') +
|
||||
'</div>' +
|
||||
'</div>').appendTo('body').alert()
|
||||
@ -32,7 +32,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
||||
|
||||
function showSuccess(msg) {
|
||||
$('<div class="bs-callout bs-callout-info">' +
|
||||
'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + msg +
|
||||
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>' + msg +
|
||||
'</div>').insertAfter('.bs-customize-download')
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
||||
}
|
||||
|
||||
function showAlert(type, msg, insertAfter) {
|
||||
$('<div class="alert alert-' + type + '">' + msg + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>')
|
||||
$('<div class="alert alert-' + type + '">' + msg + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>')
|
||||
.insertAfter(insertAfter)
|
||||
}
|
||||
|
||||
@ -251,6 +251,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
||||
}
|
||||
|
||||
function compileLESS(lessSource, baseFilename, intoResult) {
|
||||
var promise = $.Deferred()
|
||||
var parser = new less.Parser({
|
||||
paths: ['variables.less', 'mixins.less'],
|
||||
optimization: 0,
|
||||
@ -259,14 +260,18 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
||||
|
||||
parser.parse(lessSource, function (err, tree) {
|
||||
if (err) {
|
||||
return showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
|
||||
return promise.reject(err)
|
||||
}
|
||||
intoResult[baseFilename + '.css'] = cw + tree.toCSS()
|
||||
intoResult[baseFilename + '.min.css'] = cw + tree.toCSS({ compress: true })
|
||||
promise.resolve()
|
||||
})
|
||||
|
||||
return promise.promise()
|
||||
}
|
||||
|
||||
function generateCSS(preamble) {
|
||||
var promise = $.Deferred()
|
||||
var oneChecked = false
|
||||
var lessFileIncludes = {}
|
||||
$('#less-section input').each(function () {
|
||||
@ -290,14 +295,22 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
||||
var bsLessSource = preamble + generateLESS('bootstrap.less', lessFileIncludes, vars)
|
||||
var themeLessSource = preamble + generateLESS('theme.less', lessFileIncludes, vars)
|
||||
|
||||
try {
|
||||
compileLESS(bsLessSource, 'bootstrap', result)
|
||||
compileLESS(themeLessSource, 'bootstrap-theme', result)
|
||||
} catch (err) {
|
||||
return showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
|
||||
}
|
||||
var prefixer = autoprefixer({ browsers: __configBridge.autoprefixerBrowsers })
|
||||
|
||||
return result
|
||||
$.when(
|
||||
compileLESS(bsLessSource, 'bootstrap', result),
|
||||
compileLESS(themeLessSource, 'bootstrap-theme', result)
|
||||
).done(function () {
|
||||
for (var key in result) {
|
||||
result[key] = prefixer.process(result[key]).css
|
||||
}
|
||||
promise.resolve(result)
|
||||
}).fail(function (err) {
|
||||
showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
|
||||
promise.reject()
|
||||
})
|
||||
|
||||
return promise.promise()
|
||||
}
|
||||
|
||||
function uglify(js) {
|
||||
@ -319,19 +332,8 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
||||
|
||||
function generateJS(preamble) {
|
||||
var $checked = $('#plugin-section input:checked')
|
||||
var jqueryCheck = [
|
||||
'if (typeof jQuery === \'undefined\') {',
|
||||
' throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery\')',
|
||||
'}\n'
|
||||
].join('\n')
|
||||
var jqueryVersionCheck = [
|
||||
'+function ($) {',
|
||||
' var version = $.fn.jquery.split(\' \')[0].split(\'.\')',
|
||||
' if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) {',
|
||||
' throw new Error(\'Bootstrap\\\'s JavaScript requires jQuery version 1.9.1 or higher\')',
|
||||
' }',
|
||||
'}(jQuery);\n\n'
|
||||
].join('\n')
|
||||
var jqueryCheck = __configBridge.jqueryCheck.join('\n')
|
||||
var jqueryVersionCheck = __configBridge.jqueryVersionCheck.join('\n')
|
||||
|
||||
if (!$checked.length) return false
|
||||
|
||||
@ -458,9 +460,15 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
||||
' * Config saved to config.json and ' + gistUrl + '\n' +
|
||||
' */\n'
|
||||
|
||||
generateZip(generateCSS(preamble), generateJS(preamble), generateFonts(), configJson, function (blob) {
|
||||
$compileBtn.removeAttr('disabled')
|
||||
setTimeout(function () { saveAs(blob, 'bootstrap.zip') }, 0)
|
||||
$.when(
|
||||
generateCSS(preamble),
|
||||
generateJS(preamble),
|
||||
generateFonts()
|
||||
).done(function (css, js, fonts) {
|
||||
generateZip(css, js, fonts, configJson, function (blob) {
|
||||
$compileBtn.removeAttr('disabled')
|
||||
setTimeout(function () { saveAs(blob, 'bootstrap.zip') }, 0)
|
||||
})
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
16015
assets/js/vendor/autoprefixer.js
vendored
Normal file
16015
assets/js/vendor/autoprefixer.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -103,7 +103,7 @@
|
||||
<div class="container bs-docs-container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-9" role="main">
|
||||
<div class="col-md-12" role="main">
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="browser-bugs" class="page-header">Browser bugs</h1>
|
||||
|
||||
@ -111,7 +111,7 @@
|
||||
<p>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, <a href="../getting-started/#support">see our browser compatibility docs</a>.</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-hover">
|
||||
<table class="bs-docs-browser-bugs table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser(s)</th>
|
||||
@ -121,137 +121,233 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>Internet Explorer 11</td>
|
||||
<td>Hovered element still remains in <code>:hover</code> state after scrolling away</td>
|
||||
<td><a href="https://connect.microsoft.com/IE/feedback/details/926665/ie-11-hovering-over-an-element-and-then-scrolling-without-moving-the-mouse-pointer-leaves-the-element-in-hover-state">IE bug #926665</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14211">#14211</a></td>
|
||||
<td>Internet Explorer 11
|
||||
</td>
|
||||
<td><p>Hovered element still remains in <code>:hover</code> state after scrolling away.</p>
|
||||
</td>
|
||||
<td><a href="https://connect.microsoft.com/IE/feedback/details/926665">IE bug #926665</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14211">#14211</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Internet Explorer 11</td>
|
||||
<td>When hovering over a <code><select></code> menu item, the cursor for the element underneath the menu is displayed</td>
|
||||
<td><a href="https://connect.microsoft.com/IE/feedbackdetail/view/963961">IE bug #963961</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14528">#14528</a></td>
|
||||
<td>Internet Explorer 11
|
||||
</td>
|
||||
<td><p>When hovering over a <code><select></code> menu item, the cursor for the element underneath the menu is displayed.</p>
|
||||
</td>
|
||||
<td><a href="https://connect.microsoft.com/IE/feedback/details/963961">IE bug #963961</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14528">#14528</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td><code>.table-bordered</code> with an empty <code><tbody></code> is missing borders</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023761">Mozilla bug #1023761</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/13453">#13453</a></td>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p><code>.table-bordered</code> with an empty <code><tbody></code> is missing borders.</p>
|
||||
</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023761">Mozilla bug #1023761</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/13453">#13453</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td><code>max-width: 100%;</code> doesn't work inside tables</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=975632">Mozilla bug #975632</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/10690">#10690</a></td>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p><code>max-width: 100%;</code> doesn’t work inside tables.</p>
|
||||
</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=975632">Mozilla bug #975632</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/10690">#10690</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td>Java applets that are descendants of elements with forced hardware acceleration using <code>translate3d(0,0,0)</code> are invisible on Windows</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1048279">Mozilla bug #1048279</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14124">#14124</a></td>
|
||||
<td>Firefox (Windows)
|
||||
</td>
|
||||
<td><p>Java applets that are descendants of elements with forced hardware acceleration using <code>translate3d(0,0,0)</code> are invisible.</p>
|
||||
</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1048279">Mozilla bug #1048279</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14124">#14124</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td>Button elements with <code>width: 100%</code> become cropped in long tables.</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1060131">Mozilla bug #1060131</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14320">#14320</a></td>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p>Button elements with <code>width: 100%</code> become cropped in long tables.</p>
|
||||
</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1060131">Mozilla bug #1060131</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14320">#14320</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td>If the disabled state of a form control is changed via JavaScript, the normal state doesn't return after refreshing the page.</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/793">#793</a></td>
|
||||
<td>Firefox
|
||||
</td>
|
||||
<td><p>If the disabled state of a form control is changed via JavaScript, the normal state doesn’t return after refreshing the page.</p>
|
||||
</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/793">#793</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td>Clicking above <code><input type="number"></code> increment button flashes the decrement button</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=419108"></a></td>
|
||||
<td>Offshoot of <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a> & <a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a></td>
|
||||
<td>Chrome (OS X)
|
||||
</td>
|
||||
<td><p>Clicking above <code><input type="number"></code> increment button flashes the decrement button.</p>
|
||||
</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=419108">Chromium issue #419108</a>
|
||||
</td>
|
||||
<td>Offshoot of <a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a> & <a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td><code>display: table;</code> within <code>display: block;</code> forces sibling content to new line</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=309483">Chromium issue #309483</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/9950">#9950</a></td>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p><code>display: table;</code> within <code>display: block;</code> forces sibling content to new line.</p>
|
||||
</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=309483">Chromium issue #309483</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/9950">#9950</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td>Incorrect viewport size used for media queries when printing</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=273306">Chromium issue #273306</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/12078">#12078</a></td>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>Incorrect viewport size used for media queries when printing.</p>
|
||||
</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=273306">Chromium issue #273306</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/12078">#12078</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome & Safari</td>
|
||||
<td>OS X scrollbar clipped in <code>select[multiple]</code> with padding</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=342208">Chromium issue #342208</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=128489">WebKit bug #128489</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/12536">#12536</a></td>
|
||||
<td>Safari (OS X)
|
||||
</td>
|
||||
<td><p>Scrollbar clipped in <code>select[multiple]</code> with padding.</p>
|
||||
</td>
|
||||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=128489">WebKit bug #128489</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/12536">#12536</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td><code>display: table-cell; width: 100%;</code> doesn't work correctly on date <code><input></code></td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=346051">Chromium issue #346051</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/12548">#12548</a></td>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p><code>display: table-cell; width: 100%;</code> doesn’t work correctly on <code><input type="date"></code>.</p>
|
||||
</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=346051">Chromium issue #346051</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/12548">#12548</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td><code><input type="password"></code> sporadically causes bad widths on floated elements</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=377346">Chromium issue #377346</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/13892">#13892</a></td>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p><code><input type="password"></code> sporadically causes bad widths on floated elements.</p>
|
||||
</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=377346">Chromium issue #377346</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/13892">#13892</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td>CSS infinite linear animation with alpha transparency leaks memory</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=429375">Chromium issue #429375</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14409">#14409</a></td>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>CSS infinite linear animation with alpha transparency leaks memory.</p>
|
||||
</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=429375">Chromium issue #429375</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14409">#14409</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari</td>
|
||||
<td>Weird button behavior with some number <code><input></code>s</td>
|
||||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>, <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a></td>
|
||||
<td>Safari (OS X)
|
||||
</td>
|
||||
<td><p>Weird button behavior with some <code><input type="number"></code> elements.</p>
|
||||
</td>
|
||||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>, <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari</td>
|
||||
<td><code>display: table-cell;</code> within media query renders incorrectly when resizing the window</td>
|
||||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=138167">WebKit bug #138167</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/9774">#9774</a></td>
|
||||
<td>Safari (OS X)
|
||||
</td>
|
||||
<td><p><code>display: table-cell;</code> within media query renders incorrectly when resizing the window.</p>
|
||||
</td>
|
||||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=138167">WebKit bug #138167</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/9774">#9774</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari</td>
|
||||
<td><code>transform: translate3d(0, 0, 0);</code> iOS bug</td>
|
||||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>, <a href="http://openradar.appspot.com/18804973">Apple Safari Radar #18804973</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/pull/14603">#14603</a></td>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p><code>transform: translate3d(0,0,0);</code> rendering bug.</p>
|
||||
</td>
|
||||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>, <a href="https://openradar.appspot.com/18804973">Apple Safari Radar #18804973</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14603">#14603</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari</td>
|
||||
<td>Small font size when printing webpage with fixed-width <code>.container</code></td>
|
||||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a></td>
|
||||
<td>Safari (OS X)
|
||||
</td>
|
||||
<td><p>Small font size when printing webpage with fixed-width <code>.container</code>.</p>
|
||||
</td>
|
||||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari</td>
|
||||
<td>Text input's cursor doesn't move while scrolling the page on iOS</td>
|
||||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>, <a href="http://openradar.appspot.com/18819624">Apple Safari Radar #18819624</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14708">#14708</a></td>
|
||||
<td>Safari (iOS)
|
||||
</td>
|
||||
<td><p>Text input’s cursor doesn’t move while scrolling the page.</p>
|
||||
</td>
|
||||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>, <a href="https://openradar.appspot.com/18819624">Apple Safari Radar #18819624</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14708">#14708</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome (Windows & Linux)
|
||||
</td>
|
||||
<td><p>Body content can be scrolled even though <code>overflow: hidden;</code> is applied to it.</p>
|
||||
</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=429604">Chromium issue #429604</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/14972">#14972</a></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
|
||||
</ul>
|
||||
<a class="back-to-top" href="#top">
|
||||
Back to top
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -281,7 +377,7 @@
|
||||
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="bs-docs-footer-links muted">
|
||||
<li>Currently v3.3.0</li>
|
||||
<li>Currently v3.3.1</li>
|
||||
<li>·</li>
|
||||
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
|
||||
<li>·</li>
|
||||
|
||||
@ -118,1002 +118,1002 @@
|
||||
<ul class="bs-glyphicons-list">
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-asterisk"></span>
|
||||
<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-asterisk</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-plus"></span>
|
||||
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-plus</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-euro"></span>
|
||||
<span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-euro</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-minus"></span>
|
||||
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-minus</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-cloud"></span>
|
||||
<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-cloud</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-envelope"></span>
|
||||
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-envelope</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-pencil"></span>
|
||||
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-pencil</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-glass"></span>
|
||||
<span class="glyphicon glyphicon-glass" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-glass</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-music"></span>
|
||||
<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-music</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-search"></span>
|
||||
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-search</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-heart"></span>
|
||||
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-heart</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-star"></span>
|
||||
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-star</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-star-empty"></span>
|
||||
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-star-empty</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-user"></span>
|
||||
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-user</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-film"></span>
|
||||
<span class="glyphicon glyphicon-film" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-film</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-th-large"></span>
|
||||
<span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-th-large</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-th"></span>
|
||||
<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-th</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-th-list"></span>
|
||||
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-th-list</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-ok"></span>
|
||||
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-ok</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-remove"></span>
|
||||
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-remove</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-zoom-in"></span>
|
||||
<span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-zoom-in</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-zoom-out"></span>
|
||||
<span class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-zoom-out</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-off"></span>
|
||||
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-off</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-signal"></span>
|
||||
<span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-signal</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-cog</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-trash"></span>
|
||||
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-trash</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-home"></span>
|
||||
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-home</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-file"></span>
|
||||
<span class="glyphicon glyphicon-file" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-file</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-time"></span>
|
||||
<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-time</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-road"></span>
|
||||
<span class="glyphicon glyphicon-road" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-road</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-download-alt"></span>
|
||||
<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-download-alt</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-download"></span>
|
||||
<span class="glyphicon glyphicon-download" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-download</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-upload"></span>
|
||||
<span class="glyphicon glyphicon-upload" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-upload</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-inbox"></span>
|
||||
<span class="glyphicon glyphicon-inbox" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-inbox</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-play-circle"></span>
|
||||
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-play-circle</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-repeat"></span>
|
||||
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-repeat</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-refresh"></span>
|
||||
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-refresh</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-list-alt"></span>
|
||||
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-list-alt</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-lock"></span>
|
||||
<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-lock</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-flag"></span>
|
||||
<span class="glyphicon glyphicon-flag" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-flag</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-headphones"></span>
|
||||
<span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-headphones</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-volume-off"></span>
|
||||
<span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-volume-off</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-volume-down"></span>
|
||||
<span class="glyphicon glyphicon-volume-down" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-volume-down</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-volume-up"></span>
|
||||
<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-volume-up</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-qrcode"></span>
|
||||
<span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-qrcode</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-barcode"></span>
|
||||
<span class="glyphicon glyphicon-barcode" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-barcode</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-tag"></span>
|
||||
<span class="glyphicon glyphicon-tag" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-tag</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-tags"></span>
|
||||
<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-tags</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-book"></span>
|
||||
<span class="glyphicon glyphicon-book" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-book</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-bookmark"></span>
|
||||
<span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-bookmark</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-print"></span>
|
||||
<span class="glyphicon glyphicon-print" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-print</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-camera"></span>
|
||||
<span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-camera</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-font"></span>
|
||||
<span class="glyphicon glyphicon-font" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-font</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-bold"></span>
|
||||
<span class="glyphicon glyphicon-bold" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-bold</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-italic"></span>
|
||||
<span class="glyphicon glyphicon-italic" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-italic</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-text-height"></span>
|
||||
<span class="glyphicon glyphicon-text-height" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-text-height</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-text-width"></span>
|
||||
<span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-text-width</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-align-left"></span>
|
||||
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-align-left</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-align-center"></span>
|
||||
<span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-align-center</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-align-right"></span>
|
||||
<span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-align-right</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-align-justify"></span>
|
||||
<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-align-justify</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-list"></span>
|
||||
<span class="glyphicon glyphicon-list" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-list</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-indent-left"></span>
|
||||
<span class="glyphicon glyphicon-indent-left" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-indent-left</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-indent-right"></span>
|
||||
<span class="glyphicon glyphicon-indent-right" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-indent-right</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-facetime-video"></span>
|
||||
<span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-facetime-video</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-picture"></span>
|
||||
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-picture</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-map-marker"></span>
|
||||
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-map-marker</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-adjust"></span>
|
||||
<span class="glyphicon glyphicon-adjust" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-adjust</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-tint"></span>
|
||||
<span class="glyphicon glyphicon-tint" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-tint</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-edit"></span>
|
||||
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-edit</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-share"></span>
|
||||
<span class="glyphicon glyphicon-share" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-share</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-check"></span>
|
||||
<span class="glyphicon glyphicon-check" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-check</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-move"></span>
|
||||
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-move</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-step-backward"></span>
|
||||
<span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-step-backward</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-fast-backward"></span>
|
||||
<span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-fast-backward</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-backward"></span>
|
||||
<span class="glyphicon glyphicon-backward" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-backward</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-play"></span>
|
||||
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-play</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-pause"></span>
|
||||
<span class="glyphicon glyphicon-pause" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-pause</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-stop"></span>
|
||||
<span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-stop</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-forward"></span>
|
||||
<span class="glyphicon glyphicon-forward" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-forward</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-fast-forward"></span>
|
||||
<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-fast-forward</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-step-forward"></span>
|
||||
<span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-step-forward</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-eject"></span>
|
||||
<span class="glyphicon glyphicon-eject" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-eject</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-chevron-left</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-chevron-right</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-plus-sign"></span>
|
||||
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-plus-sign</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-minus-sign"></span>
|
||||
<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-minus-sign</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-remove-sign"></span>
|
||||
<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-remove-sign</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-ok-sign"></span>
|
||||
<span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-ok-sign</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-question-sign"></span>
|
||||
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-question-sign</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-info-sign"></span>
|
||||
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-info-sign</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-screenshot"></span>
|
||||
<span class="glyphicon glyphicon-screenshot" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-screenshot</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-remove-circle"></span>
|
||||
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-remove-circle</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-ok-circle"></span>
|
||||
<span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-ok-circle</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-ban-circle"></span>
|
||||
<span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-ban-circle</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-arrow-left"></span>
|
||||
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-arrow-left</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-arrow-right"></span>
|
||||
<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-arrow-right</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-arrow-up"></span>
|
||||
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-arrow-up</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-arrow-down"></span>
|
||||
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-arrow-down</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-share-alt"></span>
|
||||
<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-share-alt</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-resize-full"></span>
|
||||
<span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-resize-full</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-resize-small"></span>
|
||||
<span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-resize-small</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-exclamation-sign"></span>
|
||||
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-exclamation-sign</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-gift"></span>
|
||||
<span class="glyphicon glyphicon-gift" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-gift</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-leaf"></span>
|
||||
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-leaf</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-fire"></span>
|
||||
<span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-fire</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-eye-open"></span>
|
||||
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-eye-open</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-eye-close"></span>
|
||||
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-eye-close</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-warning-sign"></span>
|
||||
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-warning-sign</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-plane"></span>
|
||||
<span class="glyphicon glyphicon-plane" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-plane</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-calendar</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-random"></span>
|
||||
<span class="glyphicon glyphicon-random" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-random</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-comment"></span>
|
||||
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-comment</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-magnet"></span>
|
||||
<span class="glyphicon glyphicon-magnet" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-magnet</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-chevron-up"></span>
|
||||
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-chevron-up</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-chevron-down</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-retweet"></span>
|
||||
<span class="glyphicon glyphicon-retweet" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-retweet</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-shopping-cart"></span>
|
||||
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-shopping-cart</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-folder-close"></span>
|
||||
<span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-folder-close</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-folder-open"></span>
|
||||
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-folder-open</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-resize-vertical"></span>
|
||||
<span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-resize-vertical</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-resize-horizontal"></span>
|
||||
<span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-resize-horizontal</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-hdd"></span>
|
||||
<span class="glyphicon glyphicon-hdd" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-hdd</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-bullhorn"></span>
|
||||
<span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-bullhorn</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-bell"></span>
|
||||
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-bell</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-certificate"></span>
|
||||
<span class="glyphicon glyphicon-certificate" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-certificate</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-thumbs-up"></span>
|
||||
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-thumbs-up</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-thumbs-down"></span>
|
||||
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-thumbs-down</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-hand-right"></span>
|
||||
<span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-hand-right</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-hand-left"></span>
|
||||
<span class="glyphicon glyphicon-hand-left" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-hand-left</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-hand-up"></span>
|
||||
<span class="glyphicon glyphicon-hand-up" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-hand-up</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-hand-down"></span>
|
||||
<span class="glyphicon glyphicon-hand-down" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-hand-down</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-circle-arrow-right"></span>
|
||||
<span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-circle-arrow-right</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-circle-arrow-left"></span>
|
||||
<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-circle-arrow-left</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-circle-arrow-up"></span>
|
||||
<span class="glyphicon glyphicon-circle-arrow-up" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-circle-arrow-up</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-circle-arrow-down"></span>
|
||||
<span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-circle-arrow-down</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-globe"></span>
|
||||
<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-globe</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-wrench"></span>
|
||||
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-wrench</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-tasks"></span>
|
||||
<span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-tasks</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-filter"></span>
|
||||
<span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-filter</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-briefcase"></span>
|
||||
<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-briefcase</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-fullscreen"></span>
|
||||
<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-fullscreen</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-dashboard"></span>
|
||||
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-dashboard</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-paperclip"></span>
|
||||
<span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-paperclip</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-heart-empty"></span>
|
||||
<span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-heart-empty</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-link"></span>
|
||||
<span class="glyphicon glyphicon-link" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-link</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-phone"></span>
|
||||
<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-phone</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-pushpin"></span>
|
||||
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-pushpin</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-usd"></span>
|
||||
<span class="glyphicon glyphicon-usd" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-usd</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-gbp"></span>
|
||||
<span class="glyphicon glyphicon-gbp" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-gbp</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sort"></span>
|
||||
<span class="glyphicon glyphicon-sort" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sort</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sort-by-alphabet"></span>
|
||||
<span class="glyphicon glyphicon-sort-by-alphabet" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
|
||||
<span class="glyphicon glyphicon-sort-by-alphabet-alt" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet-alt</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sort-by-order"></span>
|
||||
<span class="glyphicon glyphicon-sort-by-order" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sort-by-order</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
|
||||
<span class="glyphicon glyphicon-sort-by-order-alt" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sort-by-order-alt</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sort-by-attributes"></span>
|
||||
<span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
|
||||
<span class="glyphicon glyphicon-sort-by-attributes-alt" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes-alt</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-unchecked"></span>
|
||||
<span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-unchecked</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-expand"></span>
|
||||
<span class="glyphicon glyphicon-expand" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-expand</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-collapse-down"></span>
|
||||
<span class="glyphicon glyphicon-collapse-down" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-collapse-down</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-collapse-up"></span>
|
||||
<span class="glyphicon glyphicon-collapse-up" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-collapse-up</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-log-in"></span>
|
||||
<span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-log-in</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-flash"></span>
|
||||
<span class="glyphicon glyphicon-flash" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-flash</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-log-out"></span>
|
||||
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-log-out</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-new-window"></span>
|
||||
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-new-window</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-record"></span>
|
||||
<span class="glyphicon glyphicon-record" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-record</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-save"></span>
|
||||
<span class="glyphicon glyphicon-save" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-save</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-open"></span>
|
||||
<span class="glyphicon glyphicon-open" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-open</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-saved"></span>
|
||||
<span class="glyphicon glyphicon-saved" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-saved</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-import"></span>
|
||||
<span class="glyphicon glyphicon-import" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-import</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-export"></span>
|
||||
<span class="glyphicon glyphicon-export" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-export</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-send"></span>
|
||||
<span class="glyphicon glyphicon-send" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-send</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-floppy-disk"></span>
|
||||
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-floppy-disk</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-floppy-saved"></span>
|
||||
<span class="glyphicon glyphicon-floppy-saved" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-floppy-saved</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-floppy-remove"></span>
|
||||
<span class="glyphicon glyphicon-floppy-remove" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-floppy-remove</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-floppy-save"></span>
|
||||
<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-floppy-save</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-floppy-open"></span>
|
||||
<span class="glyphicon glyphicon-floppy-open" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-floppy-open</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-credit-card"></span>
|
||||
<span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-credit-card</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-transfer"></span>
|
||||
<span class="glyphicon glyphicon-transfer" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-transfer</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-cutlery"></span>
|
||||
<span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-cutlery</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-header"></span>
|
||||
<span class="glyphicon glyphicon-header" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-header</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-compressed"></span>
|
||||
<span class="glyphicon glyphicon-compressed" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-compressed</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-earphone"></span>
|
||||
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-earphone</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-phone-alt"></span>
|
||||
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-phone-alt</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-tower"></span>
|
||||
<span class="glyphicon glyphicon-tower" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-tower</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-stats"></span>
|
||||
<span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-stats</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sd-video"></span>
|
||||
<span class="glyphicon glyphicon-sd-video" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sd-video</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-hd-video"></span>
|
||||
<span class="glyphicon glyphicon-hd-video" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-hd-video</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-subtitles"></span>
|
||||
<span class="glyphicon glyphicon-subtitles" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-subtitles</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sound-stereo"></span>
|
||||
<span class="glyphicon glyphicon-sound-stereo" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sound-stereo</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sound-dolby"></span>
|
||||
<span class="glyphicon glyphicon-sound-dolby" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sound-dolby</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sound-5-1"></span>
|
||||
<span class="glyphicon glyphicon-sound-5-1" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sound-5-1</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sound-6-1"></span>
|
||||
<span class="glyphicon glyphicon-sound-6-1" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sound-6-1</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-sound-7-1"></span>
|
||||
<span class="glyphicon glyphicon-sound-7-1" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-sound-7-1</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-copyright-mark"></span>
|
||||
<span class="glyphicon glyphicon-copyright-mark" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-copyright-mark</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-registration-mark"></span>
|
||||
<span class="glyphicon glyphicon-registration-mark" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-registration-mark</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-cloud-download"></span>
|
||||
<span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-cloud-download</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-cloud-upload"></span>
|
||||
<span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-cloud-upload</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-tree-conifer"></span>
|
||||
<span class="glyphicon glyphicon-tree-conifer" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-tree-conifer</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="glyphicon glyphicon-tree-deciduous"></span>
|
||||
<span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span>
|
||||
<span class="glyphicon-class">glyphicon glyphicon-tree-deciduous</span>
|
||||
</li>
|
||||
|
||||
@ -1141,7 +1141,13 @@
|
||||
</ul>
|
||||
<p>Use whatever option best suits your specific development setup.</p>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-search"</span><span class="nt">></span></span></code></pre></div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Accessible icons</h4>
|
||||
<p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p>
|
||||
<p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p>
|
||||
<p>If you're creating controls with no other text (such as a <code><button></code> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an <code>aria-label</code> attribute on the control itself.</p>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-search"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span></code></pre></div>
|
||||
|
||||
|
||||
<h2 id="glyphicons-examples">Examples</h2>
|
||||
@ -1149,22 +1155,39 @@
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span> <span class="sr-only">Left Align</span></button>
|
||||
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span> <span class="sr-only">Center Align</span></button>
|
||||
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span> <span class="sr-only">Right Align</span></button>
|
||||
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span> <span class="sr-only">Justify</span></button>
|
||||
<button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
|
||||
<button type="button" class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></button>
|
||||
<button type="button" class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button>
|
||||
<button type="button" class="btn btn-default" aria-label="Justify"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button>
|
||||
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button>
|
||||
<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button>
|
||||
<button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star"></span> Star</button>
|
||||
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
|
||||
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
|
||||
<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
|
||||
<button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default btn-lg"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-star"</span><span class="nt">></span></span> Star
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">aria-label=</span><span class="s">"Left Align"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-align-left"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"></button></span>
|
||||
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default btn-lg"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-star"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span> Star
|
||||
<span class="nt"></button></span></code></pre></div>
|
||||
<p>An icon used in an <a href="#alerts">alert</a> to convey that it's an error message, with additional <code>.sr-only</code> text to convey this hint to users of assistive technologies.</p>
|
||||
<div class="bs-example">
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
|
||||
<span class="sr-only">Error:</span>
|
||||
Enter a valid email address
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-exclamation-sign"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Error:<span class="nt"></span></span>
|
||||
Enter a valid email address
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
</div>
|
||||
|
||||
<div class="bs-docs-section">
|
||||
@ -1176,7 +1199,7 @@
|
||||
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
|
||||
<div class="bs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
@ -1189,7 +1212,7 @@
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenu1"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenu1"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
Dropdown
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"></button></span>
|
||||
@ -1219,7 +1242,7 @@
|
||||
<p>Add a header to label sections of actions in any dropdown menu.</p>
|
||||
<div class="bs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
@ -1243,7 +1266,7 @@
|
||||
<p>Add a divider to separate series of links in a dropdown menu.</p>
|
||||
<div class="bs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
@ -1266,7 +1289,7 @@
|
||||
<p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p>
|
||||
<div class="bs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
@ -1294,16 +1317,23 @@
|
||||
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Ensure correct <code>role</code> and provide a label</h4>
|
||||
<p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
|
||||
<p>One exception are groups which only contain a single control (for instance the <a href="#btn-groups-justified">justified button groups</a> with <code><button></code> elements) or a dropdown.</p>
|
||||
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="btn-groups-single">Basic example</h3>
|
||||
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group" style="margin: 9px 0 5px;">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Left<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Middle<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Right<span class="nt"></button></span>
|
||||
@ -1312,75 +1342,70 @@
|
||||
<h3 id="btn-groups-toolbar">Button toolbar</h3>
|
||||
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar" role="toolbar" style="margin: 0;">
|
||||
<div class="btn-group">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-default">1</button>
|
||||
<button type="button" class="btn btn-default">2</button>
|
||||
<button type="button" class="btn btn-default">3</button>
|
||||
<button type="button" class="btn btn-default">4</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="btn-group" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-default">5</button>
|
||||
<button type="button" class="btn btn-default">6</button>
|
||||
<button type="button" class="btn btn-default">7</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-default">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-toolbar"</span> <span class="na">role=</span><span class="s">"toolbar"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-toolbar"</span> <span class="na">role=</span><span class="s">"toolbar"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<h3 id="btn-groups-sizing">Sizing</h3>
|
||||
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-lg">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group" role="group" aria-label="Default button group">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-xs">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group btn-group-xs" role="group" aria-label="Extra-small button group">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-lg"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-sm"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-xs"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-lg"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-sm"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-xs"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<h3 id="btn-groups-nested">Nesting</h3>
|
||||
<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group">
|
||||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<button type="button" class="btn btn-default">1</button>
|
||||
<button type="button" class="btn btn-default">2</button>
|
||||
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
@ -1391,12 +1416,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>1<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>2<span class="nt"></button></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"></button></span>
|
||||
@ -1410,11 +1435,11 @@
|
||||
<h3 id="btn-groups-vertical">Vertical variation</h3>
|
||||
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group-vertical">
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-default">Button</button>
|
||||
<button type="button" class="btn btn-default">Button</button>
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
@ -1425,8 +1450,8 @@
|
||||
</div>
|
||||
<button type="button" class="btn btn-default">Button</button>
|
||||
<button type="button" class="btn btn-default">Button</button>
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
@ -1435,8 +1460,8 @@
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
@ -1445,8 +1470,8 @@
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
@ -1457,7 +1482,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group-vertical"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group-vertical"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
@ -1477,17 +1502,17 @@
|
||||
<h4>With <code><a></code> elements</h4>
|
||||
<p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group btn-group-justified">
|
||||
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
|
||||
<a href="#" class="btn btn-default" role="button">Left</a>
|
||||
<a href="#" class="btn btn-default" role="button">Middle</a>
|
||||
<a href="#" class="btn btn-default" role="button">Right</a>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group btn-group-justified">
|
||||
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
|
||||
<a href="#" class="btn btn-default" role="button">Left</a>
|
||||
<a href="#" class="btn btn-default" role="button">Middle</a>
|
||||
<div class="btn-group">
|
||||
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<div class="btn-group" role="group">
|
||||
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
|
||||
Dropdown <span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -1500,33 +1525,38 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-justified"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-justified"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Links acting as buttons</h4>
|
||||
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
|
||||
</div>
|
||||
|
||||
<h4>With <code><button></code> elements</h4>
|
||||
<p>To use justified button groups with <code><button></code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can workaround that.</p>
|
||||
<p>To use justified button groups with <code><button></code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can work around that.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group btn-group-justified">
|
||||
<div class="btn-group">
|
||||
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-justified"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-justified"</span> <span class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Left<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Middle<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Right<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
@ -1546,7 +1576,7 @@
|
||||
<p>Turn a button into a dropdown toggle with some basic markup changes.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -1556,7 +1586,7 @@
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -1566,7 +1596,7 @@
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -1576,7 +1606,7 @@
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -1586,7 +1616,7 @@
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -1596,7 +1626,7 @@
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -1608,7 +1638,7 @@
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Single button --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Action <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span>
|
||||
@ -1625,7 +1655,7 @@
|
||||
<div class="bs-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
@ -1639,7 +1669,7 @@
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
@ -1653,7 +1683,7 @@
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
@ -1667,7 +1697,7 @@
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
@ -1681,7 +1711,7 @@
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
@ -1695,7 +1725,7 @@
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
@ -1711,7 +1741,7 @@
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Split button --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Action<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
@ -1729,7 +1759,7 @@
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
Large button <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -1743,7 +1773,7 @@
|
||||
</div><!-- /btn-toolbar -->
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
Small button <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -1757,7 +1787,7 @@
|
||||
</div><!-- /btn-toolbar -->
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
Extra small button <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -1772,7 +1802,7 @@
|
||||
</div><!-- /example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Large button group --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default btn-lg dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default btn-lg dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Large button <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span>
|
||||
@ -1782,7 +1812,7 @@
|
||||
|
||||
<span class="c"><!-- Small button group --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default btn-sm dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default btn-sm dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Small button <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span>
|
||||
@ -1792,7 +1822,7 @@
|
||||
|
||||
<span class="c"><!-- Extra small button group --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default btn-xs dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default btn-xs dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Extra small button <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span>
|
||||
@ -1806,7 +1836,7 @@
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-default">Dropup</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
@ -1820,7 +1850,7 @@
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-primary">Right dropup</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
@ -1836,7 +1866,7 @@
|
||||
</div><!-- /example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropup"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Dropup<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
@ -2027,7 +2057,7 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -2043,7 +2073,7 @@
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -2060,7 +2090,7 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>Action <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Action <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></button></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></li></span>
|
||||
@ -2076,7 +2106,7 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>Action <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Action <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></button></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></li></span>
|
||||
@ -2096,7 +2126,7 @@
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
@ -2116,7 +2146,7 @@
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
@ -2152,48 +2182,55 @@
|
||||
|
||||
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
|
||||
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Make navs used as navigation accessible</h4>
|
||||
<p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code><ul></code>, or wrap a <code><nav></code> element around the whole navigation. Do not add the role to the <code><ul></code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="nav-tabs">Tabs</h2>
|
||||
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<ul class="nav nav-tabs">
|
||||
<li role="presentation" class="active"><a href="#">Home</a></li>
|
||||
<li role="presentation"><a href="#">Profile</a></li>
|
||||
<li role="presentation"><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Profile<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Messages<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span></code></pre></div>
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Requires JavaScript tabs plugin</h4>
|
||||
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 id="nav-pills">Pills</h2>
|
||||
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<ul class="nav nav-pills">
|
||||
<li role="presentation" class="active"><a href="#">Home</a></li>
|
||||
<li role="presentation"><a href="#">Profile</a></li>
|
||||
<li role="presentation"><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Profile<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Messages<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span></code></pre></div>
|
||||
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">
|
||||
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
|
||||
<li role="presentation" class="active"><a href="#">Home</a></li>
|
||||
<li role="presentation"><a href="#">Profile</a></li>
|
||||
<li role="presentation"><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-stacked"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-stacked"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></ul></span></code></pre></div>
|
||||
|
||||
@ -2206,22 +2243,22 @@
|
||||
<p>As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
|
||||
</div>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-tabs nav-justified" role="tablist">
|
||||
<ul class="nav nav-tabs nav-justified">
|
||||
<li role="presentation" class="active"><a href="#">Home</a></li>
|
||||
<li role="presentation"><a href="#">Profile</a></li>
|
||||
<li role="presentation"><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
<br>
|
||||
<ul class="nav nav-pills nav-justified" role="tablist">
|
||||
<ul class="nav nav-pills nav-justified">
|
||||
<li role="presentation" class="active"><a href="#">Home</a></li>
|
||||
<li role="presentation"><a href="#">Profile</a></li>
|
||||
<li role="presentation"><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs nav-justified"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs nav-justified"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-justified"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-justified"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></ul></span></code></pre></div>
|
||||
|
||||
@ -2235,13 +2272,13 @@
|
||||
</div>
|
||||
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<ul class="nav nav-pills">
|
||||
<li role="presentation"><a href="#">Clickable link</a></li>
|
||||
<li role="presentation"><a href="#">Clickable link</a></li>
|
||||
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"disabled"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled link<span class="nt"></a></li></span>
|
||||
...
|
||||
@ -2253,11 +2290,11 @@
|
||||
|
||||
<h3>Tabs with dropdowns</h3>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<ul class="nav nav-tabs">
|
||||
<li role="presentation" class="active"><a href="#">Home</a></li>
|
||||
<li role="presentation"><a href="#">Help</a></li>
|
||||
<li role="presentation" class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
|
||||
Dropdown <span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -2270,10 +2307,10 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span>
|
||||
@ -2285,11 +2322,11 @@
|
||||
|
||||
<h3>Pills with dropdowns</h3>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<ul class="nav nav-pills">
|
||||
<li role="presentation" class="active"><a href="#">Home</a></li>
|
||||
<li role="presentation"><a href="#">Help</a></li>
|
||||
<li role="presentation" class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
|
||||
Dropdown <span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@ -2302,10 +2339,10 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span>
|
||||
@ -2333,13 +2370,18 @@
|
||||
</ol>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Requires JavaScript</h4>
|
||||
<h4>Requires JavaScript plugin</h4>
|
||||
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
|
||||
<p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Changing the collapsed mobile navbar breakpoint</h4>
|
||||
<p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Make navbars accessible</h4>
|
||||
<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-example">
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
@ -2358,10 +2400,10 @@
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Link</a></li>
|
||||
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -2382,7 +2424,7 @@
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -2412,10 +2454,10 @@
|
||||
<span class="c"><!-- Collect the nav links, forms, and other content for toggling --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"bs-example-navbar-collapse-1"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav navbar-nav"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>Dropdown <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Dropdown <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></a></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></li></span>
|
||||
@ -2436,7 +2478,7 @@
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav navbar-nav navbar-right"</span><span class="nt">></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>Dropdown <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Dropdown <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></a></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></li></span>
|
||||
@ -2450,16 +2492,6 @@
|
||||
<span class="nt"></div></span><span class="c"><!-- /.container-fluid --></span>
|
||||
<span class="nt"></nav></span></code></pre></div>
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Plugin dependency</h4>
|
||||
<p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Make navbars accessible</h4>
|
||||
<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 id="navbar-brand-image">Brand image</h2>
|
||||
<p>Replace the navbar brand with your own image by swapping the text for an <code><img></code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
|
||||
@ -2795,25 +2827,25 @@
|
||||
<div class="bs-example">
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span><span class="ni">&laquo;</span><span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&laquo;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Previous<span class="nt"></span></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>1<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>2<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>3<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>4<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>5<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span><span class="ni">&raquo;</span><span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&raquo;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Next<span class="nt"></span></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></div>
|
||||
|
||||
@ -2822,27 +2854,27 @@
|
||||
<div class="bs-example">
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><a href="#">«</a></li>
|
||||
<li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
|
||||
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"disabled"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span><span class="ni">&laquo;</span><span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"disabled"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&laquo;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Previous<span class="nt"></span></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>1 <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></a></li></span>
|
||||
...
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></div>
|
||||
<p>You can optionally swap out active or disabled anchors for <code><span></code> to remove click functionality while retaining intended styles.</p>
|
||||
<p>You can optionally swap out active or disabled anchors for <code><span></code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"disabled"</span><span class="nt">><span></span><span class="ni">&laquo;</span><span class="nt"></span></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"disabled"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&laquo;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Previous<span class="nt"></span></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><span></span>1 <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></span></li></span>
|
||||
...
|
||||
<span class="nt"></ul></span>
|
||||
@ -2854,35 +2886,35 @@
|
||||
<div class="bs-example">
|
||||
<nav>
|
||||
<ul class="pagination pagination-lg">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm">
|
||||
<li><a href="#">«</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -2916,15 +2948,15 @@
|
||||
<div class="bs-example">
|
||||
<nav>
|
||||
<ul class="pager">
|
||||
<li class="previous"><a href="#">← Older</a></li>
|
||||
<li class="next"><a href="#">Newer →</a></li>
|
||||
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
|
||||
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pager"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"previous"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span><span class="ni">&larr;</span> Older<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"next"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Newer <span class="ni">&rarr;</span><span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"previous"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&larr;</span><span class="nt"></span></span> Older<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"next"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Newer <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&rarr;</span><span class="nt"></span></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></div>
|
||||
|
||||
@ -2934,15 +2966,15 @@
|
||||
<div class="bs-example">
|
||||
<nav>
|
||||
<ul class="pager">
|
||||
<li class="previous disabled"><a href="#">← Older</a></li>
|
||||
<li class="next"><a href="#">Newer →</a></li>
|
||||
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
|
||||
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pager"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"previous disabled"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span><span class="ni">&larr;</span> Older<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"next"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Newer <span class="ni">&rarr;</span><span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"previous disabled"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&larr;</span><span class="nt"></span></span> Older<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"next"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Newer <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&rarr;</span><span class="nt"></span></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></div>
|
||||
</div>
|
||||
@ -3481,16 +3513,16 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="media">
|
||||
<a class="pull-right" href="#">
|
||||
<img data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
<a class="pull-left" href="#">
|
||||
<a class="media-left" href="#">
|
||||
<img data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Deprecated pull-right pull-left example</h4>
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
</div>
|
||||
<a class="media-right" href="#">
|
||||
<img data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
</div>
|
||||
</div><!-- /.bs-example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
@ -4080,6 +4112,7 @@
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
@ -4096,7 +4129,7 @@
|
||||
<a href="#dropdowns">Dropdowns</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#dropdowns-example">Example</a></li>
|
||||
<li><a href="#dropdowns-alignment">Alignment options</a></li>
|
||||
<li><a href="#dropdowns-alignment">Alignment</a></li>
|
||||
<li><a href="#dropdowns-headers">Headers</a></li>
|
||||
<li><a href="#dropdowns-divider">Divider</a></li>
|
||||
<li><a href="#dropdowns-disabled">Disabled menu items</a></li>
|
||||
@ -4110,7 +4143,7 @@
|
||||
<li><a href="#btn-groups-sizing">Sizing</a></li>
|
||||
<li><a href="#btn-groups-nested">Nesting</a></li>
|
||||
<li><a href="#btn-groups-vertical">Vertical variation</a></li>
|
||||
<li><a href="#btn-groups-justified">Justified link variation</a></li>
|
||||
<li><a href="#btn-groups-justified">Justified button groups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -4138,7 +4171,7 @@
|
||||
<ul class="nav">
|
||||
<li><a href="#nav-tabs">Tabs</a></li>
|
||||
<li><a href="#nav-pills">Pills</a></li>
|
||||
<li><a href="#nav-justified">Justified nav</a></li>
|
||||
<li><a href="#nav-justified">Justified</a></li>
|
||||
<li><a href="#nav-disabled-links">Disabled links</a></li>
|
||||
<li><a href="#nav-dropdowns">Using dropdowns</a></li>
|
||||
</ul>
|
||||
@ -4241,6 +4274,7 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4270,7 +4304,7 @@
|
||||
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="bs-docs-footer-links muted">
|
||||
<li>Currently v3.3.0</li>
|
||||
<li>Currently v3.3.1</li>
|
||||
<li>·</li>
|
||||
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
|
||||
<li>·</li>
|
||||
|
||||
163
css/index.html
163
css/index.html
@ -370,7 +370,7 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-xs-6"</span><span class="nt">></span>.col-xs-6<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktops</h3>
|
||||
<h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktop</h3>
|
||||
<p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
|
||||
<div class="bs-docs-grid">
|
||||
<div class="row show-grid">
|
||||
@ -1472,7 +1472,10 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"danger"</span><span class="nt">></span>...<span class="nt"></td></span>
|
||||
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"info"</span><span class="nt">></span>...<span class="nt"></td></span>
|
||||
<span class="nt"></tr></span></code></pre></div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Conveying meaning to assistive technologies</h4>
|
||||
<p>Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="tables-responsive">Responsive tables</h2>
|
||||
<p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
|
||||
@ -1647,7 +1650,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Always add labels</h4>
|
||||
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
|
||||
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
|
||||
</div>
|
||||
<div class="bs-example">
|
||||
<form class="form-inline" role="form">
|
||||
@ -1674,14 +1677,11 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</form>
|
||||
</div><!-- /example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"exampleInputEmail2"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail2"</span> <span class="na">placeholder=</span><span class="s">"Enter email"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"exampleInputEmail2"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>@<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">placeholder=</span><span class="s">"Enter email"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail2"</span> <span class="na">placeholder=</span><span class="s">"Enter email"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
@ -1783,7 +1783,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
<textarea class="form-control" rows="3"></textarea>
|
||||
<textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">rows=</span><span class="s">"3"</span><span class="nt">></textarea></span></code></pre></div>
|
||||
@ -1906,30 +1906,30 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio3"</span> <span class="na">value=</span><span class="s">"option3"</span><span class="nt">></span> 3
|
||||
<span class="nt"></label></span></code></pre></div>
|
||||
|
||||
<h4>Checkboxes and radios without labels</h4>
|
||||
<p>Should you have no text within the <code><label></code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong></p>
|
||||
<h4>Checkboxes and radios without label text</h4>
|
||||
<p>Should you have no text within the <code><label></code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong> Remember to still provide some form of label for assistive technologies (for instance, using <code>aria-label</code>).</p>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="blankCheckbox" value="option1">
|
||||
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="Checkbox without label text">
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="blankRadio" id="blankRadio1" value="option1">
|
||||
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="Radio button without label text">
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
||||
<span class="nt"><label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"blankCheckbox"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"blankCheckbox"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"radio"</span><span class="nt">></span>
|
||||
<span class="nt"><label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"blankRadio"</span> <span class="na">id=</span><span class="s">"blankRadio1"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"blankRadio"</span> <span class="na">id=</span><span class="s">"blankRadio1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
@ -2028,7 +2028,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Confirm identity<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
|
||||
<h2 id="forms-control-focus">Input focus</h2>
|
||||
<h2 id="forms-control-focus">Focus state</h2>
|
||||
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
@ -2041,7 +2041,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</div>
|
||||
|
||||
|
||||
<h2 id="forms-control-disabled">Disabled inputs</h2>
|
||||
<h2 id="forms-control-disabled">Disabled state</h2>
|
||||
<p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
@ -2107,7 +2107,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
|
||||
|
||||
<h2 id="forms-control-readonly">Readonly inputs</h2>
|
||||
<h2 id="forms-control-readonly">Readonly state</h2>
|
||||
<p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
@ -2120,6 +2120,12 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h2 id="forms-control-validation">Validation states</h2>
|
||||
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Conveying validation state to assistive technologies</h4>
|
||||
<p>Using these validation styles to denote the state of a form control only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.</p>
|
||||
<p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code><label></code> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using <code>aria-describedby</code> (see the example in the following section). In the case of an error, you could also use the <code>aria-invalid="true"</code> attribute on the form control.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
<div class="form-group has-success">
|
||||
@ -2202,41 +2208,52 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<p><strong class="text-danger">Feedback icons only work with textual <code><input class="form-control"></code> elements.</strong></p>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Icons, labels, and input groups</h4>
|
||||
<p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
|
||||
<p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>.sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Conveying the icon's meaning to assistive technologies</h4>
|
||||
<p>To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the <code>.sr-only</code> class and explicitly associated with the form control it relates to using <code>aria-describedby</code>. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <code><label></code> associated with the form control.</p>
|
||||
<p>Although the following examples already mention the validation state of their respective form controls in the <code><label></code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
|
||||
</div>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputSuccess2">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess2">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputSuccess2Status" class="sr-only">(success)</span>
|
||||
</div>
|
||||
<div class="form-group has-warning has-feedback">
|
||||
<label class="control-label" for="inputWarning2">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning2">
|
||||
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
|
||||
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
|
||||
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputWarning2Status" class="sr-only">(warning)</span>
|
||||
</div>
|
||||
<div class="form-group has-error has-feedback">
|
||||
<label class="control-label" for="inputError2">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError2">
|
||||
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
|
||||
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
|
||||
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputError2Status" class="sr-only">(error)</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group has-success has-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"control-label"</span> <span class="na">for=</span><span class="s">"inputSuccess2"</span><span class="nt">></span>Input with success<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputSuccess2"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-ok form-control-feedback"</span><span class="nt">></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputSuccess2"</span> <span class="na">aria-describedby=</span><span class="s">"inputSuccess2Status"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-ok form-control-feedback"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">id=</span><span class="s">"inputSuccess2Status"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(success)<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group has-warning has-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"control-label"</span> <span class="na">for=</span><span class="s">"inputWarning2"</span><span class="nt">></span>Input with warning<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputWarning2"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-warning-sign form-control-feedback"</span><span class="nt">></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputWarning2"</span> <span class="na">aria-describedby=</span><span class="s">"inputWarning2Status"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-warning-sign form-control-feedback"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">id=</span><span class="s">"inputWarning2Status"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(warning)<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group has-error has-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"control-label"</span> <span class="na">for=</span><span class="s">"inputError2"</span><span class="nt">></span>Input with error<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputError2"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-remove form-control-feedback"</span><span class="nt">></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputError2"</span> <span class="na">aria-describedby=</span><span class="s">"inputError2Status"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-remove form-control-feedback"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">id=</span><span class="s">"inputError2Status"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(error)<span class="nt"></span></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<h4>Optional icons in horizontal and inline forms</h4>
|
||||
@ -2245,8 +2262,9 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" id="inputSuccess3">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputSuccess3Status" class="sr-only">(success)</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -2255,8 +2273,9 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group has-success has-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"control-label col-sm-3"</span> <span class="na">for=</span><span class="s">"inputSuccess3"</span><span class="nt">></span>Input with success<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputSuccess3"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-ok form-control-feedback"</span><span class="nt">></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputSuccess3"</span> <span class="na">aria-describedby=</span><span class="s">"inputSuccess3Status"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-ok form-control-feedback"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">id=</span><span class="s">"inputSuccess3Status"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(success)<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
@ -2265,16 +2284,18 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<form class="form-inline" role="form">
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputSuccess4">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess4">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputSuccess4Status" class="sr-only">(success)</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group has-success has-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"control-label"</span> <span class="na">for=</span><span class="s">"inputSuccess4"</span><span class="nt">></span>Input with success<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputSuccess4"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-ok form-control-feedback"</span><span class="nt">></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputSuccess4"</span> <span class="na">aria-describedby=</span><span class="s">"inputSuccess4Status"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-ok form-control-feedback"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">id=</span><span class="s">"inputSuccess4Status"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(success)<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
|
||||
@ -2283,14 +2304,16 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<div class="bs-example">
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
|
||||
<input type="text" class="form-control" id="inputSuccess5">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputSuccess5Status" class="sr-only">(success)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group has-success has-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"control-label sr-only"</span> <span class="na">for=</span><span class="s">"inputSuccess5"</span><span class="nt">></span>Hidden label<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputSuccess5"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-ok form-control-feedback"</span><span class="nt">></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputSuccess5"</span> <span class="na">aria-describedby=</span><span class="s">"inputSuccess5Status"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-ok form-control-feedback"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">id=</span><span class="s">"inputSuccess5Status"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(success)<span class="nt"></span></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
|
||||
@ -2391,13 +2414,23 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
|
||||
<h2 id="forms-help-text">Help text</h2>
|
||||
<p>Block level help text for form controls.</p>
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Associating help text with form controls</h4>
|
||||
<p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
|
||||
</div>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
<input type="text" class="form-control">
|
||||
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
|
||||
<div class="form-group">
|
||||
<label for="inputHelpBlock">Input with help text</label>
|
||||
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
|
||||
</div>
|
||||
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"help-block"</span><span class="nt">></span>A block of help text that breaks onto a new line and may extend beyond one line.<span class="nt"></span></span></code></pre></div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"inputHelpBlock"</span><span class="nt">></span>Input with help text<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"inputHelpBlock"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-describedby=</span><span class="s">"helpBlock"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"><span</span> <span class="na">id=</span><span class="s">"helpBlock"</span> <span class="na">class=</span><span class="s">"help-block"</span><span class="nt">></span>A block of help text that breaks onto a new line and may extend beyond one line.<span class="nt"></span></span></code></pre></div>
|
||||
</div>
|
||||
|
||||
<div class="bs-docs-section">
|
||||
@ -2435,6 +2468,11 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<span class="c"><!-- Deemphasize a button by making it look like a link while maintaining button behavior --></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">></span>Link<span class="nt"></button></span></code></pre></div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Conveying meaning to assistive technologies</h4>
|
||||
<p>Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="buttons-sizes">Sizes</h2>
|
||||
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
|
||||
<div class="bs-example">
|
||||
@ -2484,7 +2522,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
|
||||
|
||||
<h2 id="buttons-active">Active state</h2>
|
||||
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s should you need to replicate the active state programmatically.</p>
|
||||
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the active state programmatically.</p>
|
||||
|
||||
<h3>Button element</h3>
|
||||
<p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
|
||||
@ -2535,7 +2573,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</p>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Link functionality caveat</h4>
|
||||
<p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.</p>
|
||||
<p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Context-specific usage</h4>
|
||||
@ -2556,6 +2594,11 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"Input"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">value=</span><span class="s">"Submit"</span><span class="nt">></span></code></pre></div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Links acting as buttons</h4>
|
||||
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Cross-browser rendering</h4>
|
||||
<p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
|
||||
@ -2613,6 +2656,10 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h4>Dealing with specificity</h4>
|
||||
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Conveying meaning to assistive technologies</h4>
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="helper-classes-backgrounds">Contextual backgrounds</h3>
|
||||
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>
|
||||
@ -2632,6 +2679,10 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h4>Dealing with specificity</h4>
|
||||
<p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code><div></code> with the class.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Conveying meaning to assistive technologies</h4>
|
||||
<p>As with <a href="#helper-classes-colors">contextual colors</a>, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="helper-classes-close">Close icon</h3>
|
||||
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
|
||||
@ -3519,6 +3570,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
@ -3541,8 +3593,8 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<li><a href="#grid-options">Grid options</a></li>
|
||||
<li><a href="#grid-example-basic">Ex: Stacked-to-horizontal</a></li>
|
||||
<li><a href="#grid-example-fluid">Ex: Fluid container</a></li>
|
||||
<li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
|
||||
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
|
||||
<li><a href="#grid-example-mixed">Ex: Mobile and desktop</a></li>
|
||||
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
|
||||
<li><a href="#grid-example-wrapping">Ex: Column wrapping</a></li>
|
||||
<li><a href="#grid-responsive-resets">Responsive column resets</a></li>
|
||||
<li><a href="#grid-offsetting">Offsetting columns</a></li>
|
||||
@ -3568,9 +3620,9 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<li>
|
||||
<a href="#code">Code</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#code-inline">Inline code</a></li>
|
||||
<li><a href="#code-inline">Inline</a></li>
|
||||
<li><a href="#code-user-input">User input</a></li>
|
||||
<li><a href="#code-block">Blocks of code</a></li>
|
||||
<li><a href="#code-block">Basic block</a></li>
|
||||
<li><a href="#code-variables">Variables</a></li>
|
||||
<li><a href="#code-sample-output">Sample output</a></li>
|
||||
</ul>
|
||||
@ -3631,7 +3683,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<li><a href="#helper-classes-center">Center content blocks</a></li>
|
||||
<li><a href="#helper-classes-clearfix">Clearfix</a></li>
|
||||
<li><a href="#helper-classes-show-hide">Showing and hiding content</a></li>
|
||||
<li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
|
||||
<li><a href="#helper-classes-screen-readers">Screen reader and keyboard navigation content</a></li>
|
||||
<li><a href="#helper-classes-image-replacement">Image replacement</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -3656,7 +3708,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<a href="#sass">Using Sass</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#sass-contents">What's included</a></li>
|
||||
<li><a href="#sass-installation">Rails install</a></li>
|
||||
<li><a href="#sass-installation">Installation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -3672,6 +3724,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3701,7 +3754,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="bs-docs-footer-links muted">
|
||||
<li>Currently v3.3.0</li>
|
||||
<li>Currently v3.3.1</li>
|
||||
<li>·</li>
|
||||
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
|
||||
<li>·</li>
|
||||
|
||||
@ -494,7 +494,7 @@
|
||||
<div class="clearfix"></div>
|
||||
<div class="col-xs-4">
|
||||
<label for="input-@brand-primary">@brand-primary</label>
|
||||
<input id="input-@brand-primary" type="text" value="#428bca" data-var="@brand-primary" class="form-control"/>
|
||||
<input id="input-@brand-primary" type="text" value="darken(#428bca, 6.5%)" data-var="@brand-primary" class="form-control"/>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label for="input-@brand-success">@brand-success</label>
|
||||
@ -2336,6 +2336,7 @@
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
@ -2395,6 +2396,7 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2424,7 +2426,7 @@
|
||||
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="bs-docs-footer-links muted">
|
||||
<li>Currently v3.3.0</li>
|
||||
<li>Currently v3.3.1</li>
|
||||
<li>·</li>
|
||||
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
|
||||
<li>·</li>
|
||||
@ -2459,6 +2461,7 @@
|
||||
|
||||
|
||||
|
||||
<script>var __configBridge = {"autoprefixerBrowsers":["Android 2.3","Android >= 4","Chrome >= 20","Firefox >= 24","Explorer >= 8","iOS >= 6","Opera >= 12","Safari >= 6"],"jqueryCheck":["if (typeof jQuery === 'undefined') {"," throw new Error('Bootstrap\\'s JavaScript requires jQuery')","}\n"],"jqueryVersionCheck":["+function ($) {"," var version = $.fn.jquery.split(' ')[0].split('.')"," if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) {"," throw new Error('Bootstrap\\'s JavaScript requires jQuery version 1.9.1 or higher')"," }","}(jQuery);\n\n"]}</script>
|
||||
|
||||
<script src="../assets/js/customize.min.js"></script>
|
||||
|
||||
|
||||
81
dist/css/bootstrap-theme.css
vendored
81
dist/css/bootstrap-theme.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap v3.3.0 (http://getbootstrap.com)
|
||||
* Bootstrap v3.3.1 (http://getbootstrap.com)
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
@ -69,28 +69,28 @@
|
||||
background-image: none;
|
||||
}
|
||||
.btn-primary {
|
||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
|
||||
background-image: -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#2d6ca2));
|
||||
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #2b669a;
|
||||
border-color: #245580;
|
||||
}
|
||||
.btn-primary:hover,
|
||||
.btn-primary:focus {
|
||||
background-color: #2d6ca2;
|
||||
background-color: #265a88;
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
.btn-primary:active,
|
||||
.btn-primary.active {
|
||||
background-color: #2d6ca2;
|
||||
border-color: #2b669a;
|
||||
background-color: #265a88;
|
||||
border-color: #245580;
|
||||
}
|
||||
.btn-primary:disabled,
|
||||
.btn-primary[disabled] {
|
||||
background-color: #2d6ca2;
|
||||
background-color: #265a88;
|
||||
background-image: none;
|
||||
}
|
||||
.btn-success {
|
||||
@ -211,12 +211,12 @@
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus {
|
||||
background-color: #357ebd;
|
||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
|
||||
background-image: -o-linear-gradient(top, #428bca 0%, #357ebd 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd));
|
||||
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
|
||||
background-color: #2e6da4;
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.navbar-default {
|
||||
@ -275,6 +275,19 @@
|
||||
.navbar-fixed-bottom {
|
||||
border-radius: 0;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar .navbar-nav .open .dropdown-menu > .active > a,
|
||||
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
|
||||
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
|
||||
color: #fff;
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
}
|
||||
.alert {
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
|
||||
@ -325,11 +338,11 @@
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.progress-bar {
|
||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
|
||||
background-image: -o-linear-gradient(top, #428bca 0%, #3071a9 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3071a9));
|
||||
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.progress-bar-success {
|
||||
@ -377,14 +390,14 @@
|
||||
.list-group-item.active,
|
||||
.list-group-item.active:hover,
|
||||
.list-group-item.active:focus {
|
||||
text-shadow: 0 -1px 0 #3071a9;
|
||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
|
||||
background-image: -o-linear-gradient(top, #428bca 0%, #3278b3 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3278b3));
|
||||
background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
|
||||
text-shadow: 0 -1px 0 #286090;
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #3278b3;
|
||||
border-color: #2b669a;
|
||||
}
|
||||
.list-group-item.active .badge,
|
||||
.list-group-item.active:hover .badge,
|
||||
@ -404,11 +417,11 @@
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.panel-primary > .panel-heading {
|
||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
|
||||
background-image: -o-linear-gradient(top, #428bca 0%, #357ebd 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd));
|
||||
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.panel-success > .panel-heading {
|
||||
|
||||
2
dist/css/bootstrap-theme.css.map
vendored
2
dist/css/bootstrap-theme.css.map
vendored
File diff suppressed because one or more lines are too long
4
dist/css/bootstrap-theme.min.css
vendored
4
dist/css/bootstrap-theme.min.css
vendored
File diff suppressed because one or more lines are too long
184
dist/css/bootstrap.css
vendored
184
dist/css/bootstrap.css
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap v3.3.0 (http://getbootstrap.com)
|
||||
* Bootstrap v3.3.1 (http://getbootstrap.com)
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
@ -915,12 +915,12 @@ textarea {
|
||||
line-height: inherit;
|
||||
}
|
||||
a {
|
||||
color: #428bca;
|
||||
color: #337ab7;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #2a6496;
|
||||
color: #23527c;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:focus {
|
||||
@ -1153,10 +1153,10 @@ mark,
|
||||
color: #777;
|
||||
}
|
||||
.text-primary {
|
||||
color: #428bca;
|
||||
color: #337ab7;
|
||||
}
|
||||
a.text-primary:hover {
|
||||
color: #3071a9;
|
||||
color: #286090;
|
||||
}
|
||||
.text-success {
|
||||
color: #3c763d;
|
||||
@ -1184,10 +1184,10 @@ a.text-danger:hover {
|
||||
}
|
||||
.bg-primary {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
a.bg-primary:hover {
|
||||
background-color: #3071a9;
|
||||
background-color: #286090;
|
||||
}
|
||||
.bg-success {
|
||||
background-color: #dff0d8;
|
||||
@ -2400,56 +2400,25 @@ textarea.form-control {
|
||||
input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
line-height: 34px;
|
||||
line-height: 1.42857143 \0;
|
||||
}
|
||||
input[type="date"].input-sm,
|
||||
input[type="time"].input-sm,
|
||||
input[type="datetime-local"].input-sm,
|
||||
input[type="month"].input-sm {
|
||||
line-height: 30px;
|
||||
line-height: 1.5 \0;
|
||||
}
|
||||
input[type="date"].input-lg,
|
||||
input[type="time"].input-lg,
|
||||
input[type="datetime-local"].input-lg,
|
||||
input[type="month"].input-lg {
|
||||
line-height: 46px;
|
||||
line-height: 1.33 \0;
|
||||
}
|
||||
_:-ms-fullscreen,
|
||||
:root input[type="date"],
|
||||
_:-ms-fullscreen,
|
||||
:root input[type="time"],
|
||||
_:-ms-fullscreen,
|
||||
:root input[type="datetime-local"],
|
||||
_:-ms-fullscreen,
|
||||
:root input[type="month"] {
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
_:-ms-fullscreen.input-sm,
|
||||
:root input[type="date"].input-sm,
|
||||
_:-ms-fullscreen.input-sm,
|
||||
:root input[type="time"].input-sm,
|
||||
_:-ms-fullscreen.input-sm,
|
||||
:root input[type="datetime-local"].input-sm,
|
||||
_:-ms-fullscreen.input-sm,
|
||||
:root input[type="month"].input-sm {
|
||||
line-height: 1.5;
|
||||
}
|
||||
_:-ms-fullscreen.input-lg,
|
||||
:root input[type="date"].input-lg,
|
||||
_:-ms-fullscreen.input-lg,
|
||||
:root input[type="time"].input-lg,
|
||||
_:-ms-fullscreen.input-lg,
|
||||
:root input[type="datetime-local"].input-lg,
|
||||
_:-ms-fullscreen.input-lg,
|
||||
:root input[type="month"].input-lg {
|
||||
line-height: 1.33;
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
line-height: 34px;
|
||||
}
|
||||
input[type="date"].input-sm,
|
||||
input[type="time"].input-sm,
|
||||
input[type="datetime-local"].input-sm,
|
||||
input[type="month"].input-sm {
|
||||
line-height: 30px;
|
||||
}
|
||||
input[type="date"].input-lg,
|
||||
input[type="time"].input-lg,
|
||||
input[type="datetime-local"].input-lg,
|
||||
input[type="month"].input-lg {
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
@ -2880,8 +2849,8 @@ fieldset[disabled] .btn-default.active {
|
||||
}
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
border-color: #357ebd;
|
||||
background-color: #337ab7;
|
||||
border-color: #2e6da4;
|
||||
}
|
||||
.btn-primary:hover,
|
||||
.btn-primary:focus,
|
||||
@ -2890,8 +2859,8 @@ fieldset[disabled] .btn-default.active {
|
||||
.btn-primary.active,
|
||||
.open > .dropdown-toggle.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #3071a9;
|
||||
border-color: #285e8e;
|
||||
background-color: #286090;
|
||||
border-color: #204d74;
|
||||
}
|
||||
.btn-primary:active,
|
||||
.btn-primary.active,
|
||||
@ -2916,11 +2885,11 @@ fieldset[disabled] .btn-primary:active,
|
||||
.btn-primary.disabled.active,
|
||||
.btn-primary[disabled].active,
|
||||
fieldset[disabled] .btn-primary.active {
|
||||
background-color: #428bca;
|
||||
border-color: #357ebd;
|
||||
background-color: #337ab7;
|
||||
border-color: #2e6da4;
|
||||
}
|
||||
.btn-primary .badge {
|
||||
color: #428bca;
|
||||
color: #337ab7;
|
||||
background-color: #fff;
|
||||
}
|
||||
.btn-success {
|
||||
@ -3105,7 +3074,7 @@ fieldset[disabled] .btn-danger.active {
|
||||
}
|
||||
.btn-link {
|
||||
font-weight: normal;
|
||||
color: #428bca;
|
||||
color: #337ab7;
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-link,
|
||||
@ -3125,7 +3094,7 @@ fieldset[disabled] .btn-link {
|
||||
}
|
||||
.btn-link:hover,
|
||||
.btn-link:focus {
|
||||
color: #2a6496;
|
||||
color: #23527c;
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -3274,7 +3243,7 @@ tbody.collapse.in {
|
||||
.dropdown-menu > .active > a:focus {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background-color: #428bca;
|
||||
background-color: #337ab7;
|
||||
outline: 0;
|
||||
}
|
||||
.dropdown-menu > .disabled > a,
|
||||
@ -3367,10 +3336,6 @@ tbody.collapse.in {
|
||||
.btn-group-vertical > .btn.active {
|
||||
z-index: 2;
|
||||
}
|
||||
.btn-group > .btn:focus,
|
||||
.btn-group-vertical > .btn:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.btn-group .btn + .btn,
|
||||
.btn-group .btn + .btn-group,
|
||||
.btn-group .btn-group + .btn,
|
||||
@ -3705,7 +3670,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
.nav .open > a:hover,
|
||||
.nav .open > a:focus {
|
||||
background-color: #eee;
|
||||
border-color: #428bca;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
.nav .nav-divider {
|
||||
height: 1px;
|
||||
@ -3798,7 +3763,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
.nav-pills > li.active > a:hover,
|
||||
.nav-pills > li.active > a:focus {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
.nav-stacked > li {
|
||||
float: none;
|
||||
@ -4155,6 +4120,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
@ -4425,7 +4392,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
|
||||
padding: 6px 12px;
|
||||
margin-left: -1px;
|
||||
line-height: 1.42857143;
|
||||
color: #428bca;
|
||||
color: #337ab7;
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
@ -4445,7 +4412,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
|
||||
.pagination > li > span:hover,
|
||||
.pagination > li > a:focus,
|
||||
.pagination > li > span:focus {
|
||||
color: #2a6496;
|
||||
color: #23527c;
|
||||
background-color: #eee;
|
||||
border-color: #ddd;
|
||||
}
|
||||
@ -4458,8 +4425,8 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
background-color: #428bca;
|
||||
border-color: #428bca;
|
||||
background-color: #337ab7;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
.pagination > .disabled > span,
|
||||
.pagination > .disabled > span:hover,
|
||||
@ -4573,11 +4540,11 @@ a.label:focus {
|
||||
background-color: #5e5e5e;
|
||||
}
|
||||
.label-primary {
|
||||
background-color: #428bca;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
.label-primary[href]:hover,
|
||||
.label-primary[href]:focus {
|
||||
background-color: #3071a9;
|
||||
background-color: #286090;
|
||||
}
|
||||
.label-success {
|
||||
background-color: #5cb85c;
|
||||
@ -4638,11 +4605,17 @@ a.badge:focus {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
a.list-group-item.active > .badge,
|
||||
.list-group-item.active > .badge,
|
||||
.nav-pills > .active > a > .badge {
|
||||
color: #428bca;
|
||||
color: #337ab7;
|
||||
background-color: #fff;
|
||||
}
|
||||
.list-group-item > .badge {
|
||||
float: right;
|
||||
}
|
||||
.list-group-item > .badge + .badge {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.nav-pills > li > a > .badge {
|
||||
margin-left: 3px;
|
||||
}
|
||||
@ -4675,7 +4648,8 @@ a.list-group-item.active > .badge,
|
||||
.jumbotron {
|
||||
padding: 48px 0;
|
||||
}
|
||||
.container .jumbotron {
|
||||
.container .jumbotron,
|
||||
.container-fluid .jumbotron {
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
@ -4704,7 +4678,7 @@ a.list-group-item.active > .badge,
|
||||
a.thumbnail:hover,
|
||||
a.thumbnail:focus,
|
||||
a.thumbnail.active {
|
||||
border-color: #428bca;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
.thumbnail .caption {
|
||||
padding: 9px;
|
||||
@ -4826,7 +4800,7 @@ a.thumbnail.active {
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background-color: #428bca;
|
||||
background-color: #337ab7;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
-webkit-transition: width .6s ease;
|
||||
@ -4934,12 +4908,6 @@ a.thumbnail.active {
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.list-group-item > .badge {
|
||||
float: right;
|
||||
}
|
||||
.list-group-item > .badge + .badge {
|
||||
margin-right: 5px;
|
||||
}
|
||||
a.list-group-item {
|
||||
color: #555;
|
||||
}
|
||||
@ -4974,8 +4942,8 @@ a.list-group-item:focus {
|
||||
.list-group-item.active:focus {
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
border-color: #428bca;
|
||||
background-color: #337ab7;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
.list-group-item.active .list-group-item-heading,
|
||||
.list-group-item.active:hover .list-group-item-heading,
|
||||
@ -4991,7 +4959,7 @@ a.list-group-item:focus {
|
||||
.list-group-item.active .list-group-item-text,
|
||||
.list-group-item.active:hover .list-group-item-text,
|
||||
.list-group-item.active:focus .list-group-item-text {
|
||||
color: #e1edf7;
|
||||
color: #c7ddef;
|
||||
}
|
||||
.list-group-item-success {
|
||||
color: #3c763d;
|
||||
@ -5335,22 +5303,22 @@ a.list-group-item-danger.active:focus {
|
||||
border-bottom-color: #ddd;
|
||||
}
|
||||
.panel-primary {
|
||||
border-color: #428bca;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
.panel-primary > .panel-heading {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
border-color: #428bca;
|
||||
background-color: #337ab7;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: #428bca;
|
||||
border-top-color: #337ab7;
|
||||
}
|
||||
.panel-primary > .panel-heading .badge {
|
||||
color: #428bca;
|
||||
color: #337ab7;
|
||||
background-color: #fff;
|
||||
}
|
||||
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: #428bca;
|
||||
border-bottom-color: #337ab7;
|
||||
}
|
||||
.panel-success {
|
||||
border-color: #d6e9c6;
|
||||
@ -5549,10 +5517,9 @@ button.close {
|
||||
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
|
||||
}
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #000;
|
||||
}
|
||||
@ -5624,7 +5591,9 @@ button.close {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
display: block;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
line-height: 1.4;
|
||||
visibility: visible;
|
||||
filter: alpha(opacity=0);
|
||||
@ -5674,14 +5643,16 @@ button.close {
|
||||
border-top-color: #000;
|
||||
}
|
||||
.tooltip.top-left .tooltip-arrow {
|
||||
right: 5px;
|
||||
bottom: 0;
|
||||
left: 5px;
|
||||
margin-bottom: -5px;
|
||||
border-width: 5px 5px 0;
|
||||
border-top-color: #000;
|
||||
}
|
||||
.tooltip.top-right .tooltip-arrow {
|
||||
right: 5px;
|
||||
bottom: 0;
|
||||
left: 5px;
|
||||
margin-bottom: -5px;
|
||||
border-width: 5px 5px 0;
|
||||
border-top-color: #000;
|
||||
}
|
||||
@ -5708,13 +5679,15 @@ button.close {
|
||||
}
|
||||
.tooltip.bottom-left .tooltip-arrow {
|
||||
top: 0;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
margin-top: -5px;
|
||||
border-width: 0 5px 5px;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
.tooltip.bottom-right .tooltip-arrow {
|
||||
top: 0;
|
||||
right: 5px;
|
||||
left: 5px;
|
||||
margin-top: -5px;
|
||||
border-width: 0 5px 5px;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
@ -5726,6 +5699,7 @@ button.close {
|
||||
display: none;
|
||||
max-width: 276px;
|
||||
padding: 1px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1.42857143;
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
4
dist/css/bootstrap.min.css
vendored
4
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
102
dist/js/bootstrap.js
vendored
102
dist/js/bootstrap.js
vendored
@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Bootstrap v3.3.0 (http://getbootstrap.com)
|
||||
* Bootstrap v3.3.1 (http://getbootstrap.com)
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
@ -16,7 +16,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}(jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: transition.js v3.3.0
|
||||
* Bootstrap: transition.js v3.3.1
|
||||
* http://getbootstrap.com/javascript/#transitions
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
@ -76,7 +76,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}(jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: alert.js v3.3.0
|
||||
* Bootstrap: alert.js v3.3.1
|
||||
* http://getbootstrap.com/javascript/#alerts
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
@ -95,7 +95,7 @@ if (typeof jQuery === 'undefined') {
|
||||
$(el).on('click', dismiss, this.close)
|
||||
}
|
||||
|
||||
Alert.VERSION = '3.3.0'
|
||||
Alert.VERSION = '3.3.1'
|
||||
|
||||
Alert.TRANSITION_DURATION = 150
|
||||
|
||||
@ -171,7 +171,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}(jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: button.js v3.3.0
|
||||
* Bootstrap: button.js v3.3.1
|
||||
* http://getbootstrap.com/javascript/#buttons
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
@ -191,7 +191,7 @@ if (typeof jQuery === 'undefined') {
|
||||
this.isLoading = false
|
||||
}
|
||||
|
||||
Button.VERSION = '3.3.0'
|
||||
Button.VERSION = '3.3.1'
|
||||
|
||||
Button.DEFAULTS = {
|
||||
loadingText: 'loading...'
|
||||
@ -282,13 +282,13 @@ if (typeof jQuery === 'undefined') {
|
||||
e.preventDefault()
|
||||
})
|
||||
.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
|
||||
$(e.target).closest('.btn').toggleClass('focus', e.type == 'focus')
|
||||
$(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
|
||||
})
|
||||
|
||||
}(jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: carousel.js v3.3.0
|
||||
* Bootstrap: carousel.js v3.3.1
|
||||
* http://getbootstrap.com/javascript/#carousel
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
@ -319,7 +319,7 @@ if (typeof jQuery === 'undefined') {
|
||||
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
|
||||
}
|
||||
|
||||
Carousel.VERSION = '3.3.0'
|
||||
Carousel.VERSION = '3.3.1'
|
||||
|
||||
Carousel.TRANSITION_DURATION = 600
|
||||
|
||||
@ -331,6 +331,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}
|
||||
|
||||
Carousel.prototype.keydown = function (e) {
|
||||
if (/input|textarea/i.test(e.target.tagName)) return
|
||||
switch (e.which) {
|
||||
case 37: this.prev(); break
|
||||
case 39: this.next(); break
|
||||
@ -528,7 +529,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}(jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: collapse.js v3.3.0
|
||||
* Bootstrap: collapse.js v3.3.1
|
||||
* http://getbootstrap.com/javascript/#collapse
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
@ -557,7 +558,7 @@ if (typeof jQuery === 'undefined') {
|
||||
if (this.options.toggle) this.toggle()
|
||||
}
|
||||
|
||||
Collapse.VERSION = '3.3.0'
|
||||
Collapse.VERSION = '3.3.1'
|
||||
|
||||
Collapse.TRANSITION_DURATION = 350
|
||||
|
||||
@ -740,7 +741,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}(jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: dropdown.js v3.3.0
|
||||
* Bootstrap: dropdown.js v3.3.1
|
||||
* http://getbootstrap.com/javascript/#dropdowns
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
@ -760,7 +761,7 @@ if (typeof jQuery === 'undefined') {
|
||||
$(element).on('click.bs.dropdown', this.toggle)
|
||||
}
|
||||
|
||||
Dropdown.VERSION = '3.3.0'
|
||||
Dropdown.VERSION = '3.3.1'
|
||||
|
||||
Dropdown.prototype.toggle = function (e) {
|
||||
var $this = $(this)
|
||||
@ -796,7 +797,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}
|
||||
|
||||
Dropdown.prototype.keydown = function (e) {
|
||||
if (!/(38|40|27|32)/.test(e.which)) return
|
||||
if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
|
||||
|
||||
var $this = $(this)
|
||||
|
||||
@ -902,7 +903,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}(jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: modal.js v3.3.0
|
||||
* Bootstrap: modal.js v3.3.1
|
||||
* http://getbootstrap.com/javascript/#modals
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
@ -933,7 +934,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}
|
||||
}
|
||||
|
||||
Modal.VERSION = '3.3.0'
|
||||
Modal.VERSION = '3.3.1'
|
||||
|
||||
Modal.TRANSITION_DURATION = 300
|
||||
Modal.BACKDROP_TRANSITION_DURATION = 150
|
||||
@ -959,10 +960,11 @@ if (typeof jQuery === 'undefined') {
|
||||
this.isShown = true
|
||||
|
||||
this.checkScrollbar()
|
||||
this.setScrollbar()
|
||||
this.$body.addClass('modal-open')
|
||||
|
||||
this.setScrollbar()
|
||||
this.escape()
|
||||
this.resize()
|
||||
|
||||
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
|
||||
|
||||
@ -977,6 +979,9 @@ if (typeof jQuery === 'undefined') {
|
||||
.show()
|
||||
.scrollTop(0)
|
||||
|
||||
if (that.options.backdrop) that.adjustBackdrop()
|
||||
that.adjustDialog()
|
||||
|
||||
if (transition) {
|
||||
that.$element[0].offsetWidth // force reflow
|
||||
}
|
||||
@ -1011,6 +1016,7 @@ if (typeof jQuery === 'undefined') {
|
||||
this.isShown = false
|
||||
|
||||
this.escape()
|
||||
this.resize()
|
||||
|
||||
$(document).off('focusin.bs.modal')
|
||||
|
||||
@ -1046,11 +1052,20 @@ if (typeof jQuery === 'undefined') {
|
||||
}
|
||||
}
|
||||
|
||||
Modal.prototype.resize = function () {
|
||||
if (this.isShown) {
|
||||
$(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
|
||||
} else {
|
||||
$(window).off('resize.bs.modal')
|
||||
}
|
||||
}
|
||||
|
||||
Modal.prototype.hideModal = function () {
|
||||
var that = this
|
||||
this.$element.hide()
|
||||
this.backdrop(function () {
|
||||
that.$body.removeClass('modal-open')
|
||||
that.resetAdjustments()
|
||||
that.resetScrollbar()
|
||||
that.$element.trigger('hidden.bs.modal')
|
||||
})
|
||||
@ -1107,13 +1122,43 @@ if (typeof jQuery === 'undefined') {
|
||||
}
|
||||
}
|
||||
|
||||
// these following methods are used to handle overflowing modals
|
||||
|
||||
Modal.prototype.handleUpdate = function () {
|
||||
if (this.options.backdrop) this.adjustBackdrop()
|
||||
this.adjustDialog()
|
||||
}
|
||||
|
||||
Modal.prototype.adjustBackdrop = function () {
|
||||
this.$backdrop
|
||||
.css('height', 0)
|
||||
.css('height', this.$element[0].scrollHeight)
|
||||
}
|
||||
|
||||
Modal.prototype.adjustDialog = function () {
|
||||
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
|
||||
|
||||
this.$element.css({
|
||||
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
|
||||
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
|
||||
})
|
||||
}
|
||||
|
||||
Modal.prototype.resetAdjustments = function () {
|
||||
this.$element.css({
|
||||
paddingLeft: '',
|
||||
paddingRight: ''
|
||||
})
|
||||
}
|
||||
|
||||
Modal.prototype.checkScrollbar = function () {
|
||||
this.bodyIsOverflowing = document.body.scrollHeight > document.documentElement.clientHeight
|
||||
this.scrollbarWidth = this.measureScrollbar()
|
||||
}
|
||||
|
||||
Modal.prototype.setScrollbar = function () {
|
||||
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
|
||||
if (this.scrollbarWidth) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
|
||||
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
|
||||
}
|
||||
|
||||
Modal.prototype.resetScrollbar = function () {
|
||||
@ -1121,7 +1166,6 @@ if (typeof jQuery === 'undefined') {
|
||||
}
|
||||
|
||||
Modal.prototype.measureScrollbar = function () { // thx walsh
|
||||
if (document.body.clientWidth >= window.innerWidth) return 0
|
||||
var scrollDiv = document.createElement('div')
|
||||
scrollDiv.className = 'modal-scrollbar-measure'
|
||||
this.$body.append(scrollDiv)
|
||||
@ -1184,7 +1228,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}(jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: tooltip.js v3.3.0
|
||||
* Bootstrap: tooltip.js v3.3.1
|
||||
* http://getbootstrap.com/javascript/#tooltip
|
||||
* Inspired by the original jQuery.tipsy by Jason Frame
|
||||
* ========================================================================
|
||||
@ -1210,7 +1254,7 @@ if (typeof jQuery === 'undefined') {
|
||||
this.init('tooltip', element, options)
|
||||
}
|
||||
|
||||
Tooltip.VERSION = '3.3.0'
|
||||
Tooltip.VERSION = '3.3.1'
|
||||
|
||||
Tooltip.TRANSITION_DURATION = 150
|
||||
|
||||
@ -1663,7 +1707,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}(jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: popover.js v3.3.0
|
||||
* Bootstrap: popover.js v3.3.1
|
||||
* http://getbootstrap.com/javascript/#popovers
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
@ -1683,7 +1727,7 @@ if (typeof jQuery === 'undefined') {
|
||||
|
||||
if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
|
||||
|
||||
Popover.VERSION = '3.3.0'
|
||||
Popover.VERSION = '3.3.1'
|
||||
|
||||
Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
|
||||
placement: 'right',
|
||||
@ -1783,7 +1827,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}(jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: scrollspy.js v3.3.0
|
||||
* Bootstrap: scrollspy.js v3.3.1
|
||||
* http://getbootstrap.com/javascript/#scrollspy
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
@ -1814,7 +1858,7 @@ if (typeof jQuery === 'undefined') {
|
||||
this.process()
|
||||
}
|
||||
|
||||
ScrollSpy.VERSION = '3.3.0'
|
||||
ScrollSpy.VERSION = '3.3.1'
|
||||
|
||||
ScrollSpy.DEFAULTS = {
|
||||
offset: 10
|
||||
@ -1959,7 +2003,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}(jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: tab.js v3.3.0
|
||||
* Bootstrap: tab.js v3.3.1
|
||||
* http://getbootstrap.com/javascript/#tabs
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
@ -1977,7 +2021,7 @@ if (typeof jQuery === 'undefined') {
|
||||
this.element = $(element)
|
||||
}
|
||||
|
||||
Tab.VERSION = '3.3.0'
|
||||
Tab.VERSION = '3.3.1'
|
||||
|
||||
Tab.TRANSITION_DURATION = 150
|
||||
|
||||
@ -2113,7 +2157,7 @@ if (typeof jQuery === 'undefined') {
|
||||
}(jQuery);
|
||||
|
||||
/* ========================================================================
|
||||
* Bootstrap: affix.js v3.3.0
|
||||
* Bootstrap: affix.js v3.3.1
|
||||
* http://getbootstrap.com/javascript/#affix
|
||||
* ========================================================================
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
@ -2142,7 +2186,7 @@ if (typeof jQuery === 'undefined') {
|
||||
this.checkPosition()
|
||||
}
|
||||
|
||||
Affix.VERSION = '3.3.0'
|
||||
Affix.VERSION = '3.3.1'
|
||||
|
||||
Affix.RESET = 'affix affix-top affix-bottom'
|
||||
|
||||
|
||||
6
dist/js/bootstrap.min.js
vendored
6
dist/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -156,12 +156,12 @@
|
||||
|
||||
</div><!-- /.container -->
|
||||
|
||||
<div class="blog-footer">
|
||||
<footer class="blog-footer">
|
||||
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
<p>
|
||||
<a href="#">Back to top</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -111,11 +111,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div><!-- /.carousel -->
|
||||
|
||||
@ -38,11 +38,13 @@
|
||||
<div class="masthead clearfix">
|
||||
<div class="inner">
|
||||
<h3 class="masthead-brand">Cover</h3>
|
||||
<ul class="nav masthead-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Features</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<nav>
|
||||
<ul class="nav masthead-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Features</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-3 col-md-2 sidebar">
|
||||
<ul class="nav nav-sidebar">
|
||||
<li class="active"><a href="#">Overview</a></li>
|
||||
<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
|
||||
<li><a href="#">Reports</a></li>
|
||||
<li><a href="#">Analytics</a></li>
|
||||
<li><a href="#">Export</a></li>
|
||||
|
||||
@ -31,11 +31,13 @@
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right" role="tablist">
|
||||
<li role="presentation" class="active"><a href="#">Home</a></li>
|
||||
<li role="presentation"><a href="#">About</a></li>
|
||||
<li role="presentation"><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<nav>
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li role="presentation" class="active"><a href="#">Home</a></li>
|
||||
<li role="presentation"><a href="#">About</a></li>
|
||||
<li role="presentation"><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h3 class="text-muted">Project name</h3>
|
||||
</div>
|
||||
|
||||
@ -69,9 +71,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<footer class="footer">
|
||||
<p>© Company 2014</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
|
||||
@ -33,14 +33,16 @@
|
||||
|
||||
<div class="masthead">
|
||||
<h3 class="text-muted">Project name</h3>
|
||||
<ul class="nav nav-justified">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Projects</a></li>
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Downloads</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<div role="navigation">
|
||||
<ul class="nav nav-justified">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Projects</a></li>
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Downloads</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Jumbotron -->
|
||||
@ -71,9 +73,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Site footer -->
|
||||
<div class="footer">
|
||||
<footer class="footer">
|
||||
<p>© Company 2014</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -62,7 +62,7 @@
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="../navbar/">Default</a></li>
|
||||
<li><a href="../navbar-static-top/">Static top</a></li>
|
||||
<li class="active"><a href="./">Fixed top</a></li>
|
||||
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -61,7 +61,7 @@
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="../navbar/">Default</a></li>
|
||||
<li class="active"><a href="./">Static top</a></li>
|
||||
<li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
|
||||
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
|
||||
@ -45,11 +45,11 @@
|
||||
</div>
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -62,7 +62,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="active"><a href="./">Default</a></li>
|
||||
<li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
|
||||
<li><a href="../navbar-static-top/">Static top</a></li>
|
||||
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
|
||||
</ul>
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
|
||||
@ -33,8 +33,10 @@
|
||||
|
||||
<form class="form-signin" role="form">
|
||||
<h2 class="form-signin-heading">Please sign in</h2>
|
||||
<input type="email" class="form-control" placeholder="Email address" required autofocus>
|
||||
<input type="password" class="form-control" placeholder="Password" required>
|
||||
<label for="inputEmail" class="sr-only">Email address</label>
|
||||
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
|
||||
<label for="inputPassword" class="sr-only">Password</label>
|
||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me"> Remember me
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -72,11 +72,11 @@
|
||||
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="text-muted">Place sticky footer content here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
|
||||
@ -38,11 +38,11 @@
|
||||
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="text-muted">Place sticky footer content here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -341,7 +341,7 @@
|
||||
<h1>Dropdown menus</h1>
|
||||
</div>
|
||||
<div class="dropdown theme-dropdown clearfix">
|
||||
<a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<a id="dropdownMenu1" href="#" class="sr-only dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
||||
<li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
@ -388,7 +388,7 @@
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -421,7 +421,7 @@
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@ -616,11 +616,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -107,28 +107,28 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="download" class="page-header">Download</h1>
|
||||
|
||||
<p class="lead">Bootstrap (currently v3.3.0) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
|
||||
<p class="lead">Bootstrap (currently v3.3.1) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
|
||||
|
||||
<div class="row bs-downloads">
|
||||
<div class="col-sm-4">
|
||||
<h3 id="download-bootstrap">Bootstrap</h3>
|
||||
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
|
||||
<p>
|
||||
<a href="https://github.com/twbs/bootstrap/releases/download/v3.3.0/bootstrap-3.3.0-dist.zip" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
|
||||
<a href="https://github.com/twbs/bootstrap/releases/download/v3.3.1/bootstrap-3.3.1-dist.zip" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3 id="download-source">Source code</h3>
|
||||
<p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="#grunt">some setup.</a></strong></p>
|
||||
<p>
|
||||
<a href="https://github.com/twbs/bootstrap/archive/v3.3.0.zip" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
<a href="https://github.com/twbs/bootstrap/archive/v3.3.1.zip" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3 id="download-sass">Sass</h3>
|
||||
<p><a href="https://github.com/twbs/bootstrap-sass">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p>
|
||||
<p>
|
||||
<a href="https://github.com/twbs/bootstrap-sass/archive/v3.3.0.tar.gz" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a>
|
||||
<a href="https://github.com/twbs/bootstrap-sass/archive/v3.3.1.tar.gz" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -136,13 +136,13 @@
|
||||
<h3 id="download-cdn">Bootstrap CDN</h3>
|
||||
<p>The folks over at <a href="http://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"</span><span class="nt">></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"</span><span class="nt">></span>
|
||||
|
||||
<span class="c"><!-- Optional theme --></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"</span><span class="nt">></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"</span><span class="nt">></span>
|
||||
|
||||
<span class="c"><!-- Latest compiled and minified JavaScript --></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"</span><span class="nt">></script></span></code></pre></div>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</span><span class="nt">></script></span></code></pre></div>
|
||||
|
||||
<h3 id="download-bower">Install with Bower</h3>
|
||||
<p>Install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="http://bower.io">Bower</a>.</p>
|
||||
@ -156,7 +156,7 @@
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="jquery-required">
|
||||
<h4>jQuery required</h4>
|
||||
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="https://github.com/twbs/bootstrap/blob/v3.3.0/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="https://github.com/twbs/bootstrap/blob/v3.3.1/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="whats-included-precompiled">Precompiled Bootstrap</h2>
|
||||
@ -497,33 +497,33 @@ Copy any changes made here over to the README too. -->
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Android</th>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not Supported</td>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>iOS</th>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Mac OS X</th>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Windows</th>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -545,26 +545,26 @@ Copy any changes made here over to the README too. -->
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><code>border-radius</code></th>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>box-shadow</code></th>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>transform</code></th>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported, with <code>-ms</code> prefix</td>
|
||||
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
|
||||
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported, with <code>-ms</code> prefix</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>transition</code></th>
|
||||
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
|
||||
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>placeholder</code></th>
|
||||
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
|
||||
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -635,13 +635,20 @@ Copy any changes made here over to the README too. -->
|
||||
<h3 id="support-browser-zooming">Browser zooming</h3>
|
||||
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
|
||||
|
||||
<h3 id="support-printing">Printer viewports</h3>
|
||||
<p>Even in some modern browsers, printing can be quirky. In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p>
|
||||
<h3 id="support-printing">Printing</h3>
|
||||
<p>Even in some modern browsers, printing can be quirky.</p>
|
||||
<p>In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p>
|
||||
<ul>
|
||||
<li>Embrace the extra-small grid and make sure your page looks acceptable under it.</li>
|
||||
<li>Customize the values of the <code>@screen-*</code> Less variables so that your printer paper is considered larger than extra-small.</li>
|
||||
<li>Add custom media queries to change the grid size breakpoints for print media only.</li>
|
||||
</ul>
|
||||
<p>Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:</p>
|
||||
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="k">@media</span> <span class="n">print</span> <span class="p">{</span>
|
||||
<span class="nc">.container</span> <span class="p">{</span>
|
||||
<span class="nl">width</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span></code></pre></div>
|
||||
|
||||
<h3 id="support-android-stock-browser">Android stock browser</h3>
|
||||
<p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
|
||||
@ -661,7 +668,7 @@ Copy any changes made here over to the README too. -->
|
||||
<h3 id="support-validators">Validators</h3>
|
||||
<p>In order to provide the best possible experience to old and buggy browsers, Bootstrap uses <a href="http://browserhacks.com">CSS browser hacks</a> in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.</p>
|
||||
<p>These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.</p>
|
||||
<p>Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of <a href="#support-ie-compatibility-modes">X-UA-Compatible <code><meta></code> tags</a> to avoid Internet Explorer issues and our inclusion of a workaround for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">a certain Firefox bug</a>.</p>
|
||||
<p>Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">a certain Firefox bug</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-docs-section">
|
||||
@ -731,9 +738,14 @@ Copy any changes made here over to the README too. -->
|
||||
<p>When nesting headings (<code><h1></code> - <code><h6></code>), your primary document header should be an <code><h1></code>. Subsequent headings should make logical use of <code><h2></code> - <code><h6></code> such that screen readers can construct a table of contents for your pages.</p>
|
||||
<p>Learn more at <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="http://accessibility.psu.edu/headings">Penn State's AccessAbility</a>.</p>
|
||||
|
||||
<h3>Color contrast</h3>
|
||||
<p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href="../css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="../css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="..css/#helper-classes-backgrounds">contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p>
|
||||
|
||||
<h3>Additional resources</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
|
||||
<li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome's Accessibility Developer Tools extension</a></li>
|
||||
<li><a href="http://www.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a>
|
||||
<li><a href="http://a11yproject.com/">The A11Y Project</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
|
||||
</ul>
|
||||
@ -805,6 +817,7 @@ Copy any changes made here over to the README too. -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
@ -867,7 +880,7 @@ Copy any changes made here over to the README too. -->
|
||||
<li><a href="#support-safari-percentages">Safari percent rounding</a></li>
|
||||
<li><a href="#support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</a></li>
|
||||
<li><a href="#support-browser-zooming">Browser zooming</a></li>
|
||||
<li><a href="#support-printing">Printer viewports</a></li>
|
||||
<li><a href="#support-printing">Printing</a></li>
|
||||
<li><a href="#support-android-stock-browser">Android stock browser</a></li>
|
||||
<li><a href="#support-validators">Validators</a></li>
|
||||
</ul>
|
||||
@ -893,6 +906,7 @@ Copy any changes made here over to the README too. -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -922,7 +936,7 @@ Copy any changes made here over to the README too. -->
|
||||
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="bs-docs-footer-links muted">
|
||||
<li>Currently v3.3.0</li>
|
||||
<li>Currently v3.3.1</li>
|
||||
<li>·</li>
|
||||
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
|
||||
<li>·</li>
|
||||
|
||||
@ -96,9 +96,9 @@
|
||||
<span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
|
||||
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
|
||||
<p class="lead">
|
||||
<a href="getting-started#download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download 3.3.0');">Download Bootstrap</a>
|
||||
<a href="getting-started#download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download 3.3.1');">Download Bootstrap</a>
|
||||
</p>
|
||||
<p class="version">Currently v3.3.0</p>
|
||||
<p class="version">Currently v3.3.1</p>
|
||||
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
|
||||
|
||||
</div>
|
||||
@ -205,7 +205,7 @@
|
||||
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="bs-docs-footer-links muted">
|
||||
<li>Currently v3.3.0</li>
|
||||
<li>Currently v3.3.1</li>
|
||||
<li>·</li>
|
||||
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
|
||||
<li>·</li>
|
||||
|
||||
@ -127,7 +127,7 @@
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Plugin dependencies</h4>
|
||||
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v3.3.0/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v3.3.1/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="js-data-attrs">Data attributes</h3>
|
||||
@ -392,6 +392,82 @@
|
||||
...
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<h2 id="modals-related-target">Varying modal content based on trigger button</h2>
|
||||
<p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p>
|
||||
<div class="bs-example" style="padding-bottom: 24px;">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
|
||||
...more buttons...
|
||||
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form role="form">
|
||||
<div class="form-group">
|
||||
<label for="recipient-name" class="control-label">Recipient:</label>
|
||||
<input type="text" class="form-control" id="recipient-name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message-text" class="control-label">Message:</label>
|
||||
<textarea class="form-control" id="message-text"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Send message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.modal -->
|
||||
</div><!-- /.bs-example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever=</span><span class="s">"@mdo"</span><span class="nt">></span>Open modal for @mdo<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever=</span><span class="s">"@fat"</span><span class="nt">></span>Open modal for @fat<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever=</span><span class="s">"@twbootstrap"</span><span class="nt">></span>Open modal for @twbootstrap<span class="nt"></button></span>
|
||||
...more buttons...
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Close<span class="nt"></span></button></span>
|
||||
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"exampleModalLabel"</span><span class="nt">></span>New message<span class="nt"></h4></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span>
|
||||
<span class="nt"><form</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"recipient-name"</span> <span class="na">class=</span><span class="s">"control-label"</span><span class="nt">></span>Recipient:<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"recipient-name"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"message-text"</span> <span class="na">class=</span><span class="s">"control-label"</span><span class="nt">></span>Message:<span class="nt"></label></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"message-text"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Send message<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#exampleModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'show.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">button</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">relatedTarget</span><span class="p">)</span> <span class="c1">// Button that triggered the modal</span>
|
||||
<span class="kd">var</span> <span class="nx">recipient</span> <span class="o">=</span> <span class="nx">button</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">'whatever'</span><span class="p">)</span> <span class="c1">// Extract info from data-* attributes</span>
|
||||
<span class="c1">// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).</span>
|
||||
<span class="c1">// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.</span>
|
||||
<span class="kd">var</span> <span class="nx">modal</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="nx">modal</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.modal-title'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s1">'New message to '</span> <span class="o">+</span> <span class="nx">recipient</span><span class="p">)</span>
|
||||
<span class="nx">modal</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.modal-body input'</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">recipient</span><span class="p">)</span>
|
||||
<span class="p">})</span></code></pre></div>
|
||||
|
||||
<h2 id="modals-usage">Usage</h2>
|
||||
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.modal-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
|
||||
|
||||
@ -529,7 +605,7 @@
|
||||
<div class="collapse navbar-collapse bs-example-js-navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="dropdown">
|
||||
<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
@ -542,7 +618,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
@ -557,7 +633,7 @@
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li id="fat-menu" class="dropdown">
|
||||
<a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
@ -580,7 +656,7 @@
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li role="presentation" class="active"><a href="#">Regular link</a></li>
|
||||
<li role="presentation" class="dropdown">
|
||||
<a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
@ -593,7 +669,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li role="presentation" class="dropdown">
|
||||
<a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
@ -606,7 +682,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li role="presentation" class="dropdown">
|
||||
<a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
@ -630,9 +706,9 @@
|
||||
<h3>Via data attributes</h3>
|
||||
<p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">id=</span><span class="s">"dLabel"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">id=</span><span class="s">"dLabel"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown trigger
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dLabel"</span><span class="nt">></span>
|
||||
...
|
||||
@ -640,7 +716,7 @@
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
<p>To keep URLs intact with link buttons, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">id=</span><span class="s">"dLabel"</span> <span class="na">data-target=</span><span class="s">"#"</span> <span class="na">href=</span><span class="s">"http://example.com"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">id=</span><span class="s">"dLabel"</span> <span class="na">data-target=</span><span class="s">"#"</span> <span class="na">href=</span><span class="s">"http://example.com"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown trigger
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"></a></span>
|
||||
@ -722,7 +798,7 @@
|
||||
<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 <span class="caret"></span></a>
|
||||
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></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>
|
||||
@ -757,6 +833,14 @@
|
||||
<h4>Requires Bootstrap nav</h4>
|
||||
<p>Scrollspy currently requires the use of a <a href="../components/#nav">Bootstrap nav component</a> for proper highlighting of active links.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Resolvable ID targets required</h4>
|
||||
<p>Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the DOM like <code><div id="home"></div></code>.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Non-<code>:visible</code> target elements ignored</h4>
|
||||
<p>Target elements that are not <a href="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
|
||||
</div>
|
||||
|
||||
<h3>Requires relative positioning</h3>
|
||||
<p>No matter the implementation method, scrollspy requires the use of <code>position: relative;</code> on the element you're spying on. In most cases this is the <code><body></code>.</p>
|
||||
@ -780,14 +864,6 @@
|
||||
<p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">({</span> <span class="na">target</span><span class="p">:</span> <span class="s1">'.navbar-example'</span> <span class="p">})</span></code></pre></div>
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Resolvable ID targets required</h4>
|
||||
<p>Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the DOM like <code><div id="home"></div></code>.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Non-<code>:visible</code> target elements ignored</h4>
|
||||
<p>Target elements that are not <a href="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
|
||||
</div>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<h4>.scrollspy('refresh')</h4>
|
||||
@ -847,7 +923,7 @@
|
||||
|
||||
<h2 id="tabs-examples">Example tabs</h2>
|
||||
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
|
||||
<div class="bs-example bs-example-tabs">
|
||||
<div class="bs-example bs-example-tabs" role="tabpanel">
|
||||
<ul id="myTab" class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation" 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"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li>
|
||||
@ -898,20 +974,24 @@
|
||||
|
||||
<h3>Markup</h3>
|
||||
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Nav tabs --></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Profile<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Messages<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Settings<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">></span>
|
||||
|
||||
<span class="c"><!-- Nav tabs --></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">aria-controls=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">aria-controls=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Profile<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">aria-controls=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Messages<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">aria-controls=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Settings<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
|
||||
<span class="c"><!-- Tab panes --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"profile"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"messages"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"settings"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- Tab panes --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"profile"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"messages"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"settings"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<h3>Fade effect</h3>
|
||||
@ -929,10 +1009,10 @@
|
||||
Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
|
||||
</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">role=</span><span class="s">"tablist"</span> <span class="na">id=</span><span class="s">"myTab"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Profile<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Messages<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Settings<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">aria-controls=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">aria-controls=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Profile<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">aria-controls=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Messages<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"presentation"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">aria-controls=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Settings<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span>
|
||||
@ -1052,6 +1132,11 @@
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Opt-in functionality</h4>
|
||||
<p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
|
||||
<p>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'[data-toggle="tooltip"]'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">()</span>
|
||||
<span class="p">})</span></code></pre></div>
|
||||
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Tooltips in button groups and input groups require special setting</h4>
|
||||
@ -1246,7 +1331,6 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="popovers" class="page-header">Popovers <small>popover.js</small></h1>
|
||||
|
||||
<h2 id="popovers-examples">Examples</h2>
|
||||
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
|
||||
<p>Popovers whose both title and content are zero-length are never displayed.</p>
|
||||
|
||||
@ -1257,6 +1341,10 @@
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Opt-in functionality</h4>
|
||||
<p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
|
||||
<p>One way to initialize all popovers on a page would be to select them by their <code>data-toggle</code> attribute:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'[data-toggle="popover"]'</span><span class="p">).</span><span class="nx">popover</span><span class="p">()</span>
|
||||
<span class="p">})</span></code></pre></div>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Popovers in button groups and input groups require special setting</h4>
|
||||
@ -1275,6 +1363,7 @@
|
||||
<p>Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="popovers-examples">Examples</h2>
|
||||
<h3>Static popover</h3>
|
||||
<p>Four options are available: top, right, bottom, and left aligned.</p>
|
||||
<div class="bs-example bs-example-popover">
|
||||
@ -1639,6 +1728,10 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
|
||||
<h2 id="buttons-single-toggle">Single toggle</h2>
|
||||
<p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Pre-toggled buttons need <code>.active</code> and <code>aria-pressed="true"</code></h4>
|
||||
<p>For pre-toggled buttons, you must add the <code>.active</code> class and the <code>aria-pressed="true"</code> attribute to the <code>button</code> yourself.</p>
|
||||
</div>
|
||||
<div class="bs-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||
Single toggle
|
||||
@ -1647,10 +1740,6 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"button"</span> <span class="na">aria-pressed=</span><span class="s">"false"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span>
|
||||
Single toggle
|
||||
<span class="nt"></button></span></code></pre></div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Pre-toggled buttons need <code>.active</code> and <code>aria-pressed="true"</code></h4>
|
||||
<p>For pre-toggled buttons, you must add the <code>.active</code> class and the <code>aria-pressed="true"</code> attribute to the <code>button</code> yourself.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="buttons-checkbox-radio">Checkbox / Radio</h2>
|
||||
<p>Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing checkbox or radio inputs to enable toggling in their respective styles.</p>
|
||||
@ -1976,7 +2065,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="carousel" class="page-header">Carousel <small>carousel.js</small></h1>
|
||||
|
||||
<p>A slideshow component for cycling through elemnts, like a carousel. <strong>Nested carousels are not supported.</strong></p>
|
||||
<p>A slideshow component for cycling through elements, like a carousel. <strong>Nested carousels are not supported.</strong></p>
|
||||
|
||||
<h2 id="carousel-examples">Examples</h2>
|
||||
<div class="bs-example">
|
||||
@ -1998,11 +2087,11 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
</div>
|
||||
</div>
|
||||
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
@ -2034,20 +2123,30 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
|
||||
<span class="c"><!-- Controls --></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"left carousel-control"</span> <span class="na">href=</span><span class="s">"#carousel-example-generic"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-chevron-left"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-chevron-left"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Previous<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"right carousel-control"</span> <span class="na">href=</span><span class="s">"#carousel-example-generic"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-chevron-right"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-chevron-right"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Next<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<div class="bs-callout bs-callout-danger" id="callout-carousel-accessibility">
|
||||
<h4>Accessibility issue</h4>
|
||||
<p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-carousel-transitions">
|
||||
<h4>Transition animations not supported in Internet Explorer 8 & 9</h4>
|
||||
<p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 & 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-carousel-active">
|
||||
<h4>Initial active element required</h4>
|
||||
<p>The <code>.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p>
|
||||
</div>
|
||||
|
||||
<h3>Optional captions</h3>
|
||||
<p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
|
||||
<div class="bs-example">
|
||||
@ -2081,11 +2180,11 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
</div>
|
||||
</div>
|
||||
<a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
@ -2098,11 +2197,6 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Accessibility issue</h4>
|
||||
<p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="carousel-usage">Usage</h2>
|
||||
|
||||
<h3>Multiple carousels</h3>
|
||||
@ -2327,6 +2421,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
@ -2350,6 +2445,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<li><a href="#modals-examples">Examples</a></li>
|
||||
<li><a href="#modals-sizes">Sizes</a></li>
|
||||
<li><a href="#modals-remove-animation">Remove animation</a></li>
|
||||
<li><a href="#modals-related-target">Varying content based on trigger button</a></li>
|
||||
<li><a href="#modals-usage">Usage</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -2438,6 +2534,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2467,7 +2564,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="bs-docs-footer-links muted">
|
||||
<li>Currently v3.3.0</li>
|
||||
<li>Currently v3.3.1</li>
|
||||
<li>·</li>
|
||||
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
|
||||
<li>·</li>
|
||||
|
||||
@ -539,6 +539,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
@ -564,6 +565,7 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -593,7 +595,7 @@
|
||||
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<ul class="bs-docs-footer-links muted">
|
||||
<li>Currently v3.3.0</li>
|
||||
<li>Currently v3.3.1</li>
|
||||
<li>·</li>
|
||||
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
|
||||
<li>·</li>
|
||||
|
||||
18
sitemap.xml
18
sitemap.xml
@ -2,7 +2,7 @@
|
||||
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>http://getbootstrap.com/</loc>
|
||||
<lastmod>2014-10-29T12:47:59-07:00</lastmod>
|
||||
<lastmod>2014-11-12T09:05:43-08:00</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<url>
|
||||
<loc>http://getbootstrap.com/about/</loc>
|
||||
<lastmod>2014-10-29T12:47:59-07:00</lastmod>
|
||||
<lastmod>2014-11-12T09:05:43-08:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
<url>
|
||||
<loc>http://getbootstrap.com/browser-bugs/</loc>
|
||||
<lastmod>2014-10-29T12:47:59-07:00</lastmod>
|
||||
<lastmod>2014-11-12T09:05:43-08:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
<url>
|
||||
<loc>http://getbootstrap.com/components/</loc>
|
||||
<lastmod>2014-10-29T12:47:59-07:00</lastmod>
|
||||
<lastmod>2014-11-12T09:05:43-08:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
@ -37,7 +37,7 @@
|
||||
|
||||
<url>
|
||||
<loc>http://getbootstrap.com/css/</loc>
|
||||
<lastmod>2014-10-29T12:47:59-07:00</lastmod>
|
||||
<lastmod>2014-11-12T09:05:43-08:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
@ -46,7 +46,7 @@
|
||||
|
||||
<url>
|
||||
<loc>http://getbootstrap.com/customize/</loc>
|
||||
<lastmod>2014-10-29T12:47:59-07:00</lastmod>
|
||||
<lastmod>2014-11-12T09:05:43-08:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
@ -55,7 +55,7 @@
|
||||
|
||||
<url>
|
||||
<loc>http://getbootstrap.com/getting-started/</loc>
|
||||
<lastmod>2014-10-29T12:47:59-07:00</lastmod>
|
||||
<lastmod>2014-11-12T09:05:43-08:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
@ -66,7 +66,7 @@
|
||||
|
||||
<url>
|
||||
<loc>http://getbootstrap.com/javascript/</loc>
|
||||
<lastmod>2014-10-29T12:47:59-07:00</lastmod>
|
||||
<lastmod>2014-11-12T09:05:43-08:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
@ -75,7 +75,7 @@
|
||||
|
||||
<url>
|
||||
<loc>http://getbootstrap.com/migration/</loc>
|
||||
<lastmod>2014-10-29T12:47:59-07:00</lastmod>
|
||||
<lastmod>2014-11-12T09:05:43-08:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user