Skip to content

B
bootstrap
Commit e138b0df authored by Ivan Khalopik's avatar Ivan Khalopik
Browse files
Options

Merge remote-tracking branch 'bootstrap/3.0.0-wip' into 3.0.0-wip

parents 3285f4c3 d74a9634
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1123 additions and 802 deletions
README.md
View file @ e138b0df
......@@ -76,11 +76,11 @@ Should you encounter problems with installing dependencies or running makefile c
## Contributing
Please read through our guidelines for contributing to Bootstrap. Included are directions for opening issues, coding standards, and notes on development.
Please read through our guidelines for contributing to Bootstrap. Included are directions for opening issues, coding standards, and notes on development.
More over, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo).
Editor preferences are available in the [editor config](.editorconfig) for easy use in common text editors. Read more and download plugins at [http://editorconfig.com](http://editorconfig.com).
Editor preferences are available in the [editor config](.editorconfig) for easy use in common text editors. Read more and download plugins at [http://editorconfig.org](http://editorconfig.org).
......
composer.json
View file @ e138b0df
......@@ -2,8 +2,19 @@
"name": "twitter/bootstrap"
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
, "keywords": ["bootstrap", "css"]
, "homepage": "http://twitter.github.com/bootstrap/"
, "author": "Twitter Inc."
, "homepage": "http://getbootstrap.com"
, "authors": [
{
"name": "Mark Otto",
"email": "markdotto@gmail.com",
},
{
"name": "Jacob Thornton",
"email": "jacobthornton@gmail.com",
}
]
, "support": {
"issues": "https://github.com/twitter/bootstrap/issues"
}
, "license": "Apache-2.0"
}
docs/_includes/nav-css.html
View file @ e138b0df
......@@ -12,7 +12,10 @@
<li>
<a href="#grid">Grid system</a>
<ul class="nav">
<li><a href="#grid-example">Example usage</a></li>
<li><a href="#grid-options">Available options</a></li>
<li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
<li><a href="#grid-example-mixed">Ex: Mobile-desktop</a></li>
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
<li><a href="#grid-offsetting">Offset columns</a></li>
<li><a href="#grid-nesting">Nested columns</a></li>
<li><a href="#grid-column-ordering">Column ordering</a></li>
......
docs/_layouts/default.html
View file @ e138b0df
......@@ -20,7 +20,7 @@
<div class="container bs-docs-container">
<div class="row">
<div class="col col-lg-3">
<div class="col-lg-3">
<div class="bs-sidebar">
<ul class="nav bs-sidenav">
{% if page.slug == "getting-started" %}
......@@ -37,7 +37,7 @@
</ul>
</div>
</div>
<div class="col col-lg-9">
<div class="col-lg-9">
{{ content }}
</div>
</div>
......
docs/assets/css/bootstrap.css
View file @ e138b0df
This diff is collapsed.
docs/assets/css/docs.css
View file @ e138b0df
......@@ -246,14 +246,14 @@ body {
.show-grid {
margin-bottom: 15px;
}
.show-grid .col {
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
.show-grid .col:hover {
background-color: #ddd;
/* Todo: reconcile these */
background-color: rgba(185,74,72,.15);
border: 1px solid rgba(185,74,72,.2);
}
......@@ -520,6 +520,7 @@ body {
/* Utility classes table
------------------------- */
.bs-table th small,
.responsive-utilities th small {
display: block;
font-weight: normal;
......
docs/assets/js/application.js
View file @ e138b0df
......@@ -9,7 +9,7 @@
var $window = $(window)
// Disable certain links in docs
$('section [href^=#]').click(function (e) {
$('[href=#]').click(function (e) {
e.preventDefault()
})
......@@ -27,14 +27,6 @@
$('.bs-top').affix()
}, 100)
// add tipsies to grid for scaffolding
if ($('#grid-system').length) {
$('#grid-system').tooltip({
selector: '.show-grid > [class*="span"]'
, title: function () { return $(this).width() + 'px' }
})
}
// tooltip demo
$('.tooltip-demo').tooltip({
selector: "a[data-toggle=tooltip]"
......
docs/assets/js/bootstrap.js
View file @ e138b0df
......@@ -434,7 +434,7 @@
// =================
$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
var $this = $(this), href
var $this = $(this), href
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
var options = $.extend({}, $target.data(), $this.data())
var slideIndex
......@@ -442,12 +442,19 @@
$target.carousel(options)
if (slideIndex = $this.attr('data-slide-to')) {
$target.data('bs-carousel').pause().to(slideIndex).cycle()
$target.data('bs.carousel').pause().to(slideIndex).cycle()
}
e.preventDefault()
})
$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {
var $carousel = $(this)
$carousel.carousel($carousel.data())
})
})
}(window.jQuery);
/* ========================================================================
* Bootstrap: collapse.js v3.0.0
......@@ -865,18 +872,18 @@
Modal.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.focus()
}
}, this)
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.focus()
}
}, this))
}
Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) {
this.$element.on('keyup.dismiss.bs.modal', function ( e ) {
this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) {
e.which == 27 && this.hide()
}, this)
}, this))
} else if (!this.isShown) {
this.$element.off('keyup.dismiss.bs.modal')
}
......@@ -1093,7 +1100,7 @@
return options
}
Tooltip.prototype.enter = function (e) {
Tooltip.prototype.enter = function (obj) {
var defaults = this.getDefaults()
var options = {}
......@@ -1101,26 +1108,29 @@
if (defaults[key] != value) options[key] = value
})
var self = $(e.currentTarget)[this.type](options).data('bs.' + this.type)
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](options).data('bs.' + this.type)
if (!self.options.delay || !self.options.delay.show) return self.show()
clearTimeout(this.timeout)
self.hoverState = 'in'
this.timeout = setTimeout(function() {
this.timeout = setTimeout(function () {
if (self.hoverState == 'in') self.show()
}, self.options.delay.show)
}
Tooltip.prototype.leave = function (e) {
var self = $(e.currentTarget)[this.type](this._options).data('bs.' + this.type)
Tooltip.prototype.leave = function (obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this._options).data('bs.' + this.type)
clearTimeout(this.timeout)
if (this.timeout) clearTimeout(this.timeout)
if (!self.options.delay || !self.options.delay.hide) return self.hide()
self.hoverState = 'out'
this.timeout = setTimeout(function() {
this.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
}
......@@ -1317,7 +1327,7 @@
Tooltip.prototype.toggle = function (e) {
var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this
self.tip().hasClass('in') ? self.hide() : self.show()
self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
}
Tooltip.prototype.destroy = function () {
......
docs/assets/js/bootstrap.min.js
View file @ e138b0df
This diff is collapsed.
docs/components.html
View file @ e138b0df
......@@ -300,7 +300,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input class="col col-lg-2" id="inputIcon" type="text">
<input class="col-lg-2" id="inputIcon" type="text">
</div>
</div>
</div>
......@@ -311,7 +311,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input class="col col-lg-2" id="inputIcon" type="text">
<input class="col-lg-2" id="inputIcon" type="text">
</div>
</div>
</div>
......@@ -1302,7 +1302,7 @@ body { padding-bottom: 70px; }
</li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="col col-lg-8" placeholder="Search">
<input type="text" class="col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li>
......@@ -1379,7 +1379,7 @@ body { padding-bottom: 70px; }
</li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="col col-lg-8" placeholder="Search">
<input type="text" class="col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li>
......@@ -1757,22 +1757,22 @@ body { padding-bottom: 70px; }
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<div class="bs-example">
<div class="row">
<div class="col col-lg-3">
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
<div class="col col-lg-3">
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
<div class="col col-lg-3">
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
<div class="col col-lg-3">
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
......@@ -1781,7 +1781,7 @@ body { padding-bottom: 70px; }
</div><!-- /.bs-example -->
{% highlight html %}
<div class="row">
<div class="col col-lg-3">
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
......@@ -1794,7 +1794,7 @@ body { padding-bottom: 70px; }
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<div class="bs-example">
<div class="row">
<div class="col col-lg-4">
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
......@@ -1804,7 +1804,7 @@ body { padding-bottom: 70px; }
</div>
</div>
</div>
<div class="col col-lg-4">
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
......@@ -1814,7 +1814,7 @@ body { padding-bottom: 70px; }
</div>
</div>
</div>
<div class="col col-lg-4">
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
......@@ -1828,7 +1828,7 @@ body { padding-bottom: 70px; }
</div><!-- /.bs-example -->
{% highlight html %}
<div class="row">
<div class="col col-lg-3">
<div class="col-lg-3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
......
docs/css.html
View file @ e138b0df
This diff is collapsed.
docs/customize.html
View file @ e138b0df
This diff is collapsed.
docs/docs.html
View file @ e138b0df
This diff is collapsed.
docs/examples/carousel.html
View file @ e138b0df
......@@ -236,11 +236,11 @@ body {
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</button>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
......@@ -323,19 +323,19 @@ body {
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col col-lg-4">
<div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col col-lg-4">
<div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col col-lg-4">
<div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
......
docs/examples/grid.html
View file @ e138b0df
......@@ -24,8 +24,8 @@ title: Grid template
[class*="col-lg-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
background-color: rgba(185,74,72,.15);
border: 1px solid rgba(185,74,72,.2);
}
</style>
......@@ -37,22 +37,22 @@ title: Grid template
<h4>Three equal columns</h4>
<div class="row">
<div class="col col-lg-4">.col .col-lg-4</div>
<div class="col col-lg-4">.col .col-lg-4</div>
<div class="col col-lg-4">.col .col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
<h4>Three unequal columns</h4>
<div class="row">
<div class="col col-lg-3">.col .col-lg-3</div>
<div class="col col-lg-6">.col .col-lg-6</div>
<div class="col col-lg-3">.col .col-lg-3</div>
<div class="col-lg-3">.col-lg-3</div>
<div class="col-lg-6">.col-lg-6</div>
<div class="col-lg-3">.col-lg-3</div>
</div>
<h4>Two columns</h4>
<div class="row">
<div class="col col-lg-8">.col .col-lg-8</div>
<div class="col col-lg-4">.col .col-lg-4</div>
<div class="col-lg-8">.col-lg-8</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
<h4>Full width, single column</h4>
......@@ -60,14 +60,44 @@ title: Grid template
<h4>Two columns with two nested columns</h4>
<div class="row">
<div class="col col-lg-8">
.col .col-lg-8
<div class="col-lg-8">
.col-lg-8
<div class="row">
<div class="col col-lg-6">.col .col-lg-6</div>
<div class="col col-lg-6">.col .col-lg-6</div>
<div class="col-lg-6">.col-lg-6</div>
<div class="col-lg-6">.col-lg-6</div>
</div>
</div>
<div class="col col-lg-4">.col .col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
<h4>Mixed: mobile and desktop</h4>
<div class="row">
<div class="col-12 col-lg-8">.col-12 .col-lg-8</div>
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-lg-6">.col-6 .col-lg-6</div>
<div class="col-6 col-lg-6">.col-6 .col-lg-6</div>
</div>
<h4>Mixed: mobile, tablet, and desktop</h4>
<div class="row">
<div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
</div>
......
docs/examples/jumbotron-narrow.html
View file @ e138b0df
......@@ -104,7 +104,7 @@ title: Narrow page template
</div>
<div class="row marketing">
<div class="col col-lg-6">
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
......@@ -115,7 +115,7 @@ title: Narrow page template
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="col col-lg-6">
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
......
docs/examples/jumbotron.html
View file @ e138b0df
......@@ -39,11 +39,11 @@ title: Jumbotron template
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</button>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
......@@ -85,17 +85,17 @@ title: Jumbotron template
<!-- Example row of columns -->
<div class="row">
<div class="col col-lg-4">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div>
<div class="col col-lg-4">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div>
<div class="col col-lg-4">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
......
docs/examples/justified-nav.html
View file @ e138b0df
......@@ -118,17 +118,17 @@ title: Justified nav template
<!-- Example row of columns -->
<div class="row">
<div class="col col-lg-4">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div>
<div class="col col-lg-4">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div>
<div class="col col-lg-4">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
......
docs/examples/navbar-fixed-top.html
View file @ e138b0df
......@@ -20,11 +20,11 @@ title: Fixed navbar template
<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
<div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</button>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
......
docs/examples/navbar-static-top.html
View file @ e138b0df
......@@ -16,11 +16,11 @@ title: Static navbar template
<!-- Static navbar -->
<div class="navbar navbar-static-top">
<div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</button>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
......
docs/examples/navbar.html
View file @ e138b0df
......@@ -22,11 +22,11 @@ title: Navbar template
<!-- Static navbar -->
<div class="navbar">
<div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</button>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
......
docs/getting-started.html
View file @ e138b0df
......@@ -116,91 +116,98 @@ bootstrap/
{% endhighlight %}
<h3 id="examples-list">Examples</h3>
<div class="row bs-examples">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/starter-template/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
</a>
<h4>Starter template</h4>
<p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
<div class="bs-examples">
<div class="row">
<div class="col-lg-4">
<a class="thumbnail" href="/examples/starter-template/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
</a>
<h4>Starter template</h4>
<p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
</div>
<div class="col-lg-4">
<a class="thumbnail" href="/examples/grid/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
</a>
<h4>Basic grid layouts</h4>
<p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
</div>
<div class="col-lg-4">
<a class="thumbnail" href="/examples/jumbotron/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
</a>
<h4>Basic marketing site</h4>
<p>Features a jumbotron for primary message and three supporting elements.</p>
</div>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/grid/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
</a>
<h4>Basic grid layouts</h4>
<p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
<div class="row">
<div class="col-lg-4">
<a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
</a>
<h4>Narrow marketing</h4>
<p>Slim, lightweight marketing template for small projects or teams.</p>
</div>
<div class="col-lg-4">
<a class="thumbnail" href="/examples/justified-nav/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
</a>
<h4>Justified nav</h4>
<p>Marketing page with equal-width navigation links in a modified navbar.</p>
</div>
<div class="col-lg-4">
<a class="thumbnail" href="/examples/signin/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
</a>
<h4>Sign in</h4>
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
</div>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/jumbotron/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
</a>
<h4>Basic marketing site</h4>
<p>Features a jumbotron for primary message and three supporting elements.</p>
<div class="row">
<div class="col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
</a>
<h4>Sticky footer</h4>
<p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
</div>
<div class="col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
</a>
<h4>Sticky footer w/ navbar</h4>
<p>Add a fixed navbar to the default sticky footer template.</p>
</div>
<div class="col-lg-4">
<a class="thumbnail" href="/examples/carousel/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
</a>
<h4>Carousel jumbotron</h4>
<p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
</div>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
</a>
<h4>Narrow marketing</h4>
<p>Slim, lightweight marketing template for small projects or teams.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/justified-nav/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
</a>
<h4>Justified nav</h4>
<p>Marketing page with equal-width navigation links in a modified navbar.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/signin/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
</a>
<h4>Sign in</h4>
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
</a>
<h4>Sticky footer</h4>
<p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
</a>
<h4>Sticky footer w/ navbar</h4>
<p>Add a fixed navbar to the default sticky footer template.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/carousel/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
</a>
<h4>Carousel jumbotron</h4>
<p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
</a>
<h4>Navbar</h4>
<p>Basic template for showcasing how the navbar works.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
</a>
<h4>Static top navbar</h4>
<p>Basic template for showcasing the static navbar variation.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
</a>
<h4>Fixed top navbar</h4>
<p>Basic template for showcasing the fixed navbar variation.</p>
<div class="row">
<div class="col-lg-4">
<a class="thumbnail" href="/examples/navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
</a>
<h4>Navbar</h4>
<p>Basic template for showcasing how the navbar works.</p>
</div>
<div class="col-lg-4">
<a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
</a>
<h4>Static top navbar</h4>
<p>Basic template for showcasing the static navbar variation.</p>
</div>
<div class="col-lg-4">
<a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
</a>
<h4>Fixed top navbar</h4>
<p>Basic template for showcasing the fixed navbar variation.</p>
</div>
</div>
</div>
</div>
......
js/carousel.js
View file @ e138b0df
......@@ -194,7 +194,7 @@
$target.carousel(options)
if (slideIndex = $this.attr('data-slide-to')) {
$target.data('bs-carousel').pause().to(slideIndex).cycle()
$target.data('bs.carousel').pause().to(slideIndex).cycle()
}
e.preventDefault()
......
js/modal.js
View file @ e138b0df
......@@ -106,18 +106,18 @@
Modal.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.focus()
}
}, this)
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.focus()
}
}, this))
}
Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) {
this.$element.on('keyup.dismiss.bs.modal', function ( e ) {
this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) {
e.which == 27 && this.hide()
}, this)
}, this))
} else if (!this.isShown) {
this.$element.off('keyup.dismiss.bs.modal')
}
......
js/tooltip.js
View file @ e138b0df
......@@ -91,7 +91,7 @@
return options
}
Tooltip.prototype.enter = function (e) {
Tooltip.prototype.enter = function (obj) {
var defaults = this.getDefaults()
var options = {}
......@@ -99,26 +99,29 @@
if (defaults[key] != value) options[key] = value
})
var self = $(e.currentTarget)[this.type](options).data('bs.' + this.type)
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](options).data('bs.' + this.type)
if (!self.options.delay || !self.options.delay.show) return self.show()
clearTimeout(this.timeout)
self.hoverState = 'in'
this.timeout = setTimeout(function() {
this.timeout = setTimeout(function () {
if (self.hoverState == 'in') self.show()
}, self.options.delay.show)
}
Tooltip.prototype.leave = function (e) {
var self = $(e.currentTarget)[this.type](this._options).data('bs.' + this.type)
Tooltip.prototype.leave = function (obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this._options).data('bs.' + this.type)
clearTimeout(this.timeout)
if (this.timeout) clearTimeout(this.timeout)
if (!self.options.delay || !self.options.delay.hide) return self.hide()
self.hoverState = 'out'
this.timeout = setTimeout(function() {
this.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
}
......@@ -315,7 +318,7 @@
Tooltip.prototype.toggle = function (e) {
var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this
self.tip().hasClass('in') ? self.hide() : self.show()
self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
}
Tooltip.prototype.destroy = function () {
......
less/carousel.less
View file @ e138b0df
......@@ -90,13 +90,13 @@
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(rgba(0,0,0,.5), rgba(0,0,0,.0001));
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
background-color: transparent;
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(rgba(0,0,0,.0001), rgba(0,0,0,.5));
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
background-color: transparent;
}
......
less/dropdowns.less
View file @ e138b0df
......@@ -68,7 +68,7 @@
.dropdown-submenu:focus > a {
text-decoration: none;
color: @dropdown-link-hover-color;
#gradient > .vertical(@dropdown-link-hover-bg, darken(@dropdown-link-hover-bg, 5%));
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
}
// Active state
......@@ -79,7 +79,7 @@
color: @dropdown-link-active-color;
text-decoration: none;
outline: 0;
#gradient > .vertical(@dropdown-link-active-bg, darken(@dropdown-link-active-bg, 5%));
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
}
// Disabled state
......
less/grid.less
View file @ e138b0df
......@@ -13,9 +13,43 @@
.make-row();
}
// Common styles for small and large grid columns
.col {
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
position: relative;
// Float and set width: 100%; for easy stacking on mobile devices
float: left;
......@@ -27,37 +61,106 @@
padding-right: (@grid-gutter-width / 2);
}
// Generate small grid classes first
.generate-grid-columns(@grid-columns);
// Then generate the larger grid classes via media query
@media screen and (min-width: @screen-small) {
.generate-large-grid-columns(@grid-columns);
}
//
// Container and grid column sizing
//
// Tiny device columns (smartphones)
.col-1 { width: percentage((1 / @grid-columns)); }
.col-2 { width: percentage((2 / @grid-columns)); }
.col-3 { width: percentage((3 / @grid-columns)); }
.col-4 { width: percentage((4 / @grid-columns)); }
.col-5 { width: percentage((5 / @grid-columns)); }
.col-6 { width: percentage((6 / @grid-columns)); }
.col-7 { width: percentage((7 / @grid-columns)); }
.col-8 { width: percentage((8 / @grid-columns)); }
.col-9 { width: percentage((9 / @grid-columns)); }
.col-10 { width: percentage((10/ @grid-columns)); }
.col-11 { width: percentage((11/ @grid-columns)); }
.col-12 { width: 100%; }
// Responsive: Tablets and up
@media screen and (min-width: @screen-tablet) {
// Small device columns (phones to tablets)
@media (min-width: @screen-tablet) {
.container {
max-width: 728px;
max-width: @container-tablet;
}
.col-sm-1 { width: percentage((1 / @grid-columns)); }
.col-sm-2 { width: percentage((2 / @grid-columns)); }
.col-sm-3 { width: percentage((3 / @grid-columns)); }
.col-sm-4 { width: percentage((4 / @grid-columns)); }
.col-sm-5 { width: percentage((5 / @grid-columns)); }
.col-sm-6 { width: percentage((6 / @grid-columns)); }
.col-sm-7 { width: percentage((7 / @grid-columns)); }
.col-sm-8 { width: percentage((8 / @grid-columns)); }
.col-sm-9 { width: percentage((9 / @grid-columns)); }
.col-sm-10 { width: percentage((10/ @grid-columns)); }
.col-sm-11 { width: percentage((11/ @grid-columns)); }
.col-sm-12 { width: 100%; }
// Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
// Push and pull columns for source order changes
.col-push-1 { left: percentage((1 / @grid-columns)); }
.col-push-2 { left: percentage((2 / @grid-columns)); }
.col-push-3 { left: percentage((3 / @grid-columns)); }
.col-push-4 { left: percentage((4 / @grid-columns)); }
.col-push-5 { left: percentage((5 / @grid-columns)); }
.col-push-6 { left: percentage((6 / @grid-columns)); }
.col-push-7 { left: percentage((7 / @grid-columns)); }
.col-push-8 { left: percentage((8 / @grid-columns)); }
.col-push-9 { left: percentage((9 / @grid-columns)); }
.col-push-10 { left: percentage((10/ @grid-columns)); }
.col-push-11 { left: percentage((11/ @grid-columns)); }
.col-pull-1 { right: percentage((1 / @grid-columns)); }
.col-pull-2 { right: percentage((2 / @grid-columns)); }
.col-pull-3 { right: percentage((3 / @grid-columns)); }
.col-pull-4 { right: percentage((4 / @grid-columns)); }
.col-pull-5 { right: percentage((5 / @grid-columns)); }
.col-pull-6 { right: percentage((6 / @grid-columns)); }
.col-pull-7 { right: percentage((7 / @grid-columns)); }
.col-pull-8 { right: percentage((8 / @grid-columns)); }
.col-pull-9 { right: percentage((9 / @grid-columns)); }
.col-pull-10 { right: percentage((10/ @grid-columns)); }
.col-pull-11 { right: percentage((11/ @grid-columns)); }
}
// Responsive: Desktops and up
@media screen and (min-width: @screen-desktop) {
// Medium and large device columns (desktop and up)
@media (min-width: @screen-desktop) {
.container {
max-width: 940px;
max-width: @container-desktop;
}
.col-lg-1 { width: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); }
.col-lg-3 { width: percentage((3 / @grid-columns)); }
.col-lg-4 { width: percentage((4 / @grid-columns)); }
.col-lg-5 { width: percentage((5 / @grid-columns)); }
.col-lg-6 { width: percentage((6 / @grid-columns)); }
.col-lg-7 { width: percentage((7 / @grid-columns)); }
.col-lg-8 { width: percentage((8 / @grid-columns)); }
.col-lg-9 { width: percentage((9 / @grid-columns)); }
.col-lg-10 { width: percentage((10/ @grid-columns)); }
.col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; }
}
// Responsive: Large desktops and up
@media screen and (min-width: @screen-large-desktop) {
// Large desktops and up
@media (min-width: @screen-large-desktop) {
.container {
max-width: 1170px;
max-width: @container-large-desktop;
}
}
// Reset utility classes due to specificity
/*[class*="col-span-"].pull-right {
float: right;
}*/
less/mixins.less
View file @ e138b0df
This diff is collapsed.
less/navbar.less
View file @ e138b0df
......@@ -274,7 +274,7 @@
// Responsive navbar
// --------------------------------------------------
@media screen and (min-width: @screen-tablet) {
@media screen and (min-width: @grid-float-breakpoint) {
.navbar-brand {
float: left;
......
less/variables.less
View file @ e138b0df
......@@ -131,8 +131,6 @@
@input-height-large: (@line-height-computed + (@padding-large-vertical * 2));
@input-height-small: (@line-height-computed + (@padding-small-vertical * 2));
@form-actions-bg: #f5f5f5;
// Dropdowns
// -------------------------
......@@ -405,6 +403,19 @@
@screen-large-desktop: @screen-large;
// Container sizes
// --------------------------------------------------
// Small screen / tablet
@container-tablet: 728px;
// Medium screen / desktop
@container-desktop: 940px;
// Large screen / wide desktop
@container-large-desktop: 1170px;
// Grid system
// --------------------------------------------------
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment