0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-24 21:54:24 +01:00

Merge branch '3.0.0-wip' into gh-pages

This commit is contained in:
Mark Otto 2013-08-17 22:11:40 -07:00
commit b03a2df0b0
81 changed files with 4004 additions and 3974 deletions

View File

@ -83,6 +83,17 @@ module.exports = function(grunt) {
}, },
src: ['less/bootstrap.less'], src: ['less/bootstrap.less'],
dest: 'dist/css/<%= pkg.name %>.min.css' dest: 'dist/css/<%= pkg.name %>.min.css'
},
theme: {
src: ['less/theme.less'],
dest: 'dist/css/<%= pkg.name %>-theme.css'
},
theme_min: {
options: {
compress: true
},
src: ['less/theme.less'],
dest: 'dist/css/<%= pkg.name %>-theme.min.css'
} }
}, },
@ -145,7 +156,6 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-recess'); grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('browserstack-runner'); grunt.loadNpmTasks('browserstack-runner');
// Docs HTML validation task // Docs HTML validation task
grunt.registerTask('validate-docs', ['jekyll', 'validation']); grunt.registerTask('validate-docs', ['jekyll', 'validation']);
@ -170,7 +180,7 @@ module.exports = function(grunt) {
grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']); grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);
// Default task. // Default task.
grunt.registerTask('default', ['test', 'dist']); grunt.registerTask('default', ['test', 'dist', 'build-customizer']);
// task for building customizer // task for building customizer
grunt.registerTask('build-customizer', 'Add scripts/less files to customizer.', function () { grunt.registerTask('build-customizer', 'Add scripts/less files to customizer.', function () {

View File

@ -22,6 +22,8 @@ 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/). 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.
## Documentation ## Documentation

View File

@ -13,7 +13,6 @@
<script src="{{ page.base_url }}assets/js/less.js"></script> <script src="{{ page.base_url }}assets/js/less.js"></script>
<script src="{{ page.base_url }}assets/js/jszip.js"></script> <script src="{{ page.base_url }}assets/js/jszip.js"></script>
<script src="{{ page.base_url }}assets/js/uglify.js"></script> <script src="{{ page.base_url }}assets/js/uglify.js"></script>
<script src="{{ page.base_url }}assets/js/jquery.bbq.min.js"></script>
<script src="{{ page.base_url }}assets/js/customizer.js"></script> <script src="{{ page.base_url }}assets/js/customizer.js"></script>
{% endif %} {% endif %}

View File

@ -10,28 +10,28 @@
<li> <li>
<a href="#btn-groups">Button groups</a> <a href="#btn-groups">Button groups</a>
<ul class="nav"> <ul class="nav">
<li><a href="#btn-groups-single">Basic button group</a></li> <li><a href="#btn-groups-single">Basic example</a></li>
<li><a href="#btn-groups-toolbar">Button toolbar</a></li> <li><a href="#btn-groups-toolbar">Button toolbar</a></li>
<li><a href="#btn-groups-sizing">Button group sizing</a></li> <li><a href="#btn-groups-sizing">Sizing</a></li>
<li><a href="#btn-groups-nested">Nested button groups</a></li> <li><a href="#btn-groups-nested">Nesting</a></li>
<li><a href="#btn-groups-vertical">Vertical variation</a></li> <li><a href="#btn-groups-vertical">Vertical variation</a></li>
<li><a href="#btn-groups-justified">Justified link buttons</a></li> <li><a href="#btn-groups-justified">Justified link variation</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="#btn-dropdowns">Button dropdowns</a> <a href="#btn-dropdowns">Button dropdowns</a>
<ul class="nav"> <ul class="nav">
<li><a href="#btn-dropdowns-single">Single button dropdown</a></li> <li><a href="#btn-dropdowns-single">Single button dropdowns</a></li>
<li><a href="#btn-dropdowns-split">Split button dropdown</a></li> <li><a href="#btn-dropdowns-split">Split button dropdowns</a></li>
<li><a href="#btn-dropdowns-sizes">Button sizes</a></li> <li><a href="#btn-dropdowns-sizing">Sizing</a></li>
<li><a href="#btn-dropdowns-dropup">Dropup variation</a></li> <li><a href="#btn-dropdowns-dropup">Dropup variation</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="#input-groups">Input groups</a> <a href="#input-groups">Input groups</a>
<ul class="nav"> <ul class="nav">
<li><a href="#input-groups-basic">Basic input group</a></li> <li><a href="#input-groups-basic">Basic example</a></li>
<li><a href="#input-groups-sizes">Sizing options</a></li> <li><a href="#input-groups-sizing">Sizing</a></li>
<li><a href="#input-groups-checkboxes-radios">Checkbox and radios addons</a></li> <li><a href="#input-groups-checkboxes-radios">Checkbox and radios addons</a></li>
<li><a href="#input-groups-buttons">Button addons</a></li> <li><a href="#input-groups-buttons">Button addons</a></li>
<li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li> <li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li>
@ -41,8 +41,8 @@
<li> <li>
<a href="#nav">Navs</a> <a href="#nav">Navs</a>
<ul class="nav"> <ul class="nav">
<li><a href="#nav-tabs">Tabs nav</a></li> <li><a href="#nav-tabs">Tabs</a></li>
<li><a href="#nav-pills">Pills nav</a></li> <li><a href="#nav-pills">Pills</a></li>
<li><a href="#nav-justified">Justified nav</a></li> <li><a href="#nav-justified">Justified nav</a></li>
<li><a href="#nav-disabled-links">Disabled links</a></li> <li><a href="#nav-disabled-links">Disabled links</a></li>
<li><a href="#nav-alignment">Alignment options</a></li> <li><a href="#nav-alignment">Alignment options</a></li>
@ -53,13 +53,13 @@
<a href="#navbar">Navbar</a> <a href="#navbar">Navbar</a>
<ul class="nav"> <ul class="nav">
<li><a href="#navbar-default">Default navbar</a></li> <li><a href="#navbar-default">Default navbar</a></li>
<li><a href="#navbar-buttons">Buttons in navbars</a></li> <li><a href="#navbar-buttons">Buttons</a></li>
<li><a href="#navbar-text">Text in navbars</a></li> <li><a href="#navbar-text">Text</a></li>
<li><a href="#navbar-links">Links in navbars</a></li> <li><a href="#navbar-links">Non-nav links</a></li>
<li><a href="#navbar-component-alignment">Component alignment</a></li> <li><a href="#navbar-component-alignment">Component alignment</a></li>
<li><a href="#navbar-fixed-top">Fixed top navbar</a></li> <li><a href="#navbar-fixed-top">Fixed to top</a></li>
<li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li> <li><a href="#navbar-fixed-bottom">Fixed to bottom</a></li>
<li><a href="#navbar-static-top">Static top navbar</a></li> <li><a href="#navbar-static-top">Static top</a></li>
<li><a href="#navbar-inverted">Inverted navbar</a></li> <li><a href="#navbar-inverted">Inverted navbar</a></li>
</ul> </ul>
</li> </li>
@ -73,17 +73,12 @@
</li> </li>
<li><a href="#labels">Labels</a></li> <li><a href="#labels">Labels</a></li>
<li><a href="#badges">Badges</a></li> <li><a href="#badges">Badges</a></li>
<li> <li><a href="#jumbotron">Jumbotron</a></li>
<a href="#type-components">Typography</a> <li><a href="#page-header">Page header</a></li>
<ul class="nav">
<li><a href="#type-components-jumbotron">Jumbotron</a></li>
<li><a href="#type-components-page-header">Page header</a></li>
</ul>
</li>
<li> <li>
<a href="#thumbnails">Thumbnails</a> <a href="#thumbnails">Thumbnails</a>
<ul class="nav"> <ul class="nav">
<li><a href="#thumbnails-default">Default thumbnails</a></li> <li><a href="#thumbnails-default">Default example</a></li>
<li><a href="#thumbnails-custom-content">Custom content</a></li> <li><a href="#thumbnails-custom-content">Custom content</a></li>
</ul> </ul>
</li> </li>
@ -99,7 +94,7 @@
<li> <li>
<a href="#progress">Progress bars</a> <a href="#progress">Progress bars</a>
<ul class="nav"> <ul class="nav">
<li><a href="#progress-basic">Basic progress bar</a></li> <li><a href="#progress-basic">Basic example</a></li>
<li><a href="#progress-alternatives">Contextual alternatives</a></li> <li><a href="#progress-alternatives">Contextual alternatives</a></li>
<li><a href="#progress-striped">Striped</a></li> <li><a href="#progress-striped">Striped</a></li>
<li><a href="#progress-animated">Animated</a></li> <li><a href="#progress-animated">Animated</a></li>
@ -116,17 +111,16 @@
<li> <li>
<a href="#list-group">List group</a> <a href="#list-group">List group</a>
<ul class="nav"> <ul class="nav">
<li><a href="#list-group-basic">Basic list group</a></li> <li><a href="#list-group-basic">Basic example</a></li>
<li><a href="#list-group-badges">Badges</a></li> <li><a href="#list-group-badges">Badges</a></li>
<li><a href="#list-group-linked">Linked items</a></li> <li><a href="#list-group-linked">Linked items</a></li>
<li><a href="#list-group-custom-content">Custom content</a></li> <li><a href="#list-group-custom-content">Custom content</a></li>
<!-- <li><a href="#list-group-pic">Leading picture</a></li> -->
</ul> </ul>
</li> </li>
<li> <li>
<a href="#panels">Panels</a> <a href="#panels">Panels</a>
<ul class="nav"> <ul class="nav">
<li><a href="#panels-basic">Basic panel</a></li> <li><a href="#panels-basic">Basic example</a></li>
<li><a href="#panels-heading">Panel with heading</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-alternatives">Contextual alternatives</a></li>
<li><a href="#panels-list-group">With list groups</a> <li><a href="#panels-list-group">With list groups</a>

View File

@ -4,9 +4,9 @@
<li><a href="#overview-doctype">HTML5 doctype</a></li> <li><a href="#overview-doctype">HTML5 doctype</a></li>
<li><a href="#overview-mobile">Mobile first</a></li> <li><a href="#overview-mobile">Mobile first</a></li>
<li><a href="#overview-responsive-images">Responsive images</a></li> <li><a href="#overview-responsive-images">Responsive images</a></li>
<li><a href="#overview-type-links">Type and links</a></li> <li><a href="#overview-type-links">Typography and links</a></li>
<li><a href="#overview-normalize">Normalize</a></li> <li><a href="#overview-normalize">Normalize</a></li>
<li><a href="#overview-container">Container</a></li> <li><a href="#overview-container">Containers</a></li>
</ul> </ul>
</li> </li>
<li> <li>
@ -16,13 +16,13 @@
<a href="#grid">Grid system</a> <a href="#grid">Grid system</a>
<ul class="nav"> <ul class="nav">
<li><a href="#grid-media-queries">Media queries</a></li> <li><a href="#grid-media-queries">Media queries</a></li>
<li><a href="#grid-options">Available options</a></li> <li><a href="#grid-options">Grid options</a></li>
<li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li> <li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
<li><a href="#grid-example-mixed">Ex: Mobile-desktop</a></li> <li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li> <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
<li><a href="#grid-responsive-resets">Responsive column resets</a></li> <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
<li><a href="#grid-offsetting">Offset columns</a></li> <li><a href="#grid-offsetting">Offsetting columns</a></li>
<li><a href="#grid-nesting">Nested columns</a></li> <li><a href="#grid-nesting">Nesting columns</a></li>
<li><a href="#grid-column-ordering">Column ordering</a></li> <li><a href="#grid-column-ordering">Column ordering</a></li>
<li><a href="#grid-less">LESS mixins and variables</a></li> <li><a href="#grid-less">LESS mixins and variables</a></li>
</ul> </ul>
@ -44,10 +44,10 @@
<a href="#tables">Tables</a> <a href="#tables">Tables</a>
<ul class="nav"> <ul class="nav">
<li><a href="#tables-example">Basic example</a></li> <li><a href="#tables-example">Basic example</a></li>
<li><a href="#tables-striped">Zebra striping</a></li> <li><a href="#tables-striped">Striped rows</a></li>
<li><a href="#tables-bordered">Bordered tables</a></li> <li><a href="#tables-bordered">Bordered table</a></li>
<li><a href="#tables-hover-rows">Hover rows</a></li> <li><a href="#tables-hover-rows">Hover rows</a></li>
<li><a href="#tables-condensed">Condensed tables</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-contextual-classes">Contextual classes</a></li>
</ul> </ul>
</li> </li>
@ -55,10 +55,10 @@
<a href="#forms">Forms</a> <a href="#forms">Forms</a>
<ul class="nav"> <ul class="nav">
<li><a href="#forms-example">Basic example</a></li> <li><a href="#forms-example">Basic example</a></li>
<li><a href="#forms-inline">Inline variation</a></li> <li><a href="#forms-inline">Inline form</a></li>
<li><a href="#forms-horizontal">Horizontal variation</a></li> <li><a href="#forms-horizontal">Horizontal form</a></li>
<li><a href="#forms-controls">Supported controls</a></li> <li><a href="#forms-controls">Supported controls</a></li>
<li><a href="#forms-controls-static">Static form control</a></li> <li><a href="#forms-controls-static">Static control</a></li>
<li><a href="#forms-control-states">Control states</a></li> <li><a href="#forms-control-states">Control states</a></li>
<li><a href="#forms-control-sizes">Control sizing</a></li> <li><a href="#forms-control-sizes">Control sizing</a></li>
<li><a href="#forms-help-text">Help text</a></li> <li><a href="#forms-help-text">Help text</a></li>
@ -67,9 +67,9 @@
<li> <li>
<a href="#buttons">Buttons</a> <a href="#buttons">Buttons</a>
<ul class="nav"> <ul class="nav">
<li><a href="#buttons-options">Button options</a></li> <li><a href="#buttons-options">Options</a></li>
<li><a href="#buttons-sizes">Sizes</a></li> <li><a href="#buttons-sizes">Sizes</a></li>
<li><a href="#buttons-disabled">Disabled</a></li> <li><a href="#buttons-disabled">Disabled state</a></li>
<li><a href="#buttons-tags">Button tags</a></li> <li><a href="#buttons-tags">Button tags</a></li>
</ul> </ul>
</li> </li>

View File

@ -1,7 +1,8 @@
<li> <li>
<a href="#download">Download Bootstrap</a> <a href="#download">Download Bootstrap</a>
<ul class="nav"> <ul class="nav">
<li><a href="#download-options">Download options</a></li> <li><a href="#download-source">Download source</a></li>
<li><a href="#download-additional">Additional downloads</a></li>
<li><a href="#download-cdn">Bootstrap CDN</a></li> <li><a href="#download-cdn">Bootstrap CDN</a></li>
</ul> </ul>
</li> </li>

View File

@ -4,7 +4,7 @@
<li><a href="#js-individual-compiled">Individual or compiled</a></li> <li><a href="#js-individual-compiled">Individual or compiled</a></li>
<li><a href="#js-data-attrs">Data attributes</a></li> <li><a href="#js-data-attrs">Data attributes</a></li>
<li><a href="#js-programmatic-api">Programmatic API</a></li> <li><a href="#js-programmatic-api">Programmatic API</a></li>
<li><a href="#js-noconflict">No Conflict</a></li> <li><a href="#js-noconflict">No conflict</a></li>
<li><a href="#js-events">Events</a></li> <li><a href="#js-events">Events</a></li>
</ul> </ul>
</li> </li>

View File

@ -1,52 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
{% include header.html %}
<!-- Place anything custom after this. -->
</head>
<body data-spy="scroll" data-target=".bs-sidebar">
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav -->
{% include nav-main.html %}
<!-- Docs page layout -->
<div class="bs-header" id="content" role="banner">
<div class="container">
<h1>{{ page.title }}</h1>
<p>{{ page.lead }}</p>
{% include ads.html %}
</div>
</div>
<!-- Callout for the old docs link -->
{% include old-bs-docs.html %}
<div class="container bs-docs-container">
<div class="col-lg-12">
{{ content }}
</div>
</div>
<!-- Footer
================================================== -->
<footer class="bs-footer">
{% 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>
</footer>
<!-- JS and analytics only. -->
{% include footer.html %}
</body>
</html>

View File

@ -31,7 +31,7 @@
<a href="{{ site.glyphicons }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Glyphicons']);">Glyphicons</a> <a href="{{ site.glyphicons }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Glyphicons']);">Glyphicons</a>
</li> </li>
<li> <li>
<a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Bootstrap Expo</a> <a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Expo</a>
</li> </li>
</ul> </ul>
</footer> </footer>

View File

@ -141,7 +141,7 @@ body {
.bs-masthead-links { .bs-masthead-links {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
padding-left: 0; padding: 0 15px;
list-style: none; list-style: none;
text-align: center; text-align: center;
} }
@ -193,6 +193,27 @@ body {
font-weight: normal; font-weight: normal;
} }
/* Alerts */
.bs-customizer-alert {
position: fixed;
top: 51px;
left: 0;
right: 0;
z-index: 1030;
padding: 15px 0;
color: #fff;
background-color: #d9534f;
box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
border-bottom: 1px solid #b94441;
}
.bs-customizer-alert .close {
margin-top: -2px;
color: #fff;
text-shadow: none;
}
.bs-customizer-alert p {
margin-bottom: 0;
}
/* Docs pages and sections /* Docs pages and sections
@ -418,7 +439,7 @@ body {
.bs-example > blockquote:last-child, .bs-example > blockquote:last-child,
.bs-example > .form-control:last-child, .bs-example > .form-control:last-child,
.bs-example > .table:last-child, .bs-example > .table:last-child,
.bs-example > .navbar:last-child .bs-example > .navbar:last-child,
.bs-example > .jumbotron:last-child, .bs-example > .jumbotron:last-child,
.bs-example > .alert:last-child, .bs-example > .alert:last-child,
.bs-example > .panel:last-child, .bs-example > .panel:last-child,
@ -531,6 +552,12 @@ body {
} }
} }
/* Pagination */
.bs-example .pagination {
margin-top: 10px;
margin-bottom: 10px;
}
/* Example modals */ /* Example modals */
.bs-example-modal { .bs-example-modal {
background-color: #f5f5f5; background-color: #f5f5f5;
@ -733,9 +760,7 @@ body {
.bs-social-buttons li { .bs-social-buttons li {
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
} padding: 5px 8px;
.bs-social-buttons li + li {
margin-left: 15px;
} }
.bs-social-buttons .twitter-follow-button { .bs-social-buttons .twitter-follow-button {
width: 225px !important; width: 225px !important;
@ -847,6 +872,10 @@ body {
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.bs-masthead-links {
padding: 0;
}
.carbonad { .carbonad {
margin: 0 !important; margin: 0 !important;
border: 1px solid #e5e5e5 !important; border: 1px solid #e5e5e5 !important;

View File

@ -1,6 +1,47 @@
window.onload = function () { // wait for load in a dumb way because B-0 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-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'
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>' +
(err.extract ? '<pre class="bs-customizer-alert-extract">' + err.extract.join('\n') + '</pre>' : '') + '\
</div>\
</div>').appendTo('body').alert()
throw err
}
function getQueryParam(key) {
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}
function createGist (configData) {
var data = {
"description": "Bootstrap Customizer Config",
"public": true,
"files": {
"config.json": {
"content": JSON.stringify(configData)
}
}
}
$.ajax({
url: 'https://api.github.com/gists',
type: 'POST',
dataType: 'json',
data: JSON.stringify(data)
})
.success(function(result) {
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)
})
}
function generateUrl() { function generateUrl() {
var vars = {} var vars = {}
@ -11,39 +52,50 @@ window.onload = function () { // wait for load in a dumb way because B-0
var data = { var data = {
vars: vars, vars: vars,
css: $('#less-section input:not(:checked)').map(function () { return this.value }).toArray(), css: $('#less-section input:checked') .map(function () { return this.value }).toArray(),
js: $('#plugin-section input:not(:checked)').map(function () { return this.value }).toArray() js: $('#plugin-section input:checked').map(function () { return this.value }).toArray()
} }
if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
window.location = jQuery.param.querystring('/customize/', data) createGist(data)
} }
function parseUrl() { function parseUrl() {
var data = jQuery.deparam.querystring() var id = getQueryParam('id')
if (!id) return
$.ajax({
url: 'https://api.github.com/gists/' + id,
type: 'GET',
dataType: 'json'
})
.success(function(result) {
var data = JSON.parse(result.files['config.json'].content)
if (data.js) { if (data.js) {
for (var i = 0; i < data.js.length; i++) { $('#plugin-section input').each(function () {
var input = $('input[value="'+data.js[i]+'"]') $(this).prop('checked', ~$.inArray(this.value, data.js))
input && input.prop('checked', false) })
} }
}
if (data.css) { if (data.css) {
for (var i = 0; i < data.css.length; i++) { $('#less-section input').each(function () {
var input = $('input[value="'+data.css[i]+'"]') $(this).prop('checked', ~$.inArray(this.value, data.css))
input && input.prop('checked', false) })
} }
}
if (data.vars) { if (data.vars) {
// todo (fat): vars for (var i in data.vars) {
$('input[data-var="' + i + '"]').val(data.vars[i])
} }
} }
})
.error(function(err) {
showError('Error fetching bootstrap config file', err)
})
}
function generateZip(css, js, complete) { function generateZip(css, js, complete) {
if (!css && !js) return alert('you want to build nothing… o_O') if (!css && !js) return showError('<strong>Error</strong> No Bootstrap files selected.', new Error('no Bootstrap'))
var zip = new JSZip() var zip = new JSZip()
@ -62,9 +114,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
} }
var content = zip.generate() var content = zip.generate()
location.href = 'data:application/zip;base64,' + content location.href = 'data:application/zip;base64,' + content
complete() complete()
} }
@ -108,15 +158,16 @@ window.onload = function () { // wait for load in a dumb way because B-0
, optimization: 0 , optimization: 0
, filename: 'bootstrap.css' , filename: 'bootstrap.css'
}).parse(css, function (err, tree) { }).parse(css, function (err, tree) {
if (err) return alert(err) if (err) {
return showError('<strong>Error</strong> Could not parse less files.', err)
}
result = { result = {
'bootstrap.css' : cw + tree.toCSS(), 'bootstrap.css' : cw + tree.toCSS(),
'bootstrap.min.css' : cw + tree.toCSS({ compress: true }) 'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
} }
}) })
} catch (err) { } catch (err) {
return alert(err) return showError('<strong>Error</strong> Could not parse less files.', err)
} }
return result return result
@ -142,9 +193,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
$downloadBtn.addClass('loading') $downloadBtn.addClass('loading')
generateZip(generateCSS(), generateJavascript(), function () { generateZip(generateCSS(), generateJavascript(), function () {
$downloadBtn.removeClass('loading') $downloadBtn.removeClass('loading')
setTimeout(function () { setTimeout(generateUrl, 500)
generateUrl()
}, 1)
}) })
}) })
@ -167,9 +216,27 @@ window.onload = function () { // wait for load in a dumb way because B-0
inputsVariables.val('') inputsVariables.val('')
}) })
try { $('[data-dependencies]').on('click', function () {
if (!$(this).is(':checked')) return
var dependencies = this.getAttribute('data-dependencies')
if (!dependencies) return
dependencies = dependencies.split(',')
for (var i = 0; i < dependencies.length; i++) {
var dependency = $('[value="' + dependencies[i] + '"]')
dependency && dependency.prop('checked', true)
}
})
$('[data-dependents]').on('click', function () {
if ($(this).is(':checked')) return
var dependents = this.getAttribute('data-dependents')
if (!dependents) return
dependents = dependents.split(',')
for (var i = 0; i < dependents.length; i++) {
var dependent = $('[value="' + dependents[i] + '"]')
dependent && dependent.prop('checked', false)
}
})
parseUrl() parseUrl()
} catch (e) {
// maybe alert user that we can't parse their url
}
} }

View File

@ -1,1287 +0,0 @@
/*!
* jQuery BBQ: Back Button & Query Library - v1.3pre - 8/26/2010
* http://benalman.com/projects/jquery-bbq-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
// Script: jQuery BBQ: Back Button & Query Library
//
// *Version: 1.3pre, Last updated: 8/26/2010*
//
// Project Home - http://benalman.com/projects/jquery-bbq-plugin/
// GitHub - http://github.com/cowboy/jquery-bbq/
// Source - http://github.com/cowboy/jquery-bbq/raw/master/jquery.ba-bbq.js
// (Minified) - http://github.com/cowboy/jquery-bbq/raw/master/jquery.ba-bbq.min.js (2.2kb gzipped)
//
// About: License
//
// Copyright (c) 2010 "Cowboy" Ben Alman,
// Dual licensed under the MIT and GPL licenses.
// http://benalman.com/about/license/
//
// About: Examples
//
// These working examples, complete with fully commented code, illustrate a few
// ways in which this plugin can be used.
//
// Basic AJAX - http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/
// Advanced AJAX - http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/
// jQuery UI Tabs - http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/
// Deparam - http://benalman.com/code/projects/jquery-bbq/examples/deparam/
//
// About: Support and Testing
//
// Information about what version or versions of jQuery this plugin has been
// tested with, what browsers it has been tested in, and where the unit tests
// reside (so you can test it yourself).
//
// jQuery Versions - 1.2.6, 1.3.2, 1.4.1, 1.4.2
// Browsers Tested - Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5,
// Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.
// Unit Tests - http://benalman.com/code/projects/jquery-bbq/unit/
//
// About: Release History
//
// 1.3pre - (8/26/2010) Integrated <jQuery hashchange event> v1.3, which adds
// document.title and document.domain support in IE6/7, BlackBerry
// support, better Iframe hiding for accessibility reasons, and the new
// <jQuery.fn.hashchange> "shortcut" method. Added the
// <jQuery.param.sorted> method which reduces the possibility of
// extraneous hashchange event triggering. Added the
// <jQuery.param.fragment.ajaxCrawlable> method which can be used to
// enable Google "AJAX Crawlable mode."
// 1.2.1 - (2/17/2010) Actually fixed the stale window.location Safari bug from
// <jQuery hashchange event> in BBQ, which was the main reason for the
// previous release!
// 1.2 - (2/16/2010) Integrated <jQuery hashchange event> v1.2, which fixes a
// Safari bug, the event can now be bound before DOM ready, and IE6/7
// page should no longer scroll when the event is first bound. Also
// added the <jQuery.param.fragment.noEscape> method, and reworked the
// <hashchange event (BBQ)> internal "add" method to be compatible with
// changes made to the jQuery 1.4.2 special events API.
// 1.1.1 - (1/22/2010) Integrated <jQuery hashchange event> v1.1, which fixes an
// obscure IE8 EmulateIE7 meta tag compatibility mode bug.
// 1.1 - (1/9/2010) Broke out the jQuery BBQ event.special <hashchange event>
// functionality into a separate plugin for users who want just the
// basic event & back button support, without all the extra awesomeness
// that BBQ provides. This plugin will be included as part of jQuery BBQ,
// but also be available separately. See <jQuery hashchange event>
// plugin for more information. Also added the <jQuery.bbq.removeState>
// method and added additional <jQuery.deparam> examples.
// 1.0.3 - (12/2/2009) Fixed an issue in IE 6 where location.search and
// location.hash would report incorrectly if the hash contained the ?
// character. Also <jQuery.param.querystring> and <jQuery.param.fragment>
// will no longer parse params out of a URL that doesn't contain ? or #,
// respectively.
// 1.0.2 - (10/10/2009) Fixed an issue in IE 6/7 where the hidden IFRAME caused
// a "This page contains both secure and nonsecure items." warning when
// used on an https:// page.
// 1.0.1 - (10/7/2009) Fixed an issue in IE 8. Since both "IE7" and "IE8
// Compatibility View" modes erroneously report that the browser
// supports the native window.onhashchange event, a slightly more
// robust test needed to be added.
// 1.0 - (10/2/2009) Initial release
(function($,window){
'$:nomunge'; // Used by YUI compressor.
// Some convenient shortcuts.
var undefined,
aps = Array.prototype.slice,
decode = decodeURIComponent,
// Method / object references.
jq_param = $.param,
jq_param_sorted,
jq_param_fragment,
jq_deparam,
jq_deparam_fragment,
jq_bbq = $.bbq = $.bbq || {},
jq_bbq_pushState,
jq_bbq_getState,
jq_elemUrlAttr,
special = $.event.special,
// Reused strings.
str_hashchange = 'hashchange',
str_querystring = 'querystring',
str_fragment = 'fragment',
str_elemUrlAttr = 'elemUrlAttr',
str_href = 'href',
str_src = 'src',
// Reused RegExp.
re_params_querystring = /^.*\?|#.*$/g,
re_params_fragment,
re_fragment,
re_no_escape,
ajax_crawlable,
fragment_prefix,
// Used by jQuery.elemUrlAttr.
elemUrlAttr_cache = {};
// A few commonly used bits, broken out to help reduce minified file size.
function is_string( arg ) {
return typeof arg === 'string';
};
// Why write the same function twice? Let's curry! Mmmm, curry..
function curry( func ) {
var args = aps.call( arguments, 1 );
return function() {
return func.apply( this, args.concat( aps.call( arguments ) ) );
};
};
// Get location.hash (or what you'd expect location.hash to be) sans any
// leading #. Thanks for making this necessary, Firefox!
function get_fragment( url ) {
return url.replace( re_fragment, '$2' );
};
// Get location.search (or what you'd expect location.search to be) sans any
// leading #. Thanks for making this necessary, IE6!
function get_querystring( url ) {
return url.replace( /(?:^[^?#]*\?([^#]*).*$)?.*/, '$1' );
};
// Section: Param (to string)
//
// Method: jQuery.param.querystring
//
// Retrieve the query string from a URL or if no arguments are passed, the
// current window.location.href.
//
// Usage:
//
// > jQuery.param.querystring( [ url ] );
//
// Arguments:
//
// url - (String) A URL containing query string params to be parsed. If url
// is not passed, the current window.location.href is used.
//
// Returns:
//
// (String) The parsed query string, with any leading "?" removed.
//
// Method: jQuery.param.querystring (build url)
//
// Merge a URL, with or without pre-existing query string params, plus any
// object, params string or URL containing query string params into a new URL.
//
// Usage:
//
// > jQuery.param.querystring( url, params [, merge_mode ] );
//
// Arguments:
//
// url - (String) A valid URL for params to be merged into. This URL may
// contain a query string and/or fragment (hash).
// params - (String) A params string or URL containing query string params to
// be merged into url.
// params - (Object) A params object to be merged into url.
// merge_mode - (Number) Merge behavior defaults to 0 if merge_mode is not
// specified, and is as-follows:
//
// * 0: params in the params argument will override any query string
// params in url.
// * 1: any query string params in url will override params in the params
// argument.
// * 2: params argument will completely replace any query string in url.
//
// Returns:
//
// (String) A URL with a urlencoded query string in the format '?a=b&c=d&e=f'.
// Method: jQuery.param.fragment
//
// Retrieve the fragment (hash) from a URL or if no arguments are passed, the
// current window.location.href.
//
// Usage:
//
// > jQuery.param.fragment( [ url ] );
//
// Arguments:
//
// url - (String) A URL containing fragment (hash) params to be parsed. If
// url is not passed, the current window.location.href is used.
//
// Returns:
//
// (String) The parsed fragment (hash) string, with any leading "#" removed.
// Method: jQuery.param.fragment (build url)
//
// Merge a URL, with or without pre-existing fragment (hash) params, plus any
// object, params string or URL containing fragment (hash) params into a new
// URL.
//
// Usage:
//
// > jQuery.param.fragment( url, params [, merge_mode ] );
//
// Arguments:
//
// url - (String) A valid URL for params to be merged into. This URL may
// contain a query string and/or fragment (hash).
// params - (String) A params string or URL containing fragment (hash) params
// to be merged into url.
// params - (Object) A params object to be merged into url.
// merge_mode - (Number) Merge behavior defaults to 0 if merge_mode is not
// specified, and is as-follows:
//
// * 0: params in the params argument will override any fragment (hash)
// params in url.
// * 1: any fragment (hash) params in url will override params in the
// params argument.
// * 2: params argument will completely replace any query string in url.
//
// Returns:
//
// (String) A URL with a urlencoded fragment (hash) in the format '#a=b&c=d&e=f'.
function jq_param_sub( is_fragment, get_func, url, params, merge_mode ) {
var result,
qs,
matches,
url_params,
hash;
if ( params !== undefined ) {
// Build URL by merging params into url string.
// matches[1] = url part that precedes params, not including trailing ?/#
// matches[2] = params, not including leading ?/#
// matches[3] = if in 'querystring' mode, hash including leading #, otherwise ''
matches = url.match( is_fragment ? re_fragment : /^([^#?]*)\??([^#]*)(#?.*)/ );
// Get the hash if in 'querystring' mode, and it exists.
hash = matches[3] || '';
if ( merge_mode === 2 && is_string( params ) ) {
// If merge_mode is 2 and params is a string, merge the fragment / query
// string into the URL wholesale, without converting it into an object.
qs = params.replace( is_fragment ? re_params_fragment : re_params_querystring, '' );
} else {
// Convert relevant params in url to object.
url_params = jq_deparam( matches[2] );
params = is_string( params )
// Convert passed params string into object.
? jq_deparam[ is_fragment ? str_fragment : str_querystring ]( params )
// Passed params object.
: params;
qs = merge_mode === 2 ? params // passed params replace url params
: merge_mode === 1 ? $.extend( {}, params, url_params ) // url params override passed params
: $.extend( {}, url_params, params ); // passed params override url params
// Convert params object into a sorted params string.
qs = jq_param_sorted( qs );
// Unescape characters specified via $.param.noEscape. Since only hash-
// history users have requested this feature, it's only enabled for
// fragment-related params strings.
if ( is_fragment ) {
qs = qs.replace( re_no_escape, decode );
}
}
// Build URL from the base url, querystring and hash. In 'querystring'
// mode, ? is only added if a query string exists. In 'fragment' mode, #
// is always added.
result = matches[1] + ( is_fragment ? fragment_prefix : qs || !matches[1] ? '?' : '' ) + qs + hash;
} else {
// If URL was passed in, parse params from URL string, otherwise parse
// params from window.location.href.
result = get_func( url !== undefined ? url : location.href );
}
return result;
};
jq_param[ str_querystring ] = curry( jq_param_sub, 0, get_querystring );
jq_param[ str_fragment ] = jq_param_fragment = curry( jq_param_sub, 1, get_fragment );
// Method: jQuery.param.sorted
//
// Returns a params string equivalent to that returned by the internal
// jQuery.param method, but sorted, which makes it suitable for use as a
// cache key.
//
// For example, in most browsers jQuery.param({z:1,a:2}) returns "z=1&a=2"
// and jQuery.param({a:2,z:1}) returns "a=2&z=1". Even though both the
// objects being serialized and the resulting params strings are equivalent,
// if these params strings were set into the location.hash fragment
// sequentially, the hashchange event would be triggered unnecessarily, since
// the strings are different (even though the data described by them is the
// same). By sorting the params string, unecessary hashchange event triggering
// can be avoided.
//
// Usage:
//
// > jQuery.param.sorted( obj [, traditional ] );
//
// Arguments:
//
// obj - (Object) An object to be serialized.
// traditional - (Boolean) Params deep/shallow serialization mode. See the
// documentation at http://api.jquery.com/jQuery.param/ for more detail.
//
// Returns:
//
// (String) A sorted params string.
jq_param.sorted = jq_param_sorted = function( a, traditional ) {
var arr = [],
obj = {};
$.each( jq_param( a, traditional ).split( '&' ), function(i,v){
var key = v.replace( /(?:%5B|=).*$/, '' ),
key_obj = obj[ key ];
if ( !key_obj ) {
key_obj = obj[ key ] = [];
arr.push( key );
}
key_obj.push( v );
});
return $.map( arr.sort(), function(v){
return obj[ v ];
}).join( '&' );
};
// Method: jQuery.param.fragment.noEscape
//
// Specify characters that will be left unescaped when fragments are created
// or merged using <jQuery.param.fragment>, or when the fragment is modified
// using <jQuery.bbq.pushState>. This option only applies to serialized data
// object fragments, and not set-as-string fragments. Does not affect the
// query string. Defaults to ",/" (comma, forward slash).
//
// Note that this is considered a purely aesthetic option, and will help to
// create URLs that "look pretty" in the address bar or bookmarks, without
// affecting functionality in any way. That being said, be careful to not
// unescape characters that are used as delimiters or serve a special
// purpose, such as the "#?&=+" (octothorpe, question mark, ampersand,
// equals, plus) characters.
//
// Usage:
//
// > jQuery.param.fragment.noEscape( [ chars ] );
//
// Arguments:
//
// chars - (String) The characters to not escape in the fragment. If
// unspecified, defaults to empty string (escape all characters).
//
// Returns:
//
// Nothing.
jq_param_fragment.noEscape = function( chars ) {
chars = chars || '';
var arr = $.map( chars.split(''), encodeURIComponent );
re_no_escape = new RegExp( arr.join('|'), 'g' );
};
// A sensible default. These are the characters people seem to complain about
// "uglifying up the URL" the most.
jq_param_fragment.noEscape( ',/' );
// Method: jQuery.param.fragment.ajaxCrawlable
//
// TODO: DESCRIBE
//
// Usage:
//
// > jQuery.param.fragment.ajaxCrawlable( [ state ] );
//
// Arguments:
//
// state - (Boolean) TODO: DESCRIBE
//
// Returns:
//
// (Boolean) The current ajaxCrawlable state.
jq_param_fragment.ajaxCrawlable = function( state ) {
if ( state !== undefined ) {
if ( state ) {
re_params_fragment = /^.*(?:#!|#)/;
re_fragment = /^([^#]*)(?:#!|#)?(.*)$/;
fragment_prefix = '#!';
} else {
re_params_fragment = /^.*#/;
re_fragment = /^([^#]*)#?(.*)$/;
fragment_prefix = '#';
}
ajax_crawlable = !!state;
}
return ajax_crawlable;
};
jq_param_fragment.ajaxCrawlable( 0 );
// Section: Deparam (from string)
//
// Method: jQuery.deparam
//
// Deserialize a params string into an object, optionally coercing numbers,
// booleans, null and undefined values; this method is the counterpart to the
// internal jQuery.param method.
//
// Usage:
//
// > jQuery.deparam( params [, coerce ] );
//
// Arguments:
//
// params - (String) A params string to be parsed.
// coerce - (Boolean) If true, coerces any numbers or true, false, null, and
// undefined to their actual value. Defaults to false if omitted.
//
// Returns:
//
// (Object) An object representing the deserialized params string.
$.deparam = jq_deparam = function( params, coerce ) {
var obj = {},
coerce_types = { 'true': !0, 'false': !1, 'null': null };
// Iterate over all name=value pairs.
$.each( params.replace( /\+/g, ' ' ).split( '&' ), function(j,v){
var param = v.split( '=' ),
key = decode( param[0] ),
val,
cur = obj,
i = 0,
// If key is more complex than 'foo', like 'a[]' or 'a[b][c]', split it
// into its component parts.
keys = key.split( '][' ),
keys_last = keys.length - 1;
// If the first keys part contains [ and the last ends with ], then []
// are correctly balanced.
if ( /\[/.test( keys[0] ) && /\]$/.test( keys[ keys_last ] ) ) {
// Remove the trailing ] from the last keys part.
keys[ keys_last ] = keys[ keys_last ].replace( /\]$/, '' );
// Split first keys part into two parts on the [ and add them back onto
// the beginning of the keys array.
keys = keys.shift().split('[').concat( keys );
keys_last = keys.length - 1;
} else {
// Basic 'foo' style key.
keys_last = 0;
}
// Are we dealing with a name=value pair, or just a name?
if ( param.length === 2 ) {
val = decode( param[1] );
// Coerce values.
if ( coerce ) {
val = val && !isNaN(val) ? +val // number
: val === 'undefined' ? undefined // undefined
: coerce_types[val] !== undefined ? coerce_types[val] // true, false, null
: val; // string
}
if ( keys_last ) {
// Complex key, build deep object structure based on a few rules:
// * The 'cur' pointer starts at the object top-level.
// * [] = array push (n is set to array length), [n] = array if n is
// numeric, otherwise object.
// * If at the last keys part, set the value.
// * For each keys part, if the current level is undefined create an
// object or array based on the type of the next keys part.
// * Move the 'cur' pointer to the next level.
// * Rinse & repeat.
for ( ; i <= keys_last; i++ ) {
key = keys[i] === '' ? cur.length : keys[i];
cur = cur[key] = i < keys_last
? cur[key] || ( keys[i+1] && isNaN( keys[i+1] ) ? {} : [] )
: val;
}
} else {
// Simple key, even simpler rules, since only scalars and shallow
// arrays are allowed.
if ( $.isArray( obj[key] ) ) {
// val is already an array, so push on the next value.
obj[key].push( val );
} else if ( obj[key] !== undefined ) {
// val isn't an array, but since a second value has been specified,
// convert val into an array.
obj[key] = [ obj[key], val ];
} else {
// val is a scalar.
obj[key] = val;
}
}
} else if ( key ) {
// No value was defined, so set something meaningful.
obj[key] = coerce
? undefined
: '';
}
});
return obj;
};
// Method: jQuery.deparam.querystring
//
// Parse the query string from a URL or the current window.location.href,
// deserializing it into an object, optionally coercing numbers, booleans,
// null and undefined values.
//
// Usage:
//
// > jQuery.deparam.querystring( [ url ] [, coerce ] );
//
// Arguments:
//
// url - (String) An optional params string or URL containing query string
// params to be parsed. If url is omitted, the current
// window.location.href is used.
// coerce - (Boolean) If true, coerces any numbers or true, false, null, and
// undefined to their actual value. Defaults to false if omitted.
//
// Returns:
//
// (Object) An object representing the deserialized params string.
// Method: jQuery.deparam.fragment
//
// Parse the fragment (hash) from a URL or the current window.location.href,
// deserializing it into an object, optionally coercing numbers, booleans,
// null and undefined values.
//
// Usage:
//
// > jQuery.deparam.fragment( [ url ] [, coerce ] );
//
// Arguments:
//
// url - (String) An optional params string or URL containing fragment (hash)
// params to be parsed. If url is omitted, the current window.location.href
// is used.
// coerce - (Boolean) If true, coerces any numbers or true, false, null, and
// undefined to their actual value. Defaults to false if omitted.
//
// Returns:
//
// (Object) An object representing the deserialized params string.
function jq_deparam_sub( is_fragment, url_or_params, coerce ) {
if ( url_or_params === undefined || typeof url_or_params === 'boolean' ) {
// url_or_params not specified.
coerce = url_or_params;
url_or_params = jq_param[ is_fragment ? str_fragment : str_querystring ]();
} else {
url_or_params = is_string( url_or_params )
? url_or_params.replace( is_fragment ? re_params_fragment : re_params_querystring, '' )
: url_or_params;
}
return jq_deparam( url_or_params, coerce );
};
jq_deparam[ str_querystring ] = curry( jq_deparam_sub, 0 );
jq_deparam[ str_fragment ] = jq_deparam_fragment = curry( jq_deparam_sub, 1 );
// Section: Element manipulation
//
// Method: jQuery.elemUrlAttr
//
// Get the internal "Default URL attribute per tag" list, or augment the list
// with additional tag-attribute pairs, in case the defaults are insufficient.
//
// In the <jQuery.fn.querystring> and <jQuery.fn.fragment> methods, this list
// is used to determine which attribute contains the URL to be modified, if
// an "attr" param is not specified.
//
// Default Tag-Attribute List:
//
// a - href
// base - href
// iframe - src
// img - src
// input - src
// form - action
// link - href
// script - src
//
// Usage:
//
// > jQuery.elemUrlAttr( [ tag_attr ] );
//
// Arguments:
//
// tag_attr - (Object) An object containing a list of tag names and their
// associated default attribute names in the format { tag: 'attr', ... } to
// be merged into the internal tag-attribute list.
//
// Returns:
//
// (Object) An object containing all stored tag-attribute values.
// Only define function and set defaults if function doesn't already exist, as
// the urlInternal plugin will provide this method as well.
$[ str_elemUrlAttr ] || ($[ str_elemUrlAttr ] = function( obj ) {
return $.extend( elemUrlAttr_cache, obj );
})({
a: str_href,
base: str_href,
iframe: str_src,
img: str_src,
input: str_src,
form: 'action',
link: str_href,
script: str_src
});
jq_elemUrlAttr = $[ str_elemUrlAttr ];
// Method: jQuery.fn.querystring
//
// Update URL attribute in one or more elements, merging the current URL (with
// or without pre-existing query string params) plus any params object or
// string into a new URL, which is then set into that attribute. Like
// <jQuery.param.querystring (build url)>, but for all elements in a jQuery
// collection.
//
// Usage:
//
// > jQuery('selector').querystring( [ attr, ] params [, merge_mode ] );
//
// Arguments:
//
// attr - (String) Optional name of an attribute that will contain a URL to
// merge params or url into. See <jQuery.elemUrlAttr> for a list of default
// attributes.
// params - (Object) A params object to be merged into the URL attribute.
// params - (String) A URL containing query string params, or params string
// to be merged into the URL attribute.
// merge_mode - (Number) Merge behavior defaults to 0 if merge_mode is not
// specified, and is as-follows:
//
// * 0: params in the params argument will override any params in attr URL.
// * 1: any params in attr URL will override params in the params argument.
// * 2: params argument will completely replace any query string in attr
// URL.
//
// Returns:
//
// (jQuery) The initial jQuery collection of elements, but with modified URL
// attribute values.
// Method: jQuery.fn.fragment
//
// Update URL attribute in one or more elements, merging the current URL (with
// or without pre-existing fragment/hash params) plus any params object or
// string into a new URL, which is then set into that attribute. Like
// <jQuery.param.fragment (build url)>, but for all elements in a jQuery
// collection.
//
// Usage:
//
// > jQuery('selector').fragment( [ attr, ] params [, merge_mode ] );
//
// Arguments:
//
// attr - (String) Optional name of an attribute that will contain a URL to
// merge params into. See <jQuery.elemUrlAttr> for a list of default
// attributes.
// params - (Object) A params object to be merged into the URL attribute.
// params - (String) A URL containing fragment (hash) params, or params
// string to be merged into the URL attribute.
// merge_mode - (Number) Merge behavior defaults to 0 if merge_mode is not
// specified, and is as-follows:
//
// * 0: params in the params argument will override any params in attr URL.
// * 1: any params in attr URL will override params in the params argument.
// * 2: params argument will completely replace any fragment (hash) in attr
// URL.
//
// Returns:
//
// (jQuery) The initial jQuery collection of elements, but with modified URL
// attribute values.
function jq_fn_sub( mode, force_attr, params, merge_mode ) {
if ( !is_string( params ) && typeof params !== 'object' ) {
// force_attr not specified.
merge_mode = params;
params = force_attr;
force_attr = undefined;
}
return this.each(function(){
var that = $(this),
// Get attribute specified, or default specified via $.elemUrlAttr.
attr = force_attr || jq_elemUrlAttr()[ ( this.nodeName || '' ).toLowerCase() ] || '',
// Get URL value.
url = attr && that.attr( attr ) || '';
// Update attribute with new URL.
that.attr( attr, jq_param[ mode ]( url, params, merge_mode ) );
});
};
$.fn[ str_querystring ] = curry( jq_fn_sub, str_querystring );
$.fn[ str_fragment ] = curry( jq_fn_sub, str_fragment );
// Section: History, hashchange event
//
// Method: jQuery.bbq.pushState
//
// Adds a 'state' into the browser history at the current position, setting
// location.hash and triggering any bound <hashchange event> callbacks
// (provided the new state is different than the previous state).
//
// If no arguments are passed, an empty state is created, which is just a
// shortcut for jQuery.bbq.pushState( {}, 2 ).
//
// Usage:
//
// > jQuery.bbq.pushState( [ params [, merge_mode ] ] );
//
// Arguments:
//
// params - (String) A serialized params string or a hash string beginning
// with # to merge into location.hash.
// params - (Object) A params object to merge into location.hash.
// merge_mode - (Number) Merge behavior defaults to 0 if merge_mode is not
// specified (unless a hash string beginning with # is specified, in which
// case merge behavior defaults to 2), and is as-follows:
//
// * 0: params in the params argument will override any params in the
// current state.
// * 1: any params in the current state will override params in the params
// argument.
// * 2: params argument will completely replace current state.
//
// Returns:
//
// Nothing.
//
// Additional Notes:
//
// * Setting an empty state may cause the browser to scroll.
// * Unlike the fragment and querystring methods, if a hash string beginning
// with # is specified as the params agrument, merge_mode defaults to 2.
jq_bbq.pushState = jq_bbq_pushState = function( params, merge_mode ) {
if ( is_string( params ) && /^#/.test( params ) && merge_mode === undefined ) {
// Params string begins with # and merge_mode not specified, so completely
// overwrite window.location.hash.
merge_mode = 2;
}
var has_args = params !== undefined,
// Merge params into window.location using $.param.fragment.
url = jq_param_fragment( location.href,
has_args ? params : {}, has_args ? merge_mode : 2 );
// Set new window.location.href. Note that Safari 3 & Chrome barf on
// location.hash = '#' so the entire URL is set.
location.href = url;
};
// Method: jQuery.bbq.getState
//
// Retrieves the current 'state' from the browser history, parsing
// location.hash for a specific key or returning an object containing the
// entire state, optionally coercing numbers, booleans, null and undefined
// values.
//
// Usage:
//
// > jQuery.bbq.getState( [ key ] [, coerce ] );
//
// Arguments:
//
// key - (String) An optional state key for which to return a value.
// coerce - (Boolean) If true, coerces any numbers or true, false, null, and
// undefined to their actual value. Defaults to false.
//
// Returns:
//
// (Anything) If key is passed, returns the value corresponding with that key
// in the location.hash 'state', or undefined. If not, an object
// representing the entire 'state' is returned.
jq_bbq.getState = jq_bbq_getState = function( key, coerce ) {
return key === undefined || typeof key === 'boolean'
? jq_deparam_fragment( key ) // 'key' really means 'coerce' here
: jq_deparam_fragment( coerce )[ key ];
};
// Method: jQuery.bbq.removeState
//
// Remove one or more keys from the current browser history 'state', creating
// a new state, setting location.hash and triggering any bound
// <hashchange event> callbacks (provided the new state is different than
// the previous state).
//
// If no arguments are passed, an empty state is created, which is just a
// shortcut for jQuery.bbq.pushState( {}, 2 ).
//
// Usage:
//
// > jQuery.bbq.removeState( [ key [, key ... ] ] );
//
// Arguments:
//
// key - (String) One or more key values to remove from the current state,
// passed as individual arguments.
// key - (Array) A single array argument that contains a list of key values
// to remove from the current state.
//
// Returns:
//
// Nothing.
//
// Additional Notes:
//
// * Setting an empty state may cause the browser to scroll.
jq_bbq.removeState = function( arr ) {
var state = {};
// If one or more arguments is passed..
if ( arr !== undefined ) {
// Get the current state.
state = jq_bbq_getState();
// For each passed key, delete the corresponding property from the current
// state.
$.each( $.isArray( arr ) ? arr : arguments, function(i,v){
delete state[ v ];
});
}
// Set the state, completely overriding any existing state.
jq_bbq_pushState( state, 2 );
};
// Event: hashchange event (BBQ)
//
// Usage in jQuery 1.4 and newer:
//
// In jQuery 1.4 and newer, the event object passed into any hashchange event
// callback is augmented with a copy of the location.hash fragment at the time
// the event was triggered as its event.fragment property. In addition, the
// event.getState method operates on this property (instead of location.hash)
// which allows this fragment-as-a-state to be referenced later, even after
// window.location may have changed.
//
// Note that event.fragment and event.getState are not defined according to
// W3C (or any other) specification, but will still be available whether or
// not the hashchange event exists natively in the browser, because of the
// utility they provide.
//
// The event.fragment property contains the output of <jQuery.param.fragment>
// and the event.getState method is equivalent to the <jQuery.bbq.getState>
// method.
//
// > $(window).bind( 'hashchange', function( event ) {
// > var hash_str = event.fragment,
// > param_obj = event.getState(),
// > param_val = event.getState( 'param_name' ),
// > param_val_coerced = event.getState( 'param_name', true );
// > ...
// > });
//
// Usage in jQuery 1.3.2:
//
// In jQuery 1.3.2, the event object cannot to be augmented as in jQuery 1.4+,
// so the fragment state isn't bound to the event object and must instead be
// parsed using the <jQuery.param.fragment> and <jQuery.bbq.getState> methods.
//
// > $(window).bind( 'hashchange', function( event ) {
// > var hash_str = $.param.fragment(),
// > param_obj = $.bbq.getState(),
// > param_val = $.bbq.getState( 'param_name' ),
// > param_val_coerced = $.bbq.getState( 'param_name', true );
// > ...
// > });
//
// Additional Notes:
//
// * Due to changes in the special events API, jQuery BBQ v1.2 or newer is
// required to enable the augmented event object in jQuery 1.4.2 and newer.
// * See <jQuery hashchange event> for more detailed information.
special[ str_hashchange ] = $.extend( special[ str_hashchange ], {
// Augmenting the event object with the .fragment property and .getState
// method requires jQuery 1.4 or newer. Note: with 1.3.2, everything will
// work, but the event won't be augmented)
add: function( handleObj ) {
var old_handler;
function new_handler(e) {
// e.fragment is set to the value of location.hash (with any leading #
// removed) at the time the event is triggered.
var hash = e[ str_fragment ] = jq_param_fragment();
// e.getState() works just like $.bbq.getState(), but uses the
// e.fragment property stored on the event object.
e.getState = function( key, coerce ) {
return key === undefined || typeof key === 'boolean'
? jq_deparam( hash, key ) // 'key' really means 'coerce' here
: jq_deparam( hash, coerce )[ key ];
};
old_handler.apply( this, arguments );
};
// This may seem a little complicated, but it normalizes the special event
// .add method between jQuery 1.4/1.4.1 and 1.4.2+
if ( $.isFunction( handleObj ) ) {
// 1.4, 1.4.1
old_handler = handleObj;
return new_handler;
} else {
// 1.4.2+
old_handler = handleObj.handler;
handleObj.handler = new_handler;
}
}
});
})(jQuery,this);
/*!
* jQuery hashchange event - v1.3 - 7/21/2010
* http://benalman.com/projects/jquery-hashchange-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
// Script: jQuery hashchange event
//
// *Version: 1.3, Last updated: 7/21/2010*
//
// Project Home - http://benalman.com/projects/jquery-hashchange-plugin/
// GitHub - http://github.com/cowboy/jquery-hashchange/
// Source - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js
// (Minified) - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.min.js (0.8kb gzipped)
//
// About: License
//
// Copyright (c) 2010 "Cowboy" Ben Alman,
// Dual licensed under the MIT and GPL licenses.
// http://benalman.com/about/license/
//
// About: Examples
//
// These working examples, complete with fully commented code, illustrate a few
// ways in which this plugin can be used.
//
// hashchange event - http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/
// document.domain - http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/
//
// About: Support and Testing
//
// Information about what version or versions of jQuery this plugin has been
// tested with, what browsers it has been tested in, and where the unit tests
// reside (so you can test it yourself).
//
// jQuery Versions - 1.2.6, 1.3.2, 1.4.1, 1.4.2
// Browsers Tested - Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5,
// Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.
// Unit Tests - http://benalman.com/code/projects/jquery-hashchange/unit/
//
// About: Known issues
//
// While this jQuery hashchange event implementation is quite stable and
// robust, there are a few unfortunate browser bugs surrounding expected
// hashchange event-based behaviors, independent of any JavaScript
// window.onhashchange abstraction. See the following examples for more
// information:
//
// Chrome: Back Button - http://benalman.com/code/projects/jquery-hashchange/examples/bug-chrome-back-button/
// Firefox: Remote XMLHttpRequest - http://benalman.com/code/projects/jquery-hashchange/examples/bug-firefox-remote-xhr/
// WebKit: Back Button in an Iframe - http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/
// Safari: Back Button from a different domain - http://benalman.com/code/projects/jquery-hashchange/examples/bug-safari-back-from-diff-domain/
//
// Also note that should a browser natively support the window.onhashchange
// event, but not report that it does, the fallback polling loop will be used.
//
// About: Release History
//
// 1.3 - (7/21/2010) Reorganized IE6/7 Iframe code to make it more
// "removable" for mobile-only development. Added IE6/7 document.title
// support. Attempted to make Iframe as hidden as possible by using
// techniques from http://www.paciellogroup.com/blog/?p=604. Added
// support for the "shortcut" format $(window).hashchange( fn ) and
// $(window).hashchange() like jQuery provides for built-in events.
// Renamed jQuery.hashchangeDelay to <jQuery.fn.hashchange.delay> and
// lowered its default value to 50. Added <jQuery.fn.hashchange.domain>
// and <jQuery.fn.hashchange.src> properties plus document-domain.html
// file to address access denied issues when setting document.domain in
// IE6/7.
// 1.2 - (2/11/2010) Fixed a bug where coming back to a page using this plugin
// from a page on another domain would cause an error in Safari 4. Also,
// IE6/7 Iframe is now inserted after the body (this actually works),
// which prevents the page from scrolling when the event is first bound.
// Event can also now be bound before DOM ready, but it won't be usable
// before then in IE6/7.
// 1.1 - (1/21/2010) Incorporated document.documentMode test to fix IE8 bug
// where browser version is incorrectly reported as 8.0, despite
// inclusion of the X-UA-Compatible IE=EmulateIE7 meta tag.
// 1.0 - (1/9/2010) Initial Release. Broke out the jQuery BBQ event.special
// window.onhashchange functionality into a separate plugin for users
// who want just the basic event & back button support, without all the
// extra awesomeness that BBQ provides. This plugin will be included as
// part of jQuery BBQ, but also be available separately.
(function($,window,undefined){
'$:nomunge'; // Used by YUI compressor.
// Reused string.
var str_hashchange = 'hashchange',
// Method / object references.
doc = document,
fake_onhashchange,
special = $.event.special,
// Does the browser support window.onhashchange? Note that IE8 running in
// IE7 compatibility mode reports true for 'onhashchange' in window, even
// though the event isn't supported, so also test document.documentMode.
doc_mode = doc.documentMode,
supports_onhashchange = 'on' + str_hashchange in window && ( doc_mode === undefined || doc_mode > 7 );
// Get location.hash (or what you'd expect location.hash to be) sans any
// leading #. Thanks for making this necessary, Firefox!
function get_fragment( url ) {
url = url || location.href;
return '#' + url.replace( /^[^#]*#?(.*)$/, '$1' );
};
// Method: jQuery.fn.hashchange
//
// Bind a handler to the window.onhashchange event or trigger all bound
// window.onhashchange event handlers. This behavior is consistent with
// jQuery's built-in event handlers.
//
// Usage:
//
// > jQuery(window).hashchange( [ handler ] );
//
// Arguments:
//
// handler - (Function) Optional handler to be bound to the hashchange
// event. This is a "shortcut" for the more verbose form:
// jQuery(window).bind( 'hashchange', handler ). If handler is omitted,
// all bound window.onhashchange event handlers will be triggered. This
// is a shortcut for the more verbose
// jQuery(window).trigger( 'hashchange' ). These forms are described in
// the <hashchange event> section.
//
// Returns:
//
// (jQuery) The initial jQuery collection of elements.
// Allow the "shortcut" format $(elem).hashchange( fn ) for binding and
// $(elem).hashchange() for triggering, like jQuery does for built-in events.
$.fn[ str_hashchange ] = function( fn ) {
return fn ? this.bind( str_hashchange, fn ) : this.trigger( str_hashchange );
};
// Property: jQuery.fn.hashchange.delay
//
// The numeric interval (in milliseconds) at which the <hashchange event>
// polling loop executes. Defaults to 50.
// Property: jQuery.fn.hashchange.domain
//
// If you're setting document.domain in your JavaScript, and you want hash
// history to work in IE6/7, not only must this property be set, but you must
// also set document.domain BEFORE jQuery is loaded into the page. This
// property is only applicable if you are supporting IE6/7 (or IE8 operating
// in "IE7 compatibility" mode).
//
// In addition, the <jQuery.fn.hashchange.src> property must be set to the
// path of the included "document-domain.html" file, which can be renamed or
// modified if necessary (note that the document.domain specified must be the
// same in both your main JavaScript as well as in this file).
//
// Usage:
//
// jQuery.fn.hashchange.domain = document.domain;
// Property: jQuery.fn.hashchange.src
//
// If, for some reason, you need to specify an Iframe src file (for example,
// when setting document.domain as in <jQuery.fn.hashchange.domain>), you can
// do so using this property. Note that when using this property, history
// won't be recorded in IE6/7 until the Iframe src file loads. This property
// is only applicable if you are supporting IE6/7 (or IE8 operating in "IE7
// compatibility" mode).
//
// Usage:
//
// jQuery.fn.hashchange.src = 'path/to/file.html';
$.fn[ str_hashchange ].delay = 50;
/*
$.fn[ str_hashchange ].domain = null;
$.fn[ str_hashchange ].src = null;
*/
// Event: hashchange event
//
// Fired when location.hash changes. In browsers that support it, the native
// HTML5 window.onhashchange event is used, otherwise a polling loop is
// initialized, running every <jQuery.fn.hashchange.delay> milliseconds to
// see if the hash has changed. In IE6/7 (and IE8 operating in "IE7
// compatibility" mode), a hidden Iframe is created to allow the back button
// and hash-based history to work.
//
// Usage as described in <jQuery.fn.hashchange>:
//
// > // Bind an event handler.
// > jQuery(window).hashchange( function(e) {
// > var hash = location.hash;
// > ...
// > });
// >
// > // Manually trigger the event handler.
// > jQuery(window).hashchange();
//
// A more verbose usage that allows for event namespacing:
//
// > // Bind an event handler.
// > jQuery(window).bind( 'hashchange', function(e) {
// > var hash = location.hash;
// > ...
// > });
// >
// > // Manually trigger the event handler.
// > jQuery(window).trigger( 'hashchange' );
//
// Additional Notes:
//
// * The polling loop and Iframe are not created until at least one handler
// is actually bound to the 'hashchange' event.
// * If you need the bound handler(s) to execute immediately, in cases where
// a location.hash exists on page load, via bookmark or page refresh for
// example, use jQuery(window).hashchange() or the more verbose
// jQuery(window).trigger( 'hashchange' ).
// * The event can be bound before DOM ready, but since it won't be usable
// before then in IE6/7 (due to the necessary Iframe), recommended usage is
// to bind it inside a DOM ready handler.
// Override existing $.event.special.hashchange methods (allowing this plugin
// to be defined after jQuery BBQ in BBQ's source code).
special[ str_hashchange ] = $.extend( special[ str_hashchange ], {
// Called only when the first 'hashchange' event is bound to window.
setup: function() {
// If window.onhashchange is supported natively, there's nothing to do..
if ( supports_onhashchange ) { return false; }
// Otherwise, we need to create our own. And we don't want to call this
// until the user binds to the event, just in case they never do, since it
// will create a polling loop and possibly even a hidden Iframe.
$( fake_onhashchange.start );
},
// Called only when the last 'hashchange' event is unbound from window.
teardown: function() {
// If window.onhashchange is supported natively, there's nothing to do..
if ( supports_onhashchange ) { return false; }
// Otherwise, we need to stop ours (if possible).
$( fake_onhashchange.stop );
}
});
// fake_onhashchange does all the work of triggering the window.onhashchange
// event for browsers that don't natively support it, including creating a
// polling loop to watch for hash changes and in IE 6/7 creating a hidden
// Iframe to enable back and forward.
fake_onhashchange = (function(){
var self = {},
timeout_id,
// Remember the initial hash so it doesn't get triggered immediately.
last_hash = get_fragment(),
fn_retval = function(val){ return val; },
history_set = fn_retval,
history_get = fn_retval;
// Start the polling loop.
self.start = function() {
timeout_id || poll();
};
// Stop the polling loop.
self.stop = function() {
timeout_id && clearTimeout( timeout_id );
timeout_id = undefined;
};
// This polling loop checks every $.fn.hashchange.delay milliseconds to see
// if location.hash has changed, and triggers the 'hashchange' event on
// window when necessary.
function poll() {
var hash = get_fragment(),
history_hash = history_get( last_hash );
if ( hash !== last_hash ) {
history_set( last_hash = hash, history_hash );
$(window).trigger( str_hashchange );
} else if ( history_hash !== last_hash ) {
location.href = location.href.replace( /#.*/, '' ) + history_hash;
}
timeout_id = setTimeout( poll, $.fn[ str_hashchange ].delay );
};
return self;
})();
})(jQuery,this);

11
assets/js/jquery.js vendored

File diff suppressed because one or more lines are too long

View File

@ -11,7 +11,7 @@ base_url: "../"
================================================== --> ================================================== -->
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1 id="dropdowns">Dropdown menus</h1> <h1 id="dropdowns">Dropdowns</h1>
</div> </div>
<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p> <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
@ -42,7 +42,7 @@ base_url: "../"
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="dropdowns-alignment">Aligning the menus</h3> <h3 id="dropdowns-alignment">Aligninment options</h3>
<p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p> <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
{% highlight html %} {% highlight html %}
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
@ -50,7 +50,7 @@ base_url: "../"
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<h3 id="dropdowns-headers">Dropdown headers</h3> <h3 id="dropdowns-headers">Headers</h3>
<p>Add a header to label sections of actions in any dropdown menu.</p> <p>Add a header to label sections of actions in any dropdown menu.</p>
<div class="bs-example"> <div class="bs-example">
<div class="dropdown clearfix"> <div class="dropdown clearfix">
@ -76,7 +76,7 @@ base_url: "../"
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<h3 id="dropdowns-disabled">Disabled menu options</h3> <h3 id="dropdowns-disabled">Disabled menu items</h3>
<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p> <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
<div class="bs-example"> <div class="bs-example">
<div class="dropdown clearfix"> <div class="dropdown clearfix">
@ -112,7 +112,7 @@ base_url: "../"
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p> <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div> </div>
<h3 id="btn-groups-single">Basic button group</h3> <h3 id="btn-groups-single">Basic example</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p> <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-group" style="margin: 9px 0 5px;"> <div class="btn-group" style="margin: 9px 0 5px;">
@ -129,7 +129,7 @@ base_url: "../"
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="btn-groups-toolbar">Multiple button groups</h3> <h3 id="btn-groups-toolbar">Button toolbar</h3>
<p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p> <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-toolbar" style="margin: 0;"> <div class="btn-toolbar" style="margin: 0;">
@ -157,7 +157,7 @@ base_url: "../"
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="btn-groups-sizing">Button group sizing</h3> <h3 id="btn-groups-sizing">Sizing</h3>
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p> <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-toolbar"> <div class="btn-toolbar">
@ -196,7 +196,7 @@ base_url: "../"
<div class="btn-group btn-group-xs">...</div> <div class="btn-group btn-group-xs">...</div>
{% endhighlight %} {% endhighlight %}
<h3 id="btn-groups-nested">Nested button groups</h3> <h3 id="btn-groups-nested">Nesting</h3>
<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p> <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-group"> <div class="btn-group">
@ -204,11 +204,11 @@ base_url: "../"
<button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">2</button>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
@ -233,18 +233,18 @@ base_url: "../"
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="btn-groups-vertical">Vertical button groups</h3> <h3 id="btn-groups-vertical">Vertical variation</h3>
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p> <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-group-vertical"> <div class="btn-group-vertical">
<button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
@ -252,31 +252,31 @@ base_url: "../"
<button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li>
</ul> </ul>
@ -289,7 +289,7 @@ base_url: "../"
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="btn-groups-justified">Justified button groups</h3> <h3 id="btn-groups-justified">Justified link variation</h3>
<p>Make a group of buttons stretch at the same size to span the entire width of its parent.</p> <p>Make a group of buttons stretch at the same size to span the entire width of its parent.</p>
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
@ -318,7 +318,7 @@ base_url: "../"
================================================== --> ================================================== -->
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1 id="btn-dropdowns">Button dropdown menus</h1> <h1 id="btn-dropdowns">Button dropdowns</h1>
</div> </div>
<p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p> <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
@ -332,7 +332,7 @@ base_url: "../"
<div class="bs-example"> <div class="bs-example">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -342,7 +342,7 @@ base_url: "../"
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -352,7 +352,7 @@ base_url: "../"
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -362,7 +362,7 @@ base_url: "../"
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -372,7 +372,7 @@ base_url: "../"
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -382,7 +382,7 @@ base_url: "../"
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -397,7 +397,7 @@ base_url: "../"
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span> Action <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -413,7 +413,7 @@ base_url: "../"
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -424,7 +424,7 @@ base_url: "../"
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -435,7 +435,7 @@ base_url: "../"
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -446,7 +446,7 @@ base_url: "../"
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -457,7 +457,7 @@ base_url: "../"
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -468,7 +468,7 @@ base_url: "../"
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -484,7 +484,7 @@ base_url: "../"
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -494,7 +494,7 @@ base_url: "../"
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="btn-dropdowns-sizes">Works with all button sizes</h3> <h3 id="btn-dropdowns-sizing">Sizing</h3>
<p>Button dropdowns work with buttons of all sizes.</p> <p>Button dropdowns work with buttons of all sizes.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-toolbar"> <div class="btn-toolbar">
@ -502,7 +502,7 @@ base_url: "../"
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span> Large button <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -516,7 +516,7 @@ base_url: "../"
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span> Small button <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -530,7 +530,7 @@ base_url: "../"
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Extra small button <span class="caret"></span> Extra small button <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -572,14 +572,14 @@ base_url: "../"
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="btn-dropdowns-dropup">Dropup buttons</h3> <h3 id="btn-dropdowns-dropup">Dropup variation</h3>
<p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p> <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -590,7 +590,7 @@ base_url: "../"
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-primary">Right dropup</button> <button type="button" class="btn btn-primary">Right dropup</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right"> <ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -634,7 +634,7 @@ base_url: "../"
<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p> <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div> </div>
<h2 id="input-groups-basic">Basic input group</h2> <h2 id="input-groups-basic">Basic example</h2>
<form class="bs-example bs-example-form" role="form"> <form class="bs-example bs-example-form" role="form">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
@ -670,7 +670,8 @@ base_url: "../"
</div> </div>
{% endhighlight %} {% endhighlight %}
<h2 id="input-groups-sizes">Optional sizes</h2>
<h2 id="input-groups-sizing">Sizing</h2>
<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p> <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
<form class="bs-example bs-example-form" role="form"> <form class="bs-example bs-example-form" role="form">
<div class="input-group input-group-lg"> <div class="input-group input-group-lg">
@ -706,7 +707,7 @@ base_url: "../"
{% endhighlight %} {% endhighlight %}
<h2 id="input-groups-checkboxes-radios">Checkboxes and radio buttons</h2> <h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
<p>Place any checkbox or radio option within an input group's addon instead of text.</p> <p>Place any checkbox or radio option within an input group's addon instead of text.</p>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form">
<div class="row"> <div class="row">
@ -750,7 +751,7 @@ base_url: "../"
{% endhighlight %} {% endhighlight %}
<h2 id="input-groups-buttons">Buttons instead of text</h2> <h2 id="input-groups-buttons">Button addons</h2>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form">
<div class="row"> <div class="row">
@ -801,7 +802,7 @@ base_url: "../"
<div class="input-group"> <div class="input-group">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -817,7 +818,7 @@ base_url: "../"
<input type="text" class="form-control"> <input type="text" class="form-control">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu pull-right"> <ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -864,7 +865,7 @@ base_url: "../"
</div><!-- /.row --> </div><!-- /.row -->
{% endhighlight %} {% endhighlight %}
<h2 id="input-groups-buttons-segmented">Segmented dropdown groups</h2> <h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
<form class="bs-example bs-example-form" role="form"> <form class="bs-example bs-example-form" role="form">
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
@ -874,7 +875,7 @@ base_url: "../"
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -893,7 +894,7 @@ base_url: "../"
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu pull-right"> <ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -981,9 +982,8 @@ base_url: "../"
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<h2>Options</h2>
<h3 id="nav-justified">Justified links</h3> <h2 id="nav-justified">Justified</h2>
<p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p> <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
<div class="bs-example"> <div class="bs-example">
<ul class="nav nav-tabs nav-justified"> <ul class="nav nav-tabs nav-justified">
@ -1007,7 +1007,8 @@ base_url: "../"
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<h3 id="nav-disabled-links">Disabled state</h3>
<h2 id="nav-disabled-links">Disabled links</h2>
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p> <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
<div class="bs-callout bs-callout-warning"> <div class="bs-callout bs-callout-warning">
@ -1031,14 +1032,11 @@ base_url: "../"
{% endhighlight %} {% endhighlight %}
<h3 id="nav-alignment">Component alignment</h3> <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> <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>
<hr class="bs-docs-separator"> <h2 id="nav-dropdowns">Using dropdowns</h2>
<h2 id="nav-dropdowns">Dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p> <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> <h3>Tabs with dropdowns</h3>
@ -1051,7 +1049,7 @@ base_url: "../"
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -1086,7 +1084,7 @@ base_url: "../"
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -1140,18 +1138,17 @@ base_url: "../"
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Brand</a>
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse"> <div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -1170,7 +1167,7 @@ base_url: "../"
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -1191,14 +1188,13 @@ base_url: "../"
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Brand</a>
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse"> <div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
@ -1244,10 +1240,7 @@ base_url: "../"
</div> </div>
<h2 id="navbar-optional-content">Optional navbar content</h2> <h2 id="navbar-buttons">Buttons</h2>
<p>Quickly add other types of content, beyond links or forms, to a navbar with a few classes.</p>
<h3 id="navbar-buttons">Buttons</h3>
<p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p> <p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar" role="navigation"> <nav class="navbar" role="navigation">
@ -1258,7 +1251,7 @@ base_url: "../"
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Brand</a>
</div> </div>
<div class="collapse navbar-collapse navbar-ex2-collapse"> <div class="collapse navbar-collapse navbar-ex2-collapse">
<button type="button" class="btn btn-default navbar-btn">Sign in</button> <button type="button" class="btn btn-default navbar-btn">Sign in</button>
@ -1269,7 +1262,8 @@ base_url: "../"
<button type="button" class="btn btn-default navbar-btn">Sign in</button> <button type="button" class="btn btn-default navbar-btn">Sign in</button>
{% endhighlight %} {% endhighlight %}
<h3 id="navbar-text">Text in navbars</h3>
<h2 id="navbar-text">Text</h2>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p> <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar" role="navigation"> <nav class="navbar" role="navigation">
@ -1280,7 +1274,7 @@ base_url: "../"
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Brand</a>
</div> </div>
<div class="collapse navbar-collapse navbar-ex3-collapse"> <div class="collapse navbar-collapse navbar-ex3-collapse">
<p class="navbar-text">Signed in as Mark Otto</p> <p class="navbar-text">Signed in as Mark Otto</p>
@ -1291,7 +1285,8 @@ base_url: "../"
<p class="navbar-text">Signed in as Mark Otto</p> <p class="navbar-text">Signed in as Mark Otto</p>
{% endhighlight %} {% endhighlight %}
<h3 id="navbar-links">Non-nav links</h3>
<h2 id="navbar-links">Non-nav links</h2>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p> <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar" role="navigation"> <nav class="navbar" role="navigation">
@ -1302,7 +1297,7 @@ base_url: "../"
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Brand</a>
</div> </div>
<div class="collapse navbar-collapse navbar-ex4-collapse"> <div class="collapse navbar-collapse navbar-ex4-collapse">
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
@ -1313,15 +1308,13 @@ base_url: "../"
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
{% endhighlight %} {% endhighlight %}
<h3 id="navbar-component-alignment">Component alignment</h3>
<h2 id="navbar-component-alignment">Component alignment</h2>
<p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code>&lt;ul&gt;</code> with the respective utility class applied.</p> <p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code>&lt;ul&gt;</code> with the respective utility class applied.</p>
<p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p> <p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>
<h2>Optional display variations</h2> <h2 id="navbar-fixed-top">Fixed to top</h2>
<p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>. These will also remove rounded corners.</p>
<h3 id="navbar-fixed-top">Fixed to top</h3>
<p>Add <code>.navbar-fixed-top</code>.</p> <p>Add <code>.navbar-fixed-top</code>.</p>
<div class="bs-example bs-navbar-top-example"> <div class="bs-example bs-navbar-top-example">
<nav class="navbar navbar-fixed-top" role="navigation"> <nav class="navbar navbar-fixed-top" role="navigation">
@ -1333,7 +1326,7 @@ base_url: "../"
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Brand</a>
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
@ -1361,7 +1354,8 @@ body { padding-top: 70px; }
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p> <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div> </div>
<h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
<h2 id="navbar-fixed-bottom">Fixed to bottom</h2>
<p>Add <code>.navbar-fixed-bottom</code> instead.</p> <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
<div class="bs-example bs-navbar-bottom-example"> <div class="bs-example bs-navbar-bottom-example">
<nav class="navbar navbar-fixed-bottom" role="navigation"> <nav class="navbar navbar-fixed-bottom" role="navigation">
@ -1373,7 +1367,7 @@ body { padding-top: 70px; }
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Brand</a>
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
@ -1401,7 +1395,8 @@ body { padding-bottom: 70px; }
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p> <p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
</div> </div>
<h3 id="navbar-static-top">Static top navbar</h3>
<h2 id="navbar-static-top">Static top</h2>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p> <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<div class="bs-example bs-navbar-top-example"> <div class="bs-example bs-navbar-top-example">
<nav class="navbar navbar-static-top" role="navigation"> <nav class="navbar navbar-static-top" role="navigation">
@ -1413,7 +1408,7 @@ body { padding-bottom: 70px; }
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Brand</a>
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
@ -1433,7 +1428,7 @@ body { padding-bottom: 70px; }
{% endhighlight %} {% endhighlight %}
<h2 id="navbar-inverted">Inverted variation</h2> <h2 id="navbar-inverted">Inverted navbar</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p> <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar navbar-inverse" role="navigation"> <nav class="navbar navbar-inverse" role="navigation">
@ -1445,7 +1440,7 @@ body { padding-bottom: 70px; }
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">Title</a> <a class="navbar-brand" href="#">Brand</a>
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
@ -1564,7 +1559,7 @@ body { padding-bottom: 70px; }
{% endhighlight %} {% endhighlight %}
<h3>Sizes</h3> <h3>Sizing</h3>
<p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p> <p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
<div class="bs-example"> <div class="bs-example">
<div> <div>
@ -1767,31 +1762,41 @@ body { padding-bottom: 70px; }
<!-- Typographic components <!-- Jumbotron
================================================== --> ================================================== -->
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<h1 id="type-components">Typographic components</h1> <h1 id="jumbotron">Jumbotron</h1>
</div> </div>
<p>A lightweight, flexible component that can optional extend the entire viewport to showcase key content on your site. To make the jumbotron full width, don't include it within a <code>.container</code>. Placing it within a container will keep it at the width of the rest of your content and provide rounded corners.</p>
<h2 id="type-components-jumbotron">Jumbotron</h2>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<div class="bs-example"> <div class="bs-example">
<div class="jumbotron"> <div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p> <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div> </div>
</div> </div>
</div>
{% highlight html %} {% highlight html %}
<div class="jumbotron"> <div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<p>...</p> <p>...</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p> <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div> </div>
</div>
{% endhighlight %} {% endhighlight %}
</div>
<h2 id="type-components-page-header">Page header</h2>
<!-- Page header
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="page-header">Page header</h1>
</div>
<p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element, as well as most other components (with additional styles).</p> <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element, as well as most other components (with additional styles).</p>
<div class="bs-example"> <div class="bs-example">
<div class="page-header"> <div class="page-header">
@ -1815,7 +1820,7 @@ body { padding-bottom: 70px; }
</div> </div>
<p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p> <p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
<h3 id="thumbnails-default">Default thumbnails</h3> <h3 id="thumbnails-default">Default example</h3>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<div class="bs-example"> <div class="bs-example">
<div class="row"> <div class="row">
@ -1852,7 +1857,7 @@ body { padding-bottom: 70px; }
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="thumbnails-custom-content">Custom content thumbnails</h3> <h3 id="thumbnails-custom-content">Custom content</h3>
<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> <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="bs-example">
<div class="row"> <div class="row">
@ -1862,7 +1867,7 @@ body { padding-bottom: 70px; }
<div class="caption"> <div class="caption">
<h3>Thumbnail label</h3> <h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p> <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
</div> </div>
</div> </div>
</div> </div>
@ -1872,7 +1877,7 @@ body { padding-bottom: 70px; }
<div class="caption"> <div class="caption">
<h3>Thumbnail label</h3> <h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p> <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
</div> </div>
</div> </div>
</div> </div>
@ -1882,7 +1887,7 @@ body { padding-bottom: 70px; }
<div class="caption"> <div class="caption">
<h3>Thumbnail label</h3> <h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p> <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
</div> </div>
</div> </div>
</div> </div>
@ -1896,7 +1901,7 @@ body { padding-bottom: 70px; }
<div class="caption"> <div class="caption">
<h3>Thumbnail label</h3> <h3>Thumbnail label</h3>
<p>...</p> <p>...</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p> <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
</div> </div>
</div> </div>
</div> </div>
@ -2010,7 +2015,7 @@ body { padding-bottom: 70px; }
<p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p> <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
</div> </div>
<h3 id="progress-basic">Basic</h3> <h3 id="progress-basic">Basic example</h3>
<p>Default progress bar with a vertical gradient.</p> <p>Default progress bar with a vertical gradient.</p>
<div class="bs-example"> <div class="bs-example">
<div class="progress"> <div class="progress">
@ -2259,8 +2264,6 @@ body { padding-bottom: 70px; }
<!-- List group <!-- List group
================================================== --> ================================================== -->
<div class="bs-docs-section"> <div class="bs-docs-section">
@ -2269,7 +2272,7 @@ body { padding-bottom: 70px; }
</div> </div>
<p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p> <p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
<h3 id="list-group-basic">Basic list group</h3> <h3 id="list-group-basic">Basic example</h3>
<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p> <p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
<div class="bs-example"> <div class="bs-example">
<ul class="list-group"> <ul class="list-group">
@ -2290,7 +2293,7 @@ body { padding-bottom: 70px; }
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<h3 id="list-group-badges">With badges</h3> <h3 id="list-group-badges">Badges</h3>
<p>Add the badges component to any list group item and it will automatically be positioned on the right.</p> <p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
<div class="bs-example"> <div class="bs-example">
<ul class="list-group"> <ul class="list-group">
@ -2317,7 +2320,7 @@ body { padding-bottom: 70px; }
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<h3 id="list-group-linked">Linked list group</h3> <h3 id="list-group-linked">Linked items</h3>
<p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p> <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p>
<div class="bs-example"> <div class="bs-example">
<div class="list-group"> <div class="list-group">
@ -2381,7 +2384,7 @@ body { padding-bottom: 70px; }
</div> </div>
<p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p> <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>
<h3 id="panels-basic">Basic panel</h3> <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> <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="bs-example">
<div class="panel"> <div class="panel">
@ -2402,7 +2405,7 @@ body { padding-bottom: 70px; }
<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> <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="bs-example">
<div class="panel"> <div class="panel">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">Panel heading without title</div>
<div class="panel-body"> <div class="panel-body">
Panel content Panel content
</div> </div>
@ -2418,7 +2421,7 @@ body { padding-bottom: 70px; }
</div> </div>
{% highlight html %} {% highlight html %}
<div class="panel"> <div class="panel">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">Panel heading without title</div>
<div class="panel-body"> <div class="panel-body">
Panel content Panel content
</div> </div>
@ -2435,7 +2438,7 @@ body { padding-bottom: 70px; }
{% endhighlight %} {% endhighlight %}
<h3 id="panels-footer">Panel with footer</h3> <h3 id="panels-footer">Panel with footer</h3>
<p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p> <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="bs-example">
<div class="panel"> <div class="panel">
<div class="panel-body"> <div class="panel-body">

View File

@ -1,6 +1,6 @@
{ {
"name": "twbs/bootstrap" "name": "twbs/bootstrap"
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development." , "description": "Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."
, "keywords": ["bootstrap", "css"] , "keywords": ["bootstrap", "css"]
, "homepage": "http://getbootstrap.com" , "homepage": "http://getbootstrap.com"
, "authors": [ , "authors": [

214
css.html
View File

@ -15,7 +15,7 @@ base_url: "../"
</div> </div>
<p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p> <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<h3 id="overview-doctype">HTML5 doctype required</h3> <h3 id="overview-doctype">HTML5 doctype</h3>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p> <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
{% highlight html %} {% highlight html %}
<!DOCTYPE html> <!DOCTYPE html>
@ -51,10 +51,10 @@ base_url: "../"
</ul> </ul>
<p>These styles can be found within <code>scaffolding.less</code>.</p> <p>These styles can be found within <code>scaffolding.less</code>.</p>
<h3 id="overview-normalize">Normalize reset</h3> <h3 id="overview-normalize">Normalize</h3>
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p> <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
<h3 id="overview-container">Centering with container</h3> <h3 id="overview-container">Containers</h3>
<p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p> <p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p>
{% highlight html %} {% highlight html %}
<div class="container"> <div class="container">
@ -192,102 +192,102 @@ base_url: "../"
<p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p> <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-8">8</div> <div class="col-md-8">.col-md-8</div>
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-6">6</div> <div class="col-md-6">.col-md-6</div>
<div class="col-md-6">6</div> <div class="col-md-6">.col-md-6</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-8">8</div> <div class="col-md-8">.col-md-8</div>
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6">6</div> <div class="col-md-6">.col-md-6</div>
<div class="col-md-6">6</div> <div class="col-md-6">.col-md-6</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="grid-example-mixed">Example: Combining mobile with desktop</h3> <h3 id="grid-example-mixed">Example: Mobile and desktop</h3>
<p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p> <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col-xs-12 col-md-8">8</div> <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-xs-6 col-md-6">6</div> <div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6 col-md-6">6</div> <div class="col-xs-6">.col-xs-6</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-8">8</div> <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div> </div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row"> <div class="row">
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div> </div>
<!-- Columns are always 50% wide, on mobile and desktop --> <!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row"> <div class="row">
<div class="col-xs-6 col-md-6">6</div> <div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6 col-md-6">6</div> <div class="col-xs-6">.col-xs-6</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="grid-example-mixed-complete">Example: Mobile, tablet, and desktop</h3> <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktops</h3>
<p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p> <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
@ -348,28 +348,28 @@ base_url: "../"
<p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p> <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">4 offset 4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div><!-- /row --> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-3 col-md-offset-3">3 offset 3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">3 offset 3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div><!-- /row --> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-6 col-md-offset-3">6 offset 3</div> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div><!-- /row --> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-md-4">...</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">...</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-3 col-md-offset-3">3 offset 3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">3 offset 3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 col-md-offset-3">...</div> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -378,13 +378,13 @@ base_url: "../"
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p> <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-9"> <div class="col-md-9">
Level 1: 9 columns Level 1: .col-md-9
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-6"> <div class="col-md-6">
Level 2: 6 columns Level 2: .col-md-6
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
Level 2: 6 columns Level 2: .col-md-6
</div> </div>
</div> </div>
</div> </div>
@ -392,13 +392,13 @@ base_url: "../"
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-md-9"> <div class="col-md-9">
Level 1: 9 columns Level 1: .col-md-9
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
Level 2: 6 columns Level 2: .col-md-6
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
Level 2: 6 columns Level 2: .col-md-6
</div> </div>
</div> </div>
</div> </div>
@ -408,14 +408,14 @@ base_url: "../"
<h3 id="grid-column-ordering">Column ordering</h3> <h3 id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p> <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-9 col-md-push-3">9</div> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-md-9 col-md-push-3">9</div> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -607,27 +607,27 @@ base_url: "../"
<table class="table"> <table class="table">
<tbody> <tbody>
<tr> <tr>
<td><h1>Bootstrap heading</h1></td> <td><h1>h1. Bootstrap heading</h1></td>
<td>Semibold 38px</td> <td>Semibold 38px</td>
</tr> </tr>
<tr> <tr>
<td><h2>Bootstrap heading</h2></td> <td><h2>h2. Bootstrap heading</h2></td>
<td>Semibold 32px</td> <td>Semibold 32px</td>
</tr> </tr>
<tr> <tr>
<td><h3>Bootstrap heading</h3></td> <td><h3>h3. Bootstrap heading</h3></td>
<td>Semibold 24px</td> <td>Semibold 24px</td>
</tr> </tr>
<tr> <tr>
<td><h4>Bootstrap heading</h4></td> <td><h4>h4. Bootstrap heading</h4></td>
<td>Semibold 18px</td> <td>Semibold 18px</td>
</tr> </tr>
<tr> <tr>
<td><h5>Bootstrap heading</h5></td> <td><h5>h5. Bootstrap heading</h5></td>
<td>Semibold 14px</td> <td>Semibold 14px</td>
</tr> </tr>
<tr> <tr>
<td><h6>Bootstrap heading</h6></td> <td><h6>h6. Bootstrap heading</h6></td>
<td>Semibold 12px</td> <td>Semibold 12px</td>
</tr> </tr>
</tbody> </tbody>
@ -1061,10 +1061,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h2>Optional classes</h2> <h2 id="tables-striped">Striped rows</h2>
<p>Add any of the following classes to the <code>.table</code> base class.</p>
<h3 id="tables-striped">Striped</h3>
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p> <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
@ -1108,7 +1105,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table> </table>
{% endhighlight %} {% endhighlight %}
<h3 id="tables-bordered">Bordered</h3>
<h2 id="tables-bordered">Bordered table</h2>
<p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p> <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
<div class="bs-example"> <div class="bs-example">
<table class="table table-bordered"> <table class="table table-bordered">
@ -1152,7 +1150,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table> </table>
{% endhighlight %} {% endhighlight %}
<h3 id="tables-hover-rows">Hover rows</h3>
<h2 id="tables-hover-rows">Hover rows</h2>
<p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p> <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
<div class="bs-example"> <div class="bs-example">
<table class="table table-hover"> <table class="table table-hover">
@ -1192,7 +1191,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h3 id="tables-condensed">Condensed</h3> <h2 id="tables-condensed">Condensed table</h2>
<p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p> <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
<div class="bs-example"> <div class="bs-example">
<table class="table table-condensed"> <table class="table table-condensed">
@ -1233,7 +1232,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="tables-contextual-classes">Contextual table classes</h2> <h2 id="tables-contextual-classes">Contextual classes</h2>
<p>Use contextual classes to color table rows or individual cells.</p> <p>Use contextual classes to color table rows or individual cells.</p>
<div class="bs-table-scrollable"> <div class="bs-table-scrollable">
<table class="table table-bordered table-striped bs-table"> <table class="table table-bordered table-striped bs-table">
@ -1406,7 +1405,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h3 id="forms-inline">Inline form</h3> <h2 id="forms-inline">Inline form</h2>
<p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p> <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Requires custom widths</h4> <h4>Requires custom widths</h4>
@ -1451,6 +1450,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form> </form>
{% endhighlight %} {% endhighlight %}
<h2 id="forms-horizontal">Horizontal form</h2> <h2 id="forms-horizontal">Horizontal form</h2>
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p> <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
<form class="bs-example form-horizontal"> <form class="bs-example form-horizontal">
@ -1513,7 +1513,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h2 id="forms-controls">Supported form controls</h2> <h2 id="forms-controls">Supported controls</h2>
<p>Examples of standard form controls supported in an example form layout.</p> <p>Examples of standard form controls supported in an example form layout.</p>
<h3>Inputs</h3> <h3>Inputs</h3>
@ -1647,8 +1647,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h2 id="forms-controls-static">Static text in horizontal forms</h2> <h2 id="forms-controls-static">Static control</h2>
<p>When you need to place regular, static text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p> <p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
<form class="bs-example form-horizontal"> <form class="bs-example form-horizontal">
<div class="form-group"> <div class="form-group">
<label class="col-lg-2 control-label">Email</label> <label class="col-lg-2 control-label">Email</label>
@ -1681,7 +1681,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h2 id="forms-control-states">Form control states</h2> <h2 id="forms-control-states">Form states</h2>
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p> <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
<h3 id="forms-input-focus">Input focus</h3> <h3 id="forms-input-focus">Input focus</h3>
@ -1873,7 +1873,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h1 id="buttons">Buttons</h1> <h1 id="buttons">Buttons</h1>
</div> </div>
<h2 id="buttons-options">Button options</h2> <h2 id="buttons-options">Options</h2>
<p>Use any of the available button classes to quickly create a styled button.</p> <p>Use any of the available button classes to quickly create a styled button.</p>
<div class="bs-example"> <div class="bs-example">
<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-default">Default</button>
@ -1907,7 +1907,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn btn-link">Link</button> <button type="button" class="btn btn-link">Link</button>
{% endhighlight %} {% endhighlight %}
<h2 id="buttons-sizes">Button sizes</h2> <h2 id="buttons-sizes">Sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p> <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
<div class="bs-example"> <div class="bs-example">
<p> <p>
@ -1997,7 +1997,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
<h2 id="buttons-tags">Using multiple tags</h2> <h2 id="buttons-tags">Button tags</h2>
<p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p> <p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<form class="bs-example"> <form class="bs-example">
<a class="btn btn-default" href="#">Link</a> <a class="btn btn-default" href="#">Link</a>
@ -2070,29 +2070,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h3>.pull-left</h3> <h3>.pull-left</h3>
<p>Float an element left</p> <p>Float an element left with a class. Can also be used as a mixin.</p>
{% highlight html %} {% highlight html %}
<div class="pull-left">...</div> <div class="pull-left">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight css %} {% highlight css %}
.pull-left { .pull-left {
float: left; float: left !important;
} }
{% endhighlight %} {% endhighlight %}
<h3>.pull-right</h3> <h3>.pull-right</h3>
<p>Float an element right</p> <p>Float an element right with a class. Can also be used as a mixin.</p>
{% highlight html %} {% highlight html %}
<div class="pull-right">...</div> <div class="pull-right">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight css %} {% highlight css %}
.pull-right { .pull-right {
float: right; float: right !important;
} }
{% endhighlight %} {% endhighlight %}
<h3>.clearfix</h3> <h3>.clearfix</h3>
<p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p> <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
{% highlight html %} {% highlight html %}
<div class="clearfix">...</div> <div class="clearfix">...</div>
{% endhighlight %} {% endhighlight %}

File diff suppressed because one or more lines are too long

384
dist/css/bootstrap-theme.css vendored Normal file
View File

@ -0,0 +1,384 @@
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}
.btn-default:active,
.btn-primary:active,
.btn-success:active,
.btn-info:active,
.btn-warning:active,
.btn-danger:active,
.btn-default.active,
.btn-primary.active,
.btn-success.active,
.btn-info.active,
.btn-warning.active,
.btn-danger.active {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn:active,
.btn.active {
background-image: none;
}
.btn-default {
text-shadow: 0 1px 0 #fff;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e6e6e6, 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
background-repeat: repeat-x;
border-color: #e0e0e0;
border-color: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
}
.btn-default:active,
.btn-default.active {
background-color: #e6e6e6;
border-color: #e0e0e0;
}
.btn-primary {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3071a9));
background-image: -webkit-linear-gradient(top, #428bca, 0%, #3071a9, 100%);
background-image: -moz-linear-gradient(top, #428bca 0%, #3071a9 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
background-repeat: repeat-x;
border-color: #2d6ca2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
}
.btn-primary:active,
.btn-primary.active {
background-color: #3071a9;
border-color: #2d6ca2;
}
.btn-success {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5cb85c), to(#449d44));
background-image: -webkit-linear-gradient(top, #5cb85c, 0%, #449d44, 100%);
background-image: -moz-linear-gradient(top, #5cb85c 0%, #449d44 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
background-repeat: repeat-x;
border-color: #419641;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
}
.btn-success:active,
.btn-success.active {
background-color: #449d44;
border-color: #419641;
}
.btn-warning {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f0ad4e), to(#ec971f));
background-image: -webkit-linear-gradient(top, #f0ad4e, 0%, #ec971f, 100%);
background-image: -moz-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
background-repeat: repeat-x;
border-color: #eb9316;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
}
.btn-warning:active,
.btn-warning.active {
background-color: #ec971f;
border-color: #eb9316;
}
.btn-danger {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9534f), to(#c9302c));
background-image: -webkit-linear-gradient(top, #d9534f, 0%, #c9302c, 100%);
background-image: -moz-linear-gradient(top, #d9534f 0%, #c9302c 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
background-repeat: repeat-x;
border-color: #c12e2a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
}
.btn-danger:active,
.btn-danger.active {
background-color: #c9302c;
border-color: #c12e2a;
}
.btn-info {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5bc0de), to(#31b0d5));
background-image: -webkit-linear-gradient(top, #5bc0de, 0%, #31b0d5, 100%);
background-image: -moz-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
background-repeat: repeat-x;
border-color: #2aabd2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
}
.btn-info:active,
.btn-info.active {
background-color: #31b0d5;
border-color: #2aabd2;
}
.thumbnail,
.img-thumbnail {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
background-color: #357ebd;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#357ebd));
background-image: -webkit-linear-gradient(top, #428bca, 0%, #357ebd, 100%);
background-image: -moz-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
}
.navbar {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#f8f8f8));
background-image: -webkit-linear-gradient(top, #ffffff, 0%, #f8f8f8, 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
background-repeat: repeat-x;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
}
.navbar .navbar-nav > .active > a {
background-color: #f8f8f8;
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.navbar-inverse {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#3c3c3c), to(#222222));
background-image: -webkit-linear-gradient(top, #3c3c3c, 0%, #222222, 100%);
background-image: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background-image: linear-gradient(to bottom, #3c3c3c 0%, #222222 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
}
.navbar-inverse .navbar-nav > .active > a {
background-color: #222222;
}
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
.alert {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
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%);
background-image: -moz-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
background-repeat: repeat-x;
border-color: #b2dba1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
}
.alert-info {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9edf7), to(#b9def0));
background-image: -webkit-linear-gradient(top, #d9edf7, 0%, #b9def0, 100%);
background-image: -moz-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
background-repeat: repeat-x;
border-color: #9acfea;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', 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%);
background-image: -moz-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
background-repeat: repeat-x;
border-color: #dca7a7;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
}
.progress {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ebebeb), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #ebebeb, 0%, #f5f5f5, 100%);
background-image: -moz-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
}
.progress-bar {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3071a9));
background-image: -webkit-linear-gradient(top, #428bca, 0%, #3071a9, 100%);
background-image: -moz-linear-gradient(top, #428bca 0%, #3071a9 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
}
.progress-bar-success {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5cb85c), to(#449d44));
background-image: -webkit-linear-gradient(top, #5cb85c, 0%, #449d44, 100%);
background-image: -moz-linear-gradient(top, #5cb85c 0%, #449d44 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
}
.progress-bar-info {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5bc0de), to(#31b0d5));
background-image: -webkit-linear-gradient(top, #5bc0de, 0%, #31b0d5, 100%);
background-image: -moz-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
}
.progress-bar-warning {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f0ad4e), to(#ec971f));
background-image: -webkit-linear-gradient(top, #f0ad4e, 0%, #ec971f, 100%);
background-image: -moz-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
}
.progress-bar-danger {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9534f), to(#c9302c));
background-image: -webkit-linear-gradient(top, #d9534f, 0%, #c9302c, 100%);
background-image: -moz-linear-gradient(top, #d9534f 0%, #c9302c 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
}
.list-group {
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
text-shadow: 0 -1px 0 #3071a9;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3278b3));
background-image: -webkit-linear-gradient(top, #428bca, 0%, #3278b3, 100%);
background-image: -moz-linear-gradient(top, #428bca 0%, #3278b3 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
background-repeat: repeat-x;
border-color: #3278b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
}
.panel {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.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%);
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
}
.panel-primary > .panel-heading {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#357ebd));
background-image: -webkit-linear-gradient(top, #428bca, 0%, #357ebd, 100%);
background-image: -moz-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
}
.panel-success > .panel-heading {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#dff0d8), to(#d0e9c6));
background-image: -webkit-linear-gradient(top, #dff0d8, 0%, #d0e9c6, 100%);
background-image: -moz-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
}
.panel-info > .panel-heading {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9edf7), to(#c4e3f3));
background-image: -webkit-linear-gradient(top, #d9edf7, 0%, #c4e3f3, 100%);
background-image: -moz-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
}
.panel-warning > .panel-heading {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#fcf8e3), to(#faf2cc));
background-image: -webkit-linear-gradient(top, #fcf8e3, 0%, #faf2cc, 100%);
background-image: -moz-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
}
.panel-danger > .panel-heading {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f2dede), to(#ebcccc));
background-image: -webkit-linear-gradient(top, #f2dede, 0%, #ebcccc, 100%);
background-image: -moz-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
}
.well {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#e8e8e8), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #e8e8e8, 0%, #f5f5f5, 100%);
background-image: -moz-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
background-repeat: repeat-x;
border-color: #dcdcdc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
}

1
dist/css/bootstrap-theme.min.css vendored Normal file

File diff suppressed because one or more lines are too long

3433
dist/css/bootstrap.css vendored
View File

@ -733,6 +733,8 @@ pre code {
} }
.container { .container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
@ -757,6 +759,11 @@ pre code {
clear: both; clear: both;
} }
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before, .row:before,
.row:after { .row:after {
display: table; display: table;
@ -777,18 +784,6 @@ pre code {
clear: both; clear: both;
} }
@media (min-width: 768px) {
.container .row {
margin-right: -15px;
margin-left: -15px;
}
}
.row .row {
margin-right: -15px;
margin-left: -15px;
}
.col-xs-1, .col-xs-1,
.col-xs-2, .col-xs-2,
.col-xs-3, .col-xs-3,
@ -907,7 +902,7 @@ pre code {
@media (min-width: 768px) { @media (min-width: 768px) {
.container { .container {
max-width: 720px; max-width: 750px;
} }
.col-sm-1, .col-sm-1,
.col-sm-2, .col-sm-2,
@ -1061,7 +1056,7 @@ pre code {
@media (min-width: 992px) { @media (min-width: 992px) {
.container { .container {
max-width: 940px; max-width: 970px;
} }
.col-md-1, .col-md-1,
.col-md-2, .col-md-2,
@ -1224,7 +1219,7 @@ pre code {
@media (min-width: 1200px) { @media (min-width: 1200px) {
.container { .container {
max-width: 1140px; max-width: 1170px;
} }
.col-lg-1, .col-lg-1,
.col-lg-2, .col-lg-2,
@ -1413,6 +1408,7 @@ th {
.table thead > tr > th { .table thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid #dddddd;
} }
.table caption + thead tr:first-child th, .table caption + thead tr:first-child th,
@ -1454,6 +1450,11 @@ th {
border: 1px solid #dddddd; border: 1px solid #dddddd;
} }
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th { .table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9; background-color: #f9f9f9;
@ -1888,6 +1889,11 @@ textarea.input-lg {
padding-top: 6px; padding-top: 6px;
} }
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
.form-horizontal .form-group:before, .form-horizontal .form-group:before,
.form-horizontal .form-group:after { .form-horizontal .form-group:after {
display: table; display: table;
@ -1908,18 +1914,6 @@ textarea.input-lg {
clear: both; clear: both;
} }
@media (min-width: 768px) {
.container .form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
}
.form-horizontal .form-group .row {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.form-horizontal .control-label { .form-horizontal .control-label {
text-align: right; text-align: right;
@ -2323,160 +2317,6 @@ input[type="button"].btn-block {
transition: height 0.35s ease; transition: height 0.35s ease;
} }
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.input-group.col {
float: none;
padding-right: 0;
padding-left: 0;
}
.input-group .form-control {
width: 100%;
margin-bottom: 0;
}
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
height: 45px;
line-height: 45px;
}
textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn {
height: auto;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn {
height: 30px;
line-height: 30px;
}
textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn {
height: auto;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
text-align: center;
background-color: #eeeeee;
border: 1px solid #cccccc;
border-radius: 4px;
}
.input-group-addon.input-sm {
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
}
.input-group-addon.input-lg {
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
margin-top: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.input-group-addon:last-child {
border-left: 0;
}
.input-group-btn {
position: relative;
white-space: nowrap;
}
.input-group-btn > .btn {
position: relative;
}
.input-group-btn > .btn + .btn {
margin-left: -4px;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:active {
z-index: 2;
}
.caret { .caret {
display: inline-block; display: inline-block;
width: 0; width: 0;
@ -2485,6 +2325,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
vertical-align: middle; vertical-align: middle;
border-top: 4px solid #000000; border-top: 4px solid #000000;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-bottom: 0 dotted;
border-left: 4px solid transparent; border-left: 4px solid transparent;
content: ""; content: "";
} }
@ -2603,7 +2444,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
.dropup .caret, .dropup .caret,
.navbar-fixed-bottom .dropdown .caret { .navbar-fixed-bottom .dropdown .caret {
border-top: 0; border-top: 0 dotted;
border-bottom: 4px solid #000000; border-bottom: 4px solid #000000;
content: ""; content: "";
} }
@ -2615,1088 +2456,6 @@ textarea.input-group-sm > .input-group-btn > .btn {
margin-bottom: 1px; margin-bottom: 1px;
} }
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #ffffff;
border: 1px solid #dddddd;
}
.list-group-item:first-child {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
a.list-group-item {
color: #555555;
}
a.list-group-item .list-group-item-heading {
color: #333333;
}
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}
.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading {
color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
color: #e1edf7;
}
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}
.panel {
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
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);
}
.panel-body {
padding: 15px;
}
.panel > .list-group {
margin-bottom: 0;
}
.panel > .list-group .list-group-item {
border-width: 1px 0;
}
.panel > .list-group .list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.panel > .list-group .list-group-item:last-child {
border-bottom: 0;
}
.panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0;
}
.panel-heading {
padding: 10px 15px;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 17.5px;
}
.panel-title > a {
color: inherit;
}
.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel-group .panel {
margin-bottom: 0;
overflow: hidden;
border-radius: 4px;
}
.panel-group .panel + .panel {
margin-top: 5px;
}
.panel-group .panel-heading {
border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse .panel-body {
border-top: 1px solid #dddddd;
}
.panel-group .panel-footer {
border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid #dddddd;
}
.panel-primary {
border-color: #428bca;
}
.panel-primary > .panel-heading {
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}
.panel-primary > .panel-heading + .panel-collapse .panel-body {
border-top-color: #428bca;
}
.panel-primary > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #428bca;
}
.panel-success {
border-color: #d6e9c6;
}
.panel-success > .panel-heading {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.panel-success > .panel-heading + .panel-collapse .panel-body {
border-top-color: #d6e9c6;
}
.panel-success > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #d6e9c6;
}
.panel-warning {
border-color: #fbeed5;
}
.panel-warning > .panel-heading {
color: #c09853;
background-color: #fcf8e3;
border-color: #fbeed5;
}
.panel-warning > .panel-heading + .panel-collapse .panel-body {
border-top-color: #fbeed5;
}
.panel-warning > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #fbeed5;
}
.panel-danger {
border-color: #eed3d7;
}
.panel-danger > .panel-heading {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.panel-danger > .panel-heading + .panel-collapse .panel-body {
border-top-color: #eed3d7;
}
.panel-danger > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #eed3d7;
}
.panel-info {
border-color: #bce8f1;
}
.panel-info > .panel-heading {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse .panel-body {
border-top-color: #bce8f1;
}
.panel-info > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #bce8f1;
}
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
.well-lg {
padding: 24px;
border-radius: 6px;
}
.well-sm {
padding: 9px;
border-radius: 3px;
}
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
}
.close:hover,
.close:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
opacity: 0.5;
filter: alpha(opacity=50);
}
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav:before,
.nav:after {
display: table;
content: " ";
}
.nav:after {
clear: both;
}
.nav:before,
.nav:after {
display: table;
content: " ";
}
.nav:after {
clear: both;
}
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > li.disabled > a {
color: #999999;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
color: #999999;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #eeeeee;
border-color: #428bca;
}
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.nav > li > a > img {
max-width: none;
}
.nav-tabs {
border-bottom: 1px solid #dddddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #dddddd;
border-bottom-color: transparent;
}
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0;
}
.nav-tabs.nav-justified > li {
display: table-cell;
float: none;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
text-align: center;
}
.nav-tabs.nav-justified > li > a {
margin-right: 0;
border-bottom: 1px solid #dddddd;
}
.nav-tabs.nav-justified > .active > a {
border-bottom-color: #ffffff;
}
.nav-pills > li {
float: left;
}
.nav-pills > li > a {
border-radius: 5px;
}
.nav-pills > li + li {
margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
color: #ffffff;
background-color: #428bca;
}
.nav-stacked > li {
float: none;
}
.nav-stacked > li + li {
margin-top: 2px;
margin-left: 0;
}
.nav-justified {
width: 100%;
}
.nav-justified > li {
display: table-cell;
float: none;
width: 1%;
}
.nav-justified > li > a {
text-align: center;
}
.nav-tabs-justified {
border-bottom: 0;
}
.nav-tabs-justified > li > a {
margin-right: 0;
border-bottom: 1px solid #dddddd;
}
.nav-tabs-justified > .active > a {
border-bottom-color: #ffffff;
}
.tabbable:before,
.tabbable:after {
display: table;
content: " ";
}
.tabbable:after {
clear: both;
}
.tabbable:before,
.tabbable:after {
display: table;
content: " ";
}
.tabbable:after {
clear: both;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
.nav .caret {
border-top-color: #428bca;
border-bottom-color: #428bca;
}
.nav a:hover .caret {
border-top-color: #2a6496;
border-bottom-color: #2a6496;
}
.nav-tabs .dropdown-menu {
margin-top: -1px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
background-color: #f8f8f8;
border: 1px solid #e7e7e7;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
.navbar-header {
padding-right: 15px;
padding-left: 15px;
}
.navbar-header:before,
.navbar-header:after {
display: table;
content: " ";
}
.navbar-header:after {
clear: both;
}
.navbar-header:before,
.navbar-header:after {
display: table;
content: " ";
}
.navbar-header:after {
clear: both;
}
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-collapse {
max-height: 340px;
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
overflow-y: auto;
border-top: 1px solid #e6e6e6;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-collapse:after {
clear: both;
}
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-collapse:after {
clear: both;
}
@media (min-width: 768px) {
.navbar-collapse {
width: auto;
padding-right: 0;
padding-left: 0;
border-top: 0;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
}
.navbar-static-top {
border-width: 0 0 1px;
}
@media (min-width: 768px) {
.navbar-static-top {
border-radius: 0;
}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
border-width: 0 0 1px;
}
@media (min-width: 768px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
}
.navbar-brand {
float: left;
padding-top: 15px;
padding-bottom: 15px;
font-size: 18px;
line-height: 20px;
color: #777777;
}
.navbar-brand:hover,
.navbar-brand:focus {
color: #5e5e5e;
text-decoration: none;
background-color: transparent;
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-bottom: 8px;
background-color: transparent;
border: 1px solid #dddddd;
border-radius: 4px;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
@media (min-width: 768px) {
.navbar-toggle {
position: relative;
top: auto;
left: auto;
display: none;
}
}
.navbar-nav {
padding-top: 7.5px;
padding-bottom: 7.5px;
margin-right: -15px;
margin-left: -15px;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
color: #777777;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
color: #777777;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
color: #333333;
background-color: transparent;
background-image: none;
}
.navbar-nav .open .dropdown-menu > .active > a,
.navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
@media (min-width: 768px) {
.navbar-nav {
float: left;
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
@media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
}
.navbar-right .dropdown-menu {
right: 0;
left: auto;
}
}
.navbar-form {
padding: 10px 15px;
margin-top: 8px;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) {
.navbar-form .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .form-control {
display: inline-block;
}
.navbar-form .radio,
.navbar-form .checkbox {
display: inline-block;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
}
@media (max-width: 767px) {
.navbar-form .form-group {
margin-bottom: 5px;
}
}
@media (min-width: 768px) {
.navbar-form {
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.navbar-nav > .dropdown > a:hover .caret,
.navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-nav > .open > a .caret,
.navbar-nav > .open > a:hover .caret,
.navbar-nav > .open > a:focus .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.navbar-nav > .dropdown > a .caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
.navbar-nav.pull-right > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu.pull-right {
right: 0;
left: auto;
}
.navbar-btn {
margin-top: 8px;
margin-bottom: 8px;
}
.navbar-text {
float: left;
margin-top: 15px;
margin-bottom: 15px;
color: #777777;
}
@media (min-width: 768px) {
.navbar-text {
margin-right: 15px;
margin-left: 15px;
}
}
.navbar-link {
color: #777777;
}
.navbar-link:hover {
color: #333333;
}
.navbar-inverse {
background-color: #222222;
border-color: #080808;
}
.navbar-inverse .navbar-brand {
color: #999999;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-inverse .navbar-text {
color: #999999;
}
.navbar-inverse .navbar-nav > li > a {
color: #999999;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #080808;
}
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
.navbar-inverse .navbar-toggle {
border-color: #333333;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
background-color: #333333;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: #101010;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #080808;
}
.navbar-inverse .navbar-nav > .dropdown > a:hover .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-inverse .navbar-nav > .dropdown > a .caret {
border-top-color: #999999;
border-bottom-color: #999999;
}
.navbar-inverse .navbar-nav > .open > a .caret,
.navbar-inverse .navbar-nav > .open > a:hover .caret,
.navbar-inverse .navbar-nav > .open > a:focus .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
@media (max-width: 767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
border-color: #080808;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
color: #999999;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #080808;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
}
.navbar-inverse .navbar-link {
color: #999999;
}
.navbar-inverse .navbar-link:hover {
color: #ffffff;
}
.btn-default .caret { .btn-default .caret {
border-top-color: #333333; border-top-color: #333333;
} }
@ -3969,6 +2728,952 @@ button.close {
display: none; display: none;
} }
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.input-group.col {
float: none;
padding-right: 0;
padding-left: 0;
}
.input-group .form-control {
width: 100%;
margin-bottom: 0;
}
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
height: 45px;
line-height: 45px;
}
textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn {
height: auto;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn {
height: 30px;
line-height: 30px;
}
textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn {
height: auto;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
text-align: center;
background-color: #eeeeee;
border: 1px solid #cccccc;
border-radius: 4px;
}
.input-group-addon.input-sm {
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
}
.input-group-addon.input-lg {
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
margin-top: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.input-group-addon:last-child {
border-left: 0;
}
.input-group-btn {
position: relative;
white-space: nowrap;
}
.input-group-btn > .btn {
position: relative;
}
.input-group-btn > .btn + .btn {
margin-left: -4px;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:active {
z-index: 2;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav:before,
.nav:after {
display: table;
content: " ";
}
.nav:after {
clear: both;
}
.nav:before,
.nav:after {
display: table;
content: " ";
}
.nav:after {
clear: both;
}
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > li.disabled > a {
color: #999999;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
color: #999999;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #eeeeee;
border-color: #428bca;
}
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.nav > li > a > img {
max-width: none;
}
.nav-tabs {
border-bottom: 1px solid #dddddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #dddddd;
border-bottom-color: transparent;
}
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0;
}
.nav-tabs.nav-justified > li {
float: none;
}
.nav-tabs.nav-justified > li > a {
text-align: center;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
}
.nav-tabs.nav-justified > li > a {
margin-right: 0;
border-bottom: 1px solid #dddddd;
}
.nav-tabs.nav-justified > .active > a {
border-bottom-color: #ffffff;
}
.nav-pills > li {
float: left;
}
.nav-pills > li > a {
border-radius: 5px;
}
.nav-pills > li + li {
margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
color: #ffffff;
background-color: #428bca;
}
.nav-stacked > li {
float: none;
}
.nav-stacked > li + li {
margin-top: 2px;
margin-left: 0;
}
.nav-justified {
width: 100%;
}
.nav-justified > li {
float: none;
}
.nav-justified > li > a {
text-align: center;
}
@media (min-width: 768px) {
.nav-justified > li {
display: table-cell;
width: 1%;
}
}
.nav-tabs-justified {
border-bottom: 0;
}
.nav-tabs-justified > li > a {
margin-right: 0;
border-bottom: 1px solid #dddddd;
}
.nav-tabs-justified > .active > a {
border-bottom-color: #ffffff;
}
.tabbable:before,
.tabbable:after {
display: table;
content: " ";
}
.tabbable:after {
clear: both;
}
.tabbable:before,
.tabbable:after {
display: table;
content: " ";
}
.tabbable:after {
clear: both;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
.nav .caret {
border-top-color: #428bca;
border-bottom-color: #428bca;
}
.nav a:hover .caret {
border-top-color: #2a6496;
border-bottom-color: #2a6496;
}
.nav-tabs .dropdown-menu {
margin-top: -1px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
background-color: #f8f8f8;
border: 1px solid #e7e7e7;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
.navbar-header:before,
.navbar-header:after {
display: table;
content: " ";
}
.navbar-header:after {
clear: both;
}
.navbar-header:before,
.navbar-header:after {
display: table;
content: " ";
}
.navbar-header:after {
clear: both;
}
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-collapse {
max-height: 340px;
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid #e6e6e6;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-collapse:after {
clear: both;
}
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-collapse:after {
clear: both;
}
.navbar-collapse.in {
overflow-y: auto;
}
@media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
}
.container > .navbar-header,
.container > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.container > .navbar-header,
.container > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
.navbar-static-top {
border-width: 0 0 1px;
}
@media (min-width: 768px) {
.navbar-static-top {
border-radius: 0;
}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
border-width: 0 0 1px;
}
@media (min-width: 768px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
}
.navbar-brand {
float: left;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
color: #777777;
}
.navbar-brand:hover,
.navbar-brand:focus {
color: #5e5e5e;
text-decoration: none;
background-color: transparent;
}
@media (min-width: 768px) {
.navbar > .container .navbar-brand {
margin-left: -15px;
}
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
border: 1px solid #dddddd;
border-radius: 4px;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
.navbar-nav {
margin: 7.5px -15px;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
color: #777777;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
color: #777777;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
color: #333333;
background-color: transparent;
background-image: none;
}
.navbar-nav .open .dropdown-menu > .active > a,
.navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
@media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
@media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
}
.navbar-right .dropdown-menu {
right: 0;
left: auto;
}
}
.navbar-form {
padding: 10px 15px;
margin-top: 8px;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) {
.navbar-form .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .form-control {
display: inline-block;
}
.navbar-form .radio,
.navbar-form .checkbox {
display: inline-block;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
}
@media (max-width: 767px) {
.navbar-form .form-group {
margin-bottom: 5px;
}
}
@media (min-width: 768px) {
.navbar-form {
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.navbar-nav > .dropdown > a:hover .caret,
.navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-nav > .open > a .caret,
.navbar-nav > .open > a:hover .caret,
.navbar-nav > .open > a:focus .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.navbar-nav > .dropdown > a .caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
.navbar-nav.pull-right > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu.pull-right {
right: 0;
left: auto;
}
.navbar-btn {
margin-top: 8px;
margin-bottom: 8px;
}
.navbar-text {
float: left;
margin-top: 15px;
margin-bottom: 15px;
color: #777777;
}
@media (min-width: 768px) {
.navbar-text {
margin-right: 15px;
margin-left: 15px;
}
}
.navbar-link {
color: #777777;
}
.navbar-link:hover {
color: #333333;
}
.navbar-inverse {
background-color: #222222;
border-color: #080808;
}
.navbar-inverse .navbar-brand {
color: #999999;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-inverse .navbar-text {
color: #999999;
}
.navbar-inverse .navbar-nav > li > a {
color: #999999;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #080808;
}
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
.navbar-inverse .navbar-toggle {
border-color: #333333;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
background-color: #333333;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: #101010;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #080808;
}
.navbar-inverse .navbar-nav > .dropdown > a:hover .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-inverse .navbar-nav > .dropdown > a .caret {
border-top-color: #999999;
border-bottom-color: #999999;
}
.navbar-inverse .navbar-nav > .open > a .caret,
.navbar-inverse .navbar-nav > .open > a:hover .caret,
.navbar-inverse .navbar-nav > .open > a:focus .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
@media (max-width: 767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
border-color: #080808;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
color: #999999;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #080808;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
}
.navbar-inverse .navbar-link {
color: #999999;
}
.navbar-inverse .navbar-link:hover {
color: #ffffff;
}
.breadcrumb { .breadcrumb {
padding: 8px 15px; padding: 8px 15px;
margin-bottom: 20px; margin-bottom: 20px;
@ -4136,7 +3841,7 @@ button.close {
.pager li > a:hover, .pager li > a:hover,
.pager li > a:focus { .pager li > a:focus {
text-decoration: none; text-decoration: none;
background-color: #428bca; background-color: #eeeeee;
} }
.pager .next > a, .pager .next > a,
@ -4158,6 +3863,773 @@ button.close {
background-color: #ffffff; background-color: #ffffff;
} }
.label {
display: inline;
padding: .25em .6em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.label[href]:hover,
.label[href]:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.label:empty {
display: none;
}
.label-default {
background-color: #999999;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #808080;
}
.label-primary {
background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #3071a9;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #999999;
border-radius: 10px;
}
.badge:empty {
display: none;
}
a.badge:hover,
a.badge:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.btn .badge {
position: relative;
top: -1px;
}
a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
color: #428bca;
background-color: #ffffff;
}
.nav-pills > li > a > .badge {
margin-left: 3px;
}
.jumbotron {
padding: 30px;
margin-bottom: 30px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: #eeeeee;
}
.jumbotron h1 {
line-height: 1;
color: inherit;
}
.jumbotron p {
line-height: 1.4;
}
.container .jumbotron {
border-radius: 6px;
}
@media screen and (min-width: 768px) {
.jumbotron {
padding-top: 50px;
padding-bottom: 50px;
}
.container .jumbotron {
padding-right: 60px;
padding-left: 60px;
}
.jumbotron h1 {
font-size: 63px;
}
}
.thumbnail,
.img-thumbnail {
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;
}
.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;
}
.thumbnail > img {
margin-right: auto;
margin-left: auto;
}
.thumbnail .caption {
padding: 9px;
color: #333333;
}
.alert {
padding: 15px;
margin-bottom: 20px;
color: #c09853;
background-color: #fcf8e3;
border: 1px solid #fbeed5;
border-radius: 4px;
}
.alert h4 {
margin-top: 0;
color: inherit;
}
.alert hr {
border-top-color: #f8e5be;
}
.alert .alert-link {
font-weight: bold;
color: #a47e3c;
}
.alert > p,
.alert > ul {
margin-bottom: 0;
}
.alert > p + p {
margin-top: 5px;
}
.alert-dismissable {
padding-right: 35px;
}
.alert-dismissable .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-success hr {
border-top-color: #c9e2b3;
}
.alert-success .alert-link {
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;
border-color: #bce8f1;
}
.alert-info hr {
border-top-color: #a6e1ec;
}
.alert-info .alert-link {
color: #2d6987;
}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@-moz-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@-o-keyframes progress-bar-stripes {
from {
background-position: 0 0;
}
to {
background-position: 40px 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
color: #ffffff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.progress-striped .progress-bar {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-success {
background-color: #5cb85c;
}
.progress-striped .progress-bar-success {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-striped .progress-bar-info {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-striped .progress-bar-warning {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-danger {
background-color: #d9534f;
}
.progress-striped .progress-bar-danger {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.media,
.media-body {
overflow: hidden;
zoom: 1;
}
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media-object {
display: block;
}
.media-heading {
margin: 0 0 5px;
}
.media > .pull-left {
margin-right: 10px;
}
.media > .pull-right {
margin-left: 10px;
}
.media-list {
padding-left: 0;
list-style: none;
}
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #ffffff;
border: 1px solid #dddddd;
}
.list-group-item:first-child {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
a.list-group-item {
color: #555555;
}
a.list-group-item .list-group-item-heading {
color: #333333;
}
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}
.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading {
color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
color: #e1edf7;
}
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}
.panel {
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
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);
}
.panel-body {
padding: 15px;
}
.panel-body:before,
.panel-body:after {
display: table;
content: " ";
}
.panel-body:after {
clear: both;
}
.panel-body:before,
.panel-body:after {
display: table;
content: " ";
}
.panel-body:after {
clear: both;
}
.panel > .list-group {
margin-bottom: 0;
}
.panel > .list-group .list-group-item {
border-width: 1px 0;
}
.panel > .list-group .list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.panel > .list-group .list-group-item:last-child {
border-bottom: 0;
}
.panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0;
}
.panel-heading {
padding: 10px 15px;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
}
.panel-title > a {
color: inherit;
}
.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel-group .panel {
margin-bottom: 0;
overflow: hidden;
border-radius: 4px;
}
.panel-group .panel + .panel {
margin-top: 5px;
}
.panel-group .panel-heading {
border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse .panel-body {
border-top: 1px solid #dddddd;
}
.panel-group .panel-footer {
border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid #dddddd;
}
.panel-primary {
border-color: #428bca;
}
.panel-primary > .panel-heading {
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}
.panel-primary > .panel-heading + .panel-collapse .panel-body {
border-top-color: #428bca;
}
.panel-primary > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #428bca;
}
.panel-success {
border-color: #d6e9c6;
}
.panel-success > .panel-heading {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.panel-success > .panel-heading + .panel-collapse .panel-body {
border-top-color: #d6e9c6;
}
.panel-success > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #d6e9c6;
}
.panel-warning {
border-color: #fbeed5;
}
.panel-warning > .panel-heading {
color: #c09853;
background-color: #fcf8e3;
border-color: #fbeed5;
}
.panel-warning > .panel-heading + .panel-collapse .panel-body {
border-top-color: #fbeed5;
}
.panel-warning > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #fbeed5;
}
.panel-danger {
border-color: #eed3d7;
}
.panel-danger > .panel-heading {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.panel-danger > .panel-heading + .panel-collapse .panel-body {
border-top-color: #eed3d7;
}
.panel-danger > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #eed3d7;
}
.panel-info {
border-color: #bce8f1;
}
.panel-info > .panel-heading {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse .panel-body {
border-top-color: #bce8f1;
}
.panel-info > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #bce8f1;
}
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
.well-lg {
padding: 24px;
border-radius: 6px;
}
.well-sm {
padding: 9px;
border-radius: 3px;
}
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
}
.close:hover,
.close:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
opacity: 0.5;
filter: alpha(opacity=50);
}
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
.modal-open { .modal-open {
overflow: hidden; overflow: hidden;
} }
@ -4555,408 +5027,6 @@ button.close {
content: " "; content: " ";
} }
.alert {
padding: 15px;
margin-bottom: 20px;
color: #c09853;
background-color: #fcf8e3;
border: 1px solid #fbeed5;
border-radius: 4px;
}
.alert h4 {
margin-top: 0;
color: inherit;
}
.alert hr {
border-top-color: #f8e5be;
}
.alert .alert-link {
font-weight: bold;
color: #a47e3c;
}
.alert > p,
.alert > ul {
margin-bottom: 0;
}
.alert > p + p {
margin-top: 5px;
}
.alert-dismissable {
padding-right: 35px;
}
.alert-dismissable .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-success hr {
border-top-color: #c9e2b3;
}
.alert-success .alert-link {
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;
border-color: #bce8f1;
}
.alert-info hr {
border-top-color: #a6e1ec;
}
.alert-info .alert-link {
color: #2d6987;
}
.thumbnail,
.img-thumbnail {
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;
}
.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;
}
.thumbnail > img {
margin-right: auto;
margin-left: auto;
}
.thumbnail .caption {
padding: 9px;
color: #333333;
}
.media,
.media-body {
overflow: hidden;
zoom: 1;
}
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media-object {
display: block;
}
.media-heading {
margin: 0 0 5px;
}
.media > .pull-left {
margin-right: 10px;
}
.media > .pull-right {
margin-left: 10px;
}
.media-list {
padding-left: 0;
list-style: none;
}
.label {
display: inline;
padding: .25em .6em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.label[href]:hover,
.label[href]:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.label:empty {
display: none;
}
.label-default {
background-color: #999999;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #808080;
}
.label-primary {
background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #3071a9;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #999999;
border-radius: 10px;
}
.badge:empty {
display: none;
}
a.badge:hover,
a.badge:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.btn .badge {
position: relative;
top: -1px;
}
a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
color: #428bca;
background-color: #ffffff;
}
.nav-pills > li > a > .badge {
margin-left: 3px;
}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@-moz-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@-o-keyframes progress-bar-stripes {
from {
background-position: 0 0;
}
to {
background-position: 40px 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
color: #ffffff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.progress-striped .progress-bar {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-success {
background-color: #5cb85c;
}
.progress-striped .progress-bar-success {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-striped .progress-bar-info {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-striped .progress-bar-warning {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-danger {
background-color: #d9534f;
}
.progress-striped .progress-bar-danger {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.carousel { .carousel {
position: relative; position: relative;
} }
@ -5150,35 +5220,6 @@ a.list-group-item.active > .badge,
} }
} }
.jumbotron {
padding: 30px;
margin-bottom: 30px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: #eeeeee;
}
.jumbotron h1 {
line-height: 1;
color: inherit;
}
.jumbotron p {
line-height: 1.4;
}
@media screen and (min-width: 768px) {
.jumbotron {
padding: 50px 60px;
border-radius: 6px;
}
.jumbotron h1 {
font-size: 63px;
}
}
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
display: table; display: table;

File diff suppressed because one or more lines are too long

22
dist/js/bootstrap.js vendored
View File

@ -711,7 +711,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
clearMenus() clearMenus()
if (!isActive) { if (!isActive) {
if ('ontouchstart' in document.documentElement) { if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we we use a backdrop because click events don't delegate // if mobile we we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus) $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
} }
@ -723,9 +723,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
$parent $parent
.toggleClass('open') .toggleClass('open')
.trigger('shown.bs.dropdown') .trigger('shown.bs.dropdown')
}
$this.focus() $this.focus()
}
return false return false
} }
@ -851,7 +851,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var Modal = function (element, options) { var Modal = function (element, options) {
this.options = options this.options = options
this.$element = $(element).on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) this.$element = $(element)
this.$backdrop = this.$backdrop =
this.isShown = null this.isShown = null
@ -880,6 +880,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
this.escape() this.escape()
this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.backdrop(function () { this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade') var transition = $.support.transition && that.$element.hasClass('fade')
@ -902,7 +904,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget }) var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ? transition ?
that.$element that.$element.find('.modal-dialog') // wait for modal to slide in
.one($.support.transition.end, function () { .one($.support.transition.end, function () {
that.$element.focus().trigger(e) that.$element.focus().trigger(e)
}) })
@ -1064,7 +1066,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
}) })
$(document) $(document)
.on('shown.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') }) .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') }) .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
}(window.jQuery); }(window.jQuery);
@ -1179,9 +1181,10 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
clearTimeout(self.timeout) clearTimeout(self.timeout)
self.hoverState = 'in'
if (!self.options.delay || !self.options.delay.show) return self.show() if (!self.options.delay || !self.options.delay.show) return self.show()
self.hoverState = 'in'
self.timeout = setTimeout(function () { self.timeout = setTimeout(function () {
if (self.hoverState == 'in') self.show() if (self.hoverState == 'in') self.show()
}, self.options.delay.show) }, self.options.delay.show)
@ -1193,9 +1196,10 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
clearTimeout(self.timeout) clearTimeout(self.timeout)
self.hoverState = 'out'
if (!self.options.delay || !self.options.delay.hide) return self.hide() if (!self.options.delay || !self.options.delay.hide) return self.hide()
self.hoverState = 'out'
self.timeout = setTimeout(function () { self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide() if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide) }, self.options.delay.hide)
@ -1329,7 +1333,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var $tip = this.tip() var $tip = this.tip()
var e = $.Event('hide.bs.' + this.type) var e = $.Event('hide.bs.' + this.type)
function complete() { $tip.detach() } function complete() {
if (that.hoverState != 'in') $tip.detach()
}
this.$element.trigger(e) this.$element.trigger(e)

File diff suppressed because one or more lines are too long

View File

@ -78,25 +78,9 @@ body {
.featurette-divider { .featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */ margin: 80px 0; /* Space out the Bootstrap <hr> more */
} }
.featurette {
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */ /* Thin out the marketing headings */
.featurette-heading { .featurette-heading {
font-size: 50px;
font-weight: 300; font-weight: 300;
line-height: 1; line-height: 1;
letter-spacing: -1px; letter-spacing: -1px;
@ -131,4 +115,14 @@ body {
line-height: 1.4; line-height: 1.4;
} }
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
} }

View File

@ -69,7 +69,7 @@
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="item active"> <div class="item active">
<img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:First slide" alt=""> <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h1>Example headline.</h1> <h1>Example headline.</h1>
@ -79,7 +79,7 @@
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Second slide" alt=""> <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Second slide" alt="Second slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h1>Another example headline.</h1> <h1>Another example headline.</h1>
@ -89,7 +89,7 @@
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Third slide" alt=""> <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Third slide" alt="Third slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h1>One more for good measure.</h1> <h1>One more for good measure.</h1>
@ -114,19 +114,19 @@
<!-- Three columns of text below the carousel --> <!-- Three columns of text below the carousel -->
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140"> <img class="img-circle" src="data:image/png;base64," data-src="holder.js/140x140" alt="Generic placeholder image">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<div class="col-lg-4"> <div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140"> <img class="img-circle" src="data:image/png;base64," data-src="holder.js/140x140" alt="Generic placeholder image">
<h2>Heading</h2> <h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<div class="col-lg-4"> <div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140"> <img class="img-circle" src="data:image/png;base64," data-src="holder.js/140x140" alt="Generic placeholder image">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
@ -138,27 +138,39 @@
<hr class="featurette-divider"> <hr class="featurette-divider">
<div class="featurette"> <div class="row featurette">
<img class="featurette-image img-circle pull-right" data-src="holder.js/512x512"> <div class="col-md-7">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2> <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<div class="col-md-5">
<hr class="featurette-divider"> <img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="featurette">
<img class="featurette-image img-circle pull-left" data-src="holder.js/512x512">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<hr class="featurette-divider"> <hr class="featurette-divider">
<div class="featurette"> <div class="row featurette">
<img class="featurette-image img-circle pull-right" data-src="holder.js/512x512"> <div class="col-md-5">
<img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="col-md-7">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<div class="col-md-5">
<img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider"> <hr class="featurette-divider">
@ -174,11 +186,11 @@
</div><!-- /.container --> </div><!-- /.container -->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/holder.js"></script> <script src="../../assets/js/holder.js"></script>
</body> </body>

View File

@ -105,5 +105,10 @@
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/respond.min.js"></script>
</body> </body>
</html> </html>

View File

@ -18,7 +18,7 @@
<body> <body>
<div class="container-narrow"> <div class="container">
<div class="header"> <div class="header">
<ul class="nav nav-pills pull-right"> <ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
@ -31,7 +31,7 @@
<div class="jumbotron"> <div class="jumbotron">
<h1>Jumbotron heading</h1> <h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-large btn-success" href="#">Sign up today</a></p> <p><a class="btn btn-lg btn-success" href="#">Sign up today</a></p>
</div> </div>
<div class="row marketing"> <div class="row marketing">
@ -64,5 +64,10 @@
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/respond.min.js"></script>
</body> </body>
</html> </html>

View File

@ -31,10 +31,11 @@ body {
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
/* Custom container */ /* Customize container */
.container-narrow { @media (min-width: 768px) {
margin: 0 auto; .container {
max-width: 700px; max-width: 730px;
}
} }
.container-narrow > hr { .container-narrow > hr {
margin: 30px 0; margin: 30px 0;

View File

@ -59,15 +59,16 @@
</div> </div>
</div> </div>
<div class="container">
<!-- Main jumbotron for a primary marketing message or call to action --> <!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron"> <div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p> <p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>
</div> </div>
<div class="container">
<div class="body-content"> <div class="body-content">
<!-- Example row of columns --> <!-- Example row of columns -->
@ -98,7 +99,12 @@
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

View File

@ -13,10 +13,6 @@ body {
/* Responsive: Portrait tablets and up */ /* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
/* Let the jumbotron breathe */
.jumbotron {
margin-top: 20px;
}
/* Remove padding from wrapping element since we kick in the grid classes here */ /* Remove padding from wrapping element since we kick in the grid classes here */
.body-content { .body-content {
padding: 0; padding: 0;

View File

@ -36,7 +36,7 @@
<div class="jumbotron"> <div class="jumbotron">
<h1>Marketing stuff!</h1> <h1>Marketing stuff!</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
<p><a class="btn btn-large btn-success" href="#">Get started today</a></p> <p><a class="btn btn-lg btn-success" href="#">Get started today</a></p>
</div> </div>
@ -70,5 +70,10 @@
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/respond.min.js"></script>
</body> </body>
</html> </html>

View File

@ -27,8 +27,8 @@ body {
} }
/* Customize the nav-justified links to be fill the entire space of the .navbar */ /* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified { .nav-justified {
max-height: 52px;
background-color: #eee; background-color: #eee;
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc; border: 1px solid #ccc;
@ -39,8 +39,7 @@ body {
color: #777; color: #777;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
border-left: 1px solid rgba(255,255,255,.75); border-bottom: 1px solid #d5d5d5;
border-right: 1px solid rgba(0,0,0,.1);
background-color: #e5e5e5; /* Old browsers */ background-color: #e5e5e5; /* Old browsers */
background-repeat: repeat-x; /* Repeat the gradient */ background-repeat: repeat-x; /* Repeat the gradient */
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */ background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
@ -59,16 +58,32 @@ body {
box-shadow: inset 0 3px 7px rgba(0,0,0,.15); box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
} }
.nav-justified > li:first-child > a { .nav-justified > li:first-child > a {
border-left: 0; border-radius: 5px 5px 0 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
} }
.nav-justified > li:last-child > a { .nav-justified > li:last-child > a {
border-right: 0; border-bottom: 0;
border-top-right-radius: 5px; border-radius: 0 0 5px 5px;
border-bottom-right-radius: 5px;
} }
@media (min-width: 768px) {
.nav-justified {
max-height: 52px;
}
.nav-justified > li > a {
border-left: 1px solid #fff;
border-right: 1px solid #d5d5d5;
}
.nav-justified > li:first-child > a {
border-left: 0;
border-radius: 5px 0 0 5px;
}
.nav-justified > li:last-child > a {
border-radius: 0 5px 5px 0;
border-right: 0;
}
}
/* Responsive: Portrait tablets and up */ /* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {

View File

@ -64,16 +64,18 @@
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p> <p>To see the difference between static and fixed top navbars, just scroll.</p>
<p> <p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a> <a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

View File

@ -65,16 +65,18 @@
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p> <p>To see the difference between static and fixed top navbars, just scroll.</p>
<p> <p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a> <a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Navbar Template for Bootstrap</title> <title>Navbar Template for Bootstrap</title>
@ -21,7 +22,6 @@
<!-- Static navbar --> <!-- Static navbar -->
<div class="navbar"> <div class="navbar">
<div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -32,9 +32,9 @@
</div> </div>
<div class="navbar-collapse collapse"> <div class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Link</a></li>
<li><a href="#about">About</a></li> <li><a href="#">Link</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#">Link</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@ -55,23 +55,24 @@
</ul> </ul>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>
</div>
<!-- Main component for a primary marketing message or call to action --> <!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron"> <div class="jumbotron">
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p> <p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a> <a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<!-- Note there is no responsive meta tag here -->
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Non-responsive Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="non-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Non-responsive Bootstrap</h1>
<p class="lead">Disable the responsiveness of Bootstrap by fixing the width of the container and using the first grid system tier.</p>
</div>
<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>Non-responsive grid system</h3>
<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>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/respond.min.js"></script>
</body>
</html>

View File

@ -0,0 +1,13 @@
.container {
max-width: none !important;
width: 970px;
}
.col-xs-4 {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
border: 1px solid #ddd;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}

View File

@ -82,7 +82,7 @@
</div><!--/row--> </div><!--/row-->
</div><!--/span--> </div><!--/span-->
<div class="col-xs-12 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="well sidebar-nav"> <div class="well sidebar-nav">
<ul class="nav"> <ul class="nav">
<li>Sidebar</li> <li>Sidebar</li>
@ -109,8 +109,13 @@
</div><!--/.container--> </div><!--/.container-->
<!-- jQuery and plugin -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="offcanvas.js"></script> <script src="offcanvas.js"></script>
</body> </body>

View File

@ -17,7 +17,6 @@ footer {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.row-offcanvas { .row-offcanvas {
position: relative; position: relative;
overflow: hidden; /* Needed for Internet Explorer */
-webkit-transition: all 0.25s ease-out; -webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out; transition: all 0.25s ease-out;
@ -25,24 +24,25 @@ footer {
.row-offcanvas-right .row-offcanvas-right
.sidebar-offcanvas { .sidebar-offcanvas {
right: -58.333333333333336%; /* 6 columns */ right: -50%; /* 6 columns */
} }
.row-offcanvas-left .row-offcanvas-left
.sidebar-offcanvas { .sidebar-offcanvas {
left: -58.333333333333336%; /* 6 columns */ left: -50%; /* 6 columns */
} }
.row-offcanvas-right.active { .row-offcanvas-right.active {
right: 58.333333333333336%; /* 6 columns */ right: 50%; /* 6 columns */
} }
.row-offcanvas-left.active { .row-offcanvas-left.active {
left: 58.333333333333336%; /* 6 columns */ left: 50%; /* 6 columns */
} }
.sidebar-offcanvas { .sidebar-offcanvas {
position: absolute; position: absolute;
width: 58.333333333333336%; /* 6 columns */ top: 0;
width: 50%; /* 6 columns */
} }
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 139 KiB

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 158 KiB

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 120 KiB

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

View File

@ -27,10 +27,15 @@
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me <input type="checkbox" value="remember-me"> Remember me
</label> </label>
<button class="btn btn-large btn-primary btn-block" type="submit">Sign in</button> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form> </form>
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/respond.min.js"></script>
</body> </body>
</html> </html>

View File

@ -47,7 +47,12 @@
</div><!-- /.container --> </div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

View File

@ -70,9 +70,12 @@
</div> </div>
</div> </div>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

View File

@ -37,5 +37,10 @@
</div> </div>
</div> </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/respond.min.js"></script>
</body> </body>
</html> </html>

382
examples/theme/index.html Normal file
View File

@ -0,0 +1,382 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Theme Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="theme.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-inverse 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="#">Bootstrap theme</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>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container theme-showcase">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>
<div class="page-header">
<h1>Buttons</h1>
</div>
<p>
<button type="button" class="btn btn-lg btn-default">Default</button>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-success">Success</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-link">Link</button>
</p>
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<p>
<button type="button" class="btn btn-sm btn-default">Default</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<button type="button" class="btn btn-sm btn-info">Info</button>
<button type="button" class="btn btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-link">Link</button>
</p>
<p>
<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-xs btn-success">Success</button>
<button type="button" class="btn btn-xs btn-info">Info</button>
<button type="button" class="btn btn-xs btn-warning">Warning</button>
<button type="button" class="btn btn-xs btn-danger">Danger</button>
<button type="button" class="btn btn-xs btn-link">Link</button>
</p>
<div class="page-header">
<h1>Thumbnails</h1>
</div>
<img data-src="holder.js/200x200" src="data:image/png;base64," class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
<div class="page-header">
<h1>Dropdown menus</h1>
</div>
<div class="dropdown theme-dropdown clearfix">
<a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<div class="page-header">
<h1>Navbars</h1>
</div>
<div class="navbar">
<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="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="navbar navbar-inverse">
<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="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<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-danger">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="page-header">
<h1>Progress bars</h1>
</div>
<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>
<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>
<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>
<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>
<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>
<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>
<div class="page-header">
<h1>List groups</h1>
</div>
<div class="row">
<div class="col-sm-4">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div><!-- /.col-sm-4 -->
<div class="col-sm-4">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div><!-- /.col-sm-4 -->
<div class="col-sm-4">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
</div><!-- /.col-sm-4 -->
</div>
<div class="page-header">
<h1>Panels</h1>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div><!-- /.col-sm-4 -->
<div class="col-sm-4">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div><!-- /.col-sm-4 -->
<div class="col-sm-4">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div><!-- /.col-sm-4 -->
</div>
<div class="page-header">
<h1>Wells</h1>
</div>
<div class="well">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/holder.js"></script>
</body>
</html>

14
examples/theme/theme.css Normal file
View File

@ -0,0 +1,14 @@
body {
padding-top: 70px;
padding-bottom: 30px;
}
.theme-dropdown .dropdown-menu {
display: block;
position: static;
margin-bottom: 20px;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}

View File

@ -15,7 +15,7 @@ base_url: "../"
</div> </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> <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>Download latest full source</h3> <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>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> <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>
<!-- <!--
@ -24,7 +24,7 @@ base_url: "../"
<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> <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-options">More download options</h3> <h3 id="download-additional">Additional downloads</h3>
<div class="bs-docs-dl-options"> <div class="bs-docs-dl-options">
<h4> <h4>
<a href="{{ site.download }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest source code</a> <a href="{{ site.download }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest source code</a>
@ -41,7 +41,7 @@ base_url: "../"
{% highlight bash %}$ bower install bootstrap{% endhighlight %} {% highlight bash %}$ bower install bootstrap{% endhighlight %}
</div> </div>
<h3 id="download-cdn">Use the Bootstrap CDN</h3> <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> <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 linenos %}
<!-- Latest compiled and minified CSS --> <!-- Latest compiled and minified CSS -->
@ -234,7 +234,22 @@ bootstrap/
<h4>Carousel</h4> <h4>Carousel</h4>
<p>Customize the navbar and carousel, then add some new components.</p> <p>Customize the navbar and carousel, then add some new components.</p>
</div> </div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/non-responsive/">
<img src="../examples/screenshots/non-responsive.jpg" alt="">
</a>
<h4>Non-responsive Bootstrap</h4>
<p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/theme/">
<img src="../examples/screenshots/theme.jpg" alt="">
</a>
<h4>Bootstrap theme</h4>
<p>Load the optional Bootstrap theme for a visually enhanced experience.</p>
</div>
</div> </div>
</div> </div>
@ -247,13 +262,13 @@ bootstrap/
<div class="page-header"> <div class="page-header">
<h1 id="disable-responsive">Disabling responsiveness</h1> <h1 id="disable-responsive">Disabling responsiveness</h1>
</div> </div>
<p class="lead">Don't want your site or application to be scale on different device? With a little bit of work, you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site.</p> <p class="lead">Don't want your site or application to be scaled on different devices? With a little bit of work, you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site. Read below or check out <a href="../examples/non-responsive/">the non-responsive example</a>.</p>
<h3>Steps to disable responsive views</h3> <h3>Steps to disable responsive views</h3>
<p>To disable responsive features, follow these steps. See it in action in the modified template below.</p> <p>To disable responsive features, follow these steps. See it in action in the modified template below.</p>
<ol> <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 (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>Force a single <code>max-width</code> on the <code>.container</code> (e.g., <code>.container { max-width: 940px; }</code>). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need <code>!important</code>.</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>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> <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> </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>
@ -273,7 +288,10 @@ bootstrap/
<!-- 2. Add our custom CSS to set the container's fixed width --> <!-- 2. Add our custom CSS to set the container's fixed width -->
<style> <style>
.container { max-width: 940px; } .container {
max-width: none !important;
width: 970px;
}
</style> </style>
</head> </head>
<body> <body>
@ -364,7 +382,10 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<p>We'll keep an eye on this though and update our code if we have an easy solution.</p> <p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
<h3>Modals and mobile devices</h3> <h3>Modals and mobile devices</h3>
<h4>Overflow and scrolling</h4>
<p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p> <p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p>
<h4>Virtual keyboards</h4>
<p>Also, note that if you're using inputs in your modal iOS has a rendering bug which doesn't update the position of fixed elements when the virtual keyboard is triggered. There are a few work arounds for this, including transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
<h3>Browser zooming</h3> <h3>Browser zooming</h3>
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p> <p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
@ -545,7 +566,7 @@ img { max-width: none; }
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-info">
<h4>Alternate customization methods</h4> <h4>Alternate customization methods</h4>
<p>While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither options are documented here.</p> <p>While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither of those options are documented here.</p>
</div> </div>
<h3>Removing potential bloat</h3> <h3>Removing potential bloat</h3>

View File

@ -541,12 +541,12 @@ $('#myDropdown').on('show.bs.dropdown', function () {
<li><a href="#fat">@fat</a></li> <li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li> <li><a href="#mdo">@mdo</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
<li><a href="#one">one</a></li> <li><a href="#one" tabindex="-1">one</a></li>
<li><a href="#two">two</a></li> <li><a href="#two" tabindex="-1">two</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#three">three</a></li> <li><a href="#three" tabindex="-1">three</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
@ -663,10 +663,10 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () {
<li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#dropdown1" data-toggle="tab">@fat</a></li> <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" data-toggle="tab">@mdo</a></li> <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
@ -1104,7 +1104,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<td>string | false</td> <td>string | false</td>
<td>false</td> <td>false</td>
<td> <td>
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code></p> <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -1415,11 +1415,11 @@ $('.nav-tabs').button()
<div class="panel-group" id="accordion"> <div class="panel-group" id="accordion">
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1 Collapsible Group Item #1
</a> </a>
</h3> </h4>
</div> </div>
<div id="collapseOne" class="panel-collapse collapse in"> <div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body"> <div class="panel-body">
@ -1429,11 +1429,11 @@ $('.nav-tabs').button()
</div> </div>
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2 Collapsible Group Item #2
</a> </a>
</h3> </h4>
</div> </div>
<div id="collapseTwo" class="panel-collapse collapse"> <div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
@ -1443,11 +1443,11 @@ $('.nav-tabs').button()
</div> </div>
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3 Collapsible Group Item #3
</a> </a>
</h3> </h4>
</div> </div>
<div id="collapseThree" class="panel-collapse collapse"> <div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
@ -1461,11 +1461,11 @@ $('.nav-tabs').button()
<div class="panel-group" id="accordion"> <div class="panel-group" id="accordion">
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1 Collapsible Group Item #1
</a> </a>
</h3> </h4>
</div> </div>
<div id="collapseOne" class="panel-collapse collapse in"> <div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body"> <div class="panel-body">
@ -1475,11 +1475,11 @@ $('.nav-tabs').button()
</div> </div>
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2 Collapsible Group Item #2
</a> </a>
</h3> </h4>
</div> </div>
<div id="collapseTwo" class="panel-collapse collapse"> <div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
@ -1489,11 +1489,11 @@ $('.nav-tabs').button()
</div> </div>
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3 Collapsible Group Item #3
</a> </a>
</h3> </h4>
</div> </div>
<div id="collapseThree" class="panel-collapse collapse"> <div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
@ -1903,7 +1903,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<td>offset</td> <td>offset</td>
<td>number | function | object</td> <td>number | function | object</td>
<td>10</td> <td>10</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td> <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -40,7 +40,7 @@
clearMenus() clearMenus()
if (!isActive) { if (!isActive) {
if ('ontouchstart' in document.documentElement) { if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we we use a backdrop because click events don't delegate // if mobile we we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus) $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
} }
@ -52,9 +52,9 @@
$parent $parent
.toggleClass('open') .toggleClass('open')
.trigger('shown.bs.dropdown') .trigger('shown.bs.dropdown')
}
$this.focus() $this.focus()
}
return false return false
} }

View File

@ -25,7 +25,7 @@
var Modal = function (element, options) { var Modal = function (element, options) {
this.options = options this.options = options
this.$element = $(element).on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) this.$element = $(element)
this.$backdrop = this.$backdrop =
this.isShown = null this.isShown = null
@ -54,6 +54,8 @@
this.escape() this.escape()
this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.backdrop(function () { this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade') var transition = $.support.transition && that.$element.hasClass('fade')
@ -76,7 +78,7 @@
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget }) var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ? transition ?
that.$element that.$element.find('.modal-dialog') // wait for modal to slide in
.one($.support.transition.end, function () { .one($.support.transition.end, function () {
that.$element.focus().trigger(e) that.$element.focus().trigger(e)
}) })
@ -238,7 +240,7 @@
}) })
$(document) $(document)
.on('shown.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') }) .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') }) .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
}(window.jQuery); }(window.jQuery);

View File

@ -174,4 +174,23 @@ $(function () {
}) })
.modal("show") .modal("show")
}) })
test("should close reopened modal with [data-dismiss=modal] click", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'><div class='contents'><div id='close' data-dismiss='modal'></div></div></div>")
div
.bind("shown.bs.modal", function () {
$('#close').click()
ok(!$('#modal-test').is(":visible"), 'modal hidden')
})
.one("hidden.bs.modal", function() {
div.one('hidden.bs.modal', function () {
start()
}).modal("show")
})
.modal("show")
div.remove()
})
}) })

File diff suppressed because one or more lines are too long

View File

@ -108,9 +108,10 @@
clearTimeout(self.timeout) clearTimeout(self.timeout)
self.hoverState = 'in'
if (!self.options.delay || !self.options.delay.show) return self.show() if (!self.options.delay || !self.options.delay.show) return self.show()
self.hoverState = 'in'
self.timeout = setTimeout(function () { self.timeout = setTimeout(function () {
if (self.hoverState == 'in') self.show() if (self.hoverState == 'in') self.show()
}, self.options.delay.show) }, self.options.delay.show)
@ -122,9 +123,10 @@
clearTimeout(self.timeout) clearTimeout(self.timeout)
self.hoverState = 'out'
if (!self.options.delay || !self.options.delay.hide) return self.hide() if (!self.options.delay || !self.options.delay.hide) return self.hide()
self.hoverState = 'out'
self.timeout = setTimeout(function () { self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide() if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide) }, self.options.delay.hide)
@ -258,7 +260,9 @@
var $tip = this.tip() var $tip = this.tip()
var e = $.Event('hide.bs.' + this.type) var e = $.Event('hide.bs.' + this.type)
function complete() { $tip.detach() } function complete() {
if (that.hoverState != 'in') $tip.detach()
}
this.$element.trigger(e) this.$element.trigger(e)

39
less/bootstrap.less vendored
View File

@ -21,43 +21,38 @@
@import "type.less"; @import "type.less";
@import "code.less"; @import "code.less";
@import "grid.less"; @import "grid.less";
@import "tables.less"; @import "tables.less";
@import "forms.less"; @import "forms.less";
@import "buttons.less"; @import "buttons.less";
// Components: common // Components
@import "component-animations.less"; @import "component-animations.less";
@import "input-groups.less";
@import "dropdowns.less"; @import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less"; @import "list-group.less";
@import "panels.less"; @import "panels.less";
@import "wells.less"; @import "wells.less";
@import "close.less"; @import "close.less";
// Components: Nav // Components w/ JavaScript
@import "navs.less";
@import "navbar.less";
@import "button-groups.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
// Components: Popovers
@import "modals.less"; @import "modals.less";
@import "tooltip.less"; @import "tooltip.less";
@import "popovers.less"; @import "popovers.less";
// Components: Misc
@import "alerts.less";
@import "thumbnails.less";
@import "media.less";
@import "labels.less";
@import "badges.less";
@import "progress-bars.less";
@import "carousel.less"; @import "carousel.less";
@import "jumbotron.less";
// Utility classes // Utility classes
@import "utilities.less"; // Has to be last to override when necessary @import "utilities.less";
@import "responsive-utilities.less"; @import "responsive-utilities.less";

View File

@ -13,6 +13,9 @@
border-top: @caret-width-base solid @dropdown-caret-color; border-top: @caret-width-base solid @dropdown-caret-color;
border-right: @caret-width-base solid transparent; border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent; border-left: @caret-width-base solid transparent;
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
// we can just straight up remove this.
border-bottom: 0 dotted;
content: ""; content: "";
} }
@ -161,7 +164,9 @@
.navbar-fixed-bottom .dropdown { .navbar-fixed-bottom .dropdown {
// Reverse the caret // Reverse the caret
.caret { .caret {
border-top: 0; // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
// gets fixed, restore `border-top: 0;`.
border-top: 0 dotted;
border-bottom: 4px solid @dropdown-caret-color; border-bottom: 4px solid @dropdown-caret-color;
content: ""; content: "";
} }

View File

@ -272,9 +272,9 @@
// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since // Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
// it's full-width. // it's full-width.
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg-desktop) {
.container { .container {
max-width: @container-large-desktop; max-width: @container-lg-desktop;
} }
.col-lg-1, .col-lg-1,

View File

@ -11,6 +11,7 @@
line-height: (@line-height-base * 1.5); line-height: (@line-height-base * 1.5);
color: @jumbotron-lead-color; color: @jumbotron-lead-color;
background-color: @jumbotron-bg; background-color: @jumbotron-bg;
h1 { h1 {
line-height: 1; line-height: 1;
color: @jumbotron-heading-color; color: @jumbotron-heading-color;
@ -19,9 +20,19 @@
line-height: 1.4; line-height: 1.4;
} }
.container & {
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
}
@media screen and (min-width: @screen-tablet) { @media screen and (min-width: @screen-tablet) {
padding: 50px 60px; padding-top: 50px;
border-radius: @border-radius-large; // Only round corners at higher resolutions padding-bottom: 50px;
.container & {
padding-left: 60px;
padding-right: 60px;
}
h1 { h1 {
font-size: (@font-size-base * 4.5); font-size: (@font-size-base * 4.5);
} }

View File

@ -524,26 +524,16 @@
.container-fixed() { .container-fixed() {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
.clearfix(); .clearfix();
} }
// Creates a wrapper for a series of columns // Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) { .make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
.clearfix(); .clearfix();
.container & {
@media (min-width: @screen-small) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
} }
// Generate the extra small columns // Generate the extra small columns
@ -568,7 +558,7 @@
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-small) { @media (min-width: @screen-sm) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
@ -576,17 +566,17 @@
// Generate the small column offsets // Generate the small column offsets
.make-sm-column-offset(@columns) { .make-sm-column-offset(@columns) {
@media (min-width: @screen-small) { @media (min-width: @screen-sm) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-sm-column-push(@columns) { .make-sm-column-push(@columns) {
@media (min-width: @screen-small) { @media (min-width: @screen-sm) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-sm-column-pull(@columns) { .make-sm-column-pull(@columns) {
@media (min-width: @screen-small) { @media (min-width: @screen-sm) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
@ -601,7 +591,7 @@
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-medium) { @media (min-width: @screen-md) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
@ -609,17 +599,17 @@
// Generate the large column offsets // Generate the large column offsets
.make-md-column-offset(@columns) { .make-md-column-offset(@columns) {
@media (min-width: @screen-medium) { @media (min-width: @screen-md) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-md-column-push(@columns) { .make-md-column-push(@columns) {
@media (min-width: @screen-medium) { @media (min-width: @screen-md) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-md-column-pull(@columns) { .make-md-column-pull(@columns) {
@media (min-width: @screen-medium) { @media (min-width: @screen-md) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
@ -634,7 +624,7 @@
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-large) { @media (min-width: @screen-lg) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
@ -642,17 +632,17 @@
// Generate the large column offsets // Generate the large column offsets
.make-lg-column-offset(@columns) { .make-lg-column-offset(@columns) {
@media (min-width: @screen-large) { @media (min-width: @screen-lg) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-lg-column-push(@columns) { .make-lg-column-push(@columns) {
@media (min-width: @screen-large) { @media (min-width: @screen-lg) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-lg-column-pull(@columns) { .make-lg-column-pull(@columns) {
@media (min-width: @screen-large) { @media (min-width: @screen-lg) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }

View File

@ -30,8 +30,6 @@
// styling of responsive aspects. // styling of responsive aspects.
.navbar-header { .navbar-header {
padding-left: @navbar-padding-horizontal;
padding-right: @navbar-padding-horizontal;
.clearfix(); .clearfix();
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
@ -51,24 +49,21 @@
// content for the user's viewport. // content for the user's viewport.
.navbar-collapse { .navbar-collapse {
max-height: 340px;
overflow-x: visible;
padding-right: @navbar-padding-horizontal; padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal; padding-left: @navbar-padding-horizontal;
border-top: 1px solid darken(@navbar-bg, 7%); border-top: 1px solid darken(@navbar-bg, 7%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
// Clear floated elements and prevent collapsing of padding
.clearfix(); .clearfix();
// This is not automatically added to the `.navbar-fixed-top` because it causes
// z-index bugs in iOS7 (possibly earlier).
max-height: 340px;
overflow-x: visible;
overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&.in {
overflow-y: auto;
}
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
width: auto; width: auto;
padding-right: 0;
padding-left: 0;
border-top: 0; border-top: 0;
box-shadow: none; box-shadow: none;
@ -86,6 +81,22 @@
} }
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
.container > .navbar-header,
.container > .navbar-collapse {
margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-right: 0;
margin-left: 0;
}
}
// //
// Navbar alignment options // Navbar alignment options
// //
@ -127,8 +138,7 @@
.navbar-brand { .navbar-brand {
float: left; float: left;
padding-top: @navbar-padding-vertical; padding: @navbar-padding-vertical @navbar-padding-horizontal;
padding-bottom: @navbar-padding-vertical;
font-size: @font-size-large; font-size: @font-size-large;
line-height: @line-height-computed; line-height: @line-height-computed;
color: @navbar-brand-color; color: @navbar-brand-color;
@ -138,6 +148,12 @@
text-decoration: none; text-decoration: none;
background-color: @navbar-brand-hover-bg; background-color: @navbar-brand-hover-bg;
} }
@media (min-width: @grid-float-breakpoint) {
.navbar > .container & {
margin-left: -@navbar-padding-horizontal;
}
}
} }
@ -149,6 +165,7 @@
.navbar-toggle { .navbar-toggle {
position: relative; position: relative;
float: right; float: right;
margin-right: @navbar-padding-horizontal;
padding: 9px 10px; padding: 9px 10px;
.navbar-vertical-align(34px); .navbar-vertical-align(34px);
background-color: transparent; background-color: transparent;
@ -173,9 +190,6 @@
} }
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
position: relative;
top: auto;
left: auto;
display: none; display: none;
} }
} }
@ -187,10 +201,7 @@
// the nav the full height of the horizontal nav (above 768px). // the nav the full height of the horizontal nav (above 768px).
.navbar-nav { .navbar-nav {
padding-top: (@navbar-padding-vertical / 2); margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
padding-bottom: (@navbar-padding-vertical / 2);
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
> li > a { > li > a {
padding-top: 10px; padding-top: 10px;
@ -220,7 +231,7 @@
} }
} }
@media (max-width: @screen-phone-max) { @media (max-width: @screen-xs-max) {
// Dropdowns get custom display when collapsed // Dropdowns get custom display when collapsed
.open .dropdown-menu { .open .dropdown-menu {
position: static; position: static;
@ -267,8 +278,6 @@
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
float: left; float: left;
margin: 0; margin: 0;
padding-top: 0;
padding-bottom: 0;
> li { > li {
float: left; float: left;
@ -317,7 +326,7 @@
.form-inline(); .form-inline();
.form-group { .form-group {
@media (max-width: @screen-phone-max) { @media (max-width: @screen-xs-max) {
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
@ -518,7 +527,7 @@
} }
} }
@media (max-width: @screen-phone-max) { @media (max-width: @screen-xs-max) {
// Dropdowns get custom display // Dropdowns get custom display
.open .dropdown-menu { .open .dropdown-menu {
> .dropdown-header { > .dropdown-header {

View File

@ -154,14 +154,20 @@
.nav-justified { .nav-justified {
width: 100%; width: 100%;
> li { > li {
float: none; float: none;
display: table-cell;
width: 1%;
> a { > a {
text-align: center; text-align: center;
} }
} }
@media (min-width: @screen-sm) {
> li {
display: table-cell;
width: 1%;
}
}
} }
// Move borders to anchors instead of bottom of list // Move borders to anchors instead of bottom of list

View File

@ -23,7 +23,7 @@
> a:hover, > a:hover,
> a:focus { > a:focus {
text-decoration: none; text-decoration: none;
background-color: @pagination-active-bg; background-color: @pagination-hover-bg;
} }
} }

View File

@ -15,6 +15,7 @@
// Panel contents // Panel contents
.panel-body { .panel-body {
padding: 15px; padding: 15px;
.clearfix();
} }
// List groups in panels // List groups in panels
@ -59,7 +60,7 @@
.panel-title { .panel-title {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
font-size: (@font-size-base * 1.25); font-size: ceil((@font-size-base * 1.125));
> a { > a {
color: inherit; color: inherit;
} }

View File

@ -37,98 +37,98 @@
.visible-xs { .visible-xs {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
.visible-sm { .visible-sm {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
.visible-md { .visible-md {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
.visible-lg { .visible-lg {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.hidden-xs { .hidden-xs {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.hidden-sm { .hidden-sm {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.hidden-md { .hidden-md {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.hidden-lg { .hidden-lg {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { @media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@ -137,7 +137,6 @@
.visible-print { .visible-print {
.responsive-invisibility(); .responsive-invisibility();
} }
.hidden-print { }
@media print { @media print {
.visible-print { .visible-print {

View File

@ -35,6 +35,7 @@ th {
// Bottom align for column headings // Bottom align for column headings
thead > tr > th { thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid @table-border-color;
} }
// Remove top border from thead by default // Remove top border from thead by default
caption + thead, caption + thead,
@ -92,6 +93,14 @@ th {
} }
} }
} }
> thead {
> tr {
> th,
> td {
border-bottom-width: 2px;
}
}
}
} }

232
less/theme.less Normal file
View File

@ -0,0 +1,232 @@
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
@import "mixins.less";
//
// Buttons
// --------------------------------------------------
// Common styles
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
.box-shadow(@shadow);
// Reset the shadow
&:active,
&.active {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
}
// Mixin for generating new styles
.btn-styles(@btn-color: #555;) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%));
border-color: darken(@btn-color, 12%);
&:active,
&.active {
background-color: darken(@btn-color, 10%);
border-color: darken(@btn-color, 12%);
}
}
// Common styles
.btn {
// Remove the gradient for the pressed/active state
&:active,
&.active {
background-image: none;
}
}
// Apply the mixin to the buttons
.btn-default { .btn-styles(@btn-default-bg;); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
.btn-primary { .btn-styles(@btn-primary-bg); }
.btn-success { .btn-styles(@btn-success-bg); }
.btn-warning { .btn-styles(@btn-warning-bg); }
.btn-danger { .btn-styles(@btn-danger-bg); }
.btn-info { .btn-styles(@btn-info-bg); }
//
// Images
// --------------------------------------------------
.thumbnail,
.img-thumbnail {
.box-shadow(0 1px 2px rgba(0,0,0,.075));
}
//
// Dropdowns
// --------------------------------------------------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%);
}
//
// Navbar
// --------------------------------------------------
// Basic navbar
.navbar {
#gradient > .vertical(@start-color: lighten(@navbar-bg, 10%); @end-color: @navbar-bg;);
border-radius: @border-radius-base;
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow);
.navbar-nav > .active > a {
background-color: @navbar-bg;
}
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
// Inverted navbar
.navbar-inverse {
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg;);
.navbar-nav > .active > a {
background-color: @navbar-inverse-bg;
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
}
// Undo rounded corners in static and fixed navbars
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
//
// Alerts
// --------------------------------------------------
// Common styles
.alert {
text-shadow: 0 1px 0 rgba(255,255,255,.2);
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
}
// Mixin for generating new styles
.alert-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
border-color: darken(@color, 15%);
}
// 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-danger { .alert-styles(@alert-danger-bg); }
//
// Progress bars
// --------------------------------------------------
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg;)
}
// Mixin for generating new styles
.progress-bar-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
}
// Apply the mixin to the progress bars
.progress-bar { .progress-bar-styles(@progress-bar-bg); }
.progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); }
.progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); }
.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); }
.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); }
//
// List groups
// --------------------------------------------------
.list-group {
border-radius: @border-radius-base;
.box-shadow(0 1px 2px rgba(0,0,0,.075));
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
#gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
border-color: darken(@list-group-active-border, 7.5%);
}
//
// Panels
// --------------------------------------------------
// Common styles
.panel {
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
// Mixin for generating new styles
.panel-heading-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
}
// Apply the mixin to the panel headings only
.panel-heading { .panel-heading-styles(@panel-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); }
.panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); }
.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); }
//
// Wells
// --------------------------------------------------
.well {
#gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg;);
border-color: darken(@well-bg, 10%);
@shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
.box-shadow(@shadow);
}

View File

@ -193,26 +193,25 @@
// -------------------------------------------------- // --------------------------------------------------
// Extra small screen / phone // Extra small screen / phone
@screen-xsmall: 480px; @screen-xs: 480px;
@screen-phone: @screen-xsmall; @screen-phone: @screen-xs;
// Small screen / tablet // Small screen / tablet
@screen-small: 768px; @screen-sm: 768px;
@screen-tablet: @screen-small; @screen-tablet: @screen-sm;
// Medium screen / desktop // Medium screen / desktop
@screen-medium: 992px; @screen-md: 992px;
@screen-desktop: @screen-medium; @screen-desktop: @screen-md;
// Large screen / wide desktop // Large screen / wide desktop
@screen-large: 1200px; @screen-lg: 1200px;
@screen-large-desktop: @screen-large; @screen-lg-desktop: @screen-lg;
// So media queries don't overlap when required, provide a maximum // So media queries don't overlap when required, provide a maximum
@screen-phone-max: (@screen-small - 1); @screen-xs-max: (@screen-sm - 1);
@screen-small-max: (@screen-medium - 1); @screen-sm-max: (@screen-md - 1);
@screen-tablet-max: (@screen-desktop - 1); @screen-md-max: (@screen-lg - 1);
@screen-desktop-max: (@screen-large-desktop - 1);
// Grid system // Grid system
@ -600,10 +599,10 @@
// -------------------------------------------------- // --------------------------------------------------
// Small screen / tablet // Small screen / tablet
@container-tablet: 720px; @container-tablet: ((720px + @grid-gutter-width));
// Medium screen / desktop // Medium screen / desktop
@container-desktop: 940px; @container-desktop: ((940px + @grid-gutter-width));
// Large screen / wide desktop // Large screen / wide desktop
@container-large-desktop: 1140px; @container-lg-desktop: ((1140px + @grid-gutter-width));