rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'master' into gh-pages

Browse Source
This commit is contained in:
Mark Otto 2013-08-19 13:53:56 -07:00
commit 0335e9726f
48 changed files with 2246 additions and 1508 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Gruntfile.js
View File

@ -127,7 +127,7 @@ module.exports = function(grunt) {
validation: {
options: {
reset: true,
reset: true
},
files: {
src: ["_gh_pages/**/*.html"]
@ -169,7 +169,7 @@ module.exports = function(grunt) {
grunt.registerTask('validate-html', ['jekyll', 'validation']);
// Test task.
var testSubtasks = ['dist-css', 'jshint', 'qunit', 'validate-html'];
var testSubtasks = ['dist-css', 'jshint', 'qunit'];
// Only run BrowserStack tests under Travis
if (process.env.TRAVIS) {
// Only run BrowserStack tests if this is a mainline commit in twbs/bootstrap, or you have your own BrowserStack key
@ -202,7 +202,7 @@ module.exports = function(grunt) {
var files = {}
fs.readdirSync(type)
.filter(function (path) {
return new RegExp('\\.' + type + '$').test(path)
return type == 'fonts' ? true : new RegExp('\\.' + type + '$').test(path)
})
.forEach(function (path) {
return files[path] = fs.readFileSync(type + '/' + path, 'utf8')
@ -211,7 +211,7 @@ module.exports = function(grunt) {
}
var customize = fs.readFileSync('customize.html', 'utf-8')
var files = '<!-- generated -->\n<script id="files">\n' + getFiles('js') + getFiles('less') + '<\/script>\n<!-- /generated -->'
fs.writeFileSync('customize.html', customize.replace(/<!-- generated -->(.|[\n\r])*<!-- \/generated -->/, files))
var files = '<!-- generated -->\n<script id="files">\n' + getFiles('js') + getFiles('less') + getFiles('fonts') + '<\/script>\n<!-- /generated -->'
fs.writeFileSync('customize.html', customize.replace(/<!-- generated -->(.|[\n\r])*<!-- \/generated -->/, '') + files)
});
};

2
README.md
View File

@ -22,7 +22,7 @@ Read the [Getting Started page](http://getbootstrap.com/getting-started/) for in
Have a bug or a feature request? [Please open a new issue](https://github.com/twbs/bootstrap/issues). Before opening any issue, please search for existing issues and read the [Issue Guidelines](https://github.com/necolas/issue-guidelines), written by [Nicolas Gallagher](https://github.com/necolas/).
You may use [this JS Bin](http://jsbin.com/aFacAf/1/edit) as a template for your bug reports.
You may use [this JS Bin](http://jsbin.com/aKiCIDO/1/edit) as a template for your bug reports.

9
_config.yml
View File

@ -12,11 +12,12 @@ port: 9001
# Custom vars
repo: https://github.com/twbs/bootstrap
download: https://github.com/twbs/bootstrap/archive/3.0.0-wip.zip
download_dist: http://getbootstrap.com/bs-v3.0.0-rc.2-dist.zip
download: https://github.com/twbs/bootstrap/archive/v3.0.0.zip
download_dist: https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zip
blog: http://blog.getbootstrap.com
expo: http://expo.getbootstrap.com
cdn_css: //netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css
cdn_js: //netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/js/bootstrap.min.js
cdn_css: //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
cdn_theme_css: //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css
cdn_js: //netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js

4
_includes/nav-components.html
View File

@ -93,8 +93,7 @@
<li>
<a href="#alerts">Alerts</a>
<ul class="nav">
<li><a href="#alerts-default">Default alert</a></li>
<li><a href="#alerts-alternatives">Contextual alternatives</a></li>
<li><a href="#alerts-examples">Examples</a></li>
<li><a href="#alerts-dismissable">Dismissable alerts</a></li>
<li><a href="#alerts-links">Links in alerts</a></li>
</ul>
@ -131,6 +130,7 @@
<li><a href="#panels-basic">Basic example</a></li>
<li><a href="#panels-heading">Panel with heading</a></li>
<li><a href="#panels-alternatives">Contextual alternatives</a></li>
<li><a href="#panels-tables">With tables</a>
<li><a href="#panels-list-group">With list groups</a>
</ul>
</li>

18
_includes/nav-css.html
View File

@ -46,6 +46,7 @@
<li><a href="#tables-hover-rows">Hover rows</a></li>
<li><a href="#tables-condensed">Condensed table</a></li>
<li><a href="#tables-contextual-classes">Contextual classes</a></li>
<li><a href="#tables-responsive">Responsive tables</a></li>
</ul>
</li>
<li>
@ -70,6 +71,17 @@
<li><a href="#buttons-tags">Button tags</a></li>
</ul>
</li>
<li><a href="#images">Images</a></li>
<li><a href="#helper-classes">Helper classes</a></li>
<li><a href="#responsive-utilities">Responsive utilities</a></li>
<li>
<a href="#images">Images</a>
</li>
<li>
<a href="#helper-classes">Helper classes</a>
</li>
<li>
<a href="#responsive-utilities">Responsive utilities</a>
<ul class="nav">
<li><a href="#responsive-utilities-classes">Available classes</a></li>
<li><a href="#responsive-utilities-print">Print classes</a></li>
<li><a href="#responsive-utilities-tests">Test cases</a></li>
</ul>
</li>

2
_includes/nav-getting-started.html
View File

@ -1,7 +1,7 @@
<li>
<a href="#download">Download Bootstrap</a>
<ul class="nav">
<li><a href="#download-source">Download source</a></li>
<li><a href="#download-compiled">Compiled CSS, JS, and fonts</a></li>
<li><a href="#download-additional">Additional downloads</a></li>
<li><a href="#download-cdn">Bootstrap CDN</a></li>
</ul>

2
_includes/nav-main.html
View File

@ -7,7 +7,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC2</a>
<a href="{{ page.base_url }}" class="navbar-brand">Bootstrap</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">

24
_layouts/default.html
View File

@ -52,17 +52,21 @@
<!-- Footer
================================================== -->
<footer class="bs-footer" role="contentinfo">
{% include social-buttons.html %}
<div class="container">
{% include social-buttons.html %}
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="{{ site.blog }}">Blog</a></li>
<li class="muted">&middot;</li>
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
<li class="muted">&middot;</li>
<li><a href="{{ site.repo }}/releases">Releases</a></li>
</ul>
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="{{ page.base_url }}2.3.2/">Bootstrap 2.3.2 docs</a></li>
<li class="muted">&middot;</li>
<li><a href="{{ site.blog }}">Blog</a></li>
<li class="muted">&middot;</li>
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
<li class="muted">&middot;</li>
<li><a href="{{ site.repo }}/releases">Releases</a></li>
</ul>
</div>
</footer>
<!-- JS and analytics only. -->

9
_layouts/home.html
View File

@ -14,13 +14,16 @@
<!-- Page content of course! -->
{{ content }}
<!-- Callout for the old docs link -->
{% include old-bs-docs.html %}
<footer class="container" role="contentinfo">
{% include social-buttons.html %}
<ul class="bs-masthead-links">
<li class="current-version">
Currently v3.0.0
</li>
<li>
<a href="{{ page.base_url }}2.3.2/">Bootstrap 2.3.2 docs</a>
</li>
<li>
<a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
</li>

932
assets/css/docs.css
View File

File diff suppressed because one or more lines are too long

BIN
assets/ico/apple-touch-icon-144-precomposed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

34
assets/js/customizer.js
View File

@ -1,11 +1,11 @@
window.onload = function () { // wait for load in a dumb way because B-0
var cw = '/*!\n * Bootstrap v3.0.0-rc.2\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world @twitter by @mdo and @fat.\n */\n\n'
var cw = '/*!\n * Bootstrap v3.0.0\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world @twitter by @mdo and @fat.\n */\n\n'
function showError(msg, err) {
$('<div id="bsCustomizerAlert" class="bs-customizer-alert">\
<div class="container">\
<a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right">&times;</a>\
<p class="bs-customizer-alert-text">' + msg + '</p>' +
<p class="bs-customizer-alert-text"><span class="glyphicon glyphicon-warning-sign"></span>' + msg + '</p>' +
(err.extract ? '<pre class="bs-customizer-alert-extract">' + err.extract.join('\n') + '</pre>' : '') + '\
</div>\
</div>').appendTo('body').alert()
@ -51,7 +51,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
history.replaceState(false, document.title, window.location.origin + window.location.pathname + '?id=' + result.id)
})
.error(function(err) {
showError('<strong>Error</strong> Could not save gist file, configuration not saved.', err)
showError('<strong>Ruh roh!</strong> Could not save gist file, configuration not saved.', err)
})
}
@ -107,8 +107,8 @@ window.onload = function () { // wait for load in a dumb way because B-0
})
}
function generateZip(css, js, complete) {
if (!css && !js) return showError('<strong>Error</strong> No Bootstrap files selected.', new Error('no Bootstrap'))
function generateZip(css, js, fonts, complete) {
if (!css && !js) return showError('<strong>Ruh roh!</strong> No Bootstrap files selected.', new Error('no Bootstrap'))
var zip = new JSZip()
@ -126,6 +126,13 @@ window.onload = function () { // wait for load in a dumb way because B-0
}
}
if (fonts) {
var fontsFolder = zip.folder('fonts')
for (var fileName in fonts) {
fontsFolder.file(fileName, fonts[fileName])
}
}
var content = zip.generate({type:"blob"})
complete(content)
@ -141,6 +148,13 @@ window.onload = function () { // wait for load in a dumb way because B-0
return result + '\n\n'
}
function generateFonts() {
var glyphicons = $('#less-section [value="glyphicons.less"]:checked')
if (glyphicons.length) {
return __fonts
}
}
function generateCSS() {
var $checked = $('#less-section input:checked')
@ -158,6 +172,8 @@ window.onload = function () { // wait for load in a dumb way because B-0
css += __less['variables.less']
if (vars) css += generateCustomCSS(vars)
css += __less['mixins.less']
css += __less['normalize.less']
css += __less['scaffolding.less']
css += $checked
.map(function () { return __less[this.value] })
.toArray()
@ -172,7 +188,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
, filename: 'bootstrap.css'
}).parse(css, function (err, tree) {
if (err) {
return showError('<strong>Error</strong> Could not parse less files.', err)
return showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
}
result = {
'bootstrap.css' : cw + tree.toCSS(),
@ -180,7 +196,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
}
})
} catch (err) {
return showError('<strong>Error</strong> Could not parse less files.', err)
return showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
}
return result
@ -250,7 +266,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
$compileBtn.attr('disabled', 'disabled')
generateZip(generateCSS(), generateJavascript(), function (blob) {
generateZip(generateCSS(), generateJavascript(), generateFonts(), function (blob) {
$compileBtn.removeAttr('disabled')
saveAs(blob, "bootstrap.zip")
createGist(getCustomizerData())
@ -271,4 +287,4 @@ window.onload = function () { // wait for load in a dumb way because B-0
}
parseUrl()
}
}

231
components.html
View File

@ -7,45 +7,6 @@ base_url: "../"
---
<style>
/* Icons
-------------------------------------------------- */
.bs-glyphicons {
padding-left: 0;
padding-bottom: 1px;
margin-bottom: 20px;
list-style: none;
overflow: hidden;
}
.bs-glyphicons li {
float: left;
width: 25%;
height: 115px;
padding: 10px;
margin: 0 -1px -1px 0;
font-size: 12px;
line-height: 1.4;
text-align: center;
border: 1px solid #ddd;
}
.bs-glyphicons .glyphicon {
display: block;
margin: 5px auto 10px;
font-size: 24px;
}
.bs-glyphicons li:hover {
background-color: rgba(86,61,124,.1);
}
@media (min-width: 768px) {
.bs-glyphicons li {
width: 12.5%;
}
}
</style>
<!-- Glyphicons
================================================== -->
<div class="bs-docs-section">
@ -287,7 +248,7 @@ base_url: "../"
{% highlight html %}
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</a>
</button>
{% endhighlight %}
</div>
@ -1318,33 +1279,27 @@ base_url: "../"
{% endhighlight %}
<h2 id="nav-alignment">Alignment options</h2>
<p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<h2 id="nav-dropdowns">Using dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</nav>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs">
@ -2110,22 +2065,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-lg-3">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
<div class="col-lg-3">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
<div class="col-lg-3">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
<div class="col-lg-3">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
@ -2134,7 +2089,7 @@ body { padding-bottom: 70px; }
</div><!-- /.bs-example -->
{% highlight html %}
<div class="row">
<div class="col-lg-3">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="...">
</a>
@ -2147,7 +2102,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-lg-4">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
<div class="caption">
@ -2157,7 +2112,7 @@ body { padding-bottom: 70px; }
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
<div class="caption">
@ -2167,7 +2122,7 @@ body { padding-bottom: 70px; }
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
<div class="caption">
@ -2181,7 +2136,7 @@ body { padding-bottom: 70px; }
</div><!-- /.bs-example -->
{% highlight html %}
<div class="row">
<div class="col-lg-4">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="...">
<div class="caption">
@ -2206,22 +2161,14 @@ body { padding-bottom: 70px; }
</div>
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#js-alerts">alerts jQuery plugin</a>.</p>
<h2 id="alerts-default">Default alert</h2>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
<h2 id="alerts-examples">Examples</h2>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
<div class="bs-example">
<div class="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="bs-callout bs-callout-info">
<h4>No default class</h4>
<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
</div>
{% highlight html %}
<div class="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
{% endhighlight %}
<h2 id="alerts-alternatives">Contextual alternatives</h2>
<p>Add optional classes to change an alert's connotation.</p>
<div class="bs-example">
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
@ -2229,6 +2176,9 @@ body { padding-bottom: 70px; }
<div class="alert alert-info">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-danger">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
@ -2236,6 +2186,7 @@ body { padding-bottom: 70px; }
{% highlight html %}
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>
{% endhighlight %}
@ -2262,26 +2213,32 @@ body { padding-bottom: 70px; }
<h2 id="alerts-links">Links in alerts</h2>
<p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
<div class="bs-example">
<div class="alert alert-danger">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Best check yo self, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
</div>
{% highlight html %}
<div class="alert alert-danger">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-success">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger">
<a href="#" class="alert-link">...</a>
</div>
{% endhighlight %}
</div>
@ -2305,12 +2262,16 @@ body { padding-bottom: 70px; }
<p>Default progress bar.</p>
<div class="bs-example">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
{% highlight html %}
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
{% endhighlight %}
@ -2318,16 +2279,24 @@ body { padding-bottom: 70px; }
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-example">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
{% highlight html %}
@ -2357,16 +2326,24 @@ body { padding-bottom: 70px; }
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-example">
<div class="progress progress-striped" >
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
{% highlight html %}
@ -2402,7 +2379,7 @@ body { padding-bottom: 70px; }
{% highlight html %}
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class='sr-only'>45% Complete</span>
<span class="sr-only">45% Complete</span>
</div>
</div>
{% endhighlight %}
@ -2411,16 +2388,28 @@ body { padding-bottom: 70px; }
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
<div class="bs-example">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"><span class='sr-only'>10% Complete (danger)</span></div>
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
</div>
{% highlight html %}
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
{% endhighlight %}
</div>
@ -2673,14 +2662,14 @@ body { padding-bottom: 70px; }
<h3 id="panels-basic">Basic example</h3>
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<div class="bs-example">
<div class="panel">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
@ -2690,13 +2679,13 @@ body { padding-bottom: 70px; }
<h3 id="panels-heading">Panel with heading</h3>
<p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
<div class="bs-example">
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
@ -2706,14 +2695,14 @@ body { padding-bottom: 70px; }
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
@ -2726,7 +2715,7 @@ body { padding-bottom: 70px; }
<h3 id="panels-footer">Panel with footer</h3>
<p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
<div class="bs-example">
<div class="panel">
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
@ -2734,7 +2723,7 @@ body { padding-bottom: 70px; }
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
@ -2797,7 +2786,7 @@ body { padding-bottom: 70px; }
<h3 id="panels-tables">With tables</h3>
<p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>
<div class="bs-example">
<div class="panel">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
@ -2838,7 +2827,7 @@ body { padding-bottom: 70px; }
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
@ -2854,7 +2843,7 @@ body { padding-bottom: 70px; }
<p>If there is no panel body, the component moves from panel header to table without interruption.</p>
<div class="bs-example">
<div class="panel">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
@ -2892,7 +2881,7 @@ body { padding-bottom: 70px; }
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
@ -2908,7 +2897,7 @@ body { padding-bottom: 70px; }
<h3 id="panels-list-group">With list groups</h3>
<p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
<div class="bs-example">
<div class="panel">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
@ -2926,7 +2915,7 @@ body { padding-bottom: 70px; }
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">

204
css.html
View File

@ -71,7 +71,7 @@ base_url: "../"
<div class="page-header">
<h1 id="grid">Grid system</h1>
</div>
<p class="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
<p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h3 id="grid-media-queries">Media queries</h3>
<p>We use the following media queries to create the key breakpoints in our grid system.</p>
@ -98,8 +98,8 @@ base_url: "../"
<h3 id="grid-options">Grid options</h3>
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped bs-table">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
@ -130,9 +130,9 @@ base_url: "../"
<tr>
<th>Max container width</th>
<td>None (auto)</td>
<td>720px</td>
<td>940px</td>
<td>1140px</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr>
<th>Class prefix</th>
@ -594,11 +594,11 @@ base_url: "../"
<tbody>
<tr>
<td><h1>h1. Bootstrap heading</h1></td>
<td>Semibold 38px</td>
<td>Semibold 36px</td>
</tr>
<tr>
<td><h2>h2. Bootstrap heading</h2></td>
<td>Semibold 32px</td>
<td>Semibold 30px</td>
</tr>
<tr>
<td><h3>h3. Bootstrap heading</h3></td>
@ -906,7 +906,7 @@ base_url: "../"
{% endhighlight %}
<h3>Inline</h3>
<p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
<p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p>
<div class="bs-example">
<ul class="list-inline">
<li>Lorem ipsum</li>
@ -1217,11 +1217,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2 id="tables-contextual-classes">Contextual classes</h2>
<p>Use contextual classes to color table rows or individual cells.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped bs-table">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-lg-1">
<col class="col-lg-7">
@ -1332,6 +1331,108 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr>
{% endhighlight %}
<h2 id="tables-responsive">Responsive tables</h2>
<p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
<div class="bs-example">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
</div><!-- /example -->
{% highlight html %}
<div class="table-responsive">
<table class="table">
...
</table>
</div>
{% endhighlight %}
</div>
@ -2115,9 +2216,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h1>Responsive utilities</h1>
</div>
<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p>
<h3>Responsive classes</h3>
<div class="bs-table-scrollable">
<h2 id="responsive-utilities-classes">Available classes</h2>
<p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
@ -2203,8 +2307,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table>
</div>
<h3>Print classes</h3>
<div class="bs-table-scrollable">
<h2 id="responsive-utilities-print">Print classes</h2>
<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
@ -2228,12 +2334,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table>
</div>
<h3>When to use</h3>
<p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>
<h3>Test case</h3>
<h2 id="responsive-utilities-tests">Test cases</h2>
<p>Resize your browser or load on different devices to test the responsive utility classes.</p>
<h4>Visible on...</h4>
<h3>Visible on...</h3>
<p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-3">
@ -2254,7 +2359,36 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<span class="visible-lg">&#10004; Visible on large</span>
</div>
</div>
<h4>Hidden on...</h4>
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-sm">Extra small and small</span>
<span class="visible-xs visible-sm">&#10004; Visible on x-small and small</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-md hidden-lg">Medium and large</span>
<span class="visible-md visible-lg">&#10004; Visible on medium and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-md">Extra small and medium</span>
<span class="visible-xs visible-md">&#10004; Visible on x-small and medium</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-sm hidden-lg">Small and large</span>
<span class="visible-sm visible-lg">&#10004; Visible on small and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-lg">Extra small and large</span>
<span class="visible-xs visible-lg">&#10004; Visible on x-small and large</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="hidden-sm hidden-md">Small and medium</span>
<span class="visible-sm visible-md">&#10004; Visible on small and medium</span>
</div>
</div>
<h3>Hidden on...</h3>
<p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-3">
@ -2275,5 +2409,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<span class="hidden-lg">&#10004; Hidden on large</span>
</div>
</div>
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-6">
<span class="visible-xs visible-sm">Extra small and small</span>
<span class="hidden-xs hidden-sm">&#10004; Hidden on x-small and small</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="visible-md visible-lg">Medium and large</span>
<span class="hidden-md hidden-lg">&#10004; Hidden on medium and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-6">
<span class="visible-xs visible-md">Extra small and medium</span>
<span class="hidden-xs hidden-md">&#10004; Hidden on x-small and medium</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="visible-sm visible-lg">Small and large</span>
<span class="hidden-sm hidden-lg">&#10004; Hidden on small and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-6">
<span class="visible-xs visible-lg">Extra small and large</span>
<span class="hidden-xs hidden-lg">&#10004; Hidden on x-small and large</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="visible-sm visible-md">Small and medium</span>
<span class="hidden-sm hidden-md">&#10004; Hidden on small and medium</span>
</div>
</div>
</div>

294
customize.html
View File

File diff suppressed because one or more lines are too long

22
dist/css/bootstrap-theme.css vendored
View File

@ -199,16 +199,6 @@
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.alert {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#fcf8e3), to(#f8efc0));
background-image: -webkit-linear-gradient(top, #fcf8e3, 0%, #f8efc0, 100%);
background-image: -moz-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
background-repeat: repeat-x;
border-color: #f5e79e;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
}
.alert-success {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#dff0d8), to(#c8e5bc));
background-image: -webkit-linear-gradient(top, #dff0d8, 0%, #c8e5bc, 100%);
@ -229,6 +219,16 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
}
.alert-warning {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#fcf8e3), to(#f8efc0));
background-image: -webkit-linear-gradient(top, #fcf8e3, 0%, #f8efc0, 100%);
background-image: -moz-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
background-repeat: repeat-x;
border-color: #f5e79e;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
}
.alert-danger {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f2dede), to(#e7c3c3));
background-image: -webkit-linear-gradient(top, #f2dede, 0%, #e7c3c3, 100%);
@ -317,7 +317,7 @@
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.panel-heading {
.panel-default > .panel-heading {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f5f5f5), to(#e8e8e8));
background-image: -webkit-linear-gradient(top, #f5f5f5, 0%, #e8e8e8, 100%);
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);

2
dist/css/bootstrap-theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

567
dist/css/bootstrap.css vendored
View File

@ -354,6 +354,19 @@ img {
border-radius: 6px;
}
.img-thumbnail {
display: inline-block;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1.428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}
@ -487,12 +500,12 @@ h6 {
h1,
.h1 {
font-size: 38px;
font-size: 36px;
}
h2,
.h2 {
font-size: 32px;
font-size: 30px;
}
h3,
@ -1465,13 +1478,13 @@ th {
background-color: #f5f5f5;
}
table col[class^="col-"] {
table col[class*="col-"] {
display: table-column;
float: none;
}
table td[class^="col-"],
table th[class^="col-"] {
table td[class*="col-"],
table th[class*="col-"] {
display: table-cell;
float: none;
}
@ -1560,6 +1573,55 @@ table th[class^="col-"] {
border-color: #f8e5be;
}
@media (max-width: 768px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid #dddddd;
}
.table-responsive > .table {
margin-bottom: 0;
background-color: #fff;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap;
}
.table-responsive > .table-bordered {
border: 0;
}
.table-responsive > .table-bordered > thead > tr > th:first-child,
.table-responsive > .table-bordered > tbody > tr > th:first-child,
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
.table-responsive > .table-bordered > thead > tr > td:first-child,
.table-responsive > .table-bordered > tbody > tr > td:first-child,
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.table-responsive > .table-bordered > thead > tr > th:last-child,
.table-responsive > .table-bordered > tbody > tr > th:last-child,
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
.table-responsive > .table-bordered > thead > tr > td:last-child,
.table-responsive > .table-bordered > tbody > tr > td:last-child,
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.table-responsive > .table-bordered > thead > tr:last-child > th,
.table-responsive > .table-bordered > tbody > tr:last-child > th,
.table-responsive > .table-bordered > tfoot > tr:last-child > th,
.table-responsive > .table-bordered > thead > tr:last-child > td,
.table-responsive > .table-bordered > tbody > tr:last-child > td,
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
border-bottom: 0;
}
}
fieldset {
padding: 0;
margin: 0;
@ -1849,7 +1911,7 @@ textarea.input-lg {
}
.form-control-static {
padding-top: 6px;
padding-top: 7px;
margin-bottom: 0;
}
@ -2329,7 +2391,7 @@ input[type="button"].btn-block {
.glyphicon {
position: relative;
top: 2px;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
@ -3277,6 +3339,13 @@ input[type="button"].btn-block {
margin-bottom: 1px;
}
@media (min-width: 768px) {
.navbar-right .dropdown-menu {
right: 0;
left: auto;
}
}
.btn-default .caret {
border-top-color: #333333;
}
@ -3944,6 +4013,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
.navbar {
position: relative;
z-index: 1000;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
@ -4050,9 +4120,15 @@ textarea.input-group-sm > .input-group-btn > .btn {
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-collapse .navbar-nav.navbar-left:first-child {
margin-left: -15px;
}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: -15px;
}
.navbar-collapse .navbar-text:last-child {
margin-right: 0;
}
}
.container > .navbar-header,
@ -4084,7 +4160,6 @@ textarea.input-group-sm > .input-group-btn > .btn {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
border-width: 0 0 1px;
}
@ -4097,6 +4172,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
.navbar-fixed-top {
top: 0;
z-index: 1030;
}
.navbar-fixed-bottom {
@ -4205,10 +4281,6 @@ textarea.input-group-sm > .input-group-btn > .btn {
.navbar-right {
float: right !important;
}
.navbar-right .dropdown-menu {
right: 0;
left: auto;
}
}
.navbar-form {
@ -4727,7 +4799,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
.label {
display: inline;
padding: .25em .6em;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
@ -4869,8 +4941,8 @@ a.list-group-item.active > .badge,
@media screen and (min-width: 768px) {
.jumbotron {
padding-top: 50px;
padding-bottom: 50px;
padding-top: 48px;
padding-bottom: 48px;
}
.container .jumbotron {
padding-right: 60px;
@ -4881,8 +4953,11 @@ a.list-group-item.active > .badge,
}
}
.thumbnail,
.img-thumbnail {
.thumbnail {
display: inline-block;
display: block;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1.428571429;
background-color: #ffffff;
@ -4892,22 +4967,12 @@ a.list-group-item.active > .badge,
transition: all 0.2s ease-in-out;
}
.thumbnail {
display: block;
}
.thumbnail > img {
display: block;
height: auto;
max-width: 100%;
}
.img-thumbnail {
display: inline-block;
height: auto;
max-width: 100%;
}
a.thumbnail:hover,
a.thumbnail:focus {
border-color: #428bca;
@ -4926,9 +4991,7 @@ a.thumbnail:focus {
.alert {
padding: 15px;
margin-bottom: 20px;
color: #c09853;
background-color: #fcf8e3;
border: 1px solid #fbeed5;
border: 1px solid transparent;
border-radius: 4px;
}
@ -4937,13 +5000,8 @@ a.thumbnail:focus {
color: inherit;
}
.alert hr {
border-top-color: #f8e5be;
}
.alert .alert-link {
font-weight: bold;
color: #a47e3c;
}
.alert > p,
@ -4980,20 +5038,6 @@ a.thumbnail:focus {
color: #356635;
}
.alert-danger {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.alert-danger hr {
border-top-color: #e6c1c7;
}
.alert-danger .alert-link {
color: #953b39;
}
.alert-info {
color: #3a87ad;
background-color: #d9edf7;
@ -5008,6 +5052,34 @@ a.thumbnail:focus {
color: #2d6987;
}
.alert-warning {
color: #c09853;
background-color: #fcf8e3;
border-color: #fbeed5;
}
.alert-warning hr {
border-top-color: #f8e5be;
}
.alert-warning .alert-link {
color: #a47e3c;
}
.alert-danger {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.alert-danger hr {
border-top-color: #e6c1c7;
}
.alert-danger .alert-link {
color: #953b39;
}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
@ -5245,7 +5317,7 @@ a.list-group-item:focus {
.panel {
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@ -5275,10 +5347,6 @@ a.list-group-item:focus {
clear: both;
}
.panel > .table {
margin-bottom: 0;
}
.panel > .list-group {
margin-bottom: 0;
}
@ -5310,8 +5378,7 @@ a.list-group-item:focus {
.panel-heading {
padding: 10px 15px;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd;
border-bottom: 1px solid transparent;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -5360,6 +5427,24 @@ a.list-group-item:focus {
border-bottom: 1px solid #dddddd;
}
.panel-default {
border-color: #dddddd;
}
.panel-default > .panel-heading {
color: #333333;
background-color: #f5f5f5;
border-color: #dddddd;
}
.panel-default > .panel-heading + .panel-collapse .panel-body {
border-top-color: #dddddd;
}
.panel-default > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #dddddd;
}
.panel-primary {
border-color: #428bca;
}
@ -5508,6 +5593,12 @@ button.close {
overflow: hidden;
}
body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
margin-right: 15px;
}
.modal {
position: fixed;
top: 0;
@ -6007,12 +6098,18 @@ button.close {
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 20px;
height: 20px;
margin-top: -10px;
@ -6152,54 +6249,67 @@ button.close {
}
.visible-xs {
display: block !important;
display: none !important;
}
tr.visible-xs {
display: table-row !important;
display: none !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
@media (max-width: 767px) {
.visible-xs {
display: none !important;
display: block !important;
}
tr.visible-xs {
display: none !important;
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: none !important;
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-xs.visible-sm {
display: block !important;
}
tr.visible-xs.visible-sm {
display: table-row !important;
}
th.visible-xs.visible-sm,
td.visible-xs.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-xs {
display: none !important;
.visible-xs.visible-md {
display: block !important;
}
tr.visible-xs {
display: none !important;
tr.visible-xs.visible-md {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: none !important;
th.visible-xs.visible-md,
td.visible-xs.visible-md {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-xs {
display: none !important;
.visible-xs.visible-lg {
display: block !important;
}
tr.visible-xs {
display: none !important;
tr.visible-xs.visible-lg {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: none !important;
th.visible-xs.visible-lg,
td.visible-xs.visible-lg {
display: table-cell !important;
}
}
@ -6216,6 +6326,19 @@ td.visible-sm {
display: none !important;
}
@media (max-width: 767px) {
.visible-sm.visible-xs {
display: block !important;
}
tr.visible-sm.visible-xs {
display: table-row !important;
}
th.visible-sm.visible-xs,
td.visible-sm.visible-xs {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
@ -6230,28 +6353,28 @@ td.visible-sm {
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-sm {
display: none !important;
.visible-sm.visible-md {
display: block !important;
}
tr.visible-sm {
display: none !important;
tr.visible-sm.visible-md {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: none !important;
th.visible-sm.visible-md,
td.visible-sm.visible-md {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-sm {
display: none !important;
.visible-sm.visible-lg {
display: block !important;
}
tr.visible-sm {
display: none !important;
tr.visible-sm.visible-lg {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: none !important;
th.visible-sm.visible-lg,
td.visible-sm.visible-lg {
display: table-cell !important;
}
}
@ -6268,16 +6391,29 @@ td.visible-md {
display: none !important;
}
@media (max-width: 767px) {
.visible-md.visible-xs {
display: block !important;
}
tr.visible-md.visible-xs {
display: table-row !important;
}
th.visible-md.visible-xs,
td.visible-md.visible-xs {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-md {
display: none !important;
.visible-md.visible-sm {
display: block !important;
}
tr.visible-md {
display: none !important;
tr.visible-md.visible-sm {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: none !important;
th.visible-md.visible-sm,
td.visible-md.visible-sm {
display: table-cell !important;
}
}
@ -6295,15 +6431,15 @@ td.visible-md {
}
@media (min-width: 1200px) {
.visible-md {
display: none !important;
.visible-md.visible-lg {
display: block !important;
}
tr.visible-md {
display: none !important;
tr.visible-md.visible-lg {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: none !important;
th.visible-md.visible-lg,
td.visible-md.visible-lg {
display: table-cell !important;
}
}
@ -6320,29 +6456,42 @@ td.visible-lg {
display: none !important;
}
@media (max-width: 767px) {
.visible-lg.visible-xs {
display: block !important;
}
tr.visible-lg.visible-xs {
display: table-row !important;
}
th.visible-lg.visible-xs,
td.visible-lg.visible-xs {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-lg {
display: none !important;
.visible-lg.visible-sm {
display: block !important;
}
tr.visible-lg {
display: none !important;
tr.visible-lg.visible-sm {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: none !important;
th.visible-lg.visible-sm,
td.visible-lg.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-lg {
display: none !important;
.visible-lg.visible-md {
display: block !important;
}
tr.visible-lg {
display: none !important;
tr.visible-lg.visible-md {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: none !important;
th.visible-lg.visible-md,
td.visible-lg.visible-md {
display: table-cell !important;
}
}
@ -6360,54 +6509,67 @@ td.visible-lg {
}
.hidden-xs {
display: none !important;
display: block !important;
}
tr.hidden-xs {
display: none !important;
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: none !important;
display: table-cell !important;
}
@media (min-width: 768px) and (max-width: 991px) {
@media (max-width: 767px) {
.hidden-xs {
display: block !important;
display: none !important;
}
tr.hidden-xs {
display: table-row !important;
display: none !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-xs.hidden-sm {
display: none !important;
}
tr.hidden-xs.hidden-sm {
display: none !important;
}
th.hidden-xs.hidden-sm,
td.hidden-xs.hidden-sm {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-xs {
display: block !important;
.hidden-xs.hidden-md {
display: none !important;
}
tr.hidden-xs {
display: table-row !important;
tr.hidden-xs.hidden-md {
display: none !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
th.hidden-xs.hidden-md,
td.hidden-xs.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-xs {
display: block !important;
.hidden-xs.hidden-lg {
display: none !important;
}
tr.hidden-xs {
display: table-row !important;
tr.hidden-xs.hidden-lg {
display: none !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
th.hidden-xs.hidden-lg,
td.hidden-xs.hidden-lg {
display: none !important;
}
}
@ -6424,6 +6586,19 @@ td.hidden-sm {
display: table-cell !important;
}
@media (max-width: 767px) {
.hidden-sm.hidden-xs {
display: none !important;
}
tr.hidden-sm.hidden-xs {
display: none !important;
}
th.hidden-sm.hidden-xs,
td.hidden-sm.hidden-xs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
@ -6438,28 +6613,28 @@ td.hidden-sm {
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-sm {
display: block !important;
.hidden-sm.hidden-md {
display: none !important;
}
tr.hidden-sm {
display: table-row !important;
tr.hidden-sm.hidden-md {
display: none !important;
}
th.hidden-sm,
td.hidden-sm {
display: table-cell !important;
th.hidden-sm.hidden-md,
td.hidden-sm.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-sm {
display: block !important;
.hidden-sm.hidden-lg {
display: none !important;
}
tr.hidden-sm {
display: table-row !important;
tr.hidden-sm.hidden-lg {
display: none !important;
}
th.hidden-sm,
td.hidden-sm {
display: table-cell !important;
th.hidden-sm.hidden-lg,
td.hidden-sm.hidden-lg {
display: none !important;
}
}
@ -6476,16 +6651,29 @@ td.hidden-md {
display: table-cell !important;
}
@media (max-width: 767px) {
.hidden-md.hidden-xs {
display: none !important;
}
tr.hidden-md.hidden-xs {
display: none !important;
}
th.hidden-md.hidden-xs,
td.hidden-md.hidden-xs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-md {
display: block !important;
.hidden-md.hidden-sm {
display: none !important;
}
tr.hidden-md {
display: table-row !important;
tr.hidden-md.hidden-sm {
display: none !important;
}
th.hidden-md,
td.hidden-md {
display: table-cell !important;
th.hidden-md.hidden-sm,
td.hidden-md.hidden-sm {
display: none !important;
}
}
@ -6503,15 +6691,15 @@ td.hidden-md {
}
@media (min-width: 1200px) {
.hidden-md {
display: block !important;
.hidden-md.hidden-lg {
display: none !important;
}
tr.hidden-md {
display: table-row !important;
tr.hidden-md.hidden-lg {
display: none !important;
}
th.hidden-md,
td.hidden-md {
display: table-cell !important;
th.hidden-md.hidden-lg,
td.hidden-md.hidden-lg {
display: none !important;
}
}
@ -6528,29 +6716,42 @@ td.hidden-lg {
display: table-cell !important;
}
@media (max-width: 767px) {
.hidden-lg.hidden-xs {
display: none !important;
}
tr.hidden-lg.hidden-xs {
display: none !important;
}
th.hidden-lg.hidden-xs,
td.hidden-lg.hidden-xs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-lg {
display: block !important;
.hidden-lg.hidden-sm {
display: none !important;
}
tr.hidden-lg {
display: table-row !important;
tr.hidden-lg.hidden-sm {
display: none !important;
}
th.hidden-lg,
td.hidden-lg {
display: table-cell !important;
th.hidden-lg.hidden-sm,
td.hidden-lg.hidden-sm {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-lg {
display: block !important;
.hidden-lg.hidden-md {
display: none !important;
}
tr.hidden-lg {
display: table-row !important;
tr.hidden-lg.hidden-md {
display: none !important;
}
th.hidden-lg,
td.hidden-lg {
display: table-cell !important;
th.hidden-lg.hidden-md,
td.hidden-lg.hidden-md {
display: none !important;
}
}

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
examples/carousel/carousel.css
View File

@ -19,7 +19,6 @@ body {
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
@ -38,6 +37,7 @@ body {
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
@ -93,7 +93,7 @@ body {
@media (min-width: 768px) {
/* Remve the edge padding needed for mobile */
/* Remove the edge padding needed for mobile */
.marketing {
padding-left: 0;
padding-right: 0;

2
examples/jumbotron-narrow/jumbotron-narrow.css
View File

@ -4,7 +4,7 @@ body {
padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile-first views */
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {

2
examples/justified-nav/justified-nav.css
View File

@ -76,8 +76,6 @@ body {
}
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */

44
examples/non-responsive/index.html
View File

@ -25,6 +25,45 @@
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="page-header">
@ -35,6 +74,9 @@
<h3>What changes</h3>
<p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.</p>
<h3>Regarding navbars</h3>
<p>As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar.</p>
<h3>Non-responsive grid system</h3>
<div class="row">
<div class="col-xs-4">One third</div>
@ -48,5 +90,7 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>

104
examples/non-responsive/non-responsive.css
View File

@ -1,8 +1,38 @@
/* Template-specific stuff
*
* Customizations just for the template—these are not necessary for anything
* with disabling the responsiveness.
*/
/* Account for fixed navbar */
body {
padding-top: 70px;
padding-bottom: 30px;
}
/* Finesse the page header spacing */
.page-header {
margin-bottom: 30px;
}
.page-header .lead {
margin-bottom: 10px;
}
/* Non-responsive overrides
*
* Utilitze the following CSS to disable the responsive-ness of the container,
* grid system, and navbar.
*/
/* Reset the container */
.container {
max-width: none !important;
width: 970px;
}
/* Demonstrate the grids */
.col-xs-4 {
padding-top: 15px;
padding-bottom: 15px;
@ -11,3 +41,77 @@
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
.container .navbar-header,
.container .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
/* Always float the navbar header */
.navbar-header {
float: left;
}
/* Undo the collapsing navbar */
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-toggle {
display: none;
}
.navbar-brand {
margin-left: -15px;
}
/* Always apply the floated nav */
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding: 15px;
}
/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
float: right;
}
/* Undo custom dropdowns */
.navbar .open .dropdown-menu {
position: absolute;
float: left;
background-color: #fff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-width: 0 1px 1px;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.navbar .open .dropdown-menu > li > a {
color: #333;
}
.navbar .open .dropdown-menu > li > a:hover,
.navbar .open .dropdown-menu > li > a:focus,
.navbar .open .dropdown-menu > .active > a,
.navbar .open .dropdown-menu > .active > a:hover,
.navbar .open .dropdown-menu > .active > a:focus {
color: #fff !important;
background-color: #428bca !important;
}
.navbar .open .dropdown-menu > .disabled > a,
.navbar .open .dropdown-menu > .disabled > a:hover,
.navbar .open .dropdown-menu > .disabled > a:focus {
color: #999 !important;
background-color: transparent !important;
}

BIN
examples/screenshots/non-responsive.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 60 KiB

8
examples/theme/index.html
View File

@ -219,15 +219,15 @@
<div class="page-header">
<h1>Alerts</h1>
</div>
<div class="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-danger">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
@ -309,7 +309,7 @@
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>

696
getting-started.html
View File

@ -15,14 +15,9 @@ base_url: "../"
</div>
<p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<h3 id="download-source">Download latest full source</h3>
<p>Until Bootstrap 3.0.0 is finalized, download the latest full source code (includes compiled and minified versions of our CSS and JavaScript under the <code>dist/</code> directory).</p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest Bootstrap 3</a></p>
<!--
<h3>Download compiled CSS and JS</h3>
<p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
<h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
<p>The fastest way to get Bootstrap is to download the compiled and minified versions of our CSS and JavaScript, along with the included fonts. No documentation or original source files are included.</p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
-->
<h3 id="download-additional">Additional downloads</h3>
<div class="bs-docs-dl-options">
@ -43,10 +38,13 @@ base_url: "../"
<h3 id="download-cdn">Bootstrap CDN</h3>
<p>The folks over at <a href="https://www.netdna.com/">NetDNA</a> have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p>
{% highlight html linenos %}
{% highlight html %}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="{{ site.cdn_css }}">
<!-- Optional theme -->
<link rel="stylesheet" href="{{ site.cdn_theme_css }}">
<!-- Latest compiled and minified JavaScript -->
<script src="{{ site.cdn_js }}"></script>
{% endhighlight %}
@ -73,12 +71,19 @@ bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
{% endhighlight %}
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>).</p>
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
<div class="bs-callout bs-callout-danger">
<h4>jQuery required</h4>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>.</p>
@ -104,6 +109,12 @@ bootstrap/
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
@ -112,9 +123,6 @@ bootstrap/
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="js/respond.js"></script>
</body>
</html>
{% endhighlight %}
@ -269,53 +277,16 @@ bootstrap/
<ol>
<li>Remove (or just don't add) the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li>
<li>Remove the <code>max-width</code> on the <code>.container</code> for all grid tiers with <code>max-width: none !important;</code> and set a regular width like <code>width: 970px;</code>. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li>
<li>If using navbars, undo all the navbar collapsing and expanding behavior (this is too much to show here, so peep the example).</li>
<li>For grid layouts, make use of <code>.col-xs-*</code> classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.</li>
</ol>
<p>You'll still need respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.</p>
<p>You'll still need Respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.</p>
<h3>Bootstrap template with disabled responsive</h3>
<p>We've taken the above steps and applied them to a basic template here. Note the steps above are called out in comments here, e.g. <code>&lt;-- 1. --&gt;</code>.</p>
{% highlight html %}
<!DOCTYPE html>
<html>
<head>
<title>Disabling responsiveness in Bootstrap</title>
<!-- 1. Note there is no meta tag here -->
<!-- Load default Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- 2. Add our custom CSS to set the container's fixed width -->
<style>
.container {
max-width: none !important;
width: 970px;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<!-- 3. When using grid columns, use the `.col-xs-*` classes -->
<div class="row">
<div class="col-xs-4">One third</div>
<div class="col-xs-4">One third</div>
<div class="col-xs-4">One third</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="js/respond.js"></script>
</body>
</html>
{% endhighlight %}
<p>We've taken the above steps and applied them to an example. Read it's source code to see the specific changes called out.</p>
<p>
<a href="../examples/non-responsive/" class="btn btn-primary">View non-responsive example</a>
</p>
</div>
@ -326,328 +297,315 @@ bootstrap/
<div class="page-header">
<h1 id="migration">Migrating from 2.x to 3.0</h1>
</div>
<p class="lead">We've put together a helpful guide that outlines some of the key changes from Bootstrap 2.x to 3.0.</p>
<h3 id="migration-classes">Major class changes</h3>
<p></p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Bootstrap 2.x</th>
<th>Bootstrap 3.0</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.container-fluid</code></td>
<td><code>.container</code></td>
</tr>
<tr>
<td><code>.row-fluid</code></td>
<td><code>.row</code></td>
</tr>
<tr>
<td><code>.span*</code></td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<td><code>.offset*</code></td>
<td><code>.col-md-offset-*</code></td>
</tr>
<tr>
<td><code>.brand</code></td>
<td><code>.navbar-brand</code></td>
</tr>
<tr>
<td><code>.hero-unit</code></td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<td><code>.icon-*</code></td>
<td><code>.glyphicon .glyphicon-*</code></td>
</tr>
<tr>
<td><code>.btn</code></td>
<td><code>.btn .btn-default</code></td>
</tr>
<tr>
<td><code>.btn-mini</code></td>
<td><code>.btn-xs</code></td>
</tr>
<tr>
<td><code>.btn-small</code></td>
<td><code>.btn-sm</code></td>
</tr>
<tr>
<td><code>.btn-large</code></td>
<td><code>.btn-lg</code></td>
</tr>
<tr>
<td><code>.visible-phone</code></td>
<td><code>.visible-sm</code></td>
</tr>
<tr>
<td><code>.visible-tablet</code></td>
<td><code>.visible-md</code></td>
</tr>
<tr>
<td><code>.visible-desktop</code></td>
<td><code>.visible-lg</code></td>
</tr>
<tr>
<td><code>.hidden-phone</code></td>
<td><code>.hidden-sm</code></td>
</tr>
<tr>
<td><code>.hidden-tablet</code></td>
<td><code>.hidden-md</code></td>
</tr>
<tr>
<td><code>.hidden-desktop</code></td>
<td><code>.hidden-lg</code></td>
</tr>
<tr>
<td><code>.input-small</code></td>
<td><code>.input-sm</code></td>
</tr>
<tr>
<td><code>.input-large</code></td>
<td><code>.input-lg</code></td>
</tr>
<tr>
<td><code>.input-prepend</code></td>
<td><code>.input-group</code></td>
</tr>
<tr>
<td><code>.input-append</code></td>
<td><code>.input-group</code></td>
</tr>
<tr>
<td><code>.add-on</code></td>
<td><code>.input-group-addon</code></td>
</tr>
<tr>
<td><code>.btn-navbar</code></td>
<td><code>.navbar-btn</code></td>
</tr>
<tr>
<td><code>.thumbnail</code></td>
<td><code>.img-thumbnail</code></td>
</tr>
<tr>
<td><code>ul.inline</code></td>
<td><code>.list-inline</code></td>
</tr>
</tbody>
</table>
<p class="lead">Folks looking to upgrade to v3 should use this section as a general upgrade guide. We've outlined some of the major changes and provided tables that highlight key changes. For an overview, <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">read the announcement blog post</a>.</p>
<h3 id="migration-new">What's new</h3>
<h2 id="migration-classes">Major class changes</h2>
<p>Reference table for classes that have changed between v2.x and v3.0.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Bootstrap 2.x</th>
<th>Bootstrap 3.0</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.container-fluid</code></td>
<td><code>.container</code></td>
</tr>
<tr>
<td><code>.row-fluid</code></td>
<td><code>.row</code></td>
</tr>
<tr>
<td><code>.span*</code></td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<td><code>.offset*</code></td>
<td><code>.col-md-offset-*</code></td>
</tr>
<tr>
<td><code>.brand</code></td>
<td><code>.navbar-brand</code></td>
</tr>
<tr>
<td><code>.nav-collapse</code></td>
<td><code>.navbar-collapse</code></td>
</tr>
<tr>
<td><code>.nav-toggle</code></td>
<td><code>.navbar-toggle</code></td>
</tr>
<tr>
<td><code>.btn-navbar</code></td>
<td><code>.navbar-btn</code></td>
</tr>
<tr>
<td><code>.hero-unit</code></td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<td><code>.icon-*</code></td>
<td><code>.glyphicon .glyphicon-*</code></td>
</tr>
<tr>
<td><code>.btn</code></td>
<td><code>.btn .btn-default</code></td>
</tr>
<tr>
<td><code>.btn-mini</code></td>
<td><code>.btn-xs</code></td>
</tr>
<tr>
<td><code>.btn-small</code></td>
<td><code>.btn-sm</code></td>
</tr>
<tr>
<td><code>.btn-large</code></td>
<td><code>.btn-lg</code></td>
</tr>
<tr>
<td><code>.visible-phone</code></td>
<td><code>.visible-sm</code></td>
</tr>
<tr>
<td><code>.visible-tablet</code></td>
<td><code>.visible-md</code></td>
</tr>
<tr>
<td><code>.visible-desktop</code></td>
<td><code>.visible-lg</code></td>
</tr>
<tr>
<td><code>.hidden-phone</code></td>
<td><code>.hidden-sm</code></td>
</tr>
<tr>
<td><code>.hidden-tablet</code></td>
<td><code>.hidden-md</code></td>
</tr>
<tr>
<td><code>.hidden-desktop</code></td>
<td><code>.hidden-lg</code></td>
</tr>
<tr>
<td><code>.input-small</code></td>
<td><code>.input-sm</code></td>
</tr>
<tr>
<td><code>.input-large</code></td>
<td><code>.input-lg</code></td>
</tr>
<tr>
<td><code>.checkbox.inline</code> <code>.radio.inline</code></td>
<td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
</tr>
<tr>
<td><code>.input-prepend</code> <code>.input-append</code></td>
<td><code>.input-group</code></td>
</tr>
<tr>
<td><code>.add-on</code></td>
<td><code>.input-group-addon</code></td>
</tr>
<tr>
<td><code>.thumbnail</code></td>
<td><code>.img-thumbnail</code></td>
</tr>
<tr>
<td><code>ul.unstyled</code></td>
<td><code>.list-unstyled</code></td>
</tr>
<tr>
<td><code>ul.inline</code></td>
<td><code>.list-inline</code></td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<h2 id="migration-new">What's new</h2>
<p>We've added a few new elements and changed some existing ones. Here's their new or updated classes.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Panels</td>
<td><code>.panel</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td>
</tr>
<tr>
<td>List groups</td>
<td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td>
</tr>
<tr>
<td>Glyphicons</td>
<td><code>.glyphicon</code></td>
</tr>
<tr>
<td>Jumbotron</td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<td>Tiny grid (&lt;768 px)</td>
<td><code>.col-xs-*</code></td>
</tr>
<tr>
<td>Small grid (&gt;768 px)</td>
<td><code>.col-sm-*</code></td>
</tr>
<tr>
<td>Medium grid (&gt;992 px)</td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<td>Large grid (&gt;1200 px)</td>
<td><code>.col-lg-*</code></td>
</tr>
<tr>
<td>Offsets</td>
<td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td>
</tr>
<tr>
<td>Push</td>
<td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td>
</tr>
<tr>
<td>Pull</td>
<td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td>
</tr>
<tr>
<td>Input groups</td>
<td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td>
</tr>
<tr>
<td>Form controls</td>
<td><code>.form-control</code> <code>.form-group</code></td>
</tr>
<tr>
<td>Inline controls</td>
<td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
</tr>
<tr>
<td>Button group sizes</td>
<td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td>
</tr>
<tr>
<td>Navbar text</td>
<td><code>.navbar-text</code></td>
</tr>
<tr>
<td>Navbar header</td>
<td><code>.navbar-header</code></td>
</tr>
<tr>
<td>Justified tabs / pills</td>
<td><code>.nav-justified</code></td>
</tr>
<tr>
<td>Responsive images</td>
<td><code>.img-responsive</code></td>
</tr>
<tr>
<td>Contextual table rows</td>
<td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code></td>
</tr>
<tr>
<td>Contextual panels</td>
<td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td>
</tr>
<tr>
<td>Modal</td>
<td><code>.modal-dialog</code> <code>.modal-content</code></td>
</tr>
<tr>
<td>Thumbnail image</td>
<td><code>.img-thumbnail</code></td>
</tr>
<tr>
<td>Well sizes</td>
<td><code>.well-sm</code> <code>.well-lg</code></td>
</tr>
<tr>
<td>Alert links</td>
<td><code>.alert-link</code></td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Panels</td>
<td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td>
</tr>
<tr>
<td>List groups</td>
<td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td>
</tr>
<tr>
<td>Glyphicons</td>
<td><code>.glyphicon</code></td>
</tr>
<tr>
<td>Jumbotron</td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<td>Tiny grid (&lt;768 px)</td>
<td><code>.col-xs-*</code></td>
</tr>
<tr>
<td>Small grid (&gt;768 px)</td>
<td><code>.col-sm-*</code></td>
</tr>
<tr>
<td>Medium grid (&gt;992 px)</td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<td>Large grid (&gt;1200 px)</td>
<td><code>.col-lg-*</code></td>
</tr>
<tr>
<td>Offsets</td>
<td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td>
</tr>
<tr>
<td>Push</td>
<td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td>
</tr>
<tr>
<td>Pull</td>
<td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td>
</tr>
<tr>
<td>Input groups</td>
<td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td>
</tr>
<tr>
<td>Form controls</td>
<td><code>.form-control</code> <code>.form-group</code></td>
</tr>
<tr>
<td>Button group sizes</td>
<td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td>
</tr>
<tr>
<td>Navbar text</td>
<td><code>.navbar-text</code></td>
</tr>
<tr>
<td>Navbar header</td>
<td><code>.navbar-header</code></td>
</tr>
<tr>
<td>Justified tabs / pills</td>
<td><code>.nav-justified</code></td>
</tr>
<tr>
<td>Responsive images</td>
<td><code>.img-responsive</code></td>
</tr>
<tr>
<td>Contextual table rows</td>
<td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code></td>
</tr>
<tr>
<td>Contextual panels</td>
<td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td>
</tr>
<tr>
<td>Modal</td>
<td><code>.modal-dialog</code> <code>.modal-content</code></td>
</tr>
<tr>
<td>Thumbnail image</td>
<td><code>.img-thumbnail</code></td>
</tr>
<tr>
<td>Well sizes</td>
<td><code>.well-sm</code> <code>.well-lg</code></td>
</tr>
<tr>
<td>Alert links</td>
<td><code>.alert-link</code></td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<h3 id="migration-dropped">What's removed</h3>
<h2 id="migration-dropped">What's removed</h2>
<p>The following elements have been dropped or changed in v3.</p>
<table class="table table-bordered table-striped bs-table">
<thead>
<tr>
<th>Element</th>
<th>Removed from 2.x</th>
<th>3.0 Equivalent</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hero Unit</td>
<td><code>.hero-unit</code></td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<td>Form actions</td>
<td><code>.form-actions</code></td>
<td>-</td>
</tr>
<tr>
<td>Grid</td>
<td><code>.span*</code></td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<td>Fluid container</td>
<td><code>.container-fluid</code></td>
<td><code>.container</code> (no more fixed grid)</td>
</tr>
<tr>
<td>Fluid row</td>
<td><code>.row-fluid</code></td>
<td><code>.row</code> (no more fixed grid)</td>
</tr>
<tr>
<td>Icons</td>
<td><code>.icon-*</code></td>
<td><code>.glyphicon-*</code></td>
</tr>
<tr>
<td>Navbar button</td>
<td><code>.btn-navbar</code></td>
<td><code>.navbar-btn</code></td>
</tr>
<tr>
<td>Navbar inner</td>
<td><code>.navbar-inner</code></td>
<td>-</td>
</tr>
<tr>
<td>Thumbnails</td>
<td><code>.thumbnails</code></td>
<td><code>.col-*</code> and <code>.thumbnail</code></td>
</tr>
<tr>
<td>Input append / prepend</td>
<td><code>.input-append</code> <code>.input-prepend</code> <code>.add-on</code></td>
<td><code>.input-group</code></td>
</tr>
<tr>
<td>Dropdown submenu</td>
<td><code>.dropdown-submenu</code></td>
<td>-</td>
</tr>
<tr>
<td>Tab alignments</td>
<td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
<td>-</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
<th>Removed from 2.x</th>
<th>3.0 Equivalent</th>
</tr>
</thead>
<tbody>
<tr>
<td>Form actions</td>
<td><code>.form-actions</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Search form</td>
<td><code>.form-search</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Fluid container</td>
<td><code>.container-fluid</code></td>
<td><code>.container</code> (no more fixed grid)</td>
</tr>
<tr>
<td>Fluid row</td>
<td><code>.row-fluid</code></td>
<td><code>.row</code> (no more fixed grid)</td>
</tr>
<tr>
<td>Navbar inner</td>
<td><code>.navbar-inner</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Dropdown submenu</td>
<td><code>.dropdown-submenu</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Tab alignments</td>
<td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
<td class="text-muted">N/A</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<h3 id="migration-notes">Additional notes</h3>
<p>We've made many underlying changes in v3 that are not immediately apparent without closer inspection. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach.</p>
<h2 id="migration-notes">Additional notes</h2>
<p>We've made many underlying changes in v3 that are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach.</p>
<ul>
<li><code>.input-*</code> are 100% width. Wrap inputs inside <code>&lt;div class="col-*"&gt;&lt;/div&gt;</code> to control input widths.</li>
<li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes</li>
<li><code>.btn</code> must also use <code>.btn-default</code> to get the 'default' button</li>
<li><code>.container</code> and <code>.row</code> are now fluid (percentage-based)</li>
<li>Images are not responsive by default. Use <code>.img-responsive</code> for fluid IMG size</li>
<li>The icons, now <code>.glyphicon</code> are in a separate CSS file.</li>
<li>Include <code>.glyphicon</code> base class in all icons (ie: <code>.glyphicon .glyphicon-asterisk</code>).</li>
<li>Text-based form controls are now 100% wide. Wrap inputs inside <code>&lt;div class="col-*"&gt;&lt;/div&gt;</code> to control input widths.</li>
<li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li>
<li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li>
<li><code>.container</code> and <code>.row</code> are now fluid (percentage-based).</li>
<li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code>&lt;img&gt;</code> size.</li>
<li>The icons, now <code>.glyphicon</code>, are now font based. They also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li>
<li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li>
<li>Modal markup has changed <code>.modal-header</code> <code>.modal-body</code> <code>.modal-footer</code> now get wrapped in <code>.modal-content</code> and <code>.modal-dialog</code></li>
<li>Events are namespaced. For example to handle the modal 'show' event, use <code>'show.bs.modal'</code>. For tabs 'shown' use <code>'shown.bs.tab'</code>, etc..</li>
<li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections now get wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for improved mobile styling and behavior.</li>
<li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc..</li>
</ul>
<div class="bs-callout bs-callout-info">
<h4>More Tools &amp; Examples</h4>
<p>You may also find this <a href="https://github.com/iatek/bootstrap-3-upgrade">upgrade tool</a> and collection of <a href="http://bootply.com/tagged/bootstrap-3">code snippets at Bootply</a> useful for migrating to Bootstrap 3.</p>
</div>
<p>For more information on upgrades and code snippets from the community check out <a href="http://bootply.com/">Bootply</a>.</p>
</div>
@ -676,7 +634,7 @@ bootstrap/
<p>In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">respond.js</a> to enable media query support.</strong></p>
<h3>IE Compatibility modes</h3>
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>meta</code> tag in your pages:</p>
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>&lt;meta&gt;</code> tag in your pages:</p>
{% highlight html %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% endhighlight %}

7
index.html
View File

@ -6,11 +6,10 @@ base_url: "./"
<main class="bs-masthead" id="content" role="main">
<div class="container">
<h1>Bootstrap 3</h1>
<p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
<h1>Bootstrap</h1>
<p class="lead">Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
<p>
<a href="{{ site.download }}" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0 RC2']);">Download latest BS3</a>
<a href="{{ site.download }}" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0']);">Download Bootstrap</a>
</p>
<p><strong>Heads up!</strong> Downloads are pulled directly from the latest committed code on GitHub, and as a result our docs may at times be out of sync.</p>
</div>
</main>

78
javascript.html
View File

@ -240,7 +240,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<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-backdrop=""</code>.</p>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -280,7 +280,7 @@ $('#myModal').on('show.bs.modal', function (e) {
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
<h3>Methods</h3>
@ -306,7 +306,7 @@ $('#myModal').modal({
<h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -333,7 +333,7 @@ $('#myModal').modal({
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
{% highlight js %}
$('#myModal').on('hidden.bs.modal', function () {
// do something…
@ -480,7 +480,7 @@ $('.dropdown-toggle').dropdown()
<p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>
<h3>Events</h3>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -507,7 +507,7 @@ $('.dropdown-toggle').dropdown()
</tr>
</tbody>
</table>
</div><!-- ./bs-table-scrollable -->
</div><!-- ./bs-table-responsive -->
{% highlight js %}
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
@ -602,7 +602,7 @@ $('[data-spy="scroll"]').each(function () {
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -621,10 +621,10 @@ $('[data-spy="scroll"]').each(function () {
</tr>
</tbody>
</table>
</div><!-- ./bs-table-scrollable -->
</div><!-- ./bs-table-responsive -->
<h3>Events</h3>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -639,7 +639,7 @@ $('[data-spy="scroll"]').each(function () {
</tr>
</tbody>
</table>
</div><!-- ./bs-table-scrollable -->
</div><!-- ./bs-table-responsive -->
{% highlight js %}
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
@ -745,7 +745,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
{% endhighlight %}
<h3>Events</h3>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -764,7 +764,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
{% highlight js %}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab
@ -814,7 +814,7 @@ $('#example').tooltip(options)
<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-animation=""</code>.</p>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -881,7 +881,7 @@ $('#example').tooltip(options)
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
<div class="bs-callout bs-callout-info">
<h4>Data attributes for individual tooltips</h4>
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
@ -914,7 +914,7 @@ $('#example').tooltip(options)
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
<h3>Events</h3>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -941,7 +941,7 @@ $('#example').tooltip(options)
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
{% highlight js %}
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
@ -1036,7 +1036,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<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-animation=""</code>.</p>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -1109,7 +1109,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
<div class="bs-callout bs-callout-info">
<h4>Data attributes for individual popovers</h4>
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
@ -1138,7 +1138,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<p>Hides and destroys an element's popover.</p>
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
<h3>Events</h3>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -1165,7 +1165,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
{% highlight js %}
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
@ -1184,7 +1184,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
<h2 id="alerts-examples">Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example">
<div class="alert fade in">
<div class="alert alert-warning fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
@ -1222,7 +1222,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
<h3>Events</h3>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -1241,7 +1241,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
{% highlight js %}
$('#my-alert').bind('closed.bs.alert', function () {
// do something…
@ -1413,7 +1413,7 @@ $('.nav-tabs').button()
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
@ -1427,7 +1427,7 @@ $('.nav-tabs').button()
</div>
</div>
</div>
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
@ -1441,7 +1441,7 @@ $('.nav-tabs').button()
</div>
</div>
</div>
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
@ -1459,7 +1459,7 @@ $('.nav-tabs').button()
</div><!-- /example -->
{% highlight html %}
<div class="panel-group" id="accordion">
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
@ -1473,7 +1473,7 @@ $('.nav-tabs').button()
</div>
</div>
</div>
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
@ -1487,7 +1487,7 @@ $('.nav-tabs').button()
</div>
</div>
</div>
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
@ -1528,7 +1528,7 @@ $(".collapse").collapse()
<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-parent=""</code>.</p>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -1553,7 +1553,7 @@ $(".collapse").collapse()
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
<h3>Methods</h3>
@ -1576,7 +1576,7 @@ $('#myCollapsible').collapse({
<h3>Events</h3>
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -1605,7 +1605,7 @@ $('#myCollapsible').collapse({
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
{% highlight js %}
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
@ -1752,7 +1752,7 @@ $('.carousel').carousel()
<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-interval=""</code>.</p>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -1783,7 +1783,7 @@ $('.carousel').carousel()
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
<h3>Methods</h3>
@ -1813,7 +1813,7 @@ $('.carousel').carousel({
<h3>Events</h3>
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -1832,7 +1832,7 @@ $('.carousel').carousel({
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
{% highlight js %}
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
@ -1888,7 +1888,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<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>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -1907,6 +1907,6 @@ $('#myCarousel').on('slide.bs.carousel', function () {
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
</div><!-- /.table-responsive -->
</div>

18
less/alerts.less
View File

@ -9,9 +9,7 @@
.alert {
padding: @alert-padding;
margin-bottom: @line-height-computed;
color: @alert-text;
background-color: @alert-bg;
border: 1px solid @alert-border;
border: 1px solid transparent;
border-radius: @alert-border-radius;
// Headings for larger alerts
@ -20,14 +18,9 @@
// Specified for the h4 to prevent conflicts of changing @headingsColor
color: inherit;
}
// Match the hr to the border of the alert
hr {
border-top-color: darken(@alert-border, 5%);
}
// Provide class for links that match alerts
.alert-link {
font-weight: @alert-link-font-weight;
color: darken(@alert-text, 10%);
}
// Improve alignment and spacing of inner content
@ -63,9 +56,12 @@
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}
.alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}

7
less/carousel.less
View File

@ -98,12 +98,17 @@
// Toggles
.icon-prev,
.icon-next {
.icon-next,
.glyphicon-chevron-left,
.glyphicon-chevron-right {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display: inline-block;
}
.icon-prev,
.icon-next {
width: 20px;
height: 20px;
margin-top: -10px;

14
less/dropdowns.less
View File

@ -177,3 +177,17 @@
margin-bottom: 1px;
}
}
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
@media (min-width: @grid-float-breakpoint) {
.navbar-right {
.dropdown-menu {
.pull-right > .dropdown-menu();
}
}
}

2
less/forms.less
View File

@ -257,7 +257,7 @@ input[type="checkbox"],
.form-control-static {
margin-bottom: 0; // Remove default margin from `p`
padding-top: @padding-base-vertical;
padding-top: (@padding-base-vertical + 1);
}

2
less/glyphicons.less
View File

@ -20,7 +20,7 @@
// Catchall baseclass
.glyphicon {
position: relative;
top: 2px;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;

2
less/grid.less
View File

@ -8,7 +8,7 @@
.container-fixed();
}
// Mobile-first defaults
// mobile first defaults
.row {
.make-row();
}

14
less/jumbotron.less
View File

@ -4,12 +4,12 @@
.jumbotron {
padding: 30px;
margin-bottom: 30px;
padding: @jumbotron-padding;
margin-bottom: @jumbotron-padding;
font-size: (@font-size-base * 1.5);
font-weight: 200;
line-height: (@line-height-base * 1.5);
color: @jumbotron-lead-color;
color: @jumbotron-color;
background-color: @jumbotron-bg;
h1 {
@ -25,12 +25,12 @@
}
@media screen and (min-width: @screen-tablet) {
padding-top: 50px;
padding-bottom: 50px;
padding-top: (@jumbotron-padding * 1.6);
padding-bottom: (@jumbotron-padding * 1.6);
.container & {
padding-left: 60px;
padding-right: 60px;
padding-left: (@jumbotron-padding * 2);
padding-right: (@jumbotron-padding * 2);
}
h1 {

2
less/labels.less
View File

@ -4,7 +4,7 @@
.label {
display: inline;
padding: .25em .6em;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;

2
less/mixins.less
View File

@ -340,7 +340,7 @@
// Panels
// -------------------------
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
border-color: @border;
& > .panel-heading {
color: @heading-text-color;

8
less/modals.less
View File

@ -10,6 +10,14 @@
// Kill the scroll on the body
.modal-open {
overflow: hidden;
// Account for hiding of scrollbar
body&,
.navbar-fixed-top,
.navbar-fixed-bottom {
margin-right: 15px
}
}
// Container that the modal scrolls within

17
less/navbar.less
View File

@ -10,6 +10,7 @@
.navbar {
position: relative;
z-index: @zindex-navbar;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom;
border: 1px solid transparent;
@ -77,9 +78,16 @@
overflow-y: visible;
}
// Account for first and last children spacing
.navbar-nav.navbar-left:first-child {
margin-left: -@navbar-padding-horizontal;
}
.navbar-nav.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal;
}
.navbar-text:last-child {
margin-right: 0;
}
}
}
@ -120,7 +128,6 @@
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
border-width: 0 0 1px;
// Undo the rounded corners
@ -129,6 +136,7 @@
}
}
.navbar-fixed-top {
z-index: @zindex-navbar-fixed;
top: 0;
}
.navbar-fixed-bottom {
@ -252,12 +260,7 @@
@media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); }
.navbar-right {
.pull-right();
.dropdown-menu {
.pull-right > .dropdown-menu();
}
}
.navbar-right { .pull-right(); }
}

17
less/panels.less
View File

@ -7,7 +7,7 @@
.panel {
margin-bottom: @line-height-computed;
background-color: @panel-bg;
border: 1px solid @panel-border;
border: 1px solid transparent;
border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05));
}
@ -25,9 +25,6 @@
// any kind of custom content between the two.
.panel {
> .table {
margin-bottom: 0;
}
> .list-group {
margin-bottom: 0;
@ -71,8 +68,7 @@
// Optional heading
.panel-heading {
padding: 10px 15px;
background-color: @panel-heading-bg;
border-bottom: 1px solid @panel-border;
border-bottom: 1px solid transparent;
.border-top-radius(@panel-border-radius - 1);
}
@ -90,7 +86,7 @@
.panel-footer {
padding: 10px 15px;
background-color: @panel-footer-bg;
border-top: 1px solid @panel-border;
border-top: 1px solid @panel-inner-border;
.border-bottom-radius(@panel-border-radius - 1);
}
@ -114,13 +110,13 @@
.panel-heading {
border-bottom: 0;
+ .panel-collapse .panel-body {
border-top: 1px solid @panel-border;
border-top: 1px solid @panel-inner-border;
}
}
.panel-footer {
border-top: 0;
+ .panel-collapse .panel-body {
border-bottom: 1px solid @panel-border;
border-bottom: 1px solid @panel-inner-border;
}
}
@ -132,6 +128,9 @@
// Contextual variations
.panel-default {
.panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
}
.panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
}

148
less/responsive-utilities.less
View File

@ -36,48 +36,84 @@
// Visibility utilities
.visible-xs {
.responsive-visibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
.responsive-invisibility();
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-lg) {
.responsive-invisibility();
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
}
.visible-sm {
.responsive-invisibility();
&.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-lg) {
.responsive-invisibility();
&.visible-lg {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
}
.visible-md {
.responsive-invisibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
&.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-lg) {
.responsive-invisibility();
&.visible-lg {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
}
.visible-lg {
.responsive-invisibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
&.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-lg) {
.responsive-visibility();
@ -85,48 +121,84 @@
}
.hidden-xs {
.responsive-invisibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
.responsive-visibility();
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-lg) {
.responsive-visibility();
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
}
.hidden-sm {
.responsive-visibility();
&.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-lg) {
.responsive-visibility();
&.hidden-lg {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
}
.hidden-md {
.responsive-visibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
&.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-lg) {
.responsive-visibility();
&.hidden-lg {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
}
.hidden-lg {
.responsive-visibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
&.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-lg) {
.responsive-invisibility();

27
less/scaffolding.less
View File

@ -4,7 +4,6 @@
// Reset the box-sizing
// -------------------------
*,
*:before,
@ -14,7 +13,6 @@
// Body reset
// -------------------------
html {
font-size: 62.5%;
@ -39,7 +37,10 @@ textarea {
line-height: inherit;
}
// Reset unusual Firefox-on-Android default style, see https://github.com/necolas/normalize.css/issues/214
// Reset unusual Firefox-on-Android default style.
//
// See https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
@ -49,7 +50,6 @@ textarea {
// Links
// -------------------------
a {
color: @link-color;
@ -68,7 +68,6 @@ a {
// Images
// -------------------------
img {
vertical-align: middle;
@ -85,7 +84,19 @@ img {
}
// Image thumbnails
// See thumbnails.less for `.img-thumbnail`
//
// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
.img-thumbnail {
padding: @thumbnail-padding;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
// Keep them at most 100% wide
.img-responsive(inline-block);
}
// Perfect circle
.img-circle {
@ -94,7 +105,6 @@ img {
// Horizontal rules
// -------------------------
hr {
margin-top: @line-height-computed;
@ -103,9 +113,10 @@ hr {
border-top: 1px solid @hr-border;
}
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/
// -------------------------
.sr-only {
position: absolute;

96
less/tables.less
View File

@ -13,7 +13,6 @@ th {
// Baseline styles
// ---------------
.table {
width: 100%;
@ -59,9 +58,7 @@ th {
}
// Condensed table w/ half padding
// -------------------------------
.table-condensed {
thead,
@ -77,9 +74,9 @@ th {
}
// Bordered version
// ----------------
//
// Add borders all around the table and between all the columns.
.table-bordered {
border: 1px solid @table-border-color;
@ -104,11 +101,10 @@ th {
}
// Zebra-striping
// --------------
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
> tbody {
> tr:nth-child(odd) {
@ -121,11 +117,10 @@ th {
}
// Hover effect
// ------------
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
> tbody {
> tr:hover {
@ -138,19 +133,18 @@ th {
}
// Table cell sizing
// -----------------
//
// Reset default table behavior
table col[class^="col-"] {
table col[class*="col-"] {
float: none;
display: table-column;
}
table {
td,
th {
&[class^="col-"] {
&[class*="col-"] {
float: none;
display: table-cell;
}
@ -158,9 +152,8 @@ table {
}
// Table backgrounds
// -----------------
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
@ -175,10 +168,69 @@ table {
}
}
// Contextual variants
// -------------------
// Generate the contextual variants
.table-row-variant(success; @state-success-bg; @state-success-border);
.table-row-variant(danger; @state-danger-bg; @state-danger-border);
.table-row-variant(warning; @state-warning-bg; @state-warning-border);
// Responsive tables
//
// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
@media (max-width: @screen-sm) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid @table-border-color;
// Tighten up spacing and give a background color
> .table {
margin-bottom: 0;
background-color: #fff;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
white-space: nowrap;
}
}
}
}
// Special overrides for the bordered tables
> .table-bordered {
border: 0;
// Nuke the appropriate borders so that the parent can handle them
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
> tr:last-child {
> th,
> td {
border-bottom: 0;
}
}
}
}
}
}

4
less/theme.less
View File

@ -148,9 +148,9 @@
}
// Apply the mixin to the alerts
.alert { .alert-styles(@alert-bg); }
.alert-success { .alert-styles(@alert-success-bg); }
.alert-info { .alert-styles(@alert-info-bg); }
.alert-warning { .alert-styles(@alert-warning-bg); }
.alert-danger { .alert-styles(@alert-danger-bg); }
@ -211,7 +211,7 @@
}
// Apply the mixin to the panel headings only
.panel-heading { .panel-heading-styles(@panel-heading-bg); }
.panel-default > .panel-heading { .panel-heading-styles(@panel-default-heading-bg); }
.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); }
.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); }
.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); }

29
less/thumbnails.less
View File

@ -3,30 +3,17 @@
// --------------------------------------------------
// Base classes
// For thumbnail block-level composite components and simple image styles
// The actual thumbnailed element
// Can be `a`, `div`, or `img`
.thumbnail,
.img-thumbnail {
padding: @thumbnail-padding;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
}
// Mixin and adjust the regular image class
.thumbnail {
display: block;
}
.thumbnail > img {
.img-responsive();
}
.img-thumbnail {
.img-responsive(inline-block);
.img-thumbnail();
display: block; // Override the inline-block from `.img-thumbnail`
> img {
.img-responsive();
}
}
// Add a hover state for linked versions only
a.thumbnail:hover,
a.thumbnail:focus {

4
less/type.less
View File

@ -72,8 +72,8 @@ h6 {
margin-bottom: (@line-height-computed / 2);
}
h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px
h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px
h1, .h1 { font-size: floor(@font-size-base * 2.60); } // ~36px
h2, .h2 { font-size: floor(@font-size-base * 2.15); } // ~30px
h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
h5, .h5 { font-size: @font-size-base; }

28
less/variables.less
View File

@ -188,6 +188,7 @@
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1010;
@zindex-tooltip: 1030;
@ -351,9 +352,11 @@
// Jumbotron
// -------------------------
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-lead-color: inherit;
// Form states and alerts
@ -439,22 +442,22 @@
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-bg: @state-warning-bg;
@alert-text: @state-warning-text;
@alert-border: @state-warning-border;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
// Progress bars
// -------------------------
@ -486,11 +489,14 @@
// Panels
// -------------------------
@panel-bg: #fff;
@panel-border: #ddd;
@panel-inner-border: #ddd;
@panel-border-radius: @border-radius-base;
@panel-heading-bg: #f5f5f5;
@panel-footer-bg: #f5f5f5;
@panel-default-text: @gray-dark;
@panel-default-border: #ddd;
@panel-default-heading-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;