mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-05 16:42:29 +03:00
Merge branch '3.0.0-wip' into bs3-normalize
Conflicts: less/bootstrap.less
This commit is contained in:
Mark Otto
-1092
File diff suppressed because it is too large
Load Diff
Vendored
+241
-568
File diff suppressed because it is too large
Load Diff
@@ -83,7 +83,7 @@ hr.soften {
|
||||
|
||||
/* Base class
|
||||
------------------------- */
|
||||
.jumbotron {
|
||||
.bs-docs-jumbotron {
|
||||
position: relative;
|
||||
padding: 40px 0;
|
||||
color: #fff;
|
||||
@@ -101,13 +101,13 @@ hr.soften {
|
||||
-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
|
||||
box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
|
||||
}
|
||||
.jumbotron h1 {
|
||||
.bs-docs-jumbotron h1 {
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
}
|
||||
.jumbotron p {
|
||||
.bs-docs-jumbotron p {
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
@@ -115,14 +115,14 @@ hr.soften {
|
||||
}
|
||||
|
||||
/* Link styles (used on .masthead-links as well) */
|
||||
.jumbotron a {
|
||||
.bs-docs-jumbotron a {
|
||||
color: #fff;
|
||||
color: rgba(255,255,255,.5);
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
-moz-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
.jumbotron a:hover {
|
||||
.bs-docs-jumbotron a:hover {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(255,255,255,.25);
|
||||
}
|
||||
|
||||
@@ -14,12 +14,14 @@
|
||||
})
|
||||
|
||||
// side bar
|
||||
$('.bs-docs-sidenav').affix({
|
||||
offset: {
|
||||
top: function () { return $window.width() <= 980 ? 290 : 210 }
|
||||
, bottom: 270
|
||||
}
|
||||
})
|
||||
setTimeout(function () {
|
||||
$('.bs-docs-sidenav').affix({
|
||||
offset: {
|
||||
top: function () { return $window.width() <= 980 ? 290 : 210 }
|
||||
, bottom: 270
|
||||
}
|
||||
})
|
||||
}, 100)
|
||||
|
||||
// make code pretty
|
||||
window.prettyPrint && prettyPrint()
|
||||
@@ -34,7 +36,7 @@
|
||||
// add tipsies to grid for scaffolding
|
||||
if ($('#gridSystem').length) {
|
||||
$('#gridSystem').tooltip({
|
||||
selector: '.show-grid > div'
|
||||
selector: '.show-grid > div:not(.tooltip)'
|
||||
, title: function () { return $(this).width() + 'px' }
|
||||
})
|
||||
}
|
||||
|
||||
Vendored
+20
-7
@@ -28,6 +28,7 @@
|
||||
|
||||
var Carousel = function (element, options) {
|
||||
this.$element = $(element)
|
||||
this.$indicators = this.$element.find('.carousel-indicators')
|
||||
this.options = options
|
||||
this.options.pause == 'hover' && this.$element
|
||||
.on('mouseenter', $.proxy(this.pause, this))
|
||||
@@ -44,13 +45,17 @@
|
||||
return this
|
||||
}
|
||||
|
||||
, getActiveIndex: function () {
|
||||
this.$active = this.$element.find('.item.active')
|
||||
this.$items = this.$active.parent().children()
|
||||
return this.$items.index(this.$active)
|
||||
}
|
||||
|
||||
, to: function (pos) {
|
||||
var $active = this.$element.find('.item.active')
|
||||
, children = $active.parent().children()
|
||||
, activePos = children.index($active)
|
||||
var activeIndex = this.getActiveIndex()
|
||||
, that = this
|
||||
|
||||
if (pos > (children.length - 1) || pos < 0) return
|
||||
if (pos > (this.$items.length - 1) || pos < 0) return
|
||||
|
||||
if (this.sliding) {
|
||||
return this.$element.one('slid', function () {
|
||||
@@ -58,11 +63,11 @@
|
||||
})
|
||||
}
|
||||
|
||||
if (activePos == pos) {
|
||||
if (activeIndex == pos) {
|
||||
return this.pause().cycle()
|
||||
}
|
||||
|
||||
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
|
||||
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
|
||||
}
|
||||
|
||||
, pause: function (e) {
|
||||
@@ -107,6 +112,14 @@
|
||||
|
||||
if ($next.hasClass('active')) return
|
||||
|
||||
if (this.$indicators.length) {
|
||||
this.$indicators.find('.active').removeClass('active')
|
||||
this.$element.one('slid', function () {
|
||||
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
|
||||
$nextIndicator && $nextIndicator.addClass('active')
|
||||
})
|
||||
}
|
||||
|
||||
if ($.support.transition && this.$element.hasClass('slide')) {
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
@@ -151,7 +164,7 @@
|
||||
if (!data) $this.data('carousel', (data = new Carousel(this, options)))
|
||||
if (typeof option == 'number') data.to(option)
|
||||
else if (action) data[action]()
|
||||
else if (options.interval) data.cycle()
|
||||
else if (options.interval) data.pause().cycle()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Vendored
+1
-1
@@ -52,7 +52,7 @@
|
||||
, actives
|
||||
, hasData
|
||||
|
||||
if (this.transitioning) return
|
||||
if (this.transitioning || this.$element.hasClass('in')) return
|
||||
|
||||
dimension = this.dimension()
|
||||
scroll = $.camelCase(['scroll', dimension].join('-'))
|
||||
|
||||
Vendored
+3
-2
@@ -115,8 +115,9 @@
|
||||
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
|
||||
}
|
||||
|
||||
$parent = $(selector)
|
||||
$parent.length || ($parent = $this.parent())
|
||||
$parent = selector && $(selector)
|
||||
|
||||
if (!$parent || !$parent.length) $parent = $this.parent()
|
||||
|
||||
return $parent
|
||||
}
|
||||
|
||||
Vendored
+1
-2
@@ -60,8 +60,7 @@
|
||||
that.$element.appendTo(document.body) //don't move modals dom position
|
||||
}
|
||||
|
||||
that.$element
|
||||
.show()
|
||||
that.$element.show()
|
||||
|
||||
if (transition) {
|
||||
that.$element[0].offsetWidth // force reflow
|
||||
|
||||
Vendored
+8
-10
@@ -97,7 +97,6 @@
|
||||
|
||||
, show: function () {
|
||||
var $tip
|
||||
, inside
|
||||
, pos
|
||||
, actualWidth
|
||||
, actualHeight
|
||||
@@ -116,19 +115,17 @@
|
||||
this.options.placement.call(this, $tip[0], this.$element[0]) :
|
||||
this.options.placement
|
||||
|
||||
inside = /in/.test(placement)
|
||||
|
||||
$tip
|
||||
.detach()
|
||||
.css({ top: 0, left: 0, display: 'block' })
|
||||
.insertAfter(this.$element)
|
||||
|
||||
pos = this.getPosition(inside)
|
||||
pos = this.getPosition()
|
||||
|
||||
actualWidth = $tip[0].offsetWidth
|
||||
actualHeight = $tip[0].offsetHeight
|
||||
|
||||
switch (inside ? placement.split(' ')[1] : placement) {
|
||||
switch (placement) {
|
||||
case 'bottom':
|
||||
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
|
||||
break
|
||||
@@ -193,11 +190,12 @@
|
||||
return this.getTitle()
|
||||
}
|
||||
|
||||
, getPosition: function (inside) {
|
||||
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
|
||||
width: this.$element[0].offsetWidth
|
||||
, height: this.$element[0].offsetHeight
|
||||
})
|
||||
, getPosition: function () {
|
||||
var el = this.$element[0]
|
||||
return $.extend({}, el.getBoundingClientRect ? el.getBoundingClientRect() : {
|
||||
width: el.offsetWidth
|
||||
, height: el.offsetHeight
|
||||
}, this.$element.offset())
|
||||
}
|
||||
|
||||
, getTitle: function () {
|
||||
|
||||
+14
-2
@@ -172,6 +172,7 @@
|
||||
|
||||
, listen: function () {
|
||||
this.$element
|
||||
.on('focus', $.proxy(this.focus, this))
|
||||
.on('blur', $.proxy(this.blur, this))
|
||||
.on('keypress', $.proxy(this.keypress, this))
|
||||
.on('keyup', $.proxy(this.keyup, this))
|
||||
@@ -183,6 +184,7 @@
|
||||
this.$menu
|
||||
.on('click', $.proxy(this.click, this))
|
||||
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
|
||||
.on('mouseleave', 'li', $.proxy(this.mouseleave, this))
|
||||
}
|
||||
|
||||
, eventSupported: function(eventName) {
|
||||
@@ -256,9 +258,13 @@
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
, focus: function (e) {
|
||||
this.focused = true
|
||||
}
|
||||
|
||||
, blur: function (e) {
|
||||
var that = this
|
||||
setTimeout(function () { that.hide() }, 150)
|
||||
this.focused = false
|
||||
if (!this.mousedover && this.shown) this.hide()
|
||||
}
|
||||
|
||||
, click: function (e) {
|
||||
@@ -268,10 +274,16 @@
|
||||
}
|
||||
|
||||
, mouseenter: function (e) {
|
||||
this.mousedover = true
|
||||
this.$menu.find('.active').removeClass('active')
|
||||
$(e.currentTarget).addClass('active')
|
||||
}
|
||||
|
||||
, mouseleave: function (e) {
|
||||
this.mousedover = false
|
||||
if (!this.focused && this.shown) this.hide()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Vendored
+47
-24
@@ -289,6 +289,7 @@
|
||||
|
||||
var Carousel = function (element, options) {
|
||||
this.$element = $(element)
|
||||
this.$indicators = this.$element.find('.carousel-indicators')
|
||||
this.options = options
|
||||
this.options.pause == 'hover' && this.$element
|
||||
.on('mouseenter', $.proxy(this.pause, this))
|
||||
@@ -305,13 +306,17 @@
|
||||
return this
|
||||
}
|
||||
|
||||
, getActiveIndex: function () {
|
||||
this.$active = this.$element.find('.item.active')
|
||||
this.$items = this.$active.parent().children()
|
||||
return this.$items.index(this.$active)
|
||||
}
|
||||
|
||||
, to: function (pos) {
|
||||
var $active = this.$element.find('.item.active')
|
||||
, children = $active.parent().children()
|
||||
, activePos = children.index($active)
|
||||
var activeIndex = this.getActiveIndex()
|
||||
, that = this
|
||||
|
||||
if (pos > (children.length - 1) || pos < 0) return
|
||||
if (pos > (this.$items.length - 1) || pos < 0) return
|
||||
|
||||
if (this.sliding) {
|
||||
return this.$element.one('slid', function () {
|
||||
@@ -319,11 +324,11 @@
|
||||
})
|
||||
}
|
||||
|
||||
if (activePos == pos) {
|
||||
if (activeIndex == pos) {
|
||||
return this.pause().cycle()
|
||||
}
|
||||
|
||||
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
|
||||
return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
|
||||
}
|
||||
|
||||
, pause: function (e) {
|
||||
@@ -368,6 +373,14 @@
|
||||
|
||||
if ($next.hasClass('active')) return
|
||||
|
||||
if (this.$indicators.length) {
|
||||
this.$indicators.find('.active').removeClass('active')
|
||||
this.$element.one('slid', function () {
|
||||
var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
|
||||
$nextIndicator && $nextIndicator.addClass('active')
|
||||
})
|
||||
}
|
||||
|
||||
if ($.support.transition && this.$element.hasClass('slide')) {
|
||||
this.$element.trigger(e)
|
||||
if (e.isDefaultPrevented()) return
|
||||
@@ -412,7 +425,7 @@
|
||||
if (!data) $this.data('carousel', (data = new Carousel(this, options)))
|
||||
if (typeof option == 'number') data.to(option)
|
||||
else if (action) data[action]()
|
||||
else if (options.interval) data.cycle()
|
||||
else if (options.interval) data.pause().cycle()
|
||||
})
|
||||
}
|
||||
|
||||
@@ -497,7 +510,7 @@
|
||||
, actives
|
||||
, hasData
|
||||
|
||||
if (this.transitioning) return
|
||||
if (this.transitioning || this.$element.hasClass('in')) return
|
||||
|
||||
dimension = this.dimension()
|
||||
scroll = $.camelCase(['scroll', dimension].join('-'))
|
||||
@@ -726,8 +739,9 @@
|
||||
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
|
||||
}
|
||||
|
||||
$parent = $(selector)
|
||||
$parent.length || ($parent = $this.parent())
|
||||
$parent = selector && $(selector)
|
||||
|
||||
if (!$parent || !$parent.length) $parent = $this.parent()
|
||||
|
||||
return $parent
|
||||
}
|
||||
@@ -831,8 +845,7 @@
|
||||
that.$element.appendTo(document.body) //don't move modals dom position
|
||||
}
|
||||
|
||||
that.$element
|
||||
.show()
|
||||
that.$element.show()
|
||||
|
||||
if (transition) {
|
||||
that.$element[0].offsetWidth // force reflow
|
||||
@@ -1113,7 +1126,6 @@
|
||||
|
||||
, show: function () {
|
||||
var $tip
|
||||
, inside
|
||||
, pos
|
||||
, actualWidth
|
||||
, actualHeight
|
||||
@@ -1132,19 +1144,17 @@
|
||||
this.options.placement.call(this, $tip[0], this.$element[0]) :
|
||||
this.options.placement
|
||||
|
||||
inside = /in/.test(placement)
|
||||
|
||||
$tip
|
||||
.detach()
|
||||
.css({ top: 0, left: 0, display: 'block' })
|
||||
.insertAfter(this.$element)
|
||||
|
||||
pos = this.getPosition(inside)
|
||||
pos = this.getPosition()
|
||||
|
||||
actualWidth = $tip[0].offsetWidth
|
||||
actualHeight = $tip[0].offsetHeight
|
||||
|
||||
switch (inside ? placement.split(' ')[1] : placement) {
|
||||
switch (placement) {
|
||||
case 'bottom':
|
||||
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
|
||||
break
|
||||
@@ -1209,11 +1219,12 @@
|
||||
return this.getTitle()
|
||||
}
|
||||
|
||||
, getPosition: function (inside) {
|
||||
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
|
||||
width: this.$element[0].offsetWidth
|
||||
, height: this.$element[0].offsetHeight
|
||||
})
|
||||
, getPosition: function () {
|
||||
var el = this.$element[0]
|
||||
return $.extend({}, el.getBoundingClientRect ? el.getBoundingClientRect() : {
|
||||
width: el.offsetWidth
|
||||
, height: el.offsetHeight
|
||||
}, this.$element.offset())
|
||||
}
|
||||
|
||||
, getTitle: function () {
|
||||
@@ -1892,6 +1903,7 @@
|
||||
|
||||
, listen: function () {
|
||||
this.$element
|
||||
.on('focus', $.proxy(this.focus, this))
|
||||
.on('blur', $.proxy(this.blur, this))
|
||||
.on('keypress', $.proxy(this.keypress, this))
|
||||
.on('keyup', $.proxy(this.keyup, this))
|
||||
@@ -1903,6 +1915,7 @@
|
||||
this.$menu
|
||||
.on('click', $.proxy(this.click, this))
|
||||
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
|
||||
.on('mouseleave', 'li', $.proxy(this.mouseleave, this))
|
||||
}
|
||||
|
||||
, eventSupported: function(eventName) {
|
||||
@@ -1976,9 +1989,13 @@
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
, focus: function (e) {
|
||||
this.focused = true
|
||||
}
|
||||
|
||||
, blur: function (e) {
|
||||
var that = this
|
||||
setTimeout(function () { that.hide() }, 150)
|
||||
this.focused = false
|
||||
if (!this.mousedover && this.shown) this.hide()
|
||||
}
|
||||
|
||||
, click: function (e) {
|
||||
@@ -1988,10 +2005,16 @@
|
||||
}
|
||||
|
||||
, mouseenter: function (e) {
|
||||
this.mousedover = true
|
||||
this.$menu.find('.active').removeClass('active')
|
||||
$(e.currentTarget).addClass('active')
|
||||
}
|
||||
|
||||
, mouseleave: function (e) {
|
||||
this.mousedover = false
|
||||
if (!this.focused && this.shown) this.hide()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Vendored
+2
-2
File diff suppressed because one or more lines are too long
+10
-154
@@ -68,7 +68,7 @@
|
||||
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Components</h1>
|
||||
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
|
||||
@@ -90,7 +90,7 @@
|
||||
<li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
|
||||
<li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
|
||||
<li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
|
||||
<li><a href="#labels-badges"><i class="glyphicon-chevron-right"></i> Labels and badges</a></li>
|
||||
<li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
|
||||
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
|
||||
<li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
|
||||
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
|
||||
@@ -159,90 +159,6 @@
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Sub menus on dropdowns</h3>
|
||||
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
|
||||
<div class="bs-docs-example bs-docs-example-submenus">
|
||||
|
||||
<div class="pull-left">
|
||||
<p class="muted">Default</p>
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#">More options</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pull-left">
|
||||
<p class="muted">Dropup</p>
|
||||
<div class="dropup">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#">More options</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pull-left">
|
||||
<p class="muted">Left submenu</p>
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-submenu pull-left">
|
||||
<a tabindex="-1" href="#">More options</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
...
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#">More options</a>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@@ -327,7 +243,7 @@
|
||||
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
|
||||
|
||||
<h4>Dropdowns in button groups</h4>
|
||||
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
|
||||
<p>Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1511,73 +1427,13 @@
|
||||
|
||||
|
||||
|
||||
<!-- Labels and badges
|
||||
<!-- Badges
|
||||
================================================== -->
|
||||
<section id="labels-badges">
|
||||
<section id="badges">
|
||||
<div class="page-header">
|
||||
<h1>Labels and badges</h1>
|
||||
<h1>Badges</h1>
|
||||
</div>
|
||||
<h3>Labels</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Labels</th>
|
||||
<th>Markup</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label">Default</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label">Default</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-success">Success</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-success">Success</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-warning">Warning</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-warning">Warning</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-danger">Danger</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-danger">Danger</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-info">Info</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-info">Info</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-inverse">Inverse</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-inverse">Inverse</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Badges</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -1657,7 +1513,7 @@
|
||||
</table>
|
||||
|
||||
<h3>Easily collapsible</h3>
|
||||
<p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
|
||||
<p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -1670,17 +1526,17 @@
|
||||
<h1>Typographic components</h1>
|
||||
</div>
|
||||
|
||||
<h2>Hero unit</h2>
|
||||
<h2>Jumbotron</h2>
|
||||
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="hero-unit">
|
||||
<div class="jumbotron">
|
||||
<h1>Hello, world!</h1>
|
||||
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
||||
<p><a class="btn btn-primary btn-large">Learn more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="hero-unit">
|
||||
<div class="jumbotron">
|
||||
<h1>Heading</h1>
|
||||
<p>Tagline</p>
|
||||
<p>
|
||||
|
||||
+157
-224
@@ -68,7 +68,7 @@
|
||||
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>CSS</h1>
|
||||
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
|
||||
@@ -303,7 +303,7 @@
|
||||
</div>
|
||||
<pre class="prettyprint"><em>rendered as italicized text</em></pre>
|
||||
|
||||
<p><span class="label label-info">Heads up!</span> Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
|
||||
<h3>Emphasis classes</h3>
|
||||
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
|
||||
@@ -567,8 +567,8 @@
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
</pre>
|
||||
<h5>Auto-truncating</h5>
|
||||
<p>
|
||||
<span class="label label-info">Heads up!</span>
|
||||
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
|
||||
</p>
|
||||
</section>
|
||||
@@ -588,7 +588,7 @@
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
|
||||
</pre>
|
||||
|
||||
<h2>Basic block</h2>
|
||||
@@ -601,7 +601,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
&lt;p&gt;Sample text here...&lt;/p&gt;
|
||||
</pre>
|
||||
</pre>
|
||||
<p><span class="label label-info">Heads up!</span> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
|
||||
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
|
||||
</section>
|
||||
|
||||
@@ -1060,20 +1059,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
|
||||
|
||||
<h2 id="forms-layouts">Optional layouts</h2>
|
||||
<p>Included with Bootstrap are three optional form layouts for common use cases.</p>
|
||||
|
||||
<h3>Search form</h3>
|
||||
<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code><input></code> for an extra-rounded text input.</p>
|
||||
<form class="bs-docs-example form-search">
|
||||
<input type="text" class="span3 search-query">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="form-search">
|
||||
<input type="text" class="span3 search-query">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</form>
|
||||
</pre>
|
||||
<p>Included with Bootstrap are optional form layouts for common use cases.</p>
|
||||
|
||||
<h3>Inline form</h3>
|
||||
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
|
||||
@@ -1119,13 +1105,15 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<label class="control-label" for="inputPassword">Password</label>
|
||||
<div class="controls">
|
||||
<input type="password" id="inputPassword" placeholder="Password">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<button type="submit" class="btn">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1146,9 +1134,11 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1296,85 +1286,82 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<h2 id="forms-extending">Extending form controls</h2>
|
||||
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
||||
|
||||
<h3>Prepended and appended inputs</h3>
|
||||
<p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p>
|
||||
|
||||
<h4>Default options</h4>
|
||||
<p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
|
||||
<h3>Input groups</h3>
|
||||
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p>
|
||||
<p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input id="prependedInput" type="text" placeholder="Username">
|
||||
<div class="input-group span9">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" placeholder="Username">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-append">
|
||||
<input id="appendedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
<div class="input-group span6">
|
||||
<input type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group span3">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input id="prependedInput" type="text" placeholder="Username">
|
||||
<div class="input-group span9">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" placeholder="Username">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input id="appendedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Combined</h4>
|
||||
<p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span>
|
||||
<input id="appendedPrependedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span>
|
||||
<input id="appendedPrependedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
<div class="input-group span6">
|
||||
<input type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group span3">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Buttons instead of text</h4>
|
||||
<p>Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
|
||||
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input class="span3" id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
<div class="input-group span7">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</span>
|
||||
<input type="text">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group span7">
|
||||
<input type="text">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input class="span3" id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
<div class="input-group span7">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</span>
|
||||
<input type="text">
|
||||
</div>
|
||||
</pre>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input class="span3" id="appendedInputButtons" type="text">
|
||||
<button class="btn" type="button">Search</button>
|
||||
<button class="btn" type="button">Options</button>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input class="span3" id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Search</button>
|
||||
<button class="btn" type="button">Options</button>
|
||||
|
||||
<div class="input-group span7">
|
||||
<input type="text">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Button dropdowns</h4>
|
||||
<p></p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input class="span3" id="appendedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<div class="input-group span7">
|
||||
<div class="input-group-btn btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
@@ -1384,13 +1371,26 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-append -->
|
||||
<input type="text">
|
||||
</div><!-- /input-group -->
|
||||
<br>
|
||||
<div class="input-group span7">
|
||||
<input type="text">
|
||||
<div class="input-group-btn btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-group -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButtons" type="text">
|
||||
<input class="span3" id="appendedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<div class="input-group span7">
|
||||
<div class="input-group-btn btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
@@ -1399,77 +1399,12 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text">
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input class="span2" id="prependedDropdownButton" type="text">
|
||||
</div><!-- /input-prepend -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<input class="span2" id="prependedDropdownButton" type="text">
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend input-append">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-prepend input-append -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend input-append">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<div class="input-group span7">
|
||||
<input type="text">
|
||||
<div class="input-group-btn btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
@@ -1483,8 +1418,8 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
|
||||
<h4>Segmented dropdown groups</h4>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<div class="input-group span7">
|
||||
<div class="input-group-btn btn-group">
|
||||
<button class="btn" tabindex="-1">Action</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
@@ -1499,58 +1434,35 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</div>
|
||||
<input type="text" class="span3">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input type="text" class="span3">
|
||||
<div class="btn-group">
|
||||
<button class="btn" tabindex="-1">Action</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<form>
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">...</div>
|
||||
<input type="text" class="span3">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input type="text" class="span3">
|
||||
<div class="btn-group">...</div>
|
||||
</div>
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h4>Search form</h4>
|
||||
<form class="bs-docs-example form-search">
|
||||
<div class="input-append">
|
||||
<input type="text" class="search-query span3">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</div>
|
||||
<div class="input-prepend">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
<input type="text" class="search-query span3">
|
||||
<br>
|
||||
|
||||
<div class="input-group span7">
|
||||
<input type="text">
|
||||
<div class="input-group-btn btn-group">
|
||||
<button class="btn" tabindex="-1">Action</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="form-search">
|
||||
<div class="input-append">
|
||||
<input type="text" class="search-query span3">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</div>
|
||||
<div class="input-prepend">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
<input type="text" class="search-query span3">
|
||||
</div>
|
||||
</form>
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">...</div>
|
||||
<input type="text" class="span3">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input type="text" class="span3">
|
||||
<div class="btn-group">...</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3 id="forms-extending-sizes">Control sizing</h3>
|
||||
@@ -1735,6 +1647,43 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled fieldsets</h3>
|
||||
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<fieldset disabled>
|
||||
<div>
|
||||
<input type="text" class="span4" placeholder="Disabled input">
|
||||
</div>
|
||||
<div>
|
||||
<select class="span4">
|
||||
<option>Disabled select</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Can't check this
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="form-inline">
|
||||
<fieldset disabled>
|
||||
<input type="text" class="span4" placeholder="Disabled input">
|
||||
<select class="span4">
|
||||
<option>Disabled select</option>
|
||||
</select>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Can't check this
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Validation states</h3>
|
||||
@@ -1817,7 +1766,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><button type="button" class="btn">Default</button></td>
|
||||
<td><button type="button" class="btn btn-default">Default</button></td>
|
||||
<td><code>btn</code></td>
|
||||
<td>Standard gray button with gradient</td>
|
||||
</tr>
|
||||
@@ -1826,11 +1775,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<td><code>btn btn-primary</code></td>
|
||||
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="btn btn-info">Info</button></td>
|
||||
<td><code>btn btn-info</code></td>
|
||||
<td>Used as an alternative to the default styles</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="btn btn-success">Success</button></td>
|
||||
<td><code>btn btn-success</code></td>
|
||||
@@ -1846,11 +1790,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<td><code>btn btn-danger</code></td>
|
||||
<td>Indicates a dangerous or potentially negative action</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="btn btn-inverse">Inverse</button></td>
|
||||
<td><code>btn btn-inverse</code></td>
|
||||
<td>Alternate dark gray button, not tied to a semantic action or use</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="btn btn-link">Link</button></td>
|
||||
<td><code>btn btn-link</code></td>
|
||||
@@ -1928,7 +1867,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<a href="#" class="btn btn-large disabled">Link</a>
|
||||
</pre>
|
||||
<p>
|
||||
<span class="label label-info">Heads up!</span>
|
||||
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
|
||||
</p>
|
||||
|
||||
@@ -1971,7 +1909,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<h1>Images</h1>
|
||||
</div>
|
||||
|
||||
<p>Add classes to an <code><img></code> element to easily style images in any project.</p>
|
||||
<p>Add classes to an <code><img></code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
|
||||
<div class="bs-docs-example bs-docs-example-images">
|
||||
<img data-src="holder.js/140x140" class="img-rounded">
|
||||
<img data-src="holder.js/140x140" class="img-circle">
|
||||
@@ -1982,8 +1920,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<img src="..." class="img-circle">
|
||||
<img src="..." class="img-polaroid">
|
||||
</pre>
|
||||
<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE8 due to lack of <code>border-radius</code> support.</p>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2181,10 +2117,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<i class="glyphicon-search"></i>
|
||||
</pre>
|
||||
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
|
||||
<p>
|
||||
<span class="label label-info">Heads up!</span>
|
||||
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
|
||||
</p>
|
||||
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
+1
-1
@@ -68,7 +68,7 @@
|
||||
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Customize and download</h1>
|
||||
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
|
||||
.carousel .container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.carousel-control {
|
||||
|
||||
+1
-1
@@ -68,7 +68,7 @@
|
||||
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Extending Bootstrap</h1>
|
||||
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
|
||||
|
||||
+1
-1
@@ -68,7 +68,7 @@
|
||||
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Gallery</h1>
|
||||
<p class="lead">Showcase of sites using Bootstrap.</p>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Getting started</h1>
|
||||
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
|
||||
|
||||
+2
-4
@@ -66,7 +66,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron masthead">
|
||||
<div class="bs-docs-jumbotron masthead">
|
||||
<div class="container">
|
||||
<h1>Bootstrap</h1>
|
||||
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
|
||||
@@ -83,9 +83,7 @@
|
||||
<li>
|
||||
<a href="./extend.html" >Extend</a>
|
||||
</li>
|
||||
<li>
|
||||
Version 3.0.0
|
||||
</li>
|
||||
<li>Version 3.0.0</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+14
-8
@@ -68,7 +68,7 @@
|
||||
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>JavaScript</h1>
|
||||
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
|
||||
@@ -186,7 +186,7 @@ $('#myModal').on('show', function (e) {
|
||||
<h3>Static example</h3>
|
||||
<p>A rendered modal with header, body, and set of actions in the footer.</p>
|
||||
<div class="bs-docs-example" style="background-color: #f5f5f5;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; display: block; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3>Modal header</h3>
|
||||
@@ -201,7 +201,7 @@ $('#myModal').on('show', function (e) {
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="modal hide fade">
|
||||
<div class="modal fade">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
|
||||
<h3>Modal header</h3>
|
||||
@@ -219,7 +219,7 @@ $('#myModal').on('show', function (e) {
|
||||
<h3>Live demo</h3>
|
||||
<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
|
||||
<!-- sample modal content -->
|
||||
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">Modal Heading</h3>
|
||||
@@ -258,7 +258,7 @@ $('#myModal').on('show', function (e) {
|
||||
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
|
||||
|
||||
<!-- Modal -->
|
||||
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">Modal header</h3>
|
||||
@@ -1420,26 +1420,31 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<ol class="carousel-indicators">
|
||||
<li class="active"></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="item active">
|
||||
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
|
||||
<div class="carousel-caption">
|
||||
<h3>First slide label</h3>
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
|
||||
<div class="carousel-caption">
|
||||
<h3>Second slide label</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
|
||||
<div class="carousel-caption">
|
||||
<h3>Third slide label</h3>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1683,6 +1688,7 @@ $('[data-spy="affix"]').each(function () {
|
||||
</pre>
|
||||
<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-top="200"</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
+10
-154
@@ -1,6 +1,6 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Components</h1>
|
||||
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
|
||||
@@ -22,7 +22,7 @@
|
||||
<li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
|
||||
<li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
|
||||
<li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
|
||||
<li><a href="#labels-badges"><i class="glyphicon-chevron-right"></i> Labels and badges</a></li>
|
||||
<li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
|
||||
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
|
||||
<li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
|
||||
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
|
||||
@@ -91,90 +91,6 @@
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Sub menus on dropdowns</h3>
|
||||
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
|
||||
<div class="bs-docs-example bs-docs-example-submenus">
|
||||
|
||||
<div class="pull-left">
|
||||
<p class="muted">Default</p>
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#">More options</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>{{! /.pull-left }}
|
||||
|
||||
<div class="pull-left">
|
||||
<p class="muted">Dropup</p>
|
||||
<div class="dropup">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#">More options</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>{{! /.pull-left }}
|
||||
|
||||
<div class="pull-left">
|
||||
<p class="muted">Left submenu</p>
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
<li><a tabindex="-1" href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-submenu pull-left">
|
||||
<a tabindex="-1" href="#">More options</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
<li><a tabindex="-1" href="#">Second level link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>{{! /.pull-left }}
|
||||
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
...
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#">More options</a>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@@ -259,7 +175,7 @@
|
||||
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
|
||||
|
||||
<h4>Dropdowns in button groups</h4>
|
||||
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
|
||||
<p>Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1443,73 +1359,13 @@
|
||||
|
||||
|
||||
|
||||
<!-- Labels and badges
|
||||
<!-- Badges
|
||||
================================================== -->
|
||||
<section id="labels-badges">
|
||||
<section id="badges">
|
||||
<div class="page-header">
|
||||
<h1>Labels and badges</h1>
|
||||
<h1>Badges</h1>
|
||||
</div>
|
||||
<h3>Labels</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Labels</th>
|
||||
<th>Markup</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label">Default</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label">Default</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-success">Success</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-success">Success</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-warning">Warning</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-warning">Warning</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-danger">Danger</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-danger">Danger</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-info">Info</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-info">Info</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-inverse">Inverse</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-inverse">Inverse</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Badges</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -1589,7 +1445,7 @@
|
||||
</table>
|
||||
|
||||
<h3>Easily collapsible</h3>
|
||||
<p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
|
||||
<p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -1602,17 +1458,17 @@
|
||||
<h1>Typographic components</h1>
|
||||
</div>
|
||||
|
||||
<h2>Hero unit</h2>
|
||||
<h2>Jumbotron</h2>
|
||||
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="hero-unit">
|
||||
<div class="jumbotron">
|
||||
<h1>Hello, world!</h1>
|
||||
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
||||
<p><a class="btn btn-primary btn-large">Learn more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="hero-unit">
|
||||
<div class="jumbotron">
|
||||
<h1>Heading</h1>
|
||||
<p>Tagline</p>
|
||||
<p>
|
||||
|
||||
Vendored
+146
-213
@@ -1,6 +1,6 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>CSS</h1>
|
||||
<p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
|
||||
@@ -240,7 +240,7 @@
|
||||
</div>
|
||||
<pre class="prettyprint"><em>rendered as italicized text</em></pre>
|
||||
|
||||
<p><span class="label label-info">Heads up!</span> Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
|
||||
<h3>Emphasis classes</h3>
|
||||
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
|
||||
@@ -507,8 +507,8 @@
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
</pre>
|
||||
<h5>Auto-truncating</h5>
|
||||
<p>
|
||||
<span class="label label-info">Heads up!</span>
|
||||
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
|
||||
</p>
|
||||
</section>
|
||||
@@ -528,7 +528,7 @@
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
|
||||
</pre>
|
||||
|
||||
<h2>Basic block</h2>
|
||||
@@ -541,7 +541,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
&lt;p&gt;Sample text here...&lt;/p&gt;
|
||||
</pre>
|
||||
</pre>
|
||||
<p><span class="label label-info">Heads up!</span> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
|
||||
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
|
||||
</section>
|
||||
|
||||
@@ -1000,20 +999,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
|
||||
|
||||
<h2 id="forms-layouts">Optional layouts</h2>
|
||||
<p>Included with Bootstrap are three optional form layouts for common use cases.</p>
|
||||
|
||||
<h3>Search form</h3>
|
||||
<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code><input></code> for an extra-rounded text input.</p>
|
||||
<form class="bs-docs-example form-search">
|
||||
<input type="text" class="span3 search-query">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</form>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="form-search">
|
||||
<input type="text" class="span3 search-query">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</form>
|
||||
</pre>
|
||||
<p>Included with Bootstrap are optional form layouts for common use cases.</p>
|
||||
|
||||
<h3>Inline form</h3>
|
||||
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
|
||||
@@ -1059,13 +1045,15 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<label class="control-label" for="inputPassword">Password</label>
|
||||
<div class="controls">
|
||||
<input type="password" id="inputPassword" placeholder="Password">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<button type="submit" class="btn">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1086,9 +1074,11 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1236,85 +1226,82 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<h2 id="forms-extending">Extending form controls</h2>
|
||||
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
||||
|
||||
<h3>Prepended and appended inputs</h3>
|
||||
<p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p>
|
||||
|
||||
<h4>Default options</h4>
|
||||
<p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
|
||||
<h3>Input groups</h3>
|
||||
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p>
|
||||
<p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input id="prependedInput" type="text" placeholder="Username">
|
||||
<div class="input-group span9">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" placeholder="Username">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-append">
|
||||
<input id="appendedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
<div class="input-group span6">
|
||||
<input type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group span3">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input id="prependedInput" type="text" placeholder="Username">
|
||||
<div class="input-group span9">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" placeholder="Username">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input id="appendedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Combined</h4>
|
||||
<p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span>
|
||||
<input id="appendedPrependedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span>
|
||||
<input id="appendedPrependedInput" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
<div class="input-group span6">
|
||||
<input type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group span3">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Buttons instead of text</h4>
|
||||
<p>Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
|
||||
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input class="span3" id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
<div class="input-group span7">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</span>
|
||||
<input type="text">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group span7">
|
||||
<input type="text">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input class="span3" id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
<div class="input-group span7">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</span>
|
||||
<input type="text">
|
||||
</div>
|
||||
</pre>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input class="span3" id="appendedInputButtons" type="text">
|
||||
<button class="btn" type="button">Search</button>
|
||||
<button class="btn" type="button">Options</button>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input class="span3" id="appendedInputButton" type="text">
|
||||
<button class="btn" type="button">Search</button>
|
||||
<button class="btn" type="button">Options</button>
|
||||
|
||||
<div class="input-group span7">
|
||||
<input type="text">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Button dropdowns</h4>
|
||||
<p></p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input class="span3" id="appendedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<div class="input-group span7">
|
||||
<div class="input-group-btn btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
@@ -1324,13 +1311,26 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-append -->
|
||||
<input type="text">
|
||||
</div><!-- /input-group -->
|
||||
<br>
|
||||
<div class="input-group span7">
|
||||
<input type="text">
|
||||
<div class="input-group-btn btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-group -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-append">
|
||||
<input id="appendedInputButtons" type="text">
|
||||
<input class="span3" id="appendedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<div class="input-group span7">
|
||||
<div class="input-group-btn btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
@@ -1339,77 +1339,12 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text">
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input class="span2" id="prependedDropdownButton" type="text">
|
||||
</div><!-- /input-prepend -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<input class="span2" id="prependedDropdownButton" type="text">
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend input-append">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-prepend input-append -->
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="input-prepend input-append">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
<input class="span2" id="appendedPrependedDropdownButton" type="text">
|
||||
<div class="btn-group">
|
||||
<div class="input-group span7">
|
||||
<input type="text">
|
||||
<div class="input-group-btn btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
@@ -1423,8 +1358,8 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
|
||||
<h4>Segmented dropdown groups</h4>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">
|
||||
<div class="input-group span7">
|
||||
<div class="input-group-btn btn-group">
|
||||
<button class="btn" tabindex="-1">Action</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
@@ -1439,9 +1374,12 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</div>
|
||||
<input type="text" class="span3">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input type="text" class="span3">
|
||||
<div class="btn-group">
|
||||
|
||||
<br>
|
||||
|
||||
<div class="input-group span7">
|
||||
<input type="text">
|
||||
<div class="input-group-btn btn-group">
|
||||
<button class="btn" tabindex="-1">Action</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
@@ -1457,40 +1395,14 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<form>
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">...</div>
|
||||
<input type="text" class="span3">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input type="text" class="span3">
|
||||
<div class="btn-group">...</div>
|
||||
</div>
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h4>Search form</h4>
|
||||
<form class="bs-docs-example form-search">
|
||||
<div class="input-append">
|
||||
<input type="text" class="search-query span3">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</div>
|
||||
<div class="input-prepend">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
<input type="text" class="search-query span3">
|
||||
</div>
|
||||
</form>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="form-search">
|
||||
<div class="input-append">
|
||||
<input type="text" class="search-query span3">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</div>
|
||||
<div class="input-prepend">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
<input type="text" class="search-query span3">
|
||||
</div>
|
||||
</form>
|
||||
<div class="input-prepend">
|
||||
<div class="btn-group">...</div>
|
||||
<input type="text" class="span3">
|
||||
</div>
|
||||
<div class="input-append">
|
||||
<input type="text" class="span3">
|
||||
<div class="btn-group">...</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3 id="forms-extending-sizes">Control sizing</h3>
|
||||
@@ -1675,6 +1587,43 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled fieldsets</h3>
|
||||
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<fieldset disabled>
|
||||
<div>
|
||||
<input type="text" class="span4" placeholder="Disabled input">
|
||||
</div>
|
||||
<div>
|
||||
<select class="span4">
|
||||
<option>Disabled select</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Can't check this
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="form-inline">
|
||||
<fieldset disabled>
|
||||
<input type="text" class="span4" placeholder="Disabled input">
|
||||
<select class="span4">
|
||||
<option>Disabled select</option>
|
||||
</select>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Can't check this
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Validation states</h3>
|
||||
@@ -1757,7 +1706,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><button type="button" class="btn">Default</button></td>
|
||||
<td><button type="button" class="btn btn-default">Default</button></td>
|
||||
<td><code>btn</code></td>
|
||||
<td>Standard gray button with gradient</td>
|
||||
</tr>
|
||||
@@ -1766,11 +1715,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<td><code>btn btn-primary</code></td>
|
||||
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="btn btn-info">Info</button></td>
|
||||
<td><code>btn btn-info</code></td>
|
||||
<td>Used as an alternative to the default styles</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="btn btn-success">Success</button></td>
|
||||
<td><code>btn btn-success</code></td>
|
||||
@@ -1786,11 +1730,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<td><code>btn btn-danger</code></td>
|
||||
<td>Indicates a dangerous or potentially negative action</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="btn btn-inverse">Inverse</button></td>
|
||||
<td><code>btn btn-inverse</code></td>
|
||||
<td>Alternate dark gray button, not tied to a semantic action or use</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button type="button" class="btn btn-link">Link</button></td>
|
||||
<td><code>btn btn-link</code></td>
|
||||
@@ -1868,7 +1807,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<a href="#" class="btn btn-large disabled">Link</a>
|
||||
</pre>
|
||||
<p>
|
||||
<span class="label label-info">Heads up!</span>
|
||||
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
|
||||
</p>
|
||||
|
||||
@@ -1911,7 +1849,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<h1>Images</h1>
|
||||
</div>
|
||||
|
||||
<p>Add classes to an <code><img></code> element to easily style images in any project.</p>
|
||||
<p>Add classes to an <code><img></code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
|
||||
<div class="bs-docs-example bs-docs-example-images">
|
||||
<img data-src="holder.js/140x140" class="img-rounded">
|
||||
<img data-src="holder.js/140x140" class="img-circle">
|
||||
@@ -1922,8 +1860,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<img src="..." class="img-circle">
|
||||
<img src="..." class="img-polaroid">
|
||||
</pre>
|
||||
<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE8 due to lack of <code>border-radius</code> support.</p>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2121,10 +2057,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<i class="glyphicon-search"></i>
|
||||
</pre>
|
||||
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
|
||||
<p>
|
||||
<span class="label label-info">Heads up!</span>
|
||||
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
|
||||
</p>
|
||||
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Customize and download</h1>
|
||||
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>
|
||||
|
||||
Vendored
+1
-1
@@ -1,6 +1,6 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Extending Bootstrap</h1>
|
||||
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Gallery</h1>
|
||||
<p class="lead">Showcase of sites using Bootstrap.</p>
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>Getting started</h1>
|
||||
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
|
||||
|
||||
Vendored
+2
-4
@@ -1,4 +1,4 @@
|
||||
<div class="jumbotron masthead">
|
||||
<div class="bs-docs-jumbotron masthead">
|
||||
<div class="container">
|
||||
<h1>Bootstrap</h1>
|
||||
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
|
||||
@@ -15,9 +15,7 @@
|
||||
<li>
|
||||
<a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>Extend</a>
|
||||
</li>
|
||||
<li>
|
||||
Version 3.0.0
|
||||
</li>
|
||||
<li>Version 3.0.0</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+14
-8
@@ -1,6 +1,6 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead">
|
||||
<header class="bs-docs-jumbotron subhead">
|
||||
<div class="container">
|
||||
<h1>JavaScript</h1>
|
||||
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
|
||||
@@ -119,7 +119,7 @@ $('#myModal').on('show', function (e) {
|
||||
<h3>Static example</h3>
|
||||
<p>A rendered modal with header, body, and set of actions in the footer.</p>
|
||||
<div class="bs-docs-example" style="background-color: #f5f5f5;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; display: block; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3>Modal header</h3>
|
||||
@@ -134,7 +134,7 @@ $('#myModal').on('show', function (e) {
|
||||
</div>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="modal hide fade">
|
||||
<div class="modal fade">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
|
||||
<h3>Modal header</h3>
|
||||
@@ -152,7 +152,7 @@ $('#myModal').on('show', function (e) {
|
||||
<h3>Live demo</h3>
|
||||
<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
|
||||
<!-- sample modal content -->
|
||||
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">Modal Heading</h3>
|
||||
@@ -191,7 +191,7 @@ $('#myModal').on('show', function (e) {
|
||||
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
|
||||
|
||||
<!-- Modal -->
|
||||
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="myModalLabel">Modal header</h3>
|
||||
@@ -1353,26 +1353,31 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<ol class="carousel-indicators">
|
||||
<li class="active"></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="item active">
|
||||
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
|
||||
<div class="carousel-caption">
|
||||
<h3>First slide label</h3>
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
|
||||
<div class="carousel-caption">
|
||||
<h3>Second slide label</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
|
||||
<div class="carousel-caption">
|
||||
<h3>Third slide label</h3>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1616,6 +1621,7 @@ $('[data-spy="affix"]').each(function () {
|
||||
</pre>
|
||||
<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-top="200"</code>.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
Reference in New Issue
Block a user