mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00
Code Activity

Merge branch 'master' into derp

Browse Source 
Conflicts:
	Gruntfile.js
	dist/css/bootstrap-theme.css
	dist/css/bootstrap-theme.css.map
	dist/css/bootstrap-theme.min.css
	dist/css/bootstrap.css
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	docs/_includes/components/dropdowns.html
	docs/_includes/components/media.html
	docs/_includes/components/navs.html
	docs/_includes/components/progress-bars.html
	docs/_includes/components/responsive-embed.html
	docs/_includes/css/buttons.html
	docs/_includes/css/forms.html
	docs/_includes/css/less.html
	docs/_includes/css/overview.html
	docs/_includes/css/responsive-utilities.html
	docs/_includes/customizer-variables.html
	docs/_includes/getting-started/browser-device-support.html
	docs/_includes/getting-started/grunt.html
	docs/_includes/getting-started/template.html
	docs/_includes/header.html
	docs/_includes/js/alerts.html
	docs/_includes/js/buttons.html
	docs/_includes/js/carousel.html
	docs/_includes/js/collapse.html
	docs/_includes/js/dropdowns.html
	docs/_includes/js/modal.html
	docs/_includes/js/popovers.html
	docs/_includes/js/scrollspy.html
	docs/_includes/js/tabs.html
	docs/_includes/js/tooltips.html
	docs/_includes/nav/components.html
	docs/_includes/nav/getting-started.html
	docs/_layouts/default.html
	docs/about.html
	docs/assets/css/docs.min.css
	docs/assets/css/src/docs.css
	docs/assets/js/customize.min.js
	docs/assets/js/docs.min.js
	docs/assets/js/raw-files.min.js
	docs/browser-bugs.html
	docs/components.html
	docs/components/navbar.md
	docs/css.html
	docs/dist/css/bootstrap-theme.css
	docs/dist/css/bootstrap-theme.css.map
	docs/dist/css/bootstrap-theme.min.css
	docs/dist/css/bootstrap.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css
	docs/examples/blog/index.html
	docs/examples/carousel/index.html
	docs/examples/cover/index.html
	docs/examples/dashboard/index.html
	docs/examples/grid/index.html
	docs/examples/jumbotron-narrow/index.html
	docs/examples/jumbotron/index.html
	docs/examples/justified-nav/index.html
	docs/examples/navbar-fixed-top/index.html
	docs/examples/navbar-static-top/index.html
	docs/examples/navbar/index.html
	docs/examples/non-responsive/index.html
	docs/examples/offcanvas/index.html
	docs/examples/signin/index.html
	docs/examples/starter-template/index.html
	docs/examples/sticky-footer-navbar/index.html
	docs/examples/sticky-footer/index.html
	docs/examples/theme/index.html
	docs/examples/tooltip-viewport/index.html
	docs/getting-started.html
	docs/javascript.html
	docs/migration.html
	less/_animation.less
	less/_modal.less
	less/_navbar.less
	less/_variables.less
	less/glyphicons.less
	less/navs.less
	less/panels.less
	less/progress-bars.less
This commit is contained in:
Mark Otto
2014-10-26 22:31:59 -07:00
parent d1660ad078 66bb0b4fc9
commit d6b0f45fb7
82 changed files with 2272 additions and 1575 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_data/translations.yml
+5
View File
@@ -3,6 +3,11 @@
description: Bootstrap 中文文档
url: http://v3.bootcss.com/
- name: Danish
code: da
description: Bootstrap på Dansk
url: http://getbootstrap.dk/
- name: French
code: fr
description: Bootstrap en Français
docs/_includes/getting-started/tools.html
+6
View File
@@ -0,0 +1,6 @@
<div class="bs-docs-section">
<h1 id="tools" class="page-header">Tools</h1>
<h2 id="tools-bootlint">Bootlint</h2>
<p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> is an official Bootstrap HTML <a href="http://en.wikipedia.org/wiki/Lint_(software)">linter</a> tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.</p>
</div>
docs/_includes/js/scrollspy.html
+151
View File
@@ -0,0 +1,151 @@
<div class="bs-docs-section">
<h1 id="scrollspy" class="page-header">ScrollSpy <small>scrollspy.js</small></h1>
<h2 id="scrollspy-examples">Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-example">
<nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Name</a>
</div>
<div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<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>
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
<li><a href="#one" tabindex="-1">one</a></li>
<li><a href="#two" tabindex="-1">two</a></li>
<li class="divider"></li>
<li><a href="#three" tabindex="-1">three</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h4 id="mdo">@mdo</h4>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
<h4 id="one">one</h4>
<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
<h4 id="two">two</h4>
<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
<h4 id="three">three</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
</p>
</div>
</div><!-- /example -->
<h2 id="scrollspy-usage">Usage</h2>
<div class="bs-callout bs-callout-warning">
<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>
<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>&lt;body&gt;</code>.</p>
<h3>Via data attributes</h3>
<p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code>&lt;body&gt;</code>). Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
{% highlight css %}
body {
position: relative;
}
{% endhighlight %}
{% highlight html %}
<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
{% endhighlight %}
<h3>Via JavaScript</h3>
<p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p>
{% highlight js %}
$('body').scrollspy({ target: '.navbar-example' })
{% endhighlight %}
<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>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the DOM like <code>&lt;div id="home"&gt;&lt;/div&gt;</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>
<p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
{% highlight js %}
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
{% endhighlight %}
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>offset</td>
<td>number</td>
<td>10</td>
<td>Pixels to offset from top when calculating position of scroll.</td>
</tr>
</tbody>
</table>
</div><!-- ./bs-table-responsive -->
<h3>Events</h3>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>activate.bs.scrollspy</td>
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
</tr>
</tbody>
</table>
</div><!-- ./bs-table-responsive -->
{% highlight js %}
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})
{% endhighlight %}
</div>
docs/_includes/nav/customize.html
+1 -1
View File
@@ -1,6 +1,6 @@
<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.-->
<li><a href="#import">Import</a></li>
<li><a href="#import-drop-target">Import</a></li>
<li><a href="#less">Less components</a></li>
<li><a href="#plugins">jQuery plugins</a></li>
<li><a href="#less-variables">Less variables</a>
docs/_jade/customizer-nav.jade
+1 -1
View File
@@ -1,6 +1,6 @@
// NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.
li
a(href='#import') Import
a(href='#import-drop-target') Import
li
a(href='#less') Less components
li
docs/apple-touch-icon-precomposed.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

docs/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

docs/assets/js/src/application.js
+7 -10
View File
@@ -77,7 +77,7 @@
$('.bs-docs-popover').popover()
// Button state demo
$('#loading-example-btn').click(function () {
$('#loading-example-btn').on('click', function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
@@ -85,6 +85,10 @@
}, 3000)
})
// Activate animated progress bar
$('.bs-docs-activate-animated-progressbar').on('click', function () {
$(this).siblings('.progress').find('.progress-bar-striped').toggleClass('active')
})
// Config ZeroClipboard
ZeroClipboard.config({
@@ -92,17 +96,10 @@
hoverClass: 'btn-clipboard-hover'
})
// Insert copy to clipboard button before .highlight or .bs-example
// Insert copy to clipboard button before .highlight
$('.highlight').each(function () {
var highlight = $(this)
var previous = highlight.prev()
var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>'
if (previous.hasClass('bs-example')) {
previous.before(btnHtml.replace(/btn-clipboard/, 'btn-clipboard with-example'))
} else {
highlight.before(btnHtml)
}
$(this).before(btnHtml)
})
var zeroClipboard = new ZeroClipboard($('.btn-clipboard'))
var htmlBridge = $('#global-zeroclipboard-html-bridge')
docs/assets/js/src/customizer.js
+14 -2
View File
@@ -319,7 +319,19 @@ 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\n'
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')
if (!$checked.length) return false
@@ -329,7 +341,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
.join('\n')
preamble = cw + preamble
js = jqueryCheck + js
js = jqueryCheck + jqueryVersionCheck + js
return {
'bootstrap.js': preamble + js,
docs/assets/js/vendor/blob.js → docs/assets/js/vendor/Blob.js
Vendored
+23 -5
View File
@@ -1,9 +1,9 @@
/* Blob.js
* A Blob implementation.
* 2014-07-01
*
* 2014-07-24
*
* By Eli Grey, http://eligrey.com
* By Devin Samarin, https://github.com/eboyjr
* By Devin Samarin, https://github.com/dsamarin
* License: X11/MIT
* See https://github.com/eligrey/Blob.js/blob/master/LICENSE.md
*/
@@ -59,16 +59,34 @@
, URL = real_URL
, btoa = view.btoa
, atob = view.atob
, ArrayBuffer = view.ArrayBuffer
, Uint8Array = view.Uint8Array
, origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/
;
FakeBlob.fake = FB_proto.fake = true;
while (file_ex_code--) {
FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
}
// Polyfill URL
if (!real_URL.createObjectURL) {
URL = view.URL = {};
URL = view.URL = function(uri) {
var
uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
, uri_origin
;
uri_info.href = uri;
if (!("origin" in uri_info)) {
if (uri_info.protocol.toLowerCase() === "data:") {
uri_info.origin = null;
} else {
uri_origin = uri.match(origin);
uri_info.origin = uri_origin && uri_origin[1];
}
}
return uri_info;
};
}
URL.createObjectURL = function(blob) {
var
docs/assets/js/vendor/filesaver.js → docs/assets/js/vendor/FileSaver.js
Vendored
+14 -5
View File
@@ -1,6 +1,6 @@
/* FileSaver.js
* A saveAs() FileSaver implementation.
* 2014-07-21
* 2014-08-29
*
* By Eli Grey, http://eligrey.com
* License: X11/MIT
@@ -31,7 +31,7 @@ var saveAs = saveAs
return view.URL || view.webkitURL || view;
}
, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
, can_use_save_link = !view.externalHost && "download" in save_link
, can_use_save_link = "download" in save_link
, click = function(node) {
var event = doc.createEvent("MouseEvents");
event.initMouseEvent(
@@ -53,13 +53,18 @@ var saveAs = saveAs
// the reasoning behind the timeout and revocation flow
, arbitrary_revoke_timeout = 10
, revoke = function(file) {
setTimeout(function() {
var revoker = function() {
if (typeof file === "string") { // file is an object URL
get_URL().revokeObjectURL(file);
} else { // file is a File
file.remove();
}
}, arbitrary_revoke_timeout);
};
if (view.chrome) {
revoker();
} else {
setTimeout(revoker, arbitrary_revoke_timeout);
}
}
, dispatch = function(filesaver, event_types, event) {
event_types = [].concat(event_types);
@@ -95,7 +100,11 @@ var saveAs = saveAs
if (target_view) {
target_view.location.href = object_url;
} else {
view.open(object_url, "_blank");
var new_tab = view.open(object_url, "_blank");
if (new_tab == undefined && typeof safari !== "undefined") {
//Apple do not allow window.open, see http://bit.ly/1kZffRI
view.location.href = object_url
}
}
filesaver.readyState = filesaver.DONE;
dispatch_all();
docs/assets/js/vendor/holder.js
Vendored
+7 -653
View File
File diff suppressed because one or more lines are too long
docs/assets/js/vendor/jszip.min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
docs/assets/js/vendor/less.min.js
Vendored
+13 -13
View File
File diff suppressed because one or more lines are too long
docs/browser-bugs.md
+33 -45
View File
@@ -18,6 +18,12 @@ We publicly list browser bugs that are impacting us here, in the hopes of expedi
</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>
</tr>
<tr>
<td>Internet Explorer 11</td>
<td>When hovering over a <code>&lt;select&gt;</code> menu item, the cursor for the element underneath the menu is displayed</td>
@@ -27,20 +33,14 @@ We publicly list browser bugs that are impacting us here, in the hopes of expedi
<tr>
<td>Firefox</td>
<td><code>.table-bordered</code> with an empty <code>&lt;tbody&gt;</code> is missing borders</td>
<td><a href="{{ site.bug.firefox }}1023761">Mozilla bug #1023761</a></td>
<td><a href="{{ site.bug.github }}13453">#13453</a></td>
</tr>
<tr>
<td>Firefox</td>
<td>Unusual default form control styles on Android</td>
<td><a href="{{ site.bug.firefox }}900871">Closed Mozilla bug #900871</a>, <a href="{{ site.bug.firefox }}763671">Open Mozilla bug #763671</a></td>
<td><a href="{{ site.bug.github }}8702">#8702</a></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="{{ site.bug.firefox }}975632">Mozilla bug #975632</a></td>
<td><a href="{{ site.bug.github }}10690">#10690</a></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>
@@ -48,77 +48,65 @@ We publicly list browser bugs that are impacting us here, in the hopes of expedi
<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>If the disabled state of a form control is changed via JavaScript, the normal state doesn't return after refreshing the page.</td>
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/793">#793</a></td>
</tr>
<tr>
<td>Firefox</td>
<td>Button elements with <code>width: 100%</code> become cropped in long tables.</td>
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1060131">Mozilla bug #1060131</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/14320">#14320</a></td>
</tr>
<tr>
<td>Firefox</td>
<td>If the disabled state of a form control is changed via JavaScript, the normal state doesn't return after refreshing the page.</td>
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/793">#793</a></td>
</tr>
<tr>
<td>Chrome</td>
<td>Weird button behavior with some number <code>&lt;input&gt;</code>s</td>
<td><a href="{{ site.bug.chrome }}337668">Chromium issue #337668</a></td>
<td><a href="{{ site.bug.github }}8350">#8350</a>, <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a></td>
<td>Clicking above <code>&lt;input type="number"&gt;</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> &amp; <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="{{ site.bug.chrome }}309483">Chromium issue #309483</a></td>
<td><a href="{{ site.bug.github }}9950">#9950</a></td>
</tr>
<tr>
<td>Chrome</td>
<td>Unwanted vertical lines when printing styled <code>&lt;select&gt;</code> on OS X</td>
<td><a href="{{ site.bug.chrome }}282918">Chromium issue #282918</a></td>
<td><a href="{{ site.bug.github }}11245">#11245</a></td>
</tr>
<tr>
<td>Chrome</td>
<td>inline-block element collapses white-space on Windows</td>
<td><a href="{{ site.bug.chrome }}329574">Chromium issue #329574</a></td>
<td><a href="{{ site.bug.github }}11885">#11885</a></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="{{ site.bug.chrome }}273306">Chromium issue #273306</a></td>
<td><a href="{{ site.bug.github }}12078">#12078</a></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 &amp; Safari</td>
<td>OS X scrollbar clipped in <code>select[multiple]</code> with padding</td>
<td><a href="{{ site.bug.chrome }}342208">Chromium issue #342208</a>, <a href="{{ site.bug.webkit }}128489">WebKit bug #128489</a></td>
<td><a href="{{ site.bug.github }}12536">#12536</a></td>
<td><a href="https://code.google.com/p/chromium/issues/detail?id=342208">Chromium issue #342208</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=128489">WebKit bug #128489</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/12536">#12536</a></td>
</tr>
<tr>
<td>Chrome</td>
<td><code>display: table-cell; width: 100%;</code> doesn't work correctly on date <code>&lt;input&gt;</code></td>
<td><a href="{{ site.bug.chrome }}346051">Chromium issue #346051</a></td>
<td><a href="{{ site.bug.github }}12548">#12548</a></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>&lt;input type="password"&gt;</code> sporadically causes bad widths on floated elements</td>
<td><a href="{{ site.bug.chrome }}377346">Chrome issue #377346</a></td>
<td><a href="{{ site.bug.github }}13892">#13892</a></td>
<td><a href="https://code.google.com/p/chromium/issues/detail?id=377346">Chrome issue #377346</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/13892">#13892</a></td>
</tr>
<tr>
<td>Safari</td>
<td>Insufficient CSS percentage precision</td>
<td>(No public bug tracker)</td>
<td><a href="{{ site.bug.github }}9282">#9282</a></td>
<td>Weird button behavior with some number <code>&lt;input&gt;</code>s</td>
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>, <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a></td>
</tr>
<tr>
<td>Safari</td>
<td>Justified nav rendering bug</td>
<td>(No public bug tracker)</td>
<td><a href="{{ site.bug.github }}9774">#9774</a></td>
<td><a href="https://github.com/twbs/bootstrap/issues/9774">#9774</a></td>
</tr>
</tbody>
</table>
docs/components/forms.md
+19 -2
View File
@@ -183,7 +183,7 @@ A checkbox or radio with the `disabled` attribute will be styled appropriately.
</div>
{% endexample %}
#### Inline checkboxes and radios
#### Inline
Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
@@ -209,7 +209,24 @@ Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes
</label>
{% endexample %}
#### Selects
#### Without labels
Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.**
{% example html %}
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1">
</label>
</div>
{% endexample %}
### Selects
Use the default option, or add `multiple` to show multiple options at once.
docs/components/navbar.md
+2
View File
@@ -7,6 +7,8 @@ title: Navbar
Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.
**Justified navbar nav links are currently not supported.**
<div class="bs-callout bs-callout-warning" id="callout-navbar-overflow">
<h4>Overflowing content</h4>
<p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
docs/components/responsive-embed.md
+3 -3
View File
@@ -5,7 +5,7 @@ title: Responsive embed
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to `<iframe>`, `<embed>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
@@ -20,11 +20,11 @@ Aspect ratios can be customized. There are two available in Bootstrap, 16x9 and
{% highlight html %}
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="…"></iframe>
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
{% endhighlight %}
docs/customize.html
+1 -4
View File
@@ -5,6 +5,7 @@ slug: customize
lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
---
<!-- less.js isn't IE8-compatible and throws an exception during initialization, so our Blob compatibility check and error messaging code never get called in that case.
So we use a conditional comment instead to inform folks about the lack of IE8 support.
-->
@@ -260,8 +261,6 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
</div><!-- /.row -->
</div>
<div class="bs-docs-section" id="plugin-section">
<button class="btn btn-secondary toggle" type="button">Toggle all</button>
<h1 id="plugins" class="page-header">jQuery plugins</h1>
@@ -359,8 +358,6 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
</div>
</div>
<div class="bs-docs-section" id="less-variables-section">
<button class="btn btn-secondary toggle" type="button">Reset to defaults</button>
<h1 id="less-variables" class="page-header">Less variables</h1>
docs/dist/js/bootstrap.js
Vendored
+109 -59
View File
@@ -4,7 +4,16 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery') }
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery')
}
+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);
/* ========================================================================
* Bootstrap: transition.js v3.2.0
@@ -223,6 +232,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
else $parent.find('.active').removeClass('active')
}
if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
} else {
this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
}
if (changed) this.$element.toggleClass('active')
@@ -292,7 +303,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
// =========================
var Carousel = function (element, options) {
this.$element = $(element).on('keydown.bs.carousel', $.proxy(this.keydown, this))
this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.paused =
@@ -301,7 +312,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.$active =
this.$items = null
this.options.pause == 'hover' && this.$element
this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))
this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element
.on('mouseenter.bs.carousel', $.proxy(this.pause, this))
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
}
@@ -313,7 +326,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
Carousel.DEFAULTS = {
interval: 5000,
pause: 'hover',
wrap: true
wrap: true,
keyboard: true
}
Carousel.prototype.keydown = function (e) {
@@ -549,17 +563,21 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
Collapse.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('in')) return
var activesData
var actives = this.$parent && this.$parent.find('> .panel').children('.in, .collapsing')
if (actives && actives.length) {
activesData = actives.data('bs.collapse')
if (activesData && activesData.transitioning) return
}
var startEvent = $.Event('show.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var actives = this.$parent && this.$parent.find('> .panel').children('.in, .collapsing')
if (actives && actives.length) {
var hasData = actives.data('bs.collapse')
if (hasData && hasData.transitioning) return
Plugin.call(actives, 'hide')
hasData || actives.data('bs.collapse', null)
activesData || actives.data('bs.collapse', null)
}
var dimension = this.dimension()
@@ -741,7 +759,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}
Dropdown.prototype.keydown = function (e) {
if (!/(38|40|27)/.test(e.keyCode)) return
if (!/(38|40|27|32)/.test(e.which)) return
var $this = $(this)
@@ -753,7 +771,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var $parent = getParent($this)
var isActive = $parent.hasClass('open')
if (!isActive || (isActive && e.keyCode == 27)) {
if ((!isActive && e.which != 27) || (isActive && e.which == 27)) {
if (e.which == 27) $parent.find(toggle).trigger('focus')
return $this.trigger('click')
}
@@ -763,10 +781,10 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if (!$items.length) return
var index = $items.index($items.filter(':focus'))
var index = $items.index(e.target)
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (e.which == 38 && index > 0) index-- // up
if (e.which == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items.eq(index).trigger('focus')
@@ -953,9 +971,6 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.isShown = false
this.$body.removeClass('modal-open')
this.resetScrollbar()
this.escape()
$(document).off('focusin.bs.modal')
@@ -996,6 +1011,8 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var that = this
this.$element.hide()
this.backdrop(function () {
that.$body.removeClass('modal-open')
that.resetScrollbar()
that.$element.trigger('hidden.bs.modal')
})
}
@@ -1013,14 +1030,13 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var doAnimate = $.support.transition && animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(this.$body)
this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
if (e.target !== e.currentTarget) return
this.options.backdrop == 'static'
? this.$element[0].focus.call(this.$element[0])
: this.hide.call(this)
}, this))
.prependTo(this.$element)
.on('click.dismiss.bs.modal', $.proxy(function (e) {
if (e.target !== e.currentTarget) return
this.options.backdrop == 'static'
? this.$element[0].focus.call(this.$element[0])
: this.hide.call(this)
}, this))
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
@@ -1318,13 +1334,13 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if (autoPlace) {
var orgPlacement = placement
var $parent = this.$element.parent()
var parentDim = this.getPosition($parent)
var $container = this.options.container ? $(this.options.container) : this.$element.parent()
var containerDim = this.getPosition($container)
placement = placement == 'bottom' && pos.top + pos.height + actualHeight - parentDim.scroll > parentDim.height ? 'top' :
placement == 'top' && pos.top - parentDim.scroll - actualHeight < 0 ? 'bottom' :
placement == 'right' && pos.right + actualWidth > parentDim.width ? 'left' :
placement == 'left' && pos.left - actualWidth < parentDim.left ? 'right' :
placement = placement == 'bottom' && pos.bottom + actualHeight > containerDim.bottom ? 'top' :
placement == 'top' && pos.top - actualHeight < containerDim.top ? 'bottom' :
placement == 'right' && pos.right + actualWidth > containerDim.width ? 'left' :
placement == 'left' && pos.left - actualWidth < containerDim.left ? 'right' :
placement
$tip
@@ -1337,8 +1353,11 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
this.applyPlacement(calculatedOffset, placement)
var complete = function () {
var prevHoverState = that.hoverState
that.$element.trigger('shown.bs.' + that.type)
that.hoverState = null
if (prevHoverState == 'out') that.leave(that)
}
$.support.transition && this.$tip.hasClass('fade') ?
@@ -1459,7 +1478,6 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
var el = $element[0]
var isBody = el.tagName == 'BODY'
var isSvg = window.SVGElement && el instanceof window.SVGElement
var elRect = el.getBoundingClientRect()
if (elRect.width == null) {
@@ -1468,10 +1486,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}
var elOffset = isBody ? { top: 0, left: 0 } : $element.offset()
var scroll = { scroll: isBody ? document.documentElement.scrollTop || document.body.scrollTop : $element.scrollTop() }
var outerDims = isSvg ? {} : {
width: isBody ? $(window).width() : $element.outerWidth(),
height: isBody ? $(window).height() : $element.outerHeight()
}
var outerDims = isBody ? { width: $(window).width(), height: $(window).height() } : null
return $.extend({}, elRect, scroll, outerDims, elOffset)
}
@@ -1576,12 +1591,18 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.tooltip')
var options = typeof option == 'object' && option
var $this = $(this)
var data = $this.data('bs.tooltip')
var options = typeof option == 'object' && option
var selector = options && options.selector
if (!data && option == 'destroy') return
if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
if (selector) {
if (!data) $this.data('bs.tooltip', (data = {}))
if (!data[selector]) data[selector] = new Tooltip(this, options)
} else {
if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
}
if (typeof option == 'string') data[option]()
})
}
@@ -1690,12 +1711,18 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.popover')
var options = typeof option == 'object' && option
var $this = $(this)
var data = $this.data('bs.popover')
var options = typeof option == 'object' && option
var selector = options && options.selector
if (!data && option == 'destroy') return
if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
if (selector) {
if (!data) $this.data('bs.popover', (data = {}))
if (!data[selector]) data[selector] = new Popover(this, options)
} else {
if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
}
if (typeof option == 'string') data[option]()
})
}
@@ -1783,7 +1810,6 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
return ($href
&& $href.length
&& $href.is(':visible')
&& $el.is(':visible')
&& [[$href[offsetMethod]().top + offsetBase, href]]) || null
})
.sort(function (a, b) { return a[0] - b[0] })
@@ -1810,8 +1836,9 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
}
if (activeTarget && scrollTop <= offsets[0]) {
return activeTarget != (i = targets[0]) && this.activate(i)
if (activeTarget && scrollTop < offsets[0]) {
this.activeTarget = null
return this.clear()
}
for (i = offsets.length; i--;) {
@@ -1825,9 +1852,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
ScrollSpy.prototype.activate = function (target) {
this.activeTarget = target
$(this.selector)
.parentsUntil(this.options.target, '.active')
.removeClass('active')
this.clear()
var selector = this.selector +
'[data-target="' + target + '"],' +
@@ -1846,6 +1871,12 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
active.trigger('activate.bs.scrollspy')
}
ScrollSpy.prototype.clear = function () {
$(this.selector)
.parentsUntil(this.options.target, '.active')
.removeClass('active')
}
// SCROLLSPY PLUGIN DEFINITION
// ===========================
@@ -1923,22 +1954,30 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
if ($this.parent('li').hasClass('active')) return
var previous = $ul.find('.active:last a')[0]
var e = $.Event('show.bs.tab', {
relatedTarget: previous
var $previous = $ul.find('.active:last a')
var hideEvent = $.Event('hide.bs.tab', {
relatedTarget: $this[0]
})
var showEvent = $.Event('show.bs.tab', {
relatedTarget: $previous[0]
})
$this.trigger(e)
$previous.trigger(hideEvent)
$this.trigger(showEvent)
if (e.isDefaultPrevented()) return
if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return
var $target = $(selector)
this.activate($this.closest('li'), $ul)
this.activate($target, $target.parent(), function () {
$previous.trigger({
type: 'hidden.bs.tab',
relatedTarget: $this[0]
})
$this.trigger({
type: 'shown.bs.tab',
relatedTarget: previous
relatedTarget: $previous[0]
})
})
}
@@ -1953,9 +1992,15 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
$active
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
.removeClass('active')
.end()
.find('[data-toggle="tab"]')
.attr('aria-expanded', false)
element.addClass('active')
element
.addClass('active')
.find('[data-toggle="tab"]')
.attr('aria-expanded', true)
if (transition) {
element[0].offsetWidth // reflow for transition
@@ -1965,7 +2010,12 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
}
if (element.parent('.dropdown-menu')) {
element.closest('li.dropdown').addClass('active')
element
.closest('li.dropdown')
.addClass('active')
.end()
.find('[data-toggle="tab"]')
.attr('aria-expanded', true)
}
callback && callback()
docs/dist/js/bootstrap.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/dist/js/npm.js
Vendored
+13
View File
@@ -0,0 +1,13 @@
// This file is generated. You can require() it in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
docs/getting-started/compiling.md
+2 -2
View File
@@ -29,8 +29,8 @@ Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`
#### Tests - `grunt test`
Runs [JSHint](http://jshint.com) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI).
#### Tests and assets - `grunt docs`
Compiles and tests CSS, JavaScript, and more for running the local documentation via `jekyll serve`.
#### Build and test docs assets - `grunt docs`
Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `jekyll serve`.
#### Watch - `grunt watch`
This is a convenience method for watching just Less files and automatically building them whenever you save.
docs/getting-started/support.md
+1 -1
View File
@@ -159,7 +159,7 @@ As a heads up, we include this in all of Bootstrap's documentation and examples
### Safari percent rounding
As of Safari v7.0.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our `.col-*-1` grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here ([see #9282](https://github.com/twbs/bootstrap/issues/9282)) but you do have some options:
The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our `.col-*-1` grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:
- Add `.pull-right` to your last grid column to get the hard-right alignment
- Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)
docs/index.html
+1
View File
@@ -3,6 +3,7 @@ layout: home
title: Bootstrap &middot; The world's most popular mobile-first and responsive front-end framework.
---
<main class="bs-docs-masthead" id="content" role="main">
<div class="container">
<span class="bs-docs-booticon outline">B</span>
docs/javascript/buttons.md
+7 -2
View File
@@ -8,7 +8,7 @@ Do more with buttons. Control button states or create groups of buttons for more
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
<p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a>.</p>
</div>
## Stateful
@@ -38,11 +38,16 @@ Add `data-loading-text="Loading..."` to use a loading state on a button.
Add `data-toggle="button"` to activate toggling on a single button.
{% example html %}
<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
{% endexample %}
<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>
## Checkbox and radio
Add `data-toggle="buttons"` to a `.btn-group` containing checkbox or radio inputs to enable toggling in their respective styles.
docs/javascript/carousel.md
+6
View File
@@ -154,6 +154,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>true</td>
<td>Whether the carousel should cycle continuously or have hard stops.</td>
</tr>
<tr>
<td>keyboard</td>
<td>boolean</td>
<td>true</td>
<td>Whether the carousel should react to keyboard events.</td>
</tr>
</tbody>
</table>
</div>
docs/javascript/collapse.md
+2 -2
View File
@@ -33,7 +33,7 @@ Using the collapse plugin, we built a simple accordion by extending the panel co
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
@@ -47,7 +47,7 @@ Using the collapse plugin, we built a simple accordion by extending the panel co
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
docs/javascript/dropdowns.md
+24 -24
View File
@@ -26,11 +26,11 @@ Add dropdown menus to nearly anything with this simple plugin, including the nav
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
@@ -38,11 +38,11 @@ Add dropdown menus to nearly anything with this simple plugin, including the nav
Dropdown 2
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
@@ -52,11 +52,11 @@ Add dropdown menus to nearly anything with this simple plugin, including the nav
Dropdown 3
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
@@ -75,11 +75,11 @@ Add dropdown menus to nearly anything with this simple plugin, including the nav
Dropdown
</button>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
@@ -87,11 +87,11 @@ Add dropdown menus to nearly anything with this simple plugin, including the nav
Dropdown 2
</button>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
@@ -99,11 +99,11 @@ Add dropdown menus to nearly anything with this simple plugin, including the nav
Dropdown 3
</button>
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
docs/javascript/modal.md
+2
View File
@@ -5,6 +5,8 @@ title: Modal
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
**Due to how HTML5 defines its semantics, the `autofocus` HTML attribute has no effect in Bootstrap modals.**
<div class="bs-callout bs-callout-warning" id="callout-stacked-modals">
<h4>Overlapping modals not supported</h4>
<p>Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.</p>
docs/javascript/popovers.md
+4 -4
View File
@@ -127,7 +127,7 @@ Use the `focus` trigger to dismiss popovers on the next click that the user make
</div>
{% example html %}
<a href="#" tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
<a href="#" tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
{% endexample %}
{% highlight js %}
@@ -265,19 +265,19 @@ Initializes popovers for an element collection.
#### .popover('show')
Reveals an elements popover.
Reveals an element's popover. Popovers whose both title and content are zero-length are never displayed.
{% highlight js %}$('#element').popover('show'){% endhighlight %}
#### .popover('hide')
Hides an elements popover.
Hides an element's popover.
{% highlight js %}$('#element').popover('hide'){% endhighlight %}
#### .popover('toggle')
Toggles an elements popover.
Toggles an element's popover.
{% highlight js %}$('#element').popover('toggle'){% endhighlight %}
docs/javascript/scrollspy.md
+4
View File
@@ -55,6 +55,10 @@ The ScrollSpy plugin is for automatically updating nav targets based on scroll p
## Usage
### Requires Bootstrap nav
Scrollspy currently requires the use of a [Bootstrap nav component](/components/nav/) for proper highlighting of active links.
### Requires relative positioning
No matter the implementation method, scrollspy requires the use of `position: relative;` on the element you're spying on. In most cases this is the `<body>`.
docs/javascript/tabs.md
+43 -19
View File
@@ -9,27 +9,34 @@ Add quick, dynamic tab functionality to transition through panes of local conten
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation" 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>
<li role="presentation" class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
<li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
<li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledBy="profile-tab">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown1">
<div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledBy="dropdown1-tab">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown2">
<div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledBy="dropdown2-tab">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
</div>
</div>
@@ -125,6 +132,15 @@ Activates a tab element and content container. Tab should have either a `data-ta
### Events
When showing a new tab, the events fire in the following order:
1. `hide.bs.tab` (on the current active tab)
2. `show.bs.tab` (on the to-be-shown tab)
3. `hidden.bs.tab` (on the previous active tab, the same one as for the `hide.bs.tab` event)
4. `shown.bs.tab` (on the newly-active just-shown tab, the same one as for the `show.bs.tab` event)
If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
@@ -134,21 +150,29 @@ Activates a tab element and content container. Tab should have either a `data-ta
</tr>
</thead>
<tbody>
<tr>
<td>show.bs.tab</td>
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
<tr>
<td>shown.bs.tab</td>
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
<tr>
<td>show.bs.tab</td>
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
<tr>
<td>shown.bs.tab</td>
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
<tr>
<td>hide.bs.tab</td>
<td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
</tr>
<tr>
<td>hidden.bs.tab</td>
<td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
</tr>
</tbody>
</table>
</div>
{% highlight js %}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
e.target // newly activated tab
e.relatedTarget // previous active tab
})
{% endhighlight %}
docs/javascript/tooltips.md
+1 -1
View File
@@ -235,7 +235,7 @@ Attaches a tooltip handler to an element collection.
#### .tooltip('show')
Reveals an element's tooltip.
Reveals an element's tooltip. Tooltips with zero-length titles are never displayed.
{% highlight js %}$('#element').tooltip('show'){% endhighlight %}
docs/layout/media.md
+43
View File
@@ -46,6 +46,49 @@ Media components can also be nested.
</div>
{% endexample %}
### Media alignment
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
{% example html %}
<div class="media">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Top aligned media</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
{% endexample %}
{% example html %}
<div class="media">
<a class="media-left media-middle" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
{% endexample %}
{% example html %}
<div class="media">
<a class="media-left media-bottom" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h4 class="media-heading">Bottom aligned media</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
{% endexample %}
### Media list
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
docs/layout/responsive-utilities.md
+12 -12
View File
@@ -183,29 +183,29 @@ Green checkmarks indicate the element **is visible** in your current viewport.
</div>
</div>
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-6">
<div class="col-xs-6">
<span class="hidden-xs hidden-sm">Extra small and small</span>
<span class="visible-xs-block visible-sm-block">&#10004; Visible on x-small and small</span>
</div>
<div class="col-xs-6 col-sm-6">
<div class="col-xs-6">
<span class="hidden-md hidden-lg">Medium and large</span>
<span class="visible-md-block visible-lg-block">&#10004; Visible on medium and large</span>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6">
<div class="col-xs-6">
<span class="hidden-xs hidden-md">Extra small and medium</span>
<span class="visible-xs-block visible-md-block">&#10004; Visible on x-small and medium</span>
</div>
<div class="col-xs-6 col-sm-6">
<div class="col-xs-6">
<span class="hidden-sm hidden-lg">Small and large</span>
<span class="visible-sm-block visible-lg-block">&#10004; Visible on small and large</span>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6">
<div class="col-xs-6">
<span class="hidden-xs hidden-lg">Extra small and large</span>
<span class="visible-xs-block visible-lg-block">&#10004; Visible on x-small and large</span>
</div>
<div class="col-xs-6 col-sm-6">
<div class="col-xs-6">
<span class="hidden-sm hidden-md">Small and medium</span>
<span class="visible-sm-block visible-md-block">&#10004; Visible on small and medium</span>
</div>
@@ -235,29 +235,29 @@ Here, green checkmarks also indicate the element **is hidden** in your current v
</div>
</div>
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-6">
<div class="col-xs-6">
<span class="hidden-xs hidden-sm">Extra small and small</span>
<span class="visible-xs-block visible-sm-block">&#10004; Hidden on x-small and small</span>
</div>
<div class="col-xs-6 col-sm-6">
<div class="col-xs-6">
<span class="hidden-md hidden-lg">Medium and large</span>
<span class="visible-md-block visible-lg-block">&#10004; Hidden on medium and large</span>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6">
<div class="col-xs-6">
<span class="hidden-xs hidden-md">Extra small and medium</span>
<span class="visible-xs-block visible-md-block">&#10004; Hidden on x-small and medium</span>
</div>
<div class="col-xs-6 col-sm-6">
<div class="col-xs-6">
<span class="hidden-sm hidden-lg">Small and large</span>
<span class="visible-sm-block visible-lg-block">&#10004; Hidden on small and large</span>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6">
<div class="col-xs-6">
<span class="hidden-xs hidden-lg">Extra small and large</span>
<span class="visible-xs-block visible-lg-block">&#10004; Hidden on x-small and large</span>
</div>
<div class="col-xs-6 col-sm-6">
<div class="col-xs-6">
<span class="hidden-sm hidden-md">Small and medium</span>
<span class="visible-sm-block visible-md-block">&#10004; Hidden on small and medium</span>
</div>
docs/sitemap.xml
+1
View File
@@ -1,6 +1,7 @@
---
---
<?xml version="1.0" encoding="UTF-8"?>
<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>