mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-27 14:46:01 +03:00
Code Activity

Merge branch '3.0.0-wip' into gh-pages

Browse Source
This commit is contained in:
Mark Otto
2013-08-17 22:11:40 -07:00
parent 648c56fbe2 04a73ebe42
commit b03a2df0b0
81 changed files with 4004 additions and 3974 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gruntfile.js
+12 -2
View File
@@ -83,6 +83,17 @@ module.exports = function(grunt) {
},
src: ['less/bootstrap.less'],
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('browserstack-runner');
// Docs HTML validation task
grunt.registerTask('validate-docs', ['jekyll', 'validation']);
@@ -170,7 +180,7 @@ module.exports = function(grunt) {
grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);
// Default task.
grunt.registerTask('default', ['test', 'dist']);
grunt.registerTask('default', ['test', 'dist', 'build-customizer']);
// task for building customizer
grunt.registerTask('build-customizer', 'Add scripts/less files to customizer.', function () {
README.md
+2
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/).
You may use [this JS Bin](http://jsbin.com/aFacAf/1/edit) as a template for your bug reports.
## Documentation
_includes/footer.html
-1
View File
@@ -13,7 +13,6 @@
<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/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>
{% endif %}
_includes/nav-components.html
+23 -29
View File
@@ -10,28 +10,28 @@
<li>
<a href="#btn-groups">Button groups</a>
<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-sizing">Button group sizing</a></li>
<li><a href="#btn-groups-nested">Nested button groups</a></li>
<li><a href="#btn-groups-sizing">Sizing</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-justified">Justified link buttons</a></li>
<li><a href="#btn-groups-justified">Justified link variation</a></li>
</ul>
</li>
<li>
<a href="#btn-dropdowns">Button dropdowns</a>
<ul class="nav">
<li><a href="#btn-dropdowns-single">Single button dropdown</a></li>
<li><a href="#btn-dropdowns-split">Split button dropdown</a></li>
<li><a href="#btn-dropdowns-sizes">Button sizes</a></li>
<li><a href="#btn-dropdowns-single">Single button dropdowns</a></li>
<li><a href="#btn-dropdowns-split">Split button dropdowns</a></li>
<li><a href="#btn-dropdowns-sizing">Sizing</a></li>
<li><a href="#btn-dropdowns-dropup">Dropup variation</a></li>
</ul>
</li>
<li>
<a href="#input-groups">Input groups</a>
<ul class="nav">
<li><a href="#input-groups-basic">Basic input group</a></li>
<li><a href="#input-groups-sizes">Sizing options</a></li>
<li><a href="#input-groups-basic">Basic example</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-buttons">Button addons</a></li>
<li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li>
@@ -41,8 +41,8 @@
<li>
<a href="#nav">Navs</a>
<ul class="nav">
<li><a href="#nav-tabs">Tabs nav</a></li>
<li><a href="#nav-pills">Pills nav</a></li>
<li><a href="#nav-tabs">Tabs</a></li>
<li><a href="#nav-pills">Pills</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-alignment">Alignment options</a></li>
@@ -53,13 +53,13 @@
<a href="#navbar">Navbar</a>
<ul class="nav">
<li><a href="#navbar-default">Default navbar</a></li>
<li><a href="#navbar-buttons">Buttons in navbars</a></li>
<li><a href="#navbar-text">Text in navbars</a></li>
<li><a href="#navbar-links">Links in navbars</a></li>
<li><a href="#navbar-buttons">Buttons</a></li>
<li><a href="#navbar-text">Text</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-fixed-top">Fixed top navbar</a></li>
<li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
<li><a href="#navbar-static-top">Static top navbar</a></li>
<li><a href="#navbar-fixed-top">Fixed to top</a></li>
<li><a href="#navbar-fixed-bottom">Fixed to bottom</a></li>
<li><a href="#navbar-static-top">Static top</a></li>
<li><a href="#navbar-inverted">Inverted navbar</a></li>
</ul>
</li>
@@ -73,17 +73,12 @@
</li>
<li><a href="#labels">Labels</a></li>
<li><a href="#badges">Badges</a></li>
<li>
<a href="#type-components">Typography</a>
<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><a href="#jumbotron">Jumbotron</a></li>
<li><a href="#page-header">Page header</a></li>
<li>
<a href="#thumbnails">Thumbnails</a>
<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>
</ul>
</li>
@@ -99,7 +94,7 @@
<li>
<a href="#progress">Progress bars</a>
<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-striped">Striped</a></li>
<li><a href="#progress-animated">Animated</a></li>
@@ -116,17 +111,16 @@
<li>
<a href="#list-group">List group</a>
<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-linked">Linked items</a></li>
<li><a href="#list-group-custom-content">Custom content</a></li>
<!-- <li><a href="#list-group-pic">Leading picture</a></li> -->
</ul>
</li>
<li>
<a href="#panels">Panels</a>
<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-alternatives">Contextual alternatives</a></li>
<li><a href="#panels-list-group">With list groups</a>
_includes/nav-css.html
+15 -15
View File
@@ -4,9 +4,9 @@
<li><a href="#overview-doctype">HTML5 doctype</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-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-container">Container</a></li>
<li><a href="#overview-container">Containers</a></li>
</ul>
</li>
<li>
@@ -16,13 +16,13 @@
<a href="#grid">Grid system</a>
<ul class="nav">
<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-mixed">Ex: Mobile-desktop</a></li>
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, 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, desktops</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-nesting">Nested columns</a></li>
<li><a href="#grid-offsetting">Offsetting 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-less">LESS mixins and variables</a></li>
</ul>
@@ -44,10 +44,10 @@
<a href="#tables">Tables</a>
<ul class="nav">
<li><a href="#tables-example">Basic example</a></li>
<li><a href="#tables-striped">Zebra striping</a></li>
<li><a href="#tables-bordered">Bordered tables</a></li>
<li><a href="#tables-striped">Striped rows</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-condensed">Condensed tables</a></li>
<li><a href="#tables-condensed">Condensed table</a></li>
<li><a href="#tables-contextual-classes">Contextual classes</a></li>
</ul>
</li>
@@ -55,10 +55,10 @@
<a href="#forms">Forms</a>
<ul class="nav">
<li><a href="#forms-example">Basic example</a></li>
<li><a href="#forms-inline">Inline variation</a></li>
<li><a href="#forms-horizontal">Horizontal variation</a></li>
<li><a href="#forms-inline">Inline form</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-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-sizes">Control sizing</a></li>
<li><a href="#forms-help-text">Help text</a></li>
@@ -67,9 +67,9 @@
<li>
<a href="#buttons">Buttons</a>
<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-disabled">Disabled</a></li>
<li><a href="#buttons-disabled">Disabled state</a></li>
<li><a href="#buttons-tags">Button tags</a></li>
</ul>
</li>
_includes/nav-getting-started.html
+2 -1
View File
@@ -1,7 +1,8 @@
<li>
<a href="#download">Download Bootstrap</a>
<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>
</ul>
</li>
_includes/nav-javascript.html
+1 -1
View File
@@ -4,7 +4,7 @@
<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-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>
</ul>
</li>
_layouts/customize.html
-52
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>
_layouts/home.html
+1 -1
View File
@@ -31,7 +31,7 @@
<a href="{{ site.glyphicons }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Glyphicons']);">Glyphicons</a>
</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>
</ul>
</footer>
assets/css/docs.css
+34 -5
View File
@@ -141,7 +141,7 @@ body {
.bs-masthead-links {
margin-top: 20px;
margin-bottom: 20px;
padding-left: 0;
padding: 0 15px;
list-style: none;
text-align: center;
}
@@ -193,6 +193,27 @@ body {
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
@@ -418,7 +439,7 @@ body {
.bs-example > blockquote:last-child,
.bs-example > .form-control:last-child,
.bs-example > .table:last-child,
.bs-example > .navbar:last-child
.bs-example > .navbar:last-child,
.bs-example > .jumbotron:last-child,
.bs-example > .alert:last-child,
.bs-example > .panel:last-child,
@@ -531,6 +552,12 @@ body {
}
}
/* Pagination */
.bs-example .pagination {
margin-top: 10px;
margin-bottom: 10px;
}
/* Example modals */
.bs-example-modal {
background-color: #f5f5f5;
@@ -733,9 +760,7 @@ body {
.bs-social-buttons li {
display: inline-block;
line-height: 1;
}
.bs-social-buttons li + li {
margin-left: 15px;
padding: 5px 8px;
}
.bs-social-buttons .twitter-follow-button {
width: 225px !important;
@@ -847,6 +872,10 @@ body {
border-bottom-right-radius: 4px;
}
.bs-masthead-links {
padding: 0;
}
.carbonad {
margin: 0 !important;
border: 1px solid #e5e5e5 !important;
assets/js/customizer.js
+100 -33
View File
@@ -1,6 +1,47 @@
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'
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() {
var vars = {}
@@ -11,39 +52,50 @@ window.onload = function () { // wait for load in a dumb way because B-0
var data = {
vars: vars,
css: $('#less-section input:not(:checked)').map(function () { return this.value }).toArray(),
js: $('#plugin-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:checked').map(function () { return this.value }).toArray()
}
if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
window.location = jQuery.param.querystring('/customize/', data)
createGist(data)
}
function parseUrl() {
var data = jQuery.deparam.querystring()
var id = getQueryParam('id')
if (data.js) {
for (var i = 0; i < data.js.length; i++) {
var input = $('input[value="'+data.js[i]+'"]')
input && input.prop('checked', false)
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) {
$('#plugin-section input').each(function () {
$(this).prop('checked', ~$.inArray(this.value, data.js))
})
}
}
if (data.css) {
for (var i = 0; i < data.css.length; i++) {
var input = $('input[value="'+data.css[i]+'"]')
input && input.prop('checked', false)
if (data.css) {
$('#less-section input').each(function () {
$(this).prop('checked', ~$.inArray(this.value, data.css))
})
}
}
if (data.vars) {
// todo (fat): vars
}
if (data.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) {
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()
@@ -62,9 +114,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
}
var content = zip.generate()
location.href = 'data:application/zip;base64,' + content
complete()
}
@@ -108,15 +158,16 @@ window.onload = function () { // wait for load in a dumb way because B-0
, optimization: 0
, filename: 'bootstrap.css'
}).parse(css, function (err, tree) {
if (err) return alert(err)
if (err) {
return showError('<strong>Error</strong> Could not parse less files.', err)
}
result = {
'bootstrap.css' : cw + tree.toCSS(),
'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
}
})
} catch (err) {
return alert(err)
return showError('<strong>Error</strong> Could not parse less files.', err)
}
return result
@@ -142,9 +193,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
$downloadBtn.addClass('loading')
generateZip(generateCSS(), generateJavascript(), function () {
$downloadBtn.removeClass('loading')
setTimeout(function () {
generateUrl()
}, 1)
setTimeout(generateUrl, 500)
})
})
@@ -167,9 +216,27 @@ window.onload = function () { // wait for load in a dumb way because B-0
inputsVariables.val('')
})
try {
parseUrl()
} catch (e) {
// maybe alert user that we can't parse their url
}
$('[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()
}
assets/js/jquery.bbq.min.js
Vendored
-1287
View File
File diff suppressed because it is too large Load Diff
assets/js/jquery.js
Vendored
+6 -5
View File
File diff suppressed because one or more lines are too long
components.html
+122 -119
View File
@@ -11,7 +11,7 @@ base_url: "../"
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="dropdowns">Dropdown menus</h1>
<h1 id="dropdowns">Dropdowns</h1>
</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>
@@ -42,7 +42,7 @@ base_url: "../"
</div>
{% 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>
{% highlight html %}
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
@@ -50,7 +50,7 @@ base_url: "../"
</ul>
{% 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>
<div class="bs-example">
<div class="dropdown clearfix">
@@ -76,7 +76,7 @@ base_url: "../"
</ul>
{% 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>
<div class="bs-example">
<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>
</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>
<div class="bs-example">
<div class="btn-group" style="margin: 9px 0 5px;">
@@ -129,7 +129,7 @@ base_url: "../"
</div>
{% 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>
<div class="bs-example">
<div class="btn-toolbar" style="margin: 0;">
@@ -157,7 +157,7 @@ base_url: "../"
</div>
{% 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>
<div class="bs-example">
<div class="btn-toolbar">
@@ -196,7 +196,7 @@ base_url: "../"
<div class="btn-group btn-group-xs">...</div>
{% 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>
<div class="bs-example">
<div class="btn-group">
@@ -204,11 +204,11 @@ base_url: "../"
<button type="button" class="btn btn-default">2</button>
<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
<span class="caret"></span>
</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>
</ul>
@@ -233,18 +233,18 @@ base_url: "../"
</div>
{% 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>
<div class="bs-example">
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<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
<span class="caret"></span>
</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>
</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>
<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
<span class="caret"></span>
</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>
</ul>
</div>
<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
<span class="caret"></span>
</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>
</ul>
</div>
<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
<span class="caret"></span>
</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>
</ul>
@@ -289,7 +289,7 @@ base_url: "../"
</div>
{% 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>
<div class="bs-callout bs-callout-warning">
@@ -318,7 +318,7 @@ base_url: "../"
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="btn-dropdowns">Button dropdown menus</h1>
<h1 id="btn-dropdowns">Button dropdowns</h1>
</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>
@@ -332,7 +332,7 @@ base_url: "../"
<div class="bs-example">
<div class="btn-group">
<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="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -342,7 +342,7 @@ base_url: "../"
</div><!-- /btn-group -->
<div class="btn-group">
<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="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -352,7 +352,7 @@ base_url: "../"
</div><!-- /btn-group -->
<div class="btn-group">
<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="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -362,7 +362,7 @@ base_url: "../"
</div><!-- /btn-group -->
<div class="btn-group">
<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="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -372,7 +372,7 @@ base_url: "../"
</div><!-- /btn-group -->
<div class="btn-group">
<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="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -382,7 +382,7 @@ base_url: "../"
</div><!-- /btn-group -->
<div class="btn-group">
<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="#">Another action</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">
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="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -413,7 +413,7 @@ base_url: "../"
<div class="btn-group">
<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>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -424,7 +424,7 @@ base_url: "../"
<div class="btn-group">
<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>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -435,7 +435,7 @@ base_url: "../"
<div class="btn-group">
<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>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -446,7 +446,7 @@ base_url: "../"
<div class="btn-group">
<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>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -457,7 +457,7 @@ base_url: "../"
<div class="btn-group">
<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>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -468,7 +468,7 @@ base_url: "../"
<div class="btn-group">
<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>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -484,7 +484,7 @@ base_url: "../"
<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="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -494,7 +494,7 @@ base_url: "../"
</div>
{% 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>
<div class="bs-example">
<div class="btn-toolbar">
@@ -502,7 +502,7 @@ base_url: "../"
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -516,7 +516,7 @@ base_url: "../"
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -530,7 +530,7 @@ base_url: "../"
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -572,14 +572,14 @@ base_url: "../"
</div>
{% 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>
<div class="bs-example">
<div class="btn-toolbar">
<div class="btn-group dropup">
<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>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -590,7 +590,7 @@ base_url: "../"
<div class="btn-group dropup">
<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>
<ul class="dropdown-menu pull-right">
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</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>
</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">
<div class="input-group">
<span class="input-group-addon">@</span>
@@ -670,7 +670,8 @@ base_url: "../"
</div>
{% 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>
<form class="bs-example bs-example-form" role="form">
<div class="input-group input-group-lg">
@@ -706,7 +707,7 @@ base_url: "../"
{% 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>
<form class="bs-example bs-example-form">
<div class="row">
@@ -750,7 +751,7 @@ base_url: "../"
{% 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>
<form class="bs-example bs-example-form">
<div class="row">
@@ -801,7 +802,7 @@ base_url: "../"
<div class="input-group">
<div class="input-group-btn">
<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="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -817,7 +818,7 @@ base_url: "../"
<input type="text" class="form-control">
<div class="input-group-btn">
<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="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -864,7 +865,7 @@ base_url: "../"
</div><!-- /.row -->
{% 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">
<div class="row">
<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">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -893,7 +894,7 @@ base_url: "../"
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<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="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -981,9 +982,8 @@ base_url: "../"
</ul>
{% 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>
<div class="bs-example">
<ul class="nav nav-tabs nav-justified">
@@ -1007,7 +1007,8 @@ base_url: "../"
</ul>
{% 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>
<div class="bs-callout bs-callout-warning">
@@ -1031,14 +1032,11 @@ base_url: "../"
{% 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>
<hr class="bs-docs-separator">
<h2 id="nav-dropdowns">Dropdowns</h2>
<h2 id="nav-dropdowns">Using dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>
@@ -1051,7 +1049,7 @@ base_url: "../"
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -1086,7 +1084,7 @@ base_url: "../"
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -1140,18 +1138,17 @@ base_url: "../"
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<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="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
@@ -1170,7 +1167,7 @@ base_url: "../"
<li><a href="#">Link</a></li>
<li class="dropdown">
<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="#">Another action</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>
</button>
<a class="navbar-brand" href="#">Title</a>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
@@ -1244,10 +1240,7 @@ base_url: "../"
</div>
<h2 id="navbar-optional-content">Optional navbar content</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>
<h2 id="navbar-buttons">Buttons</h2>
<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">
<nav class="navbar" role="navigation">
@@ -1258,7 +1251,7 @@ base_url: "../"
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse navbar-ex2-collapse">
<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>
{% 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>
<div class="bs-example">
<nav class="navbar" role="navigation">
@@ -1280,7 +1274,7 @@ base_url: "../"
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse navbar-ex3-collapse">
<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>
{% 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>
<div class="bs-example">
<nav class="navbar" role="navigation">
@@ -1302,7 +1297,7 @@ base_url: "../"
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
<a class="navbar-brand" href="#">Brand</a>
</div>
<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>
@@ -1313,15 +1308,13 @@ base_url: "../"
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
{% 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>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>
<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>
<h2 id="navbar-fixed-top">Fixed to top</h2>
<p>Add <code>.navbar-fixed-top</code>.</p>
<div class="bs-example bs-navbar-top-example">
<nav class="navbar navbar-fixed-top" role="navigation">
@@ -1333,7 +1326,7 @@ base_url: "../"
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- 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>
</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>
<div class="bs-example bs-navbar-bottom-example">
<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>
</button>
<a class="navbar-brand" href="#">Title</a>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- 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>
</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>
<div class="bs-example bs-navbar-top-example">
<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>
</button>
<a class="navbar-brand" href="#">Title</a>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
@@ -1433,7 +1428,7 @@ body { padding-bottom: 70px; }
{% 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>
<div class="bs-example">
<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>
</button>
<a class="navbar-brand" href="#">Title</a>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
@@ -1564,7 +1559,7 @@ body { padding-bottom: 70px; }
{% 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>
<div class="bs-example">
<div>
@@ -1767,31 +1762,41 @@ body { padding-bottom: 70px; }
<!-- Typographic components
<!-- Jumbotron
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="type-components">Typographic components</h1>
<h1 id="jumbotron">Jumbotron</h1>
</div>
<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>
<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>
<div class="bs-example">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
<div class="container">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
</div>
{% highlight html %}
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
{% 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>
<div class="bs-example">
<div class="page-header">
@@ -1815,7 +1820,7 @@ body { padding-bottom: 70px; }
</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>
<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>
<div class="bs-example">
<div class="row">
@@ -1852,7 +1857,7 @@ body { padding-bottom: 70px; }
</div>
{% 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>
<div class="bs-example">
<div class="row">
@@ -1862,7 +1867,7 @@ body { padding-bottom: 70px; }
<div class="caption">
<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><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>
@@ -1872,7 +1877,7 @@ body { padding-bottom: 70px; }
<div class="caption">
<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><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>
@@ -1882,7 +1887,7 @@ body { padding-bottom: 70px; }
<div class="caption">
<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><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>
@@ -1896,7 +1901,7 @@ body { padding-bottom: 70px; }
<div class="caption">
<h3>Thumbnail label</h3>
<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>
@@ -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>
</div>
<h3 id="progress-basic">Basic</h3>
<h3 id="progress-basic">Basic example</h3>
<p>Default progress bar with a vertical gradient.</p>
<div class="bs-example">
<div class="progress">
@@ -2259,8 +2264,6 @@ body { padding-bottom: 70px; }
<!-- List group
================================================== -->
<div class="bs-docs-section">
@@ -2269,7 +2272,7 @@ body { padding-bottom: 70px; }
</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>
<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>
<div class="bs-example">
<ul class="list-group">
@@ -2290,7 +2293,7 @@ body { padding-bottom: 70px; }
</ul>
{% 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>
<div class="bs-example">
<ul class="list-group">
@@ -2317,7 +2320,7 @@ body { padding-bottom: 70px; }
</ul>
{% 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>
<div class="bs-example">
<div class="list-group">
@@ -2381,7 +2384,7 @@ body { padding-bottom: 70px; }
</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>
<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>
<div class="bs-example">
<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>
<div class="bs-example">
<div class="panel">
<div class="panel-heading">Panel heading</div>
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
@@ -2418,7 +2421,7 @@ body { padding-bottom: 70px; }
</div>
{% highlight html %}
<div class="panel">
<div class="panel-heading">Panel heading</div>
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
@@ -2435,7 +2438,7 @@ body { padding-bottom: 70px; }
{% endhighlight %}
<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="panel">
<div class="panel-body">
composer.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"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"]
, "homepage": "http://getbootstrap.com"
, "authors": [
css.html
+107 -107
View File
@@ -15,7 +15,7 @@ base_url: "../"
</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>
<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>
{% highlight html %}
<!DOCTYPE html>
@@ -51,10 +51,10 @@ base_url: "../"
</ul>
<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>
<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>
{% highlight html %}
<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>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row show-grid">
<div class="col-md-8">8</div>
<div class="col-md-4">4</div>
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">8</div>
<div class="col-md-4">4</div>
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
{% 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>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-xs-12 col-md-8">8</div>
<div class="col-xs-6 col-md-4">4</div>
<div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-xs-6 col-md-4">4</div>
<div class="col-xs-6 col-md-4">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">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-xs-6 col-md-6">6</div>
<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-xs-6</div>
</div>
</div>
{% highlight html %}
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">8</div>
<div class="col-xs-6 col-md-4">4</div>
<div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">4</div>
<div class="col-xs-6 col-md-4">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">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6 col-md-6">6</div>
<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-xs-6</div>
</div>
{% 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>
<div class="bs-docs-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>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-md-4">4</div>
<div class="col-md-4 col-md-offset-4">4 offset 4</div>
</div><!-- /row -->
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<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">3 offset 3</div>
</div><!-- /row -->
<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">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row show-grid">
<div class="col-md-6 col-md-offset-3">6 offset 3</div>
</div><!-- /row -->
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4 col-md-offset-4">...</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<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">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">.col-md-3 .col-md-offset-3</div>
</div>
<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>
{% 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>
<div class="row show-grid">
<div class="col-md-9">
Level 1: 9 columns
Level 1: .col-md-9
<div class="row show-grid">
<div class="col-md-6">
Level 2: 6 columns
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: 6 columns
Level 2: .col-md-6
</div>
</div>
</div>
@@ -392,13 +392,13 @@ base_url: "../"
{% highlight html %}
<div class="row">
<div class="col-md-9">
Level 1: 9 columns
Level 1: .col-md-9
<div class="row">
<div class="col-md-6">
Level 2: 6 columns
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: 6 columns
Level 2: .col-md-6
</div>
</div>
</div>
@@ -408,14 +408,14 @@ base_url: "../"
<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>
<div class="row show-grid">
<div class="col-md-9 col-md-push-3">9</div>
<div class="col-md-3 col-md-pull-9">3</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">.col-md-3 .col-md-pull-9</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-md-9 col-md-push-3">9</div>
<div class="col-md-3 col-md-pull-9">3</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">.col-md-3 .col-md-pull-9</div>
</div>
{% endhighlight %}
@@ -607,27 +607,27 @@ base_url: "../"
<table class="table">
<tbody>
<tr>
<td><h1>Bootstrap heading</h1></td>
<td><h1>h1. Bootstrap heading</h1></td>
<td>Semibold 38px</td>
</tr>
<tr>
<td><h2>Bootstrap heading</h2></td>
<td><h2>h2. Bootstrap heading</h2></td>
<td>Semibold 32px</td>
</tr>
<tr>
<td><h3>Bootstrap heading</h3></td>
<td><h3>h3. Bootstrap heading</h3></td>
<td>Semibold 24px</td>
</tr>
<tr>
<td><h4>Bootstrap heading</h4></td>
<td><h4>h4. Bootstrap heading</h4></td>
<td>Semibold 18px</td>
</tr>
<tr>
<td><h5>Bootstrap heading</h5></td>
<td><h5>h5. Bootstrap heading</h5></td>
<td>Semibold 14px</td>
</tr>
<tr>
<td><h6>Bootstrap heading</h6></td>
<td><h6>h6. Bootstrap heading</h6></td>
<td>Semibold 12px</td>
</tr>
</tbody>
@@ -1061,10 +1061,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2>Optional classes</h2>
<p>Add any of the following classes to the <code>.table</code> base class.</p>
<h3 id="tables-striped">Striped</h3>
<h2 id="tables-striped">Striped rows</h2>
<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">
<h4>Cross-browser compatibility</h4>
@@ -1108,7 +1105,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table>
{% 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>
<div class="bs-example">
<table class="table table-bordered">
@@ -1152,7 +1150,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table>
{% 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>
<div class="bs-example">
<table class="table table-hover">
@@ -1192,7 +1191,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% 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>
<div class="bs-example">
<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>
<div class="bs-table-scrollable">
<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 %}
<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>
<div class="bs-callout bs-callout-danger">
<h4>Requires custom widths</h4>
@@ -1451,6 +1450,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form>
{% endhighlight %}
<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>
<form class="bs-example form-horizontal">
@@ -1513,7 +1513,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% 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>
<h3>Inputs</h3>
@@ -1647,8 +1647,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2 id="forms-controls-static">Static text in horizontal forms</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>
<h2 id="forms-controls-static">Static control</h2>
<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">
<div class="form-group">
<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 %}
<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>
<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>
</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>
<div class="bs-example">
<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>
{% 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>
<div class="bs-example">
<p>
@@ -1997,7 +1997,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</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>
<form class="bs-example">
<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 %}
<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 %}
<div class="pull-left">...</div>
{% endhighlight %}
{% highlight css %}
.pull-left {
float: left;
float: left !important;
}
{% endhighlight %}
<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 %}
<div class="pull-right">...</div>
{% endhighlight %}
{% highlight css %}
.pull-right {
float: right;
float: right !important;
}
{% endhighlight %}
<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 %}
<div class="clearfix">...</div>
{% endhighlight %}
customize.html
+296 -291
View File
File diff suppressed because one or more lines are too long
dist/css/bootstrap-theme.css
Vendored
+384
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);
}
dist/css/bootstrap-theme.min.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
dist/css/bootstrap.css
Vendored
+1769 -1728
View File
File diff suppressed because it is too large Load Diff
dist/css/bootstrap.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/js/bootstrap.js
Vendored
+18 -12
View File
@@ -49,7 +49,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this
var called = false, $el = this
$(this).one($.support.transition.end, function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
@@ -711,7 +711,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
clearMenus()
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
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
@@ -723,9 +723,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
$parent
.toggleClass('open')
.trigger('shown.bs.dropdown')
}
$this.focus()
$this.focus()
}
return false
}
@@ -851,7 +851,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var Modal = function (element, options) {
this.options = options
this.$element = $(element).on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.$element = $(element)
this.$backdrop =
this.isShown = null
@@ -880,6 +880,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
this.escape()
this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.backdrop(function () {
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 })
transition ?
that.$element
that.$element.find('.modal-dialog') // wait for modal to slide in
.one($.support.transition.end, function () {
that.$element.focus().trigger(e)
})
@@ -1064,7 +1066,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
})
$(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') })
}(window.jQuery);
@@ -1179,10 +1181,11 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
clearTimeout(self.timeout)
self.hoverState = 'in'
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()
}, self.options.delay.show)
}
@@ -1193,10 +1196,11 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
clearTimeout(self.timeout)
self.hoverState = 'out'
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()
}, self.options.delay.hide)
}
@@ -1329,7 +1333,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var $tip = this.tip()
var e = $.Event('hide.bs.' + this.type)
function complete() { $tip.detach() }
function complete() {
if (that.hoverState != 'in') $tip.detach()
}
this.$element.trigger(e)
dist/js/bootstrap.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/carousel/carousel.css
+10 -16
View File
@@ -78,25 +78,9 @@ body {
.featurette-divider {
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 */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
@@ -131,4 +115,14 @@ body {
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}
examples/carousel/index.html
+31 -19
View File
@@ -69,7 +69,7 @@
</ol>
<div class="carousel-inner">
<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="carousel-caption">
<h1>Example headline.</h1>
@@ -79,7 +79,7 @@
</div>
</div>
<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="carousel-caption">
<h1>Another example headline.</h1>
@@ -89,7 +89,7 @@
</div>
</div>
<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="carousel-caption">
<h1>One more for good measure.</h1>
@@ -114,19 +114,19 @@
<!-- Three columns of text below the carousel -->
<div class="row">
<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>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-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>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-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>
<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>
@@ -138,26 +138,38 @@
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
<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>
<div class="row featurette">
<div class="col-md-7">
<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>
</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">
<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 class="row featurette">
<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="featurette">
<img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
<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>
<div class="row featurette">
<div class="col-md-7">
<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>
</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">
@@ -174,11 +186,11 @@
</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>
examples/grid/index.html
+5
View File
@@ -105,5 +105,10 @@
</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>
examples/jumbotron-narrow/index.html
+7 -2
View File
@@ -18,7 +18,7 @@
<body>
<div class="container-narrow">
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
@@ -31,7 +31,7 @@
<div class="jumbotron">
<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><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 class="row marketing">
@@ -64,5 +64,10 @@
</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>
examples/jumbotron-narrow/jumbotron-narrow.css
+5 -4
View File
@@ -31,10 +31,11 @@ body {
border-top: 1px solid #e5e5e5;
}
/* Custom container */
.container-narrow {
margin: 0 auto;
max-width: 700px;
/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
examples/jumbotron/index.html
+12 -6
View File
@@ -59,15 +59,16 @@
</div>
</div>
<div class="container">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<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-large">Learn more &raquo;</a></p>
<p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>
</div>
<div class="container">
<div class="body-content">
<!-- Example row of columns -->
@@ -98,7 +99,12 @@
</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>
</body>
</html>
</html>
examples/jumbotron/jumbotron.css
-4
View File
@@ -13,10 +13,6 @@ body {
/* Responsive: Portrait tablets and up */
@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 */
.body-content {
padding: 0;
examples/justified-nav/index.html
+7 -2
View File
@@ -36,7 +36,7 @@
<div class="jumbotron">
<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><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>
@@ -70,5 +70,10 @@
</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>
</html>
examples/justified-nav/justified-nav.css
+24 -9
View File
@@ -27,8 +27,8 @@ body {
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified {
max-height: 52px;
background-color: #eee;
border-radius: 5px;
border: 1px solid #ccc;
@@ -39,8 +39,7 @@ body {
color: #777;
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid #d5d5d5;
background-color: #e5e5e5; /* Old browsers */
background-repeat: repeat-x; /* Repeat the gradient */
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);
}
.nav-justified > li:first-child > a {
border-left: 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
border-right: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom: 0;
border-radius: 0 0 5px 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 */
@media screen and (min-width: 768px) {
examples/navbar-fixed-top/index.html
+3 -1
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>To see the difference between static and fixed top navbars, just scroll.</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>
</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>
</body>
</html>
examples/navbar-static-top/index.html
+3 -1
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>To see the difference between static and fixed top navbars, just scroll.</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>
</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>
</body>
</html>
examples/navbar/index.html
+35 -34
View File
@@ -5,6 +5,7 @@
<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>Navbar Template for Bootstrap</title>
@@ -21,40 +22,38 @@
<!-- Static navbar -->
<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 class="active"><a href="./">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
<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="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</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 class="active"><a href="./">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
@@ -62,16 +61,18 @@
<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>
<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>
</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>
</body>
</html>
examples/non-responsive/index.html
+47
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>
examples/non-responsive/non-responsive.css
+13
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);
}
examples/offcanvas/index.html
+8 -3
View File
@@ -82,7 +82,7 @@
</div><!--/row-->
</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">
<ul class="nav">
<li>Sidebar</li>
@@ -109,9 +109,14 @@
</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/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="offcanvas.js"></script>
</body>
</html>
</html>
examples/offcanvas/offcanvas.css
+6 -6
View File
@@ -17,7 +17,6 @@ footer {
@media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
overflow: hidden; /* Needed for Internet Explorer */
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
@@ -25,24 +24,25 @@ footer {
.row-offcanvas-right
.sidebar-offcanvas {
right: -58.333333333333336%; /* 6 columns */
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -58.333333333333336%; /* 6 columns */
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 58.333333333333336%; /* 6 columns */
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 58.333333333333336%; /* 6 columns */
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
width: 58.333333333333336%; /* 6 columns */
top: 0;
width: 50%; /* 6 columns */
}
}
examples/screenshots/carousel.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 139 KiB

After

Width:  |  Height:  |  Size: 80 KiB

examples/screenshots/grid.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 158 KiB

After

Width:  |  Height:  |  Size: 98 KiB

examples/screenshots/jumbotron-narrow.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 120 KiB

After

Width:  |  Height:  |  Size: 67 KiB

examples/screenshots/jumbotron.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 76 KiB

examples/screenshots/justified-nav.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 77 KiB

examples/screenshots/navbar-fixed.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 37 KiB

examples/screenshots/navbar-static.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 39 KiB

examples/screenshots/navbar.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 40 KiB

examples/screenshots/non-responsive.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

examples/screenshots/offcanvas.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 110 KiB

examples/screenshots/sign-in.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 13 KiB

examples/screenshots/starter-template.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 22 KiB

examples/screenshots/sticky-footer-navbar.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 38 KiB

examples/screenshots/sticky-footer.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 24 KiB

examples/screenshots/theme.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

examples/signin/index.html
+7 -2
View File
@@ -27,10 +27,15 @@
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</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>
</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>
</html>
examples/starter-template/index.html
+6 -1
View File
@@ -47,7 +47,12 @@
</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>
</body>
</html>
</html>
examples/sticky-footer-navbar/index.html
+4 -1
View File
@@ -70,9 +70,12 @@
</div>
</div>
<!-- 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>
</body>
</html>
</html>
examples/sticky-footer/index.html
+6 -1
View File
@@ -37,5 +37,10 @@
</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>
</html>
</html>
examples/theme/index.html
+382
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>
examples/theme/theme.css
+14
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;
}
getting-started.html
+28 -7
View File
@@ -15,7 +15,7 @@ base_url: "../"
</div>
<p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<h3>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><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>
-->
<h3 id="download-options">More download options</h3>
<h3 id="download-additional">Additional downloads</h3>
<div class="bs-docs-dl-options">
<h4>
<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 %}
</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>
{% highlight html linenos %}
<!-- Latest compiled and minified CSS -->
@@ -234,7 +234,22 @@ bootstrap/
<h4>Carousel</h4>
<p>Customize the navbar and carousel, then add some new components.</p>
</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>
@@ -247,13 +262,13 @@ bootstrap/
<div class="page-header">
<h1 id="disable-responsive">Disabling responsiveness</h1>
</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>
<p>To disable responsive features, follow these steps. See it in action in the modified template below.</p>
<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>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>
</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>
@@ -273,7 +288,10 @@ bootstrap/
<!-- 2. Add our custom CSS to set the container's fixed width -->
<style>
.container { max-width: 940px; }
.container {
max-width: none !important;
width: 970px;
}
</style>
</head>
<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>
<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>
<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>
<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">
<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>
<h3>Removing potential bloat</h3>
javascript.html
+23 -23
View File
@@ -541,12 +541,12 @@ $('#myDropdown').on('show.bs.dropdown', function () {
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</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="#one">one</a></li>
<li><a href="#two">two</a></li>
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
<li><a href="#one" tabindex="-1">one</a></li>
<li><a href="#two" tabindex="-1">two</a></li>
<li class="divider"></li>
<li><a href="#three">three</a></li>
<li><a href="#three" tabindex="-1">three</a></li>
</ul>
</li>
</ul>
@@ -663,10 +663,10 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () {
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</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="#dropdown1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
</ul>
</li>
</ul>
@@ -1104,7 +1104,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<td>string | false</td>
<td>false</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>
</tr>
</tbody>
@@ -1415,11 +1415,11 @@ $('.nav-tabs').button()
<div class="panel-group" id="accordion">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h3>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
@@ -1429,11 +1429,11 @@ $('.nav-tabs').button()
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h3>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
@@ -1443,11 +1443,11 @@ $('.nav-tabs').button()
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h3>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
@@ -1461,11 +1461,11 @@ $('.nav-tabs').button()
<div class="panel-group" id="accordion">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h3>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
@@ -1475,11 +1475,11 @@ $('.nav-tabs').button()
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h3>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
@@ -1489,11 +1489,11 @@ $('.nav-tabs').button()
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h3>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
@@ -1903,7 +1903,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<td>offset</td>
<td>number | function | object</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>
</tbody>
</table>
js/dropdown.js
+3 -3
View File
@@ -40,7 +40,7 @@
clearMenus()
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
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
@@ -52,9 +52,9 @@
$parent
.toggleClass('open')
.trigger('shown.bs.dropdown')
}
$this.focus()
$this.focus()
}
return false
}
js/modal.js
+5 -3
View File
@@ -25,7 +25,7 @@
var Modal = function (element, options) {
this.options = options
this.$element = $(element).on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.$element = $(element)
this.$backdrop =
this.isShown = null
@@ -54,6 +54,8 @@
this.escape()
this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')
@@ -76,7 +78,7 @@
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$element
that.$element.find('.modal-dialog') // wait for modal to slide in
.one($.support.transition.end, function () {
that.$element.focus().trigger(e)
})
@@ -238,7 +240,7 @@
})
$(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') })
}(window.jQuery);
js/tests/unit/modal.js
+19
View File
@@ -174,4 +174,23 @@ $(function () {
})
.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()
})
})
js/tests/vendor/jquery.js
Vendored
+6 -5
View File
File diff suppressed because one or more lines are too long
js/tooltip.js
+9 -5
View File
@@ -108,10 +108,11 @@
clearTimeout(self.timeout)
self.hoverState = 'in'
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()
}, self.options.delay.show)
}
@@ -122,10 +123,11 @@
clearTimeout(self.timeout)
self.hoverState = 'out'
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()
}, self.options.delay.hide)
}
@@ -258,7 +260,9 @@
var $tip = this.tip()
var e = $.Event('hide.bs.' + this.type)
function complete() { $tip.detach() }
function complete() {
if (that.hoverState != 'in') $tip.detach()
}
this.$element.trigger(e)
js/transition.js
+1 -1
View File
@@ -42,7 +42,7 @@
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this
var called = false, $el = this
$(this).one($.support.transition.end, function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
less/bootstrap.less
Vendored
+17 -22
View File
@@ -21,43 +21,38 @@
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
// Components: common
// Components
@import "component-animations.less";
@import "input-groups.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 "panels.less";
@import "wells.less";
@import "close.less";
// Components: Nav
@import "navs.less";
@import "navbar.less";
@import "button-groups.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
// Components: Popovers
// Components w/ JavaScript
@import "modals.less";
@import "tooltip.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 "jumbotron.less";
// Utility classes
@import "utilities.less"; // Has to be last to override when necessary
@import "utilities.less";
@import "responsive-utilities.less";
less/dropdowns.less
+6 -1
View File
@@ -13,6 +13,9 @@
border-top: @caret-width-base solid @dropdown-caret-color;
border-right: @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: "";
}
@@ -161,7 +164,9 @@
.navbar-fixed-bottom .dropdown {
// Reverse the 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;
content: "";
}
less/grid.less
+2 -2
View File
@@ -272,9 +272,9 @@
// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg-desktop) {
.container {
max-width: @container-large-desktop;
max-width: @container-lg-desktop;
}
.col-lg-1,
less/jumbotron.less
+13 -2
View File
@@ -11,6 +11,7 @@
line-height: (@line-height-base * 1.5);
color: @jumbotron-lead-color;
background-color: @jumbotron-bg;
h1 {
line-height: 1;
color: @jumbotron-heading-color;
@@ -19,9 +20,19 @@
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) {
padding: 50px 60px;
border-radius: @border-radius-large; // Only round corners at higher resolutions
padding-top: 50px;
padding-bottom: 50px;
.container & {
padding-left: 60px;
padding-right: 60px;
}
h1 {
font-size: (@font-size-base * 4.5);
}
less/mixins.less
+16 -26
View File
@@ -524,26 +524,16 @@
.container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
.clearfix();
}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
.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
@@ -568,7 +558,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
float: left;
width: percentage((@columns / @grid-columns));
}
@@ -576,17 +566,17 @@
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
right: percentage((@columns / @grid-columns));
}
}
@@ -601,7 +591,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
float: left;
width: percentage((@columns / @grid-columns));
}
@@ -609,17 +599,17 @@
// Generate the large column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
right: percentage((@columns / @grid-columns));
}
}
@@ -634,7 +624,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
float: left;
width: percentage((@columns / @grid-columns));
}
@@ -642,17 +632,17 @@
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
right: percentage((@columns / @grid-columns));
}
}
less/navbar.less
+34 -25
View File
@@ -30,8 +30,6 @@
// styling of responsive aspects.
.navbar-header {
padding-left: @navbar-padding-horizontal;
padding-right: @navbar-padding-horizontal;
.clearfix();
@media (min-width: @grid-float-breakpoint) {
@@ -51,24 +49,21 @@
// content for the user's viewport.
.navbar-collapse {
max-height: 340px;
overflow-x: visible;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
border-top: 1px solid darken(@navbar-bg, 7%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
// Clear floated elements and prevent collapsing of padding
.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;
&.in {
overflow-y: auto;
}
@media (min-width: @grid-float-breakpoint) {
width: auto;
padding-right: 0;
padding-left: 0;
border-top: 0;
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
//
@@ -127,8 +138,7 @@
.navbar-brand {
float: left;
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large;
line-height: @line-height-computed;
color: @navbar-brand-color;
@@ -138,6 +148,12 @@
text-decoration: none;
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 {
position: relative;
float: right;
margin-right: @navbar-padding-horizontal;
padding: 9px 10px;
.navbar-vertical-align(34px);
background-color: transparent;
@@ -173,9 +190,6 @@
}
@media (min-width: @grid-float-breakpoint) {
position: relative;
top: auto;
left: auto;
display: none;
}
}
@@ -187,10 +201,7 @@
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
padding-top: (@navbar-padding-vertical / 2);
padding-bottom: (@navbar-padding-vertical / 2);
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
> li > a {
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
.open .dropdown-menu {
position: static;
@@ -267,8 +278,6 @@
@media (min-width: @grid-float-breakpoint) {
float: left;
margin: 0;
padding-top: 0;
padding-bottom: 0;
> li {
float: left;
@@ -317,7 +326,7 @@
.form-inline();
.form-group {
@media (max-width: @screen-phone-max) {
@media (max-width: @screen-xs-max) {
margin-bottom: 5px;
}
}
@@ -518,7 +527,7 @@
}
}
@media (max-width: @screen-phone-max) {
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
less/navs.less
+9 -3
View File
@@ -154,14 +154,20 @@
.nav-justified {
width: 100%;
> li {
float: none;
display: table-cell;
width: 1%;
> a {
> a {
text-align: center;
}
}
@media (min-width: @screen-sm) {
> li {
display: table-cell;
width: 1%;
}
}
}
// Move borders to anchors instead of bottom of list
less/pager.less
+1 -1
View File
@@ -23,7 +23,7 @@
> a:hover,
> a:focus {
text-decoration: none;
background-color: @pagination-active-bg;
background-color: @pagination-hover-bg;
}
}
less/panels.less
+2 -1
View File
@@ -15,6 +15,7 @@
// Panel contents
.panel-body {
padding: 15px;
.clearfix();
}
// List groups in panels
@@ -59,7 +60,7 @@
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: (@font-size-base * 1.25);
font-size: ceil((@font-size-base * 1.125));
> a {
color: inherit;
}
less/responsive-utilities.less
+24 -25
View File
@@ -37,98 +37,98 @@
.visible-xs {
.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();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
.visible-sm {
.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();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
.visible-md {
.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();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
.visible-lg {
.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();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-xs {
.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();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-sm {
.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();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-md {
.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();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-lg {
.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();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
@@ -137,7 +137,6 @@
.visible-print {
.responsive-invisibility();
}
.hidden-print { }
@media print {
.visible-print {
less/tables.less
+9
View File
@@ -35,6 +35,7 @@ th {
// Bottom align for column headings
thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid @table-border-color;
}
// Remove top border from thead by default
caption + thead,
@@ -92,6 +93,14 @@ th {
}
}
}
> thead {
> tr {
> th,
> td {
border-bottom-width: 2px;
}
}
}
}
less/theme.less
+232
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);
}
less/variables.less
+14 -15
View File
@@ -193,26 +193,25 @@
// --------------------------------------------------
// Extra small screen / phone
@screen-xsmall: 480px;
@screen-phone: @screen-xsmall;
@screen-xs: 480px;
@screen-phone: @screen-xs;
// Small screen / tablet
@screen-small: 768px;
@screen-tablet: @screen-small;
@screen-sm: 768px;
@screen-tablet: @screen-sm;
// Medium screen / desktop
@screen-medium: 992px;
@screen-desktop: @screen-medium;
@screen-md: 992px;
@screen-desktop: @screen-md;
// Large screen / wide desktop
@screen-large: 1200px;
@screen-large-desktop: @screen-large;
@screen-lg: 1200px;
@screen-lg-desktop: @screen-lg;
// So media queries don't overlap when required, provide a maximum
@screen-phone-max: (@screen-small - 1);
@screen-small-max: (@screen-medium - 1);
@screen-tablet-max: (@screen-desktop - 1);
@screen-desktop-max: (@screen-large-desktop - 1);
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
// Grid system
@@ -600,10 +599,10 @@
// --------------------------------------------------
// Small screen / tablet
@container-tablet: 720px;
@container-tablet: ((720px + @grid-gutter-width));
// Medium screen / desktop
@container-desktop: 940px;
@container-desktop: ((940px + @grid-gutter-width));
// Large screen / wide desktop
@container-large-desktop: 1140px;
@container-lg-desktop: ((1140px + @grid-gutter-width));