rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-11 03:52:27 +01:00
Code Issues Actions Packages Releases Activity

Merge branch '3.0.0-wip' into gh-pages

Browse Source 
Conflicts:
	components.html
This commit is contained in:
Mark Otto 2013-08-13 16:11:26 -07:00
commit 17f9ddd8ec
67 changed files with 6757 additions and 2102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -33,6 +33,9 @@ nbproject
*.komodoproject
.komodotools
# grunt-html-validation
validation-staus.json
# Folders to ignore
.hg
.svn

6
.travis.yml
View File

@ -2,4 +2,10 @@ language: node_js
node_js:
- 0.8
before_script:
- gem install jekyll
- npm install -g grunt-cli
env:
global:
- secure: Besg41eyU+2mfxrywQ4ydOShMdc34ImaO0S0ENP+aCOBuyNBIgP59wy5tBMmyai2/8eInYeVps4Td96mWInMMxzTe3Bar7eTLG5tWVKRSr/wc4NBPZ/ppoPAmCEsz9Y+VptRH9/FO8n7hsL9EFZ+xBKbG+C0SccGoyBDpA5j7/w=
- secure: Ptiv7phCImFP3ALIz+sMQzrZg8k7C1gLZbFBhWxjnQr3g06wIfX3Ls5y9OHvxid+lOZZjISui3wzBVgpVHqwHUYf96+r0mo6/mJ+F4ffUmShZANVaIMD/JRTnXhUQJbvntGLvxn1EYWPdNM+2IHJrMipnjHxU9tkgAnlel4Zdew=
- TWBS_HAVE_OWN_BROWSERSTACK_KEY: ""

53
Gruntfile.js
View File

@ -34,6 +34,7 @@ module.exports = function(grunt) {
src: ['js/tests/unit/*.js']
}
},
concat: {
options: {
banner: '<%= banner %><%= jqueryCheck %>',
@ -57,6 +58,7 @@ module.exports = function(grunt) {
dest: 'dist/js/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '<%= banner %>'
@ -90,6 +92,7 @@ module.exports = function(grunt) {
},
files: ['js/tests/*.html']
},
connect: {
server: {
options: {
@ -99,6 +102,19 @@ module.exports = function(grunt) {
}
},
jekyll: {
docs: {}
},
validation: {
options: {
reset: true,
},
files: {
src: ["_gh_pages/**/*.html"]
}
},
watch: {
src: {
files: '<%= jshint.src.src %>',
@ -124,11 +140,25 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-html-validation');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('browserstack-runner');
// Docs HTML validation task
grunt.registerTask('validate-docs', ['jekyll', 'validation']);
// Test task.
grunt.registerTask('test', ['jshint', 'qunit']);
var testSubtasks = ['jshint', 'qunit', 'validate-docs'];
// Only run BrowserStack tests under Travis
if (process.env.TRAVIS) {
// Only run BrowserStack tests if this is a mainline commit in twbs/bootstrap, or you have your own BrowserStack key
if ((process.env.TRAVIS_REPO_SLUG === 'twbs/bootstrap' && process.env.TRAVIS_PULL_REQUEST === 'false') || process.env.TWBS_HAVE_OWN_BROWSERSTACK_KEY) {
testSubtasks.push('browserstack_runner');
}
}
grunt.registerTask('test', testSubtasks);
// JS distribution task.
grunt.registerTask('dist-js', ['concat', 'uglify']);
@ -141,4 +171,25 @@ module.exports = function(grunt) {
// Default task.
grunt.registerTask('default', ['test', 'dist']);
// task for building customizer
grunt.registerTask('build-customizer', 'Add scripts/less files to customizer.', function () {
var fs = require('fs')
function getFiles(type) {
var files = {}
fs.readdirSync(type)
.filter(function (path) {
return new RegExp('\\.' + type + '$').test(path)
})
.forEach(function (path) {
return files[path] = fs.readFileSync(type + '/' + path, 'utf8')
})
return 'var __' + type + ' = ' + JSON.stringify(files) + '\n'
}
var customize = fs.readFileSync('customize.html', 'utf-8')
var files = '<!-- generated -->\n<script id="files">\n' + getFiles('js') + getFiles('less') + '<\/script>\n<!-- /generated -->'
fs.writeFileSync('customize.html', customize.replace(/<!-- generated -->(.|[\n\r])*<!-- \/generated -->/, files))
});
};

2
README.md
View File

@ -69,7 +69,7 @@ Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`
`grunt dist` creates the `/dist` directory with compiled files. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
#### Tests - `grunt test`
Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). **Requires [phantomjs](https://github.com/ariya/phantomjs/).**
Runs jshint and qunit tests headlessly in [phantomjs](https://github.com/ariya/phantomjs/) (used for CI). **Requires [phantomjs](https://github.com/ariya/phantomjs/).**
#### Watch - `grunt watch`
This is a convenience method for watching just Less files and automatically building them whenever you save.

6
_config.yml
View File

@ -13,7 +13,7 @@ port: 9001
# Custom vars
repo: https://github.com/twbs/bootstrap
download: https://github.com/twbs/bootstrap/archive/3.0.0-wip.zip
download_dist: http://getbootstrap.com/bs-v3.0.0-rc1-dist.zip
download_dist: http://getbootstrap.com/bs-v3.0.0-rc.2-dist.zip
examples: http://examples.getbootstrap.com
examples_repo: https://github.com/twbs/bootstrap-examples
@ -24,5 +24,5 @@ glyphicons_repo: https://github.com/twbs/bootstrap-glyphicons
blog: http://blog.getbootstrap.com
expo: http://expo.getbootstrap.com
cdn_css: //netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css
cdn_js: //netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js
cdn_css: //netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css
cdn_js: //netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/js/bootstrap.min.js

8
_includes/footer.html
View File

@ -9,6 +9,14 @@
<script src="{{ page.base_url }}assets/js/application.js"></script>
{% if page.slug == "customize" %}
<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 %}
<!-- Analytics
================================================== -->
<script>

9
_includes/nav-components.html
View File

@ -12,6 +12,8 @@
<ul class="nav">
<li><a href="#btn-groups-single">Basic button group</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-vertical">Vertical variation</a></li>
<li><a href="#btn-groups-justified">Justified link buttons</a></li>
</ul>
@ -50,9 +52,7 @@
<li>
<a href="#navbar">Navbar</a>
<ul class="nav">
<li><a href="#navbar-basic">Basic navbar</a></li>
<li><a href="#navbar-nav">Nav links</a></li>
<li><a href="#navbar-forms">Forms in navbars</a></li>
<li><a href="#navbar-default">Default navbar</a></li>
<li><a href="#navbar-buttons">Buttons in navbars</a></li>
<li><a href="#navbar-text">Text in navbars</a></li>
<li><a href="#navbar-links">Links in navbars</a></li>
@ -60,8 +60,6 @@
<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-responsive">Responsive navbar</a></li>
<li><a href="#navbar-scrollable">Scrollable responsive navbar</a></li>
<li><a href="#navbar-inverted">Inverted navbar</a></li>
</ul>
</li>
@ -94,6 +92,7 @@
<ul class="nav">
<li><a href="#alerts-default">Default alert</a></li>
<li><a href="#alerts-alternatives">Contextual alternatives</a></li>
<li><a href="#alerts-dismissable">Dismissable alerts</a></li>
<li><a href="#alerts-links">Links in alerts</a></li>
</ul>
</li>

1
_includes/nav-css.html
View File

@ -15,6 +15,7 @@
<li>
<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-example-basic">Ex: Stacked-to-horizonal</a></li>
<li><a href="#grid-example-mixed">Ex: Mobile-desktop</a></li>

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

@ -14,6 +14,12 @@
<li>
<a href="#browsers">Browser support</a>
</li>
<li>
<a href="#third-parties">Third party support</a>
</li>
<li>
<a href="#accessibility">Accessibility</a>
</li>
<li>
<a href="#license-faqs">License FAQs</a>
</li>

13
_includes/nav-main.html
View File

@ -1,12 +1,15 @@
<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC1</a>
<div class="nav-collapse collapse bs-navbar-collapse">
<a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC2</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li{% if page.slug == "getting-started" %} class="active"{% endif %}>
<a href="{{ page.base_url }}getting-started">Getting started</a>
@ -24,6 +27,6 @@
<a href="{{ page.base_url }}customize">Customize</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>

4
_includes/social-buttons.html
View File

@ -1,10 +1,10 @@
<div class="bs-social">
<ul class="bs-social-buttons">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>

7
_layouts/customize.html
View File

@ -6,12 +6,13 @@
<!-- 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">
<div class="bs-header" id="content" role="banner">
<div class="container">
<h1>{{ page.title }}</h1>
<p>{{ page.lead }}</p>
@ -22,9 +23,9 @@
<!-- Callout for the old docs link -->
{% include old-bs-docs.html %}
<div class="bs-customize-placeholder">
<div class="container bs-docs-container">
<p class="lead">Until RC2, the Bootstrap 3 customizer will be disabled. In the mean time, snag the <a href="{{ site.repo }}/releases">compiled CSS and JavaScript</a>. Hang tight!</p>
<div class="col-lg-12">
{{ content }}
</div>
</div>

15
_layouts/default.html
View File

@ -6,12 +6,13 @@
<!-- Place anything custom after this. -->
</head>
<body>
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav -->
{% include nav-main.html %}
<!-- Docs page layout -->
<div class="bs-header">
<div class="bs-header" id="content">
<div class="container">
<h1>{{ page.title }}</h1>
<p>{{ page.lead }}</p>
@ -24,8 +25,8 @@
<div class="container bs-docs-container">
<div class="row">
<div class="col-lg-3">
<div class="bs-sidebar">
<div class="col-md-3">
<aside class="bs-sidebar" role="complementary">
<ul class="nav bs-sidenav">
{% if page.slug == "getting-started" %}
{% include nav-getting-started.html %}
@ -39,18 +40,18 @@
{% include nav-customize.html %}
{% endif %}
</ul>
</aside>
</div>
</div>
<div class="col-lg-9">
<main class="col-md-9" role="main">
{{ content }}
</div>
</main>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="bs-footer">
<footer class="bs-footer" role="contentinfo">
{% 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>

5
_layouts/home.html
View File

@ -6,6 +6,7 @@
<!-- Place anything custom after this. -->
</head>
<body class="bs-docs-home">
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav -->
{% include nav-main.html %}
@ -16,7 +17,7 @@
<!-- Callout for the old docs link -->
{% include old-bs-docs.html %}
<div class="container">
<footer class="container" role="contentinfo">
{% include social-buttons.html %}
<ul class="bs-masthead-links">
@ -33,7 +34,7 @@
<a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Bootstrap Expo</a>
</li>
</ul>
</div>
</footer>
<!-- JS and analytics only. -->
{% include footer.html %}

92
assets/css/docs.css
View File

@ -55,6 +55,10 @@ body {
.bs-docs-nav {
background-color: #563d7c;
border-color: #463265;
}
.bs-docs-nav .navbar-collapse {
border-color: #463265;
}
.bs-docs-nav .navbar-brand {
color: #fff;
@ -124,7 +128,7 @@ body {
/* Download button */
.bs-masthead .btn-outline {
margin-top: 20px;
margin-bottom: 5px;
margin-bottom: 20px;
padding: 18px 24px;
font-size: 21px;
}
@ -209,7 +213,7 @@ body {
}
.bs-docs-section + .bs-docs-section {
margin-top: 80px;
padding-top: 80px;
}
/* Ads in page headers */
@ -385,11 +389,10 @@ body {
}
/* Tweak display of the examples */
.bs-example + .prettyprint,
.bs-example + .highlight {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin: 0 -15px;
border-radius: 0;
border-width: 0 0 1px;
}
/* Tweak content of examples for optimum awesome */
@ -414,17 +417,15 @@ body {
}
/* Typography */
.bs-example-type .table td {
.bs-example-type .table td:last-child {
color: #999;
vertical-align: middle;
}
.bs-example-type .table td,
.bs-example-type .table th {
.bs-example-type .table td {
padding: 15px 0;
border-color: #eee;
}
.bs-example-type .table tr:first-child td,
.bs-example-type .table tr:first-child th {
.bs-example-type .table tr:first-child td {
border-top: 0;
}
.bs-example-type h1,
@ -437,11 +438,6 @@ body {
}
/* Forms */
.bs-example.form-inline select,
.bs-example.form-inline input[type="text"],
.bs-example.form-inline input[type="password"] {
width: 180px;
}
.bs-example-control-sizing select,
.bs-example-control-sizing input[type="text"] + input[type="text"] {
margin-top: 10px;
@ -637,17 +633,9 @@ body {
------------------------- */
.responsive-utilities-test {
margin-top: 5px;
padding-left: 0;
list-style: none;
overflow: hidden; /* clear floats */
}
.responsive-utilities-test li {
position: relative;
float: left;
width: 25%;
}
.responsive-utilities-test li + li {
margin-left: 10px;
.responsive-utilities-test .col-xs-6 {
margin-bottom: 10px;
}
.responsive-utilities-test span {
padding: 15px 10px;
@ -720,6 +708,11 @@ body {
.bs-social-buttons .twitter-share-button {
width: 98px !important;
}
/* Style the GitHub buttons via CSS instead of inline attributes */
.github-btn {
border: 0;
overflow: hidden;
}
@ -727,7 +720,7 @@ body {
-------------------------------------------------- */
/* Pseudo :focus state for showing how it looks in the docs */
input.focused {
#focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
@ -809,6 +802,15 @@ input.focused {
border-radius: 4px 4px 0 0;
box-shadow: none;
}
.bs-example + .prettyprint,
.bs-example + .highlight {
margin-top: 0;
margin-left: 0;
margin-right: 0;
border-width: 1px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.carbonad {
margin: 0 !important;
@ -820,10 +822,6 @@ input.focused {
.bs-sidebar {
display: block;
}
/* Show the hidden subnavs when space allows it */
.bs-sidebar .nav > .active > ul {
display: block;
}
/* Tweak display of docs jumbotrons */
.bs-masthead {
@ -848,7 +846,25 @@ input.focused {
/* Tablets/desktops and up */
@media screen and (min-width: 992px) {
.bs-header h1,
.bs-header p {
margin-right: 380px;
}
.carbonad {
position: absolute;
top: 20px;
right: 0;
padding: 15px !important;
width: 330px !important;
min-height: 132px;
}
}
@media screen and (min-width: 992px) and (min-height: 700px) {
/* Show the hidden subnavs when space allows it */
.bs-sidebar .nav > .active > ul {
display: block;
}
/* Widen the fixed sidebar */
.bs-sidebar.affix,
.bs-sidebar.affix-bottom {
@ -866,18 +882,6 @@ input.focused {
margin-top: 0;
margin-bottom: 0;
}
.bs-header h1,
.bs-header p {
margin-right: 380px;
}
.carbonad {
position: absolute;
top: 20px;
right: 0;
padding: 15px !important;
width: 330px !important;
min-height: 132px;
}
}
/* Large desktops and up */
@ -886,7 +890,7 @@ input.focused {
/* Widen the fixed sidebar again */
.bs-sidebar.affix-bottom,
.bs-sidebar.affix {
width: 270px;
width: 263px;
}
}

86
assets/js/application.js
View File

@ -16,6 +16,10 @@
offset: navHeight
})
$window.on('load', function () {
$body.scrollspy('refresh')
})
$('.bs-docs-container [href=#]').click(function (e) {
e.preventDefault()
})
@ -73,88 +77,6 @@
// carousel demo
$('.bs-docs-carousel-example').carousel()
// javascript build logic
var inputsComponent = $("#less input")
, inputsPlugin = $("#plugins input")
, inputsVariables = $("#less-variables input")
// toggle all plugin checkboxes
$('#less .toggle').on('click', function (e) {
e.preventDefault()
inputsComponent.prop('checked', !inputsComponent.is(':checked'))
})
$('#plugins .toggle').on('click', function (e) {
e.preventDefault()
inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
})
$('#less-variables .toggle').on('click', function (e) {
e.preventDefault()
inputsVariables.val('')
})
// request built javascript
$('.bs-customize-download .btn').on('click', function (e) {
e.preventDefault()
var css = $("#less input:checked")
.map(function () { return this.value })
.toArray()
, js = $("#plugins input:checked")
.map(function () { return this.value })
.toArray()
, vars = {}
$("#less-variables input")
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
$.ajax({
type: 'POST'
, url: /localhost/.test(window.location) ? 'http://localhost:9001' : 'http://bootstrap.herokuapp.com'
, dataType: 'jsonpi'
, params: {
js: js
, css: css
, vars: vars
}
})
})
})
// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
$.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
var url = opts.url;
return {
send: function(_, completeCallback) {
var name = 'jQuery_iframe_' + jQuery.now()
, iframe, form
iframe = $('<iframe>')
.attr('name', name)
.appendTo('head')
form = $('<form>')
.attr('method', opts.type) // GET or POST
.attr('action', url)
.attr('target', name)
$.each(opts.params, function(k, v) {
$('<input>')
.attr('type', 'hidden')
.attr('name', k)
.attr('value', typeof v == 'string' ? v : JSON.stringify(v))
.appendTo(form)
})
form.appendTo('body').submit()
}
}
})
}(window.jQuery)

175
assets/js/customizer.js Normal file
View File

@ -0,0 +1,175 @@
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 generateUrl() {
var vars = {}
$('#less-variables-section input')
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
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()
}
if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
window.location = jQuery.param.querystring('/customize/', data)
}
function parseUrl() {
var data = jQuery.deparam.querystring()
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 (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.vars) {
// todo (fat): vars
}
}
function generateZip(css, js, complete) {
if (!css && !js) return alert('you want to build nothing… o_O')
var zip = new JSZip()
if (css) {
var cssFolder = zip.folder('css')
for (var fileName in css) {
cssFolder.file(fileName, css[fileName])
}
}
if (js) {
var jsFolder = zip.folder('js')
for (var fileName in js) {
jsFolder.file(fileName, js[fileName])
}
}
var content = zip.generate()
location.href = 'data:application/zip;base64,' + content
complete()
}
function generateCustomCSS(vars) {
var result = ''
for (var key in vars) {
result += key + ': ' + vars[key] + ';\n'
}
return result + '\n\n'
}
function generateCSS() {
var $checked = $('#less-section input:checked')
if (!$checked.length) return false
var result = {}
var vars = {}
var css = ''
$('#less-variables-section input')
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
css += __less['variables.less']
if (vars) css += generateCustomCSS(vars)
css += __less['mixins.less']
css += $checked
.map(function () { return __less[this.value] })
.toArray()
.join('\n')
css = css.replace(/@import[^\n]*/gi, '') //strip any imports
try {
var parser = new less.Parser({
paths: ['variables.less', 'mixins.less']
, optimization: 0
, filename: 'bootstrap.css'
}).parse(css, function (err, tree) {
if (err) return alert(err)
result = {
'bootstrap.css' : cw + tree.toCSS(),
'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
}
})
} catch (err) {
return alert(err)
}
return result
}
function generateJavascript() {
var $checked = $('#plugin-section input:checked')
if (!$checked.length) return false
var js = $checked
.map(function () { return __js[this.value] })
.toArray()
.join('\n')
return {
'bootstrap.js': js,
'bootstrap.min.js': cw + uglify(js)
}
}
var $downloadBtn = $('#btn-download').on('click', function (e) {
e.preventDefault()
$downloadBtn.addClass('loading')
generateZip(generateCSS(), generateJavascript(), function () {
$downloadBtn.removeClass('loading')
setTimeout(function () {
generateUrl()
}, 1)
})
})
var inputsComponent = $('#less-section input')
var inputsPlugin = $('#plugin-section input')
var inputsVariables = $('#less-variables-section input')
$('#less-section .toggle').on('click', function (e) {
e.preventDefault()
inputsComponent.prop('checked', !inputsComponent.is(':checked'))
})
$('#plugin-section .toggle').on('click', function (e) {
e.preventDefault()
inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
})
$('#less-variables-section .toggle').on('click', function (e) {
e.preventDefault()
inputsVariables.val('')
})
try {
parseUrl()
} catch (e) {
// maybe alert user that we can't parse their url
}
}

1287
assets/js/jquery.bbq.min.js vendored Normal file
View File

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

1425
assets/js/jszip.js Normal file
View File

@ -0,0 +1,1425 @@
/**
JSZip - A Javascript class for generating and reading zip files
<http://stuartk.com/jszip>
(c) 2009-2012 Stuart Knightley <stuart [at] stuartk.com>
Dual licenced under the MIT license or GPLv3. See LICENSE.markdown.
Usage:
zip = new JSZip();
zip.file("hello.txt", "Hello, World!").file("tempfile", "nothing");
zip.folder("images").file("smile.gif", base64Data, {base64: true});
zip.file("Xmas.txt", "Ho ho ho !", {date : new Date("December 25, 2007 00:00:01")});
zip.remove("tempfile");
base64zip = zip.generate();
**/
"use strict";
/**
* Representation a of zip file in js
* @constructor
* @param {String=|ArrayBuffer=|Uint8Array=|Buffer=} data the data to load, if any (optional).
* @param {Object=} options the options for creating this objects (optional).
*/
var JSZip = function(data, options) {
// object containing the files :
// {
// "folder/" : {...},
// "folder/data.txt" : {...}
// }
this.files = {};
// Where we are in the hierarchy
this.root = "";
if (data) {
this.load(data, options);
}
};
JSZip.signature = {
LOCAL_FILE_HEADER : "\x50\x4b\x03\x04",
CENTRAL_FILE_HEADER : "\x50\x4b\x01\x02",
CENTRAL_DIRECTORY_END : "\x50\x4b\x05\x06",
ZIP64_CENTRAL_DIRECTORY_LOCATOR : "\x50\x4b\x06\x07",
ZIP64_CENTRAL_DIRECTORY_END : "\x50\x4b\x06\x06",
DATA_DESCRIPTOR : "\x50\x4b\x07\x08"
};
// Default properties for a new file
JSZip.defaults = {
base64: false,
binary: false,
dir: false,
date: null,
compression: null
};
JSZip.prototype = (function () {
/**
* Returns the raw data of a ZipObject, decompress the content if necessary.
* @param {ZipObject} file the file to use.
* @return {String|ArrayBuffer|Uint8Array|Buffer} the data.
*/
var getRawData = function (file) {
if (file._data instanceof JSZip.CompressedObject) {
file._data = file._data.getContent();
file.options.binary = true;
file.options.base64 = false;
if (JSZip.utils.getTypeOf(file._data) === "uint8array") {
var copy = file._data;
// when reading an arraybuffer, the CompressedObject mechanism will keep it and subarray() a Uint8Array.
// if we request a file in the same format, we might get the same Uint8Array or its ArrayBuffer (the original zip file).
file._data = new Uint8Array(copy.length);
// with an empty Uint8Array, Opera fails with a "Offset larger than array size"
if (copy.length !== 0) {
file._data.set(copy, 0);
}
}
}
return file._data;
};
/**
* Returns the data of a ZipObject in a binary form. If the content is an unicode string, encode it.
* @param {ZipObject} file the file to use.
* @return {String|ArrayBuffer|Uint8Array|Buffer} the data.
*/
var getBinaryData = function (file) {
var result = getRawData(file), type = JSZip.utils.getTypeOf(result);
if (type === "string") {
if (!file.options.binary) {
// unicode text !
// unicode string => binary string is a painful process, check if we can avoid it.
if (JSZip.support.uint8array && typeof TextEncoder === "function") {
return TextEncoder("utf-8").encode(result);
}
if (JSZip.support.nodebuffer) {
return new Buffer(result, "utf-8");
}
}
return file.asBinary();
}
return result;
}
/**
* Transform this._data into a string.
* @param {function} filter a function String -> String, applied if not null on the result.
* @return {String} the string representing this._data.
*/
var dataToString = function (asUTF8) {
var result = getRawData(this);
if (result === null || typeof result === "undefined") {
return "";
}
// if the data is a base64 string, we decode it before checking the encoding !
if (this.options.base64) {
result = JSZip.base64.decode(result);
}
if (asUTF8 && this.options.binary) {
// JSZip.prototype.utf8decode supports arrays as input
// skip to array => string step, utf8decode will do it.
result = JSZip.prototype.utf8decode(result);
} else {
// no utf8 transformation, do the array => string step.
result = JSZip.utils.transformTo("string", result);
}
if (!asUTF8 && !this.options.binary) {
result = JSZip.prototype.utf8encode(result);
}
return result;
};
/**
* A simple object representing a file in the zip file.
* @constructor
* @param {string} name the name of the file
* @param {String|ArrayBuffer|Uint8Array|Buffer} data the data
* @param {Object} options the options of the file
*/
var ZipObject = function (name, data, options) {
this.name = name;
this._data = data;
this.options = options;
};
ZipObject.prototype = {
/**
* Return the content as UTF8 string.
* @return {string} the UTF8 string.
*/
asText : function () {
return dataToString.call(this, true);
},
/**
* Returns the binary content.
* @return {string} the content as binary.
*/
asBinary : function () {
return dataToString.call(this, false);
},
/**
* Returns the content as a nodejs Buffer.
* @return {Buffer} the content as a Buffer.
*/
asNodeBuffer : function () {
var result = getBinaryData(this);
return JSZip.utils.transformTo("nodebuffer", result);
},
/**
* Returns the content as an Uint8Array.
* @return {Uint8Array} the content as an Uint8Array.
*/
asUint8Array : function () {
var result = getBinaryData(this);
return JSZip.utils.transformTo("uint8array", result);
},
/**
* Returns the content as an ArrayBuffer.
* @return {ArrayBuffer} the content as an ArrayBufer.
*/
asArrayBuffer : function () {
return this.asUint8Array().buffer;
}
};
/**
* Transform an integer into a string in hexadecimal.
* @private
* @param {number} dec the number to convert.
* @param {number} bytes the number of bytes to generate.
* @returns {string} the result.
*/
var decToHex = function(dec, bytes) {
var hex = "", i;
for(i = 0; i < bytes; i++) {
hex += String.fromCharCode(dec&0xff);
dec=dec>>>8;
}
return hex;
};
/**
* Merge the objects passed as parameters into a new one.
* @private
* @param {...Object} var_args All objects to merge.
* @return {Object} a new object with the data of the others.
*/
var extend = function () {
var result = {}, i, attr;
for (i = 0; i < arguments.length; i++) { // arguments is not enumerable in some browsers
for (attr in arguments[i]) {
if (arguments[i].hasOwnProperty(attr) && typeof result[attr] === "undefined") {
result[attr] = arguments[i][attr];
}
}
}
return result;
};
/**
* Transforms the (incomplete) options from the user into the complete
* set of options to create a file.
* @private
* @param {Object} o the options from the user.
* @return {Object} the complete set of options.
*/
var prepareFileAttrs = function (o) {
o = o || {};
if (o.base64 === true && o.binary == null) {
o.binary = true;
}
o = extend(o, JSZip.defaults);
o.date = o.date || new Date();
if (o.compression !== null) o.compression = o.compression.toUpperCase();
return o;
};
/**
* Add a file in the current folder.
* @private
* @param {string} name the name of the file
* @param {String|ArrayBuffer|Uint8Array|Buffer} data the data of the file
* @param {Object} o the options of the file
* @return {Object} the new file.
*/
var fileAdd = function (name, data, o) {
// be sure sub folders exist
var parent = parentFolder(name), dataType = JSZip.utils.getTypeOf(data);
if (parent) {
folderAdd.call(this, parent);
}
o = prepareFileAttrs(o);
if (o.dir || data === null || typeof data === "undefined") {
o.base64 = false;
o.binary = false;
data = null;
} else if (dataType === "string") {
if (o.binary && !o.base64) {
// optimizedBinaryString == true means that the file has already been filtered with a 0xFF mask
if (o.optimizedBinaryString !== true) {
// this is a string, not in a base64 format.
// Be sure that this is a correct "binary string"
data = JSZip.utils.string2binary(data);
}
}
} else { // arraybuffer, uint8array, ...
o.base64 = false;
o.binary = true;
if (!dataType && !(data instanceof JSZip.CompressedObject)) {
throw new Error("The data of '" + name + "' is in an unsupported format !");
}
// special case : it's way easier to work with Uint8Array than with ArrayBuffer
if (dataType === "arraybuffer") {
data = JSZip.utils.transformTo("uint8array", data);
}
}
return this.files[name] = new ZipObject(name, data, o);
};
/**
* Find the parent folder of the path.
* @private
* @param {string} path the path to use
* @return {string} the parent folder, or ""
*/
var parentFolder = function (path) {
if (path.slice(-1) == '/') {
path = path.substring(0, path.length - 1);
}
var lastSlash = path.lastIndexOf('/');
return (lastSlash > 0) ? path.substring(0, lastSlash) : "";
};
/**
* Add a (sub) folder in the current folder.
* @private
* @param {string} name the folder's name
* @return {Object} the new folder.
*/
var folderAdd = function (name) {
// Check the name ends with a /
if (name.slice(-1) != "/") {
name += "/"; // IE doesn't like substr(-1)
}
// Does this folder already exist?
if (!this.files[name]) {
fileAdd.call(this, name, null, {dir:true});
}
return this.files[name];
};
/**
* Generate a JSZip.CompressedObject for a given zipOject.
* @param {ZipObject} file the object to read.
* @param {JSZip.compression} compression the compression to use.
* @return {JSZip.CompressedObject} the compressed result.
*/
var generateCompressedObjectFrom = function (file, compression) {
var result = new JSZip.CompressedObject(), content;
// the data has not been decompressed, we might reuse things !
if (file._data instanceof JSZip.CompressedObject) {
result.uncompressedSize = file._data.uncompressedSize;
result.crc32 = file._data.crc32;
if (result.uncompressedSize === 0 || file.options.dir) {
compression = JSZip.compressions['STORE'];
result.compressedContent = "";
result.crc32 = 0;
} else if (file._data.compressionMethod === compression.magic) {
result.compressedContent = file._data.getCompressedContent();
} else {
content = file._data.getContent()
// need to decompress / recompress
result.compressedContent = compression.compress(JSZip.utils.transformTo(compression.compressInputType, content));
}
} else {
// have uncompressed data
content = getBinaryData(file);
if (!content || content.length === 0 || file.options.dir) {
compression = JSZip.compressions['STORE'];
content = "";
}
result.uncompressedSize = content.length;
result.crc32 = this.crc32(content);
result.compressedContent = compression.compress(JSZip.utils.transformTo(compression.compressInputType, content));
}
result.compressedSize = result.compressedContent.length;
result.compressionMethod = compression.magic;
return result;
};
/**
* Generate the various parts used in the construction of the final zip file.
* @param {string} name the file name.
* @param {ZipObject} file the file content.
* @param {JSZip.CompressedObject} compressedObject the compressed object.
* @param {number} offset the current offset from the start of the zip file.
* @return {object} the zip parts.
*/
var generateZipParts = function(name, file, compressedObject, offset) {
var data = compressedObject.compressedContent,
utfEncodedFileName = this.utf8encode(file.name),
useUTF8 = utfEncodedFileName !== file.name,
o = file.options,
dosTime,
dosDate;
// date
// @see http://www.delorie.com/djgpp/doc/rbinter/it/52/13.html
// @see http://www.delorie.com/djgpp/doc/rbinter/it/65/16.html
// @see http://www.delorie.com/djgpp/doc/rbinter/it/66/16.html
dosTime = o.date.getHours();
dosTime = dosTime << 6;
dosTime = dosTime | o.date.getMinutes();
dosTime = dosTime << 5;
dosTime = dosTime | o.date.getSeconds() / 2;
dosDate = o.date.getFullYear() - 1980;
dosDate = dosDate << 4;
dosDate = dosDate | (o.date.getMonth() + 1);
dosDate = dosDate << 5;
dosDate = dosDate | o.date.getDate();
var header = "";
// version needed to extract
header += "\x0A\x00";
// general purpose bit flag
// set bit 11 if utf8
header += useUTF8 ? "\x00\x08" : "\x00\x00";
// compression method
header += compressedObject.compressionMethod;
// last mod file time
header += decToHex(dosTime, 2);
// last mod file date
header += decToHex(dosDate, 2);
// crc-32
header += decToHex(compressedObject.crc32, 4);
// compressed size
header += decToHex(compressedObject.compressedSize, 4);
// uncompressed size
header += decToHex(compressedObject.uncompressedSize, 4);
// file name length
header += decToHex(utfEncodedFileName.length, 2);
// extra field length
header += "\x00\x00";
var fileRecord = JSZip.signature.LOCAL_FILE_HEADER + header + utfEncodedFileName;
var dirRecord = JSZip.signature.CENTRAL_FILE_HEADER +
// version made by (00: DOS)
"\x14\x00" +
// file header (common to file and central directory)
header +
// file comment length
"\x00\x00" +
// disk number start
"\x00\x00" +
// internal file attributes TODO
"\x00\x00" +
// external file attributes
(file.options.dir===true?"\x10\x00\x00\x00":"\x00\x00\x00\x00")+
// relative offset of local header
decToHex(offset, 4) +
// file name
utfEncodedFileName;
return {
fileRecord : fileRecord,
dirRecord : dirRecord,
compressedObject : compressedObject
};
};
/**
* An object to write any content to a string.
* @constructor
*/
var StringWriter = function () {
this.data = [];
};
StringWriter.prototype = {
/**
* Append any content to the current string.
* @param {Object} input the content to add.
*/
append : function (input) {
input = JSZip.utils.transformTo("string", input);
this.data.push(input);
},
/**
* Finalize the construction an return the result.
* @return {string} the generated string.
*/
finalize : function () {
return this.data.join("");
}
};
/**
* An object to write any content to an Uint8Array.
* @constructor
* @param {number} length The length of the array.
*/
var Uint8ArrayWriter = function (length) {
this.data = new Uint8Array(length);
this.index = 0;
};
Uint8ArrayWriter.prototype = {
/**
* Append any content to the current array.
* @param {Object} input the content to add.
*/
append : function (input) {
if (input.length !== 0) {
// with an empty Uint8Array, Opera fails with a "Offset larger than array size"
input = JSZip.utils.transformTo("uint8array", input);
this.data.set(input, this.index);
this.index += input.length;
}
},
/**
* Finalize the construction an return the result.
* @return {Uint8Array} the generated array.
*/
finalize : function () {
return this.data;
}
};
// return the actual prototype of JSZip
return {
/**
* Read an existing zip and merge the data in the current JSZip object.
* The implementation is in jszip-load.js, don't forget to include it.
* @param {String|ArrayBuffer|Uint8Array|Buffer} stream The stream to load
* @param {Object} options Options for loading the stream.
* options.base64 : is the stream in base64 ? default : false
* @return {JSZip} the current JSZip object
*/
load : function (stream, options) {
throw new Error("Load method is not defined. Is the file jszip-load.js included ?");
},
/**
* Filter nested files/folders with the specified function.
* @param {Function} search the predicate to use :
* function (relativePath, file) {...}
* It takes 2 arguments : the relative path and the file.
* @return {Array} An array of matching elements.
*/
filter : function (search) {
var result = [], filename, relativePath, file, fileClone;
for (filename in this.files) {
if ( !this.files.hasOwnProperty(filename) ) { continue; }
file = this.files[filename];
// return a new object, don't let the user mess with our internal objects :)
fileClone = new ZipObject(file.name, file._data, extend(file.options));
relativePath = filename.slice(this.root.length, filename.length);
if (filename.slice(0, this.root.length) === this.root && // the file is in the current root
search(relativePath, fileClone)) { // and the file matches the function
result.push(fileClone);
}
}
return result;
},
/**
* Add a file to the zip file, or search a file.
* @param {string|RegExp} name The name of the file to add (if data is defined),
* the name of the file to find (if no data) or a regex to match files.
* @param {String|ArrayBuffer|Uint8Array|Buffer} data The file data, either raw or base64 encoded
* @param {Object} o File options
* @return {JSZip|Object|Array} this JSZip object (when adding a file),
* a file (when searching by string) or an array of files (when searching by regex).
*/
file : function(name, data, o) {
if (arguments.length === 1) {
if (name instanceof RegExp) {
var regexp = name;
return this.filter(function(relativePath, file) {
return !file.options.dir && regexp.test(relativePath);
});
} else { // text
return this.filter(function (relativePath, file) {
return !file.options.dir && relativePath === name;
})[0]||null;
}
} else { // more than one argument : we have data !
name = this.root+name;
fileAdd.call(this, name, data, o);
}
return this;
},
/**
* Add a directory to the zip file, or search.
* @param {String|RegExp} arg The name of the directory to add, or a regex to search folders.
* @return {JSZip} an object with the new directory as the root, or an array containing matching folders.
*/
folder : function(arg) {
if (!arg) {
return this;
}
if (arg instanceof RegExp) {
return this.filter(function(relativePath, file) {
return file.options.dir && arg.test(relativePath);
});
}
// else, name is a new folder
var name = this.root + arg;
var newFolder = folderAdd.call(this, name);
// Allow chaining by returning a new object with this folder as the root
var ret = this.clone();
ret.root = newFolder.name;
return ret;
},
/**
* Delete a file, or a directory and all sub-files, from the zip
* @param {string} name the name of the file to delete
* @return {JSZip} this JSZip object
*/
remove : function(name) {
name = this.root + name;
var file = this.files[name];
if (!file) {
// Look for any folders
if (name.slice(-1) != "/") {
name += "/";
}
file = this.files[name];
}
if (file) {
if (!file.options.dir) {
// file
delete this.files[name];
} else {
// folder
var kids = this.filter(function (relativePath, file) {
return file.name.slice(0, name.length) === name;
});
for (var i = 0; i < kids.length; i++) {
delete this.files[kids[i].name];
}
}
}
return this;
},
/**
* Generate the complete zip file
* @param {Object} options the options to generate the zip file :
* - base64, (deprecated, use type instead) true to generate base64.
* - compression, "STORE" by default.
* - type, "base64" by default. Values are : string, base64, uint8array, arraybuffer, blob.
* @return {String|Uint8Array|ArrayBuffer|Buffer|Blob} the zip file
*/
generate : function(options) {
options = extend(options || {}, {
base64 : true,
compression : "STORE",
type : "base64"
});
JSZip.utils.checkSupport(options.type);
var zipData = [], localDirLength = 0, centralDirLength = 0, writer, i;
// first, generate all the zip parts.
for (var name in this.files) {
if ( !this.files.hasOwnProperty(name) ) { continue; }
var file = this.files[name];
var compressionName = file.compression || options.compression.toUpperCase();
var compression = JSZip.compressions[compressionName];
if (!compression) {
throw new Error(compressionName + " is not a valid compression method !");
}
var compressedObject = generateCompressedObjectFrom.call(this, file, compression);
var zipPart = generateZipParts.call(this, name, file, compressedObject, localDirLength);
localDirLength += zipPart.fileRecord.length + compressedObject.compressedSize;
centralDirLength += zipPart.dirRecord.length;
zipData.push(zipPart);
}
var dirEnd = "";
// end of central dir signature
dirEnd = JSZip.signature.CENTRAL_DIRECTORY_END +
// number of this disk
"\x00\x00" +
// number of the disk with the start of the central directory
"\x00\x00" +
// total number of entries in the central directory on this disk
decToHex(zipData.length, 2) +
// total number of entries in the central directory
decToHex(zipData.length, 2) +
// size of the central directory 4 bytes
decToHex(centralDirLength, 4) +
// offset of start of central directory with respect to the starting disk number
decToHex(localDirLength, 4) +
// .ZIP file comment length
"\x00\x00";
// we have all the parts (and the total length)
// time to create a writer !
switch(options.type.toLowerCase()) {
case "uint8array" :
case "arraybuffer" :
case "blob" :
case "nodebuffer" :
writer = new Uint8ArrayWriter(localDirLength + centralDirLength + dirEnd.length);
break;
case "base64" :
default : // case "string" :
writer = new StringWriter(localDirLength + centralDirLength + dirEnd.length);
break;
}
for (i = 0; i < zipData.length; i++) {
writer.append(zipData[i].fileRecord);
writer.append(zipData[i].compressedObject.compressedContent);
}
for (i = 0; i < zipData.length; i++) {
writer.append(zipData[i].dirRecord);
}
writer.append(dirEnd);
var zip = writer.finalize();
switch(options.type.toLowerCase()) {
// case "zip is an Uint8Array"
case "uint8array" :
case "arraybuffer" :
case "nodebuffer" :
return JSZip.utils.transformTo(options.type.toLowerCase(), zip);
case "blob" :
return JSZip.utils.arrayBuffer2Blob(JSZip.utils.transformTo("arraybuffer", zip));
// case "zip is a string"
case "base64" :
return (options.base64) ? JSZip.base64.encode(zip) : zip;
default : // case "string" :
return zip;
}
},
/**
*
* Javascript crc32
* http://www.webtoolkit.info/
*
*/
crc32 : function crc32(input, crc) {
if (typeof input === "undefined" || !input.length) {
return 0;
}
var isArray = JSZip.utils.getTypeOf(input) !== "string";
var table = [
0x00000000, 0x77073096, 0xEE0E612C, 0x990951BA,
0x076DC419, 0x706AF48F, 0xE963A535, 0x9E6495A3,
0x0EDB8832, 0x79DCB8A4, 0xE0D5E91E, 0x97D2D988,
0x09B64C2B, 0x7EB17CBD, 0xE7B82D07, 0x90BF1D91,
0x1DB71064, 0x6AB020F2, 0xF3B97148, 0x84BE41DE,
0x1ADAD47D, 0x6DDDE4EB, 0xF4D4B551, 0x83D385C7,
0x136C9856, 0x646BA8C0, 0xFD62F97A, 0x8A65C9EC,
0x14015C4F, 0x63066CD9, 0xFA0F3D63, 0x8D080DF5,
0x3B6E20C8, 0x4C69105E, 0xD56041E4, 0xA2677172,
0x3C03E4D1, 0x4B04D447, 0xD20D85FD, 0xA50AB56B,
0x35B5A8FA, 0x42B2986C, 0xDBBBC9D6, 0xACBCF940,
0x32D86CE3, 0x45DF5C75, 0xDCD60DCF, 0xABD13D59,
0x26D930AC, 0x51DE003A, 0xC8D75180, 0xBFD06116,
0x21B4F4B5, 0x56B3C423, 0xCFBA9599, 0xB8BDA50F,
0x2802B89E, 0x5F058808, 0xC60CD9B2, 0xB10BE924,
0x2F6F7C87, 0x58684C11, 0xC1611DAB, 0xB6662D3D,
0x76DC4190, 0x01DB7106, 0x98D220BC, 0xEFD5102A,
0x71B18589, 0x06B6B51F, 0x9FBFE4A5, 0xE8B8D433,
0x7807C9A2, 0x0F00F934, 0x9609A88E, 0xE10E9818,
0x7F6A0DBB, 0x086D3D2D, 0x91646C97, 0xE6635C01,
0x6B6B51F4, 0x1C6C6162, 0x856530D8, 0xF262004E,
0x6C0695ED, 0x1B01A57B, 0x8208F4C1, 0xF50FC457,
0x65B0D9C6, 0x12B7E950, 0x8BBEB8EA, 0xFCB9887C,
0x62DD1DDF, 0x15DA2D49, 0x8CD37CF3, 0xFBD44C65,
0x4DB26158, 0x3AB551CE, 0xA3BC0074, 0xD4BB30E2,
0x4ADFA541, 0x3DD895D7, 0xA4D1C46D, 0xD3D6F4FB,
0x4369E96A, 0x346ED9FC, 0xAD678846, 0xDA60B8D0,
0x44042D73, 0x33031DE5, 0xAA0A4C5F, 0xDD0D7CC9,
0x5005713C, 0x270241AA, 0xBE0B1010, 0xC90C2086,
0x5768B525, 0x206F85B3, 0xB966D409, 0xCE61E49F,
0x5EDEF90E, 0x29D9C998, 0xB0D09822, 0xC7D7A8B4,
0x59B33D17, 0x2EB40D81, 0xB7BD5C3B, 0xC0BA6CAD,
0xEDB88320, 0x9ABFB3B6, 0x03B6E20C, 0x74B1D29A,
0xEAD54739, 0x9DD277AF, 0x04DB2615, 0x73DC1683,
0xE3630B12, 0x94643B84, 0x0D6D6A3E, 0x7A6A5AA8,
0xE40ECF0B, 0x9309FF9D, 0x0A00AE27, 0x7D079EB1,
0xF00F9344, 0x8708A3D2, 0x1E01F268, 0x6906C2FE,
0xF762575D, 0x806567CB, 0x196C3671, 0x6E6B06E7,
0xFED41B76, 0x89D32BE0, 0x10DA7A5A, 0x67DD4ACC,
0xF9B9DF6F, 0x8EBEEFF9, 0x17B7BE43, 0x60B08ED5,
0xD6D6A3E8, 0xA1D1937E, 0x38D8C2C4, 0x4FDFF252,
0xD1BB67F1, 0xA6BC5767, 0x3FB506DD, 0x48B2364B,
0xD80D2BDA, 0xAF0A1B4C, 0x36034AF6, 0x41047A60,
0xDF60EFC3, 0xA867DF55, 0x316E8EEF, 0x4669BE79,
0xCB61B38C, 0xBC66831A, 0x256FD2A0, 0x5268E236,
0xCC0C7795, 0xBB0B4703, 0x220216B9, 0x5505262F,
0xC5BA3BBE, 0xB2BD0B28, 0x2BB45A92, 0x5CB36A04,
0xC2D7FFA7, 0xB5D0CF31, 0x2CD99E8B, 0x5BDEAE1D,
0x9B64C2B0, 0xEC63F226, 0x756AA39C, 0x026D930A,
0x9C0906A9, 0xEB0E363F, 0x72076785, 0x05005713,
0x95BF4A82, 0xE2B87A14, 0x7BB12BAE, 0x0CB61B38,
0x92D28E9B, 0xE5D5BE0D, 0x7CDCEFB7, 0x0BDBDF21,
0x86D3D2D4, 0xF1D4E242, 0x68DDB3F8, 0x1FDA836E,
0x81BE16CD, 0xF6B9265B, 0x6FB077E1, 0x18B74777,
0x88085AE6, 0xFF0F6A70, 0x66063BCA, 0x11010B5C,
0x8F659EFF, 0xF862AE69, 0x616BFFD3, 0x166CCF45,
0xA00AE278, 0xD70DD2EE, 0x4E048354, 0x3903B3C2,
0xA7672661, 0xD06016F7, 0x4969474D, 0x3E6E77DB,
0xAED16A4A, 0xD9D65ADC, 0x40DF0B66, 0x37D83BF0,
0xA9BCAE53, 0xDEBB9EC5, 0x47B2CF7F, 0x30B5FFE9,
0xBDBDF21C, 0xCABAC28A, 0x53B39330, 0x24B4A3A6,
0xBAD03605, 0xCDD70693, 0x54DE5729, 0x23D967BF,
0xB3667A2E, 0xC4614AB8, 0x5D681B02, 0x2A6F2B94,
0xB40BBE37, 0xC30C8EA1, 0x5A05DF1B, 0x2D02EF8D
];
if (typeof(crc) == "undefined") { crc = 0; }
var x = 0;
var y = 0;
var byte = 0;
crc = crc ^ (-1);
for( var i = 0, iTop = input.length; i < iTop; i++ ) {
byte = isArray ? input[i] : input.charCodeAt(i);
y = ( crc ^ byte ) & 0xFF;
x = table[y];
crc = ( crc >>> 8 ) ^ x;
}
return crc ^ (-1);
},
// Inspired by http://my.opera.com/GreyWyvern/blog/show.dml/1725165
clone : function() {
var newObj = new JSZip();
for (var i in this) {
if (typeof this[i] !== "function") {
newObj[i] = this[i];
}
}
return newObj;
},
/**
* http://www.webtoolkit.info/javascript-utf8.html
*/
utf8encode : function (string) {
// TextEncoder + Uint8Array to binary string is faster than checking every bytes on long strings.
// http://jsperf.com/utf8encode-vs-textencoder
// On short strings (file names for example), the TextEncoder API is (currently) slower.
if (JSZip.support.uint8array && typeof TextEncoder === "function") {
var u8 = TextEncoder("utf-8").encode(string);
return JSZip.utils.transformTo("string", u8);
}
if (JSZip.support.nodebuffer) {
return JSZip.utils.transformTo("string", new Buffer(string, "utf-8"));
}
// array.join may be slower than string concatenation but generates less objects (less time spent garbage collecting).
// See also http://jsperf.com/array-direct-assignment-vs-push/31
var result = [], resIndex = 0;
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
result[resIndex++] = String.fromCharCode(c);
} else if ((c > 127) && (c < 2048)) {
result[resIndex++] = String.fromCharCode((c >> 6) | 192);
result[resIndex++] = String.fromCharCode((c & 63) | 128);
} else {
result[resIndex++] = String.fromCharCode((c >> 12) | 224);
result[resIndex++] = String.fromCharCode(((c >> 6) & 63) | 128);
result[resIndex++] = String.fromCharCode((c & 63) | 128);
}
}
return result.join("");
},
/**
* http://www.webtoolkit.info/javascript-utf8.html
*/
utf8decode : function (input) {
var result = [], resIndex = 0;
var type = JSZip.utils.getTypeOf(input);
var isArray = type !== "string";
var i = 0;
var c = 0, c1 = 0, c2 = 0, c3 = 0;
// check if we can use the TextDecoder API
// see http://encoding.spec.whatwg.org/#api
if (JSZip.support.uint8array && typeof TextDecoder === "function") {
return TextDecoder("utf-8").decode(
JSZip.utils.transformTo("uint8array", input)
);
}
if (JSZip.support.nodebuffer) {
return JSZip.utils.transformTo("nodebuffer", input).toString("utf-8");
}
while ( i < input.length ) {
c = isArray ? input[i] : input.charCodeAt(i);
if (c < 128) {
result[resIndex++] = String.fromCharCode(c);
i++;
} else if ((c > 191) && (c < 224)) {
c2 = isArray ? input[i+1] : input.charCodeAt(i+1);
result[resIndex++] = String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
} else {
c2 = isArray ? input[i+1] : input.charCodeAt(i+1);
c3 = isArray ? input[i+2] : input.charCodeAt(i+2);
result[resIndex++] = String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return result.join("");
}
};
}());
/*
* Compression methods
* This object is filled in as follow :
* name : {
* magic // the 2 bytes indentifying the compression method
* compress // function, take the uncompressed content and return it compressed.
* uncompress // function, take the compressed content and return it uncompressed.
* compressInputType // string, the type accepted by the compress method. null to accept everything.
* uncompressInputType // string, the type accepted by the uncompress method. null to accept everything.
* }
*
* STORE is the default compression method, so it's included in this file.
* Other methods should go to separated files : the user wants modularity.
*/
JSZip.compressions = {
"STORE" : {
magic : "\x00\x00",
compress : function (content) {
return content; // no compression
},
uncompress : function (content) {
return content; // no compression
},
compressInputType : null,
uncompressInputType : null
}
};
/*
* List features that require a modern browser, and if the current browser support them.
*/
JSZip.support = {
// contains true if JSZip can read/generate ArrayBuffer, false otherwise.
arraybuffer : (function(){
return typeof ArrayBuffer !== "undefined" && typeof Uint8Array !== "undefined";
})(),
// contains true if JSZip can read/generate nodejs Buffer, false otherwise.
nodebuffer : (function(){
return typeof Buffer !== "undefined";
})(),
// contains true if JSZip can read/generate Uint8Array, false otherwise.
uint8array : (function(){
return typeof Uint8Array !== "undefined";
})(),
// contains true if JSZip can read/generate Blob, false otherwise.
blob : (function(){
// the spec started with BlobBuilder then replaced it with a construtor for Blob.
// Result : we have browsers that :
// * know the BlobBuilder (but with prefix)
// * know the Blob constructor
// * know about Blob but not about how to build them
// About the "=== 0" test : if given the wrong type, it may be converted to a string.
// Instead of an empty content, we will get "[object Uint8Array]" for example.
if (typeof ArrayBuffer === "undefined") {
return false;
}
var buffer = new ArrayBuffer(0);
try {
return new Blob([buffer], { type: "application/zip" }).size === 0;
}
catch(e) {}
try {
var builder = new (window.BlobBuilder || window.WebKitBlobBuilder ||
window.MozBlobBuilder || window.MSBlobBuilder)();
builder.append(buffer);
return builder.getBlob('application/zip').size === 0;
}
catch(e) {}
return false;
})()
};
(function () {
JSZip.utils = {
/**
* Convert a string to a "binary string" : a string containing only char codes between 0 and 255.
* @param {string} str the string to transform.
* @return {String} the binary string.
*/
string2binary : function (str) {
var result = "";
for (var i = 0; i < str.length; i++) {
result += String.fromCharCode(str.charCodeAt(i) & 0xff);
}
return result;
},
/**
* Create a Uint8Array from the string.
* @param {string} str the string to transform.
* @return {Uint8Array} the typed array.
* @throws {Error} an Error if the browser doesn't support the requested feature.
* @deprecated : use JSZip.utils.transformTo instead.
*/
string2Uint8Array : function (str) {
return JSZip.utils.transformTo("uint8array", str);
},
/**
* Create a string from the Uint8Array.
* @param {Uint8Array} array the array to transform.
* @return {string} the string.
* @throws {Error} an Error if the browser doesn't support the requested feature.
* @deprecated : use JSZip.utils.transformTo instead.
*/
uint8Array2String : function (array) {
return JSZip.utils.transformTo("string", array);
},
/**
* Create a blob from the given ArrayBuffer.
* @param {ArrayBuffer} buffer the buffer to transform.
* @return {Blob} the result.
* @throws {Error} an Error if the browser doesn't support the requested feature.
*/
arrayBuffer2Blob : function (buffer) {
JSZip.utils.checkSupport("blob");
try {
// Blob constructor
return new Blob([buffer], { type: "application/zip" });
}
catch(e) {}
try {
// deprecated, browser only, old way
var builder = new (window.BlobBuilder || window.WebKitBlobBuilder ||
window.MozBlobBuilder || window.MSBlobBuilder)();
builder.append(buffer);
return builder.getBlob('application/zip');
}
catch(e) {}
// well, fuck ?!
throw new Error("Bug : can't construct the Blob.");
},
/**
* Create a blob from the given string.
* @param {string} str the string to transform.
* @return {Blob} the result.
* @throws {Error} an Error if the browser doesn't support the requested feature.
*/
string2Blob : function (str) {
var buffer = JSZip.utils.transformTo("arraybuffer", str);
return JSZip.utils.arrayBuffer2Blob(buffer);
}
};
/**
* The identity function.
* @param {Object} input the input.
* @return {Object} the same input.
*/
function identity(input) {
return input;
};
/**
* Fill in an array with a string.
* @param {String} str the string to use.
* @param {Array|ArrayBuffer|Uint8Array|Buffer} array the array to fill in (will be mutated).
* @return {Array|ArrayBuffer|Uint8Array|Buffer} the updated array.
*/
function stringToArrayLike(str, array) {
for (var i = 0; i < str.length; ++i) {
array[i] = str.charCodeAt(i) & 0xFF;
}
return array;
};
/**
* Transform an array-like object to a string.
* @param {Array|ArrayBuffer|Uint8Array|Buffer} array the array to transform.
* @return {String} the result.
*/
function arrayLikeToString(array) {
// Performances notes :
// --------------------
// String.fromCharCode.apply(null, array) is the fastest, see
// see http://jsperf.com/converting-a-uint8array-to-a-string/2
// but the stack is limited (and we can get huge arrays !).
//
// result += String.fromCharCode(array[i]); generate too many strings !
//
// This code is inspired by http://jsperf.com/arraybuffer-to-string-apply-performance/2
var chunk = 65536;
var result = [], len = array.length, type = JSZip.utils.getTypeOf(array), k = 0;
while (k < len && chunk > 1) {
try {
if (type === "array" || type === "nodebuffer") {
result.push(String.fromCharCode.apply(null, array.slice(k, Math.max(k + chunk, len))));
} else {
result.push(String.fromCharCode.apply(null, array.subarray(k, k + chunk)));
}
k += chunk;
} catch (e) {
chunk = Math.floor(chunk / 2);
}
}
return result.join("");
};
/**
* Copy the data from an array-like to an other array-like.
* @param {Array|ArrayBuffer|Uint8Array|Buffer} arrayFrom the origin array.
* @param {Array|ArrayBuffer|Uint8Array|Buffer} arrayTo the destination array which will be mutated.
* @return {Array|ArrayBuffer|Uint8Array|Buffer} the updated destination array.
*/
function arrayLikeToArrayLike(arrayFrom, arrayTo) {
for(var i = 0; i < arrayFrom.length; i++) {
arrayTo[i] = arrayFrom[i];
}
return arrayTo;
};
// a matrix containing functions to transform everything into everything.
var transform = {};
// string to ?
transform["string"] = {
"string" : identity,
"array" : function (input) {
return stringToArrayLike(input, new Array(input.length));
},
"arraybuffer" : function (input) {
return transform["string"]["uint8array"](input).buffer;
},
"uint8array" : function (input) {
return stringToArrayLike(input, new Uint8Array(input.length));
},
"nodebuffer" : function (input) {
return stringToArrayLike(input, new Buffer(input.length));
}
};
// array to ?
transform["array"] = {
"string" : arrayLikeToString,
"array" : identity,
"arraybuffer" : function (input) {
return (new Uint8Array(input)).buffer;
},
"uint8array" : function (input) {
return new Uint8Array(input);
},
"nodebuffer" : function (input) {
return new Buffer(input);
}
};
// arraybuffer to ?
transform["arraybuffer"] = {
"string" : function (input) {
return arrayLikeToString(new Uint8Array(input));
},
"array" : function (input) {
return arrayLikeToArrayLike(new Uint8Array(input), new Array(input.byteLength));
},
"arraybuffer" : identity,
"uint8array" : function (input) {
return new Uint8Array(input);
},
"nodebuffer" : function (input) {
return new Buffer(new Uint8Array(input));
}
};
// uint8array to ?
transform["uint8array"] = {
"string" : arrayLikeToString,
"array" : function (input) {
return arrayLikeToArrayLike(input, new Array(input.length));
},
"arraybuffer" : function (input) {
return input.buffer;
},
"uint8array" : identity,
"nodebuffer" : function(input) {
return new Buffer(input);
}
};
// nodebuffer to ?
transform["nodebuffer"] = {
"string" : arrayLikeToString,
"array" : function (input) {
return arrayLikeToArrayLike(input, new Array(input.length));
},
"arraybuffer" : function (input) {
return transform["nodebuffer"]["uint8array"](input).buffer;
},
"uint8array" : function (input) {
return arrayLikeToArrayLike(input, new Uint8Array(input.length));
},
"nodebuffer" : identity
};
/**
* Transform an input into any type.
* The supported output type are : string, array, uint8array, arraybuffer, nodebuffer.
* If no output type is specified, the unmodified input will be returned.
* @param {String} outputType the output type.
* @param {String|Array|ArrayBuffer|Uint8Array|Buffer} input the input to convert.
* @throws {Error} an Error if the browser doesn't support the requested output type.
*/
JSZip.utils.transformTo = function (outputType, input) {
if (!input) {
// undefined, null, etc
// an empty string won't harm.
input = "";
}
if (!outputType) {
return input;
}
JSZip.utils.checkSupport(outputType);
var inputType = JSZip.utils.getTypeOf(input);
var result = transform[inputType][outputType](input);
return result;
};
/**
* Return the type of the input.
* The type will be in a format valid for JSZip.utils.transformTo : string, array, uint8array, arraybuffer.
* @param {Object} input the input to identify.
* @return {String} the (lowercase) type of the input.
*/
JSZip.utils.getTypeOf = function (input) {
if (typeof input === "string") {
return "string";
}
if (input instanceof Array) {
return "array";
}
if (JSZip.support.nodebuffer && Buffer.isBuffer(input)) {
return "nodebuffer";
}
if (JSZip.support.uint8array && input instanceof Uint8Array) {
return "uint8array";
}
if (JSZip.support.arraybuffer && input instanceof ArrayBuffer) {
return "arraybuffer";
}
};
/**
* Throw an exception if the type is not supported.
* @param {String} type the type to check.
* @throws {Error} an Error if the browser doesn't support the requested type.
*/
JSZip.utils.checkSupport = function (type) {
var supported = true;
switch (type.toLowerCase()) {
case "uint8array":
supported = JSZip.support.uint8array;
break;
case "arraybuffer":
supported = JSZip.support.arraybuffer;
break;
case "nodebuffer":
supported = JSZip.support.nodebuffer;
break;
case "blob":
supported = JSZip.support.blob;
break;
}
if (!supported) {
throw new Error(type + " is not supported by this browser");
}
};
})();
(function (){
/**
* Represents an entry in the zip.
* The content may or may not be compressed.
* @constructor
*/
JSZip.CompressedObject = function () {
this.compressedSize = 0;
this.uncompressedSize = 0;
this.crc32 = 0;
this.compressionMethod = null;
this.compressedContent = null;
};
JSZip.CompressedObject.prototype = {
/**
* Return the decompressed content in an unspecified format.
* The format will depend on the decompressor.
* @return {Object} the decompressed content.
*/
getContent : function () {
return null; // see implementation
},
/**
* Return the compressed content in an unspecified format.
* The format will depend on the compressed conten source.
* @return {Object} the compressed content.
*/
getCompressedContent : function () {
return null; // see implementation
}
};
})();
/**
*
* Base64 encode / decode
* http://www.webtoolkit.info/
*
* Hacked so that it doesn't utf8 en/decode everything
**/
JSZip.base64 = (function() {
// private property
var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
return {
// public method for encoding
encode : function(input, utf8) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
}
return output;
},
// public method for decoding
decode : function(input, utf8) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = _keyStr.indexOf(input.charAt(i++));
enc2 = _keyStr.indexOf(input.charAt(i++));
enc3 = _keyStr.indexOf(input.charAt(i++));
enc4 = _keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
return output;
}
};
}());
// enforcing Stuk's coding style
// vim: set shiftwidth=3 softtabstop=3:

9
assets/js/less.js Normal file
View File

File diff suppressed because one or more lines are too long

14
assets/js/uglify.js Normal file
View File

File diff suppressed because one or more lines are too long

2
bower.json
View File

@ -1,7 +1,7 @@
{
"name": "bootstrap",
"version": "3.0.0",
"main": ["./dist/js/bootstrap.min.js", "./dist/js/bootstrap.js", "./dist/css/bootstrap.min.css", "./dist/css/bootstrap.css"],
"main": ["./dist/js/bootstrap.min.js", "./dist/css/bootstrap.min.css"],
"ignore": [
"**/.*"
],

37
browserstack.json Normal file
View File

@ -0,0 +1,37 @@
{
"username": "--secure--",
"key": "--secure--",
"test_path": "js/tests/index.html",
"browsers": [
{
"browser": "firefox",
"browser_version": "latest",
"os": "OS X",
"os_version": "Mountain Lion"
},
{
"browser": "safari",
"browser_version": "latest",
"os": "OS X",
"os_version": "Mountain Lion"
},
{
"browser": "chrome",
"browser_version": "latest",
"os": "OS X",
"os_version": "Mountain Lion"
},
{
"browser": "firefox",
"browser_version": "latest",
"os": "Windows",
"os_version": "7"
},
{
"browser": "chrome",
"browser_version": "latest",
"os": "Windows",
"os_version": "7"
}
]
}

838
components.html
View File

@ -19,24 +19,25 @@ base_url: "../"
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
<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><!-- /example -->
{% highlight html %}
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
<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>
{% endhighlight %}
@ -53,23 +54,24 @@ base_url: "../"
<p>Add a header to label sections of actions in any dropdown menu.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-header">Dropdown header</li>
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a tabindex="-1" href="#">Separated link</a></li>
<a id="dropdownMenu2" 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="dropdownMenu2">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<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" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-header">Dropdown header</li>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
</ul>
{% endhighlight %}
@ -78,18 +80,19 @@ base_url: "../"
<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">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
<li><a tabindex="-1" href="#">Another link</a></li>
<a id="dropdownMenu3" 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="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
<li><a tabindex="-1" href="#">Another link</a></li>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
{% endhighlight %}
</div>
@ -102,7 +105,7 @@ base_url: "../"
<div class="page-header">
<h1 id="btn-groups">Button groups</h1>
</div>
<p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#js-buttons">our buttons plugin</a>.</p>
<p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
<div class="bs-callout bs-callout-info">
<h4>Tooltips &amp; popovers in button groups require special setting</h4>
@ -152,6 +155,39 @@ base_url: "../"
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>
{% endhighlight %}
<h3 id="btn-groups-sizing">Button group 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-group btn-group-lg">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
{% highlight html %}
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
</div>
{% endhighlight %}
<h3 id="btn-groups-nested">Nested button groups</h3>
@ -197,8 +233,48 @@ base_url: "../"
<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">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<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">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<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">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<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">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
{% highlight html %}
@ -532,7 +608,7 @@ base_url: "../"
</div>
<h2 id="input-groups-basic">Basic input group</h2>
<form class="bs-example bs-example-form">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
@ -568,11 +644,11 @@ base_url: "../"
{% endhighlight %}
<h2 id="input-groups-sizes">Optional sizes</h2>
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
<form class="bs-example bs-example-form">
<div class="input-group">
<span class="input-group-addon input-lg">@</span>
<input type="text" class="form-control input-lg" placeholder="Username">
<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">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group">
@ -580,14 +656,14 @@ base_url: "../"
<input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group">
<span class="input-group-addon input-sm">@</span>
<input type="text" class="form-control input-sm" placeholder="Username">
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
</form>
{% highlight html %}
<div class="input-group">
<span class="input-group-addon input-lg">@</span>
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control input-lg" placeholder="Username">
</div>
@ -596,9 +672,9 @@ base_url: "../"
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon input-sm">@</span>
<input type="text" class="form-control input-sm" placeholder="Username">
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
{% endhighlight %}
@ -692,7 +768,7 @@ base_url: "../"
<h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
<p></p>
<form class="bs-example bs-example-form">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
@ -762,7 +838,7 @@ base_url: "../"
{% endhighlight %}
<h2 id="input-groups-buttons-segmented">Segmented dropdown groups</h2>
<form class="bs-example bs-example-form">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
@ -940,6 +1016,7 @@ base_url: "../"
<h3>Tabs with dropdowns</h3>
<div class="bs-example">
<nav class="navbar" role="navigation">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
@ -956,6 +1033,7 @@ base_url: "../"
</ul>
</li>
</ul>
</nav>
</div>
{% highlight html %}
<ul class="nav nav-tabs">
@ -1017,154 +1095,195 @@ base_url: "../"
<h1 id="navbar">Navbar</h1>
</div>
<h2 id="navbar-basic">Basic navbar</h2>
<p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
<h2 id="navbar-default">Default navbar</h2>
<p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
<div class="bs-example">
<div class="navbar">
<nav class="navbar" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</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><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><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<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><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div><!-- /example -->
{% highlight html %}
<div class="navbar">
<nav class="navbar" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</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><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><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" action="" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
{% endhighlight %}
<h2>Navbar components</h2>
<h3 id="navbar-brand">Brand</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<div class="bs-example">
<div class="navbar">
<a class="navbar-brand" href="#">Title</a>
</div>
</div><!-- /example -->
{% highlight html %}
<a class="navbar-brand" href="#">Title</a>
{% endhighlight %}
<h3 id="navbar-nav">Nav links</h3>
<p>Nav items are simple to add via unordered lists.</p>
<div class="bs-example">
<div class="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="disabled"><a href="#">Disabled</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><a href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
{% endhighlight %}
<h3 id="navbar-forms">Forms</h3>
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
<div class="bs-example">
<div class="navbar">
<form class="navbar-form pull-left">
<input type="text" class="form-control" style="width: 200px;">
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4>
<p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div>
<div class="navbar">
<form class="navbar-form pull-left">
<select name="" id="" class="form-control" style="width: 200px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="bs-callout bs-callout-warning">
<h4>Make navbars accessible</h4>
<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
</div>
<div class="navbar">
<form class="navbar-form pull-left">
<input type="text" class="form-control" style="width: 200px;">
<input type="checkbox">
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="navbar">
<form class="navbar-form pull-left">
<input type="text" class="form-control" style="width: 200px;">
<label class="checkbox-inline">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div><!-- /example -->
{% highlight html %}
<form class="navbar-form pull-left">
<input type="text" class="form-control" style="width: 200px;">
<button type="submit" class="btn btn-default">Submit</button>
</form>
{% endhighlight %}
<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>
<p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
<div class="bs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
</div>
<div class="collapse navbar-collapse navbar-ex2-collapse">
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
</div>
</nav>
</div>
{% highlight html %}
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
{% endhighlight %}
<h3 id="navbar-text">Text</h3>
<h3 id="navbar-text">Text in navbars</h3>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
<div class="bs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex3-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
</div>
<div class="collapse navbar-collapse navbar-ex3-collapse">
<p class="navbar-text">Signed in as Mark Otto</p>
</div>
</nav>
</div>
{% highlight html %}
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text">Signed in as Mark Otto</p>
</div>
{% endhighlight %}
<h3 id="navbar-links">Links</h3>
<h3 id="navbar-links">Non-nav links</h3>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<div class="bs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex4-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</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>
</div>
</nav>
</div>
{% highlight html %}
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
{% endhighlight %}
<h3 id="navbar-component-alignment">Component alignment</h3>
<p>Align nav links, forms, buttons, or text, using the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction. To align nav links, put them in a separate <code>&lt;ul&gt;</code> with the respective utility class applied.</p>
<p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code>&lt;ul&gt;</code> with the respective utility class applied.</p>
<p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>
<h2>Optional display variations</h2>
@ -1173,21 +1292,32 @@ base_url: "../"
<h3 id="navbar-fixed-top">Fixed to top</h3>
<p>Add <code>.navbar-fixed-top</code>.</p>
<div class="bs-example bs-navbar-top-example">
<div class="navbar navbar-fixed-top">
<div class="container" style="width: auto;">
<nav class="navbar navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex5-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /example -->
{% highlight html %}
<div class="navbar navbar-fixed-top">
<nav class="navbar navbar-fixed-top" role="navigation">
...
</div>
</nav>
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
@ -1202,21 +1332,32 @@ body { padding-top: 70px; }
<h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
<p>Add <code>.navbar-fixed-bottom</code> instead.</p>
<div class="bs-example bs-navbar-bottom-example">
<div class="navbar navbar-fixed-bottom">
<div class="container" style="width: auto;">
<nav class="navbar navbar-fixed-bottom" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex6-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex6-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /example -->
{% highlight html %}
<div class="navbar navbar-fixed-bottom">
<nav class="navbar navbar-fixed-bottom" role="navigation">
...
</div>
</nav>
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
@ -1231,196 +1372,64 @@ body { padding-bottom: 70px; }
<h3 id="navbar-static-top">Static top navbar</h3>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<div class="bs-example bs-navbar-top-example">
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div><!-- /example -->
{% highlight html %}
<div class="navbar navbar-static-top">
...
</div>
{% endhighlight %}
<h2 id="navbar-responsive">Responsive navbar</h2>
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
<div class="bs-example">
<div class="navbar">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<nav class="navbar navbar-static-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex7-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</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">Dropdown header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav pull-right">
<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><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
</div><!-- /example -->
{% highlight html %}
<div class="navbar">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="navbar-brand" href="#">Title</a>
<!-- Place everything within .nav-collapse to hide it until above 768px -->
<div class="nav-collapse collapse navbar-responsive-collapse">
...
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4>
<p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div>
<h2 id="navbar-scrollable">Scrollable responsive navbar</h2>
<p>For instances where you have too many items in your navbar to fight within the viewport of a small device, add <code>.nav-collapse-scrollable</code> to your navbar's <code>.nav-collapse</code> to set a <code>max-height</code> and smooth scrolling.</p>
<div class="bs-example">
<div class="navbar">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-scroll-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
<div class="collapse nav-collapse nav-collapse-scrollable bs-navbar-scroll-collapse">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex7-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /example -->
{% highlight html %}
<div class="navbar">
<div class="container">
<nav class="navbar navbar-static-top" role="navigation">
...
<div class="collapse nav-collapse nav-collapse-scrollable">
...
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
</nav>
{% endhighlight %}
<h2 id="navbar-inverted">Inverted variation</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-example">
<div class="navbar navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<nav class="navbar navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex8-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex8-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</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">Dropdown header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav pull-right">
<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><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /example -->
{% highlight html %}
<div class="navbar navbar-inverse">
<nav class="navbar navbar-inverse" role="navigation">
...
</div>
</nav>
{% endhighlight %}
</div>
@ -1468,7 +1477,7 @@ body { padding-bottom: 70px; }
</div>
<p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="#pagination-pager">pager alternative</a>.</p>
<h2 id="pagination-default">Standard pagination</h2>
<h2 id="pagination-default">Default pagination</h2>
<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
<div class="bs-example">
<ul class="pagination">
@ -1498,7 +1507,7 @@ body { padding-bottom: 70px; }
<div class="bs-example">
<ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
@ -1509,7 +1518,7 @@ body { padding-bottom: 70px; }
{% highlight html %}
<ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
{% endhighlight %}
@ -1517,7 +1526,7 @@ body { padding-bottom: 70px; }
{% highlight html %}
<ul class="pagination">
<li class="disabled"><span>&laquo;</span></li>
<li class="active"><span>1</span></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
...
</ul>
{% endhighlight %}
@ -1778,22 +1787,22 @@ body { padding-bottom: 70px; }
<div class="row">
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
</div>
@ -1802,7 +1811,7 @@ body { padding-bottom: 70px; }
<div class="row">
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="">
<img data-src="holder.js/100%x180" alt="...">
</a>
</div>
...
@ -1815,7 +1824,7 @@ body { padding-bottom: 70px; }
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
<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>
@ -1825,7 +1834,7 @@ body { padding-bottom: 70px; }
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
<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>
@ -1835,7 +1844,7 @@ body { padding-bottom: 70px; }
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
<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>
@ -1847,9 +1856,9 @@ body { padding-bottom: 70px; }
</div><!-- /.bs-example -->
{% highlight html %}
<div class="row">
<div class="col-lg-3">
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<img data-src="holder.js/300x200" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
@ -1872,40 +1881,30 @@ body { padding-bottom: 70px; }
</div>
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#js-alerts">alerts jQuery plugin</a>.</p>
<h3 id="alerts-default">Default alert</h3>
<h2 id="alerts-default">Default alert</h2>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
<div class="bs-callout bs-callout-warning">
<h4>Ensure proper behavior across all devices</h4>
<p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
</div>
<div class="bs-example">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
{% highlight html %}
<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
{% endhighlight %}
<h3 id="alerts-alternatives">Contextual alternatives</h3>
<h2 id="alerts-alternatives">Contextual alternatives</h2>
<p>Add optional classes to change an alert's connotation.</p>
<div class="bs-example">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
</div>
@ -1915,19 +1914,36 @@ body { padding-bottom: 70px; }
<div class="alert alert-info">...</div>
{% endhighlight %}
<h3 id="alerts-links">Links in alerts</h3>
<h2 id="alerts-dismissable">Dismissable alerts</h2>
<p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
<div class="bs-example">
<div class="alert alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
{% highlight html %}
<div class="alert alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Ensure proper behavior across all devices</h4>
<p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
</div>
<h2 id="alerts-links">Links in alerts</h2>
<p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
<div class="bs-example">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
</div>
@ -1964,12 +1980,12 @@ body { padding-bottom: 70px; }
<p>Default progress bar with a vertical gradient.</p>
<div class="bs-example">
<div class="progress">
<div class="progress-bar" style="width: 60%;"></div>
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
</div>
</div>
{% highlight html %}
<div class="progress">
<div class="progress-bar" style="width: 60%;"></div>
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
</div>
{% endhighlight %}
@ -1977,30 +1993,38 @@ body { padding-bottom: 70px; }
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-example">
<div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
</div>
<div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
</div>
<div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
</div>
</div>
{% highlight html %}
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete</span>
</div>
</div>
{% endhighlight %}
@ -2008,30 +2032,38 @@ body { padding-bottom: 70px; }
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-example">
<div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
</div>
<div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
</div>
<div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
</div>
</div>
{% highlight html %}
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
{% endhighlight %}
@ -2039,12 +2071,14 @@ body { padding-bottom: 70px; }
<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
<div class="bs-example">
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div>
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
</div>
</div>
{% highlight html %}
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div>
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class='sr-only'>45% Complete</span>
</div>
</div>
{% endhighlight %}
@ -2052,16 +2086,16 @@ body { padding-bottom: 70px; }
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
<div class="bs-example">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
<div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"><span class='sr-only'>10% Complete (danger)</span></div>
</div>
</div>
{% highlight html %}
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
<div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
</div>
{% endhighlight %}
</div>
@ -2082,7 +2116,7 @@ body { padding-bottom: 70px; }
<div class="bs-example">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@ -2091,14 +2125,14 @@ body { padding-bottom: 70px; }
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@ -2111,7 +2145,7 @@ body { padding-bottom: 70px; }
{% highlight html %}
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="...">
<img class="media-object" src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@ -2126,7 +2160,7 @@ body { padding-bottom: 70px; }
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@ -2134,7 +2168,7 @@ body { padding-bottom: 70px; }
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
@ -2142,7 +2176,7 @@ body { padding-bottom: 70px; }
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
@ -2154,7 +2188,7 @@ body { padding-bottom: 70px; }
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
@ -2165,7 +2199,7 @@ body { padding-bottom: 70px; }
</li>
<li class="media">
<a class="pull-right" href="#">
<img class="media-object" data-src="holder.js/64x64">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@ -2178,7 +2212,7 @@ body { padding-bottom: 70px; }
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="...">
<img class="media-object" src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@ -2256,14 +2290,10 @@ body { padding-bottom: 70px; }
<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>
<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>
{% highlight html %}
@ -2271,14 +2301,10 @@ body { padding-bottom: 70px; }
<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>
<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>
{% endhighlight %}
@ -2325,13 +2351,17 @@ body { padding-bottom: 70px; }
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<div class="bs-example">
<div class="panel">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel-body">
Basic panel example
</div>
</div>
{% endhighlight %}
<h3 id="panels-heading">Panel with heading</h3>
@ -2339,40 +2369,52 @@ body { padding-bottom: 70px; }
<div class="bs-example">
<div class="panel">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
{% endhighlight %}
<h3 id="panels-footer">Panel with footer</h3>
<p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
<div class="bs-example">
<div class="panel">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
{% endhighlight %}
@ -2384,33 +2426,43 @@ body { padding-bottom: 70px; }
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<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-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 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>
{% highlight html %}
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
@ -2425,7 +2477,9 @@ body { padding-bottom: 70px; }
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<!-- List group -->
<ul class="list-group">
@ -2441,7 +2495,9 @@ body { padding-bottom: 70px; }
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">

579
css.html
View File

@ -83,6 +83,29 @@ base_url: "../"
</div>
<p class="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h3 id="grid-media-queries">Media queries</h3>
<p>We use the following media queries to create the key breakpoints in our grid system.</p>
{% highlight css %}
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-tablet) { ... }
/* Medium devices (tablets, 992px and up) */
@media (min-width: @screen-desktop) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-large-desktop) { ... }
{% endhighlight %}
<p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
{% highlight css %}
@media (max-width: @screen-phone-max) { ... }
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { ... }
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { ... }
@media (min-width: @screen-large-desktop) { ... }
{% endhighlight %}
<h3 id="grid-options">Grid options</h3>
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
<div class="bs-table-scrollable">
@ -117,15 +140,16 @@ base_url: "../"
<tr>
<th>Max container width</th>
<td>None (auto)</td>
<td>728px</td>
<td>720px</td>
<td>940px</td>
<td>1170px</td>
<td>1140px</td>
</tr>
<tr>
<th>Class prefix</th>
<td><code>.col-</code></td>
<td><code>.col-xs</code></td>
<td><code>.col-sm-</code></td>
<td colspan="2"><code>.col-lg-</code></td>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
</tr>
<tr>
<th># of columns</th>
@ -133,10 +157,10 @@ base_url: "../"
</tr>
<tr>
<th>Max column width</th>
<td>Auto</td>
<td>~60px</td>
<td>~78px</td>
<td>~98px</td>
<td class="text-muted">Auto</td>
<td>60px</td>
<td>78px</td>
<td>95px</td>
</tr>
<tr>
<th>Gutter width</th>
@ -161,101 +185,101 @@ base_url: "../"
</div>
<h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
<p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p>
<p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-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">1</div>
</div>
<div class="row show-grid">
<div class="col-lg-8">8</div>
<div class="col-lg-4">4</div>
<div class="col-md-8">8</div>
<div class="col-md-4">4</div>
</div>
<div class="row show-grid">
<div class="col-lg-4">4</div>
<div class="col-lg-4">4</div>
<div class="col-lg-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
</div>
<div class="row show-grid">
<div class="col-lg-6">6</div>
<div class="col-lg-6">6</div>
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-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">1</div>
</div>
<div class="row">
<div class="col-lg-8">8</div>
<div class="col-lg-4">4</div>
<div class="col-md-8">8</div>
<div class="col-md-4">4</div>
</div>
<div class="row">
<div class="col-lg-4">4</div>
<div class="col-lg-4">4</div>
<div class="col-lg-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
</div>
<div class="row">
<div class="col-lg-6">6</div>
<div class="col-lg-6">6</div>
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
{% endhighlight %}
<h3 id="grid-example-mixed">Example: Combining mobile with desktop</h3>
<p>Don't want your columns to simply stack in smaller devices? Use the small device grid system by adding <code>.col-*</code> classes to the existing <code>.col-lg-*</code> ones. See the example below for a better idea of how it all works.</p>
<p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-12 col-lg-8">8</div>
<div class="col-6 col-lg-4">4</div>
<div class="col-xs-12 col-md-8">8</div>
<div class="col-xs-6 col-md-4">4</div>
</div>
<div class="row show-grid">
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-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">4</div>
</div>
<div class="row show-grid">
<div class="col-6 col-lg-6">6</div>
<div class="col-6 col-lg-6">6</div>
<div class="col-xs-6 col-md-6">6</div>
<div class="col-xs-6 col-md-6">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-12 col-lg-8">8</div>
<div class="col-6 col-lg-4">4</div>
<div class="col-xs-12 col-md-8">8</div>
<div class="col-xs-6 col-md-4">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-6 col-lg-4">4</div>
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-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">4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6 col-lg-6">6</div>
<div class="col-6 col-lg-6">6</div>
<div class="col-xs-6 col-md-6">6</div>
<div class="col-xs-6 col-md-6">6</div>
</div>
{% endhighlight %}
@ -263,32 +287,32 @@ base_url: "../"
<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">
<div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
<div class="col-xs-12 col-sm-8 col-md-8">.col-xs-12 .col-sm-8 .col-md-8</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
<div class="col-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
<div class="col-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
<div class="col-xs-12 col-sm-8 col-md-8">.col-xs-12 .col-sm-8 .col-md-8</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>
<div class="row">
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
<div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
<div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
</div>
{% endhighlight %}
@ -299,45 +323,45 @@ base_url: "../"
</div>
<h3 id="grid-offsetting">Offsetting columns</h3>
<p>Move columns to the right using <code>.col-lg-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-lg-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
<p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-lg-4">4</div>
<div class="col-lg-4 col-lg-offset-4">4 offset 4</div>
<div class="col-md-4">4</div>
<div class="col-md-4 col-md-offset-4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
<div class="col-lg-3 col-lg-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">3 offset 3</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="col-lg-6 col-lg-offset-3">6 offset 3</div>
<div class="col-md-6 col-md-offset-3">6 offset 3</div>
</div><!-- /row -->
</div>
{% highlight html %}
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-4 col-lg-offset-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4 col-md-offset-4">...</div>
</div>
<div class="row">
<div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
<div class="col-lg-3 col-lg-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">3 offset 3</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3">...</div>
<div class="col-md-6 col-md-offset-3">...</div>
</div>
{% endhighlight %}
<h3 id="grid-nesting">Nesting columns</h3>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-lg-*</code> columns within an existing <code>.col-lg-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid">
<div class="col-lg-9">
<div class="col-md-9">
Level 1: 9 columns
<div class="row show-grid">
<div class="col-lg-6">
<div class="col-md-6">
Level 2: 6 columns
</div>
<div class="col-lg-6">
<div class="col-md-6">
Level 2: 6 columns
</div>
</div>
@ -345,13 +369,13 @@ base_url: "../"
</div>
{% highlight html %}
<div class="row">
<div class="col-lg-9">
<div class="col-md-9">
Level 1: 9 columns
<div class="row">
<div class="col-lg-6">
<div class="col-md-6">
Level 2: 6 columns
</div>
<div class="col-lg-6">
<div class="col-md-6">
Level 2: 6 columns
</div>
</div>
@ -360,16 +384,16 @@ base_url: "../"
{% endhighlight %}
<h3 id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with <code>.col-lg-push-*</code> and <code>.col-lg-pull-*</code> modifier classes.</p>
<p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
<div class="row show-grid">
<div class="col-lg-9 col-lg-push-3">9</div>
<div class="col-lg-3 col-lg-pull-9">3</div>
<div class="col-md-9 col-md-push-3">9</div>
<div class="col-md-3 col-md-pull-9">3</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-lg-9 col-lg-push-3">9</div>
<div class="col-lg-3 col-lg-pull-9">3</div>
<div class="col-md-9 col-md-push-3">9</div>
<div class="col-md-3 col-md-pull-9">3</div>
</div>
{% endhighlight %}
@ -388,34 +412,136 @@ base_url: "../"
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
{% highlight css %}
// Creates a wrapper for a series of columns
.make-row() {
// Negative margin the row out to align the content of columns
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-small) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Generate the columns
.make-column(@columns) {
@media (min-width: @grid-float-breakpoint) {
float: left;
// Calculate width based on number of columns available
width: percentage(@columns / @grid-columns);
// 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
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Set inner padding as gutters instead of margin
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the column offsets
.make-column-offset(@columns) {
@media (min-width: @grid-float-breakpoint) {
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-small) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-small) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-small) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-small) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-medium) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-medium) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-medium) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-medium) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-large) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-large) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-large) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-large) {
right: percentage((@columns / @grid-columns));
}
}
{% endhighlight %}
<h4>Example usage</h4>
@ -425,11 +551,11 @@ base_url: "../"
.make-row();
}
.content-main {
.make-column(8);
.make-lg-column(8);
}
.content-secondary {
.make-column(3);
.make-column-offset(1);
.make-lg-column(3);
.make-lg-column-offset(1);
}
{% endhighlight %}
{% highlight html %}
@ -459,27 +585,27 @@ base_url: "../"
<table class="table">
<tbody>
<tr>
<th><h1>Bootstrap heading</h1></th>
<td><h1>Bootstrap heading</h1></td>
<td>Semibold 38px</td>
</tr>
<tr>
<th><h2>Bootstrap heading</h2></th>
<td><h2>Bootstrap heading</h2></td>
<td>Semibold 32px</td>
</tr>
<tr>
<th><h3>Bootstrap heading</h3></th>
<td><h3>Bootstrap heading</h3></td>
<td>Semibold 24px</td>
</tr>
<tr>
<th><h4>Bootstrap heading</h4></th>
<td><h4>Bootstrap heading</h4></td>
<td>Semibold 18px</td>
</tr>
<tr>
<th><h5>Bootstrap heading</h5></th>
<td>Semibold 16px</td>
<td><h5>Bootstrap heading</h5></td>
<td>Semibold 14px</td>
</tr>
<tr>
<th><h6>Bootstrap heading</h6></th>
<td><h6>Bootstrap heading</h6></td>
<td>Semibold 12px</td>
</tr>
</tbody>
@ -1205,16 +1331,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
<form class="bs-example">
<form class="bs-example" role="form">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="exampleInputEmail">Email address</label>
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
<label for="exampleInputEmail1">Email address</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword">Password</label>
<input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
@ -1230,16 +1356,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</fieldset>
</form><!-- /example -->
{% highlight html %}
<form>
<form role="form">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="exampleInputEmail">Email address</label>
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
<label for="exampleInputEmail1">Email address</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword">Password</label>
<input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
@ -1257,15 +1383,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h3 id="forms-inline">Inline form</h2>
<h3 id="forms-inline">Inline form</h3>
<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>
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
</div>
<form class="bs-example form-inline">
<input type="text" class="form-control" placeholder="Email">
<input type="password" class="form-control" placeholder="Password">
<div class="bs-callout bs-callout-danger">
<h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
</div>
<form class="bs-example form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="text" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
@ -1274,9 +1410,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="submit" class="btn btn-default">Sign in</button>
</form><!-- /example -->
{% highlight html %}
<form class="form-inline">
<input type="text" class="form-control" placeholder="Email">
<input type="password" class="form-control" placeholder="Password">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="text" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
@ -1290,15 +1432,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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">
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
<input type="text" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<label for="inputPassword1" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
@ -1317,17 +1459,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
</form>
{% highlight html %}
<form class="form-horizontal">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
<input type="text" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<label for="inputPassword1" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
@ -1486,7 +1628,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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>
<form class="bs-example form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<label class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<p class="form-control-static">email@example.com</p>
</div>
@ -1499,17 +1641,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
</form>
{% highlight html %}
<form class="form-horizontal">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail2" class="col-lg-2 control-label">Email</label>
<label class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword2" class="col-lg-2 control-label">Password</label>
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
@ -1553,11 +1695,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-example">
<fieldset disabled>
<div class="form-group">
<label for="disabledInput">Disabled input</label>
<input type="text" id="disabledInput" class="form-control" placeholder="Disabled input">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledInput">Disabled select menu</label>
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
@ -1571,14 +1713,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</fieldset>
</form>
{% highlight html %}
<form class="form-inline">
<form class="form-inline" role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledInput">Disabled input</label>
<input type="text" id="disabledInput" class="form-control" placeholder="Disabled input">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledInput">Disabled select menu</label>
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
@ -1594,7 +1736,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h3 id="forms-validation">Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</li>
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
<form class="bs-example">
<div class="form-group has-warning">
@ -1870,14 +2012,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
</div>
<div class="bs-example bs-example-images">
<img data-src="holder.js/140x140" class="img-rounded">
<img data-src="holder.js/140x140" class="img-circle">
<img data-src="holder.js/140x140" class="img-thumbnail">
<img data-src="holder.js/140x140" src="data:image/png;base64," class="img-rounded" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/140x140" src="data:image/png;base64," class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
<img data-src="holder.js/140x140" 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>
{% highlight html %}
<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-thumbnail">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
@ -1898,10 +2040,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<div class="bs-example">
<p><button type="button" class="close">&times;</button></p>
<p><button type="button" class="close" aria-hidden="true">&times;</button></p>
</div>
{% highlight html %}
<button type="button" class="close">&times;</button>
<button type="button" class="close" aria-hidden="true">&times;</button>
{% endhighlight %}
<h3>.pull-left</h3>
@ -1933,7 +2075,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
{% highlight css %}
// Mixin
.clearfix {
.clearfix() {
&:before,
&:after {
content: " ";
@ -1948,6 +2090,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
.element {
.clearfix();
}
{% endhighlight %}
<h3>.sr-only</h3>
<p>Hide an element to all users <em>except</em> screen readers. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>.</p>
{% highlight html %}
<a class="sr-only" href="#content">Skip to content</a>
{% endhighlight %}
</div>
@ -1963,6 +2111,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
<th></th>
<th>
Extra small devices
<small>Phones (&lt;768px)</small>
</th>
<th>
Small devices
<small>Tablets (&gt;768px)</small>
</th>
<th>
Medium devices
<small>Desktops (&gt;992px)</small>
</th>
<th>
Large devices
<small>Desktops (&gt;1200px)</small>
</th>
</tr>
</thead>
<!-- <thead>
<tr>
<th>Class</th>
<th>Small devices <small>Up to 768px</small></th>
@ -1970,9 +2139,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<th>Large devices <small>992px and up</small></th>
</tr>
</thead>
<tbody>
--> <tbody>
<tr>
<th><code>.visible-xs</code></th>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th><code>.visible-sm</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
@ -1980,6 +2157,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<tr>
<th><code>.visible-md</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
</tr>
@ -1987,10 +2165,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<th><code>.visible-lg</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
</tr>
</tbody>
<tbody>
<tr>
<th><code>.hidden-xs</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th><code>.hidden-sm</code></th>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
@ -1998,6 +2187,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<tr>
<th><code>.hidden-md</code></th>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
</tr>
@ -2005,6 +2195,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<th><code>.hidden-lg</code></th>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
</tr>
</tbody>
@ -2043,35 +2234,43 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Resize your browser or load on different devices to test the responsive utility classes.</p>
<h4>Visible on...</h4>
<p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
<ul class="responsive-utilities-test visible-on">
<li>
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-3">
<span class="hidden-xs">Extra small</span>
<span class="visible-xs">&#10004; Visible on x-small</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="hidden-sm">Small</span>
<span class="visible-sm">&#10004; Visible on small</span>
</li>
<li>
</div>
<div class="col-xs-6 col-sm-3">
<span class="hidden-md">Medium</span>
<span class="visible-md">&#10004; Visible on medium</span>
</li>
<li>
</div>
<div class="col-xs-6 col-sm-3">
<span class="hidden-lg">Large</span>
<span class="visible-lg">&#10004; Visible on large</span>
</li>
</ul>
</div>
</div>
<h4>Hidden on...</h4>
<p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
<ul class="responsive-utilities-test hidden-on">
<li>
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-3">
<span class="visible-xs">Extra small</span>
<span class="hidden-xs">&#10004; Hidden on x-small</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="visible-sm">Small</span>
<span class="hidden-sm">&#10004; Hidden on small</span>
</li>
<li>
</div>
<div class="col-xs-6 col-sm-3">
<span class="visible-md">Medium</span>
<span class="hidden-md">&#10004; Hidden on medium</span>
</li>
<li>
</div>
<div class="col-xs-6 col-sm-3">
<span class="visible-lg">Large</span>
<span class="hidden-lg">&#10004; Hidden on large</span>
</li>
</ul>
</div>
</div>
</div>

75
customize.html
View File

File diff suppressed because one or more lines are too long

1408
dist/css/bootstrap.css vendored
View File

@ -286,7 +286,9 @@ table {
}
}
* {
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@ -346,7 +348,7 @@ img {
}
.img-circle {
border-radius: 500px;
border-radius: 50%;
}
hr {
@ -356,6 +358,17 @@ hr {
border-top: 1px solid #eeeeee;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
p {
margin: 0 0 10px;
}
@ -700,6 +713,7 @@ pre.prettyprint {
pre code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
@ -757,7 +771,7 @@ pre code {
}
@media (min-width: 768px) {
.row {
.container .row {
margin-right: -15px;
margin-left: -15px;
}
@ -768,18 +782,18 @@ pre code {
margin-left: -15px;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
@ -792,6 +806,18 @@ pre code {
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
@ -810,72 +836,71 @@ pre code {
padding-left: 15px;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11 {
float: left;
}
.col-1 {
.col-xs-1 {
width: 8.333333333333332%;
}
.col-2 {
.col-xs-2 {
width: 16.666666666666664%;
}
.col-3 {
.col-xs-3 {
width: 25%;
}
.col-4 {
.col-xs-4 {
width: 33.33333333333333%;
}
.col-5 {
.col-xs-5 {
width: 41.66666666666667%;
}
.col-6 {
.col-xs-6 {
width: 50%;
}
.col-7 {
.col-xs-7 {
width: 58.333333333333336%;
}
.col-8 {
.col-xs-8 {
width: 66.66666666666666%;
}
.col-9 {
.col-xs-9 {
width: 75%;
}
.col-10 {
.col-xs-10 {
width: 83.33333333333334%;
}
.col-11 {
.col-xs-11 {
width: 91.66666666666666%;
}
.col-12 {
.col-xs-12 {
width: 100%;
}
@media (min-width: 768px) and (max-width: 991px) {
@media (min-width: 768px) {
.container {
max-width: 728px;
max-width: 720px;
}
.col-sm-1,
.col-sm-2,
@ -887,8 +912,7 @@ pre code {
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
.col-sm-11 {
float: left;
}
.col-sm-1 {
@ -1032,6 +1056,160 @@ pre code {
.container {
max-width: 940px;
}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11 {
float: left;
}
.col-md-1 {
width: 8.333333333333332%;
}
.col-md-2 {
width: 16.666666666666664%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333333333333%;
}
.col-md-5 {
width: 41.66666666666667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.333333333333336%;
}
.col-md-8 {
width: 66.66666666666666%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333333333334%;
}
.col-md-11 {
width: 91.66666666666666%;
}
.col-md-12 {
width: 100%;
}
.col-md-push-1 {
left: 8.333333333333332%;
}
.col-md-push-2 {
left: 16.666666666666664%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-4 {
left: 33.33333333333333%;
}
.col-md-push-5 {
left: 41.66666666666667%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-7 {
left: 58.333333333333336%;
}
.col-md-push-8 {
left: 66.66666666666666%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-10 {
left: 83.33333333333334%;
}
.col-md-push-11 {
left: 91.66666666666666%;
}
.col-md-pull-1 {
right: 8.333333333333332%;
}
.col-md-pull-2 {
right: 16.666666666666664%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-4 {
right: 33.33333333333333%;
}
.col-md-pull-5 {
right: 41.66666666666667%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-7 {
right: 58.333333333333336%;
}
.col-md-pull-8 {
right: 66.66666666666666%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-10 {
right: 83.33333333333334%;
}
.col-md-pull-11 {
right: 91.66666666666666%;
}
.col-md-offset-1 {
margin-left: 8.333333333333332%;
}
.col-md-offset-2 {
margin-left: 16.666666666666664%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-4 {
margin-left: 33.33333333333333%;
}
.col-md-offset-5 {
margin-left: 41.66666666666667%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-7 {
margin-left: 58.333333333333336%;
}
.col-md-offset-8 {
margin-left: 66.66666666666666%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-10 {
margin-left: 83.33333333333334%;
}
.col-md-offset-11 {
margin-left: 91.66666666666666%;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
.col-lg-1,
.col-lg-2,
.col-lg-3,
@ -1042,8 +1220,7 @@ pre code {
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
.col-lg-11 {
float: left;
}
.col-lg-1 {
@ -1183,12 +1360,6 @@ pre code {
}
}
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
table {
max-width: 100%;
background-color: transparent;
@ -1533,14 +1704,6 @@ textarea.form-control {
margin-left: 10px;
}
.input-lg {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.input-sm {
height: 30px;
padding: 5px 10px;
@ -1549,21 +1712,32 @@ textarea.form-control {
border-radius: 3px;
}
select.input-lg {
height: 45px;
line-height: 45px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-lg,
textarea.input-sm {
height: auto;
}
.input-lg {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-lg {
height: 45px;
line-height: 45px;
}
textarea.input-lg {
height: auto;
}
.has-warning .help-block,
.has-warning .control-label {
color: #c09853;
@ -1645,24 +1819,28 @@ textarea.input-sm {
color: #737373;
}
.form-inline .form-control,
@media (min-width: 768px) {
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-control {
display: inline-block;
}
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
}
.form-inline .radio,
.form-inline .checkbox {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
}
.form-horizontal .control-label,
.form-horizontal .radio-inline,
@ -1691,7 +1869,7 @@ textarea.input-sm {
}
@media (min-width: 768px) {
.form-horizontal .form-group {
.container .form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
@ -2079,6 +2257,52 @@ input[type="button"].btn-block {
margin-bottom: 0;
}
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
height: 45px;
line-height: 45px;
}
textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn {
height: auto;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
height: 30px;
line-height: 30px;
}
textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn {
height: auto;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
@ -2186,6 +2410,10 @@ input[type="button"].btn-block {
position: relative;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
@ -2196,6 +2424,7 @@ input[type="button"].btn-block {
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #ffffff;
border: 1px solid #cccccc;
@ -2323,7 +2552,7 @@ input[type="button"].btn-block {
.list-group-item {
position: relative;
display: block;
padding: 10px 30px 10px 15px;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #ffffff;
border: 1px solid #dddddd;
@ -2342,7 +2571,45 @@ input[type="button"].btn-block {
.list-group-item > .badge {
float: right;
margin-right: -15px;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
a.list-group-item {
color: #555555;
}
a.list-group-item .list-group-item-heading {
color: #333333;
}
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}
.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading {
color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
color: #e1edf7;
}
.list-group-item-heading {
@ -2355,37 +2622,7 @@ input[type="button"].btn-block {
line-height: 1.3;
}
a.list-group-item .list-group-item-heading {
color: #333333;
}
a.list-group-item .list-group-item-text {
color: #555555;
}
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
a.list-group-item.active {
z-index: 2;
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}
a.list-group-item.active .list-group-item-heading {
color: inherit;
}
a.list-group-item.active .list-group-item-text {
color: #e1edf7;
}
.panel {
padding: 15px;
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
@ -2394,8 +2631,12 @@ a.list-group-item.active .list-group-item-text {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
padding: 15px;
}
.panel .list-group {
margin: 15px -15px -15px;
margin-bottom: 0;
}
.panel .list-group .list-group-item {
@ -2411,9 +2652,12 @@ a.list-group-item.active .list-group-item-text {
border-bottom: 0;
}
.panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0;
}
.panel-heading {
padding: 10px 15px;
margin: -15px -15px 15px;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px;
@ -2424,7 +2668,6 @@ a.list-group-item.active .list-group-item-text {
margin-top: 0;
margin-bottom: 0;
font-size: 17.5px;
font-weight: 500;
}
.panel-title > a {
@ -2433,13 +2676,38 @@ a.list-group-item.active .list-group-item-text {
.panel-footer {
padding: 10px 15px;
margin: 15px -15px -15px;
background-color: #f5f5f5;
border-top: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel-group .panel {
margin-bottom: 0;
overflow: hidden;
border-radius: 4px;
}
.panel-group .panel + .panel {
margin-top: 5px;
}
.panel-group .panel-heading {
border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse .panel-body {
border-top: 1px solid #dddddd;
}
.panel-group .panel-footer {
border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid #dddddd;
}
.panel-primary {
border-color: #428bca;
}
@ -2450,6 +2718,14 @@ a.list-group-item.active .list-group-item-text {
border-color: #428bca;
}
.panel-primary .panel-heading + .panel-collapse .panel-body {
border-top-color: #428bca;
}
.panel-primary .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #428bca;
}
.panel-success {
border-color: #d6e9c6;
}
@ -2460,6 +2736,14 @@ a.list-group-item.active .list-group-item-text {
border-color: #d6e9c6;
}
.panel-success .panel-heading + .panel-collapse .panel-body {
border-top-color: #d6e9c6;
}
.panel-success .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #d6e9c6;
}
.panel-warning {
border-color: #fbeed5;
}
@ -2470,6 +2754,14 @@ a.list-group-item.active .list-group-item-text {
border-color: #fbeed5;
}
.panel-warning .panel-heading + .panel-collapse .panel-body {
border-top-color: #fbeed5;
}
.panel-warning .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #fbeed5;
}
.panel-danger {
border-color: #eed3d7;
}
@ -2480,6 +2772,14 @@ a.list-group-item.active .list-group-item-text {
border-color: #eed3d7;
}
.panel-danger .panel-heading + .panel-collapse .panel-body {
border-top-color: #eed3d7;
}
.panel-danger .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #eed3d7;
}
.panel-info {
border-color: #bce8f1;
}
@ -2490,6 +2790,14 @@ a.list-group-item.active .list-group-item-text {
border-color: #bce8f1;
}
.panel-info .panel-heading + .panel-collapse .panel-body {
border-top-color: #bce8f1;
}
.panel-info .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #bce8f1;
}
.well {
min-height: 20px;
padding: 19px;
@ -2621,6 +2929,10 @@ button.close {
background-color: #e5e5e5;
}
.nav > li > a > img {
max-width: none;
}
.nav-tabs {
border-bottom: 1px solid #dddddd;
}
@ -2779,73 +3091,114 @@ button.close {
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
background-color: #f8f8f8;
border: 1px solid #e7e7e7;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
.navbar-header {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px;
background-color: #eeeeee;
border-radius: 4px;
}
.navbar:before,
.navbar:after {
.navbar-header:before,
.navbar-header:after {
display: table;
content: " ";
}
.navbar:after {
.navbar-header:after {
clear: both;
}
.navbar:before,
.navbar:after {
.navbar-header:before,
.navbar-header:after {
display: table;
content: " ";
}
.navbar:after {
.navbar-header:after {
clear: both;
}
.navbar-nav {
margin-top: 10px;
margin-bottom: 15px;
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
color: #777777;
border-radius: 4px;
.navbar-collapse {
max-height: 340px;
padding: 5px 15px;
overflow-x: visible;
overflow-y: auto;
border-top: 1px solid #e6e6e6;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
color: #555555;
background-color: #d5d5d5;
.navbar-collapse:after {
clear: both;
}
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-nav.pull-right {
width: 100%;
.navbar-collapse:after {
clear: both;
}
@media (min-width: 768px) {
.navbar-collapse {
width: auto;
padding-top: 0;
padding-bottom: 0;
border-top: 0;
box-shadow: none;
}
}
@media (min-width: 768px) {
.navbar-static-top {
border-width: 0 0 1px;
border-radius: 0;
}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
@ -2853,8 +3206,15 @@ button.close {
right: 0;
left: 0;
z-index: 1030;
border-width: 0 0 1px;
}
@media (min-width: 768px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
@ -2865,26 +3225,14 @@ button.close {
margin-bottom: 0;
}
@media (max-width: 768px) {
.nav-collapse-scrollable {
max-height: 360px;
margin-bottom: 15px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
.navbar-brand {
display: block;
max-width: 200px;
padding: 15px 15px;
margin-right: auto;
margin-left: auto;
float: left;
padding-top: 15px;
padding-bottom: 15px;
margin-right: 7.5px;
font-size: 18px;
font-weight: 500;
line-height: 20px;
color: #777777;
text-align: center;
}
.navbar-brand:hover,
@ -2897,9 +3245,7 @@ button.close {
.navbar-toggle {
position: relative;
float: right;
width: 48px;
height: 34px;
padding: 6px 12px;
padding: 9px 10px;
margin-top: 8px;
margin-bottom: 8px;
background-color: transparent;
@ -2924,29 +3270,141 @@ button.close {
margin-top: 4px;
}
.navbar-form {
margin-top: 8px;
margin-bottom: 8px;
.navbar-nav {
margin-right: -15px;
margin-left: -15px;
}
.navbar-form .form-control,
@media (min-width: 768px) {
.navbar-nav {
margin-right: 0;
margin-left: 0;
}
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
color: #777777;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
color: #777777;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
color: #333333;
background-color: transparent;
background-image: none;
}
.navbar-nav .open .dropdown-menu > .active > a,
.navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
@media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
}
}
.navbar-form {
padding: 10px 15px;
margin-top: 8px;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
}
@media (min-width: 768px) {
.navbar-form .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .form-control {
display: inline-block;
}
.navbar-form .radio,
.navbar-form .checkbox {
display: inline-block;
}
.navbar-form .radio,
.navbar-form .checkbox {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
}
@media (max-width: 767px) {
.navbar-form .form-group {
margin-bottom: 5px;
}
}
@media (min-width: 768px) {
.navbar-form {
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
}
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
@ -2969,7 +3427,7 @@ button.close {
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus {
color: #555555;
background-color: #d5d5d5;
background-color: #e7e7e7;
}
.navbar-nav > .open > a .caret,
@ -2992,6 +3450,7 @@ button.close {
.navbar-inverse {
background-color: #222222;
border-color: #080808;
}
.navbar-inverse .navbar-brand {
@ -3045,6 +3504,10 @@ button.close {
background-color: #ffffff;
}
.navbar-inverse .navbar-collapse {
border-top-color: #101010;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
@ -3069,13 +3532,33 @@ button.close {
border-bottom-color: #ffffff;
}
@media screen and (min-width: 768px) {
.navbar-brand {
float: left;
max-width: none;
margin-right: 5px;
margin-left: -15px;
@media (max-width: 767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
border-color: #080808;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
color: #999999;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #080808;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
}
@media screen and (min-width: 768px) {
.navbar-nav {
float: left;
margin-top: 0;
@ -3085,10 +3568,8 @@ button.close {
float: left;
}
.navbar-nav > li > a {
border-radius: 0;
}
.navbar-nav.pull-right {
width: auto;
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-toggle {
position: relative;
@ -3096,9 +3577,10 @@ button.close {
left: auto;
display: none;
}
.nav-collapse.collapse {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
}
@ -3109,7 +3591,6 @@ button.close {
.navbar-text {
float: left;
padding: 0 15px;
margin-top: 15px;
margin-bottom: 15px;
}
@ -3183,7 +3664,10 @@ button.close {
outline: none;
}
.btn-group .btn + .btn {
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
}
@ -3261,6 +3745,28 @@ button.close {
outline: 0;
}
.btn-group-xs > .btn {
padding: 5px 10px;
padding: 3px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-group-sm > .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-group-lg > .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
@ -3288,27 +3794,73 @@ button.close {
border-bottom-width: 5px;
}
.btn-group-vertical > .btn {
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn + .btn {
margin-top: -1px;
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after {
display: table;
content: " ";
}
.btn-group-vertical .btn:not(:first-child):not(:last-child) {
.btn-group-vertical > .btn-group:after {
clear: both;
}
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after {
display: table;
content: " ";
}
.btn-group-vertical > .btn-group:after {
clear: both;
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical .btn:first-child:not(:last-child) {
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical .btn:last-child:not(:first-child) {
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 0;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child > .btn:last-child,
.btn-group-vertical > .btn-group:first-child > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
@ -3325,8 +3877,8 @@ button.close {
width: 1%;
}
.btn-group[data-toggle="buttons"] > .btn > input[type="radio"],
.btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] {
[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
display: none;
}
@ -3787,8 +4339,6 @@ button.close {
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
-webkit-bg-clip: padding-box;
-moz-bg-clip: padding;
}
.popover.top {
@ -3910,7 +4460,7 @@ button.close {
}
.alert {
padding: 15px 35px 15px 15px;
padding: 15px;
margin-bottom: 20px;
color: #c09853;
background-color: #fcf8e3;
@ -3932,13 +4482,6 @@ button.close {
color: #a47e3c;
}
.alert .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert > p,
.alert > ul {
margin-bottom: 0;
@ -3948,6 +4491,17 @@ button.close {
margin-top: 5px;
}
.alert-dismissable {
padding-right: 35px;
}
.alert-dismissable .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert-success {
color: #468847;
background-color: #dff0d8;
@ -4067,7 +4621,7 @@ a.thumbnail:focus {
display: inline;
padding: .25em .6em;
font-size: 75%;
font-weight: 500;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-align: center;
@ -4083,6 +4637,10 @@ a.thumbnail:focus {
cursor: pointer;
}
.label:empty {
display: none;
}
.label-default {
background-color: #999999;
}
@ -4230,7 +4788,6 @@ a.list-group-item.active > .badge,
}
.progress-striped .progress-bar {
background-color: #428bca;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4251,7 +4808,6 @@ a.list-group-item.active > .badge,
}
.progress-striped .progress-bar-danger {
background-color: #d9534f;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4263,7 +4819,6 @@ a.list-group-item.active > .badge,
}
.progress-striped .progress-bar-success {
background-color: #5cb85c;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4275,7 +4830,6 @@ a.list-group-item.active > .badge,
}
.progress-striped .progress-bar-warning {
background-color: #f0ad4e;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@ -4287,38 +4841,12 @@ a.list-group-item.active > .badge,
}
.progress-striped .progress-bar-info {
background-color: #5bc0de;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.accordion {
margin-bottom: 20px;
}
.accordion-group {
margin-bottom: 2px;
border: 1px solid #e5e5e5;
border-radius: 4px;
}
.accordion-heading {
border-bottom: 0;
}
.accordion-heading .accordion-toggle {
display: block;
padding: 8px 15px;
cursor: pointer;
}
.accordion-inner {
padding: 9px 15px;
border-top: 1px solid #e5e5e5;
}
.carousel {
position: relative;
}
@ -4397,8 +4925,6 @@ a.list-group-item.active > .badge,
}
.carousel-control.left {
background-color: rgba(0, 0, 0, 0.0001);
background-color: transparent;
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
@ -4410,8 +4936,6 @@ a.list-group-item.active > .badge,
.carousel-control.right {
right: 0;
left: auto;
background-color: rgba(0, 0, 0, 0.5);
background-color: transparent;
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
@ -4428,7 +4952,6 @@ a.list-group-item.active > .badge,
filter: alpha(opacity=90);
}
.carousel-control .glyphicon,
.carousel-control .icon-prev,
.carousel-control .icon-next {
position: absolute;
@ -4499,7 +5022,6 @@ a.list-group-item.active > .badge,
}
@media screen and (min-width: 768px) {
.carousel-control .glyphicon,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
@ -4604,18 +5126,109 @@ a.list-group-item.active > .badge,
visibility: hidden !important;
}
.visible-sm {
.visible-xs {
display: block !important;
}
tr.visible-sm {
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-xs {
display: none !important;
}
tr.visible-xs {
display: none !important;
}
th.visible-xs,
td.visible-xs {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-xs {
display: none !important;
}
tr.visible-xs {
display: none !important;
}
th.visible-xs,
td.visible-xs {
display: none !important;
}
}
@media (min-width: 1200px) {
.visible-xs {
display: none !important;
}
tr.visible-xs {
display: none !important;
}
th.visible-xs,
td.visible-xs {
display: none !important;
}
}
.visible-sm {
display: none !important;
}
tr.visible-sm {
display: none !important;
}
th.visible-sm,
td.visible-sm {
display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-sm {
display: none !important;
}
tr.visible-sm {
display: none !important;
}
th.visible-sm,
td.visible-sm {
display: none !important;
}
}
@media (min-width: 1200px) {
.visible-sm {
display: none !important;
}
tr.visible-sm {
display: none !important;
}
th.visible-sm,
td.visible-sm {
display: none !important;
}
}
.visible-md {
display: none !important;
@ -4630,6 +5243,45 @@ td.visible-md {
display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-md {
display: none !important;
}
tr.visible-md {
display: none !important;
}
th.visible-md,
td.visible-md {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-md {
display: none !important;
}
tr.visible-md {
display: none !important;
}
th.visible-md,
td.visible-md {
display: none !important;
}
}
.visible-lg {
display: none !important;
}
@ -4643,18 +5295,148 @@ td.visible-lg {
display: none !important;
}
.hidden-sm {
@media (min-width: 768px) and (max-width: 991px) {
.visible-lg {
display: none !important;
}
tr.visible-lg {
display: none !important;
}
th.visible-lg,
td.visible-lg {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-lg {
display: none !important;
}
tr.visible-lg {
display: none !important;
}
th.visible-lg,
td.visible-lg {
display: none !important;
}
}
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
}
.hidden-xs {
display: none !important;
}
tr.hidden-sm {
tr.hidden-xs {
display: none !important;
}
th.hidden-xs,
td.hidden-xs {
display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-xs {
display: block !important;
}
tr.hidden-xs {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-xs {
display: block !important;
}
tr.hidden-xs {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.hidden-xs {
display: block !important;
}
tr.hidden-xs {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
}
}
.hidden-sm {
display: block !important;
}
tr.hidden-sm {
display: table-row !important;
}
th.hidden-sm,
td.hidden-sm {
display: table-cell !important;
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
tr.hidden-sm {
display: none !important;
}
th.hidden-sm,
td.hidden-sm {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-sm {
display: block !important;
}
tr.hidden-sm {
display: table-row !important;
}
th.hidden-sm,
td.hidden-sm {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.hidden-sm {
display: block !important;
}
tr.hidden-sm {
display: table-row !important;
}
th.hidden-sm,
td.hidden-sm {
display: table-cell !important;
}
}
.hidden-md {
display: block !important;
@ -4669,6 +5451,45 @@ td.hidden-md {
display: table-cell !important;
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-md {
display: block !important;
}
tr.hidden-md {
display: table-row !important;
}
th.hidden-md,
td.hidden-md {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
tr.hidden-md {
display: none !important;
}
th.hidden-md,
td.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-md {
display: block !important;
}
tr.hidden-md {
display: table-row !important;
}
th.hidden-md,
td.hidden-md {
display: table-cell !important;
}
}
.hidden-lg {
display: block !important;
}
@ -4683,56 +5504,6 @@ td.hidden-lg {
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: none !important;
}
tr.visible-sm {
display: none !important;
}
th.visible-sm,
td.visible-sm {
display: none !important;
}
.visible-md {
display: block !important;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
.visible-lg {
display: none !important;
}
tr.visible-lg {
display: none !important;
}
th.visible-lg,
td.visible-lg {
display: none !important;
}
.hidden-sm {
display: block !important;
}
tr.hidden-sm {
display: table-row !important;
}
th.hidden-sm,
td.hidden-sm {
display: table-cell !important;
}
.hidden-md {
display: none !important;
}
tr.hidden-md {
display: none !important;
}
th.hidden-md,
td.hidden-md {
display: none !important;
}
.hidden-lg {
display: block !important;
}
@ -4745,57 +5516,20 @@ td.hidden-lg {
}
}
@media (min-width: 992px) {
.visible-sm {
display: none !important;
}
tr.visible-sm {
display: none !important;
}
th.visible-sm,
td.visible-sm {
display: none !important;
}
.visible-md {
display: none !important;
}
tr.visible-md {
display: none !important;
}
th.visible-md,
td.visible-md {
display: none !important;
}
.visible-lg {
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-lg {
display: block !important;
}
tr.visible-lg {
tr.hidden-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
th.hidden-lg,
td.hidden-lg {
display: table-cell !important;
}
.hidden-sm {
display: block !important;
}
tr.hidden-sm {
display: table-row !important;
}
th.hidden-sm,
td.hidden-sm {
display: table-cell !important;
}
.hidden-md {
display: block !important;
}
tr.hidden-md {
display: table-row !important;
}
th.hidden-md,
td.hidden-md {
display: table-cell !important;
}
@media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}

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

File diff suppressed because one or more lines are too long

73
dist/js/bootstrap.js vendored
View File

@ -314,6 +314,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
Carousel.DEFAULTS = {
interval: 5000
, pause: 'hover'
, wrap: true
}
Carousel.prototype.cycle = function (e) {
@ -378,12 +379,15 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var fallback = type == 'next' ? 'first' : 'last'
var that = this
if (!$next.length) {
if (!this.options.wrap) return
$next = this.$element.find('.item')[fallback]()
}
this.sliding = true
isCycling && this.pause()
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })
if ($next.hasClass('active')) return
@ -535,7 +539,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
var actives = this.$parent && this.$parent.find('> .panel > .in')
if (actives && actives.length) {
var hasData = actives.data('bs.collapse')
@ -656,7 +660,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var $parent = parent && $(parent)
if (!data || !data.transitioning) {
if ($parent) $parent.find('[data-toggle=collapse][data-parent=' + parent + ']').not($this).addClass('collapsed')
if ($parent) $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
$this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
}
@ -851,7 +855,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
this.$backdrop =
this.isShown = null
if (this.options.remote) this.$element.find('.modal-body').load(this.options.remote)
if (this.options.remote) this.$element.load(this.options.remote)
}
Modal.DEFAULTS = {
@ -860,13 +864,13 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
, show: true
}
Modal.prototype.toggle = function () {
return this[!this.isShown ? 'show' : 'hide']()
Modal.prototype.toggle = function (_relatedTarget) {
return this[!this.isShown ? 'show' : 'hide'](_relatedTarget)
}
Modal.prototype.show = function () {
Modal.prototype.show = function (_relatedTarget) {
var that = this
var e = $.Event('show.bs.modal')
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
this.$element.trigger(e)
@ -895,13 +899,15 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
that.enforceFocus()
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$element
.one($.support.transition.end, function () {
that.$element.focus().trigger('shown.bs.modal')
that.$element.focus().trigger(e)
})
.emulateTransitionEnd(300) :
that.$element.focus().trigger('shown.bs.modal')
that.$element.focus().trigger(e)
})
}
@ -923,6 +929,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
this.$element
.removeClass('in')
.attr('aria-hidden', true)
.off('click.dismiss.modal')
$.support.transition && this.$element.hasClass('fade') ?
this.$element
@ -975,7 +982,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
this.$element.on('click', $.proxy(function (e) {
this.$element.on('click.dismiss.modal', $.proxy(function (e) {
if (e.target !== e.currentTarget) return
this.options.backdrop == 'static'
? this.$element[0].focus.call(this.$element[0])
@ -1014,15 +1021,15 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var old = $.fn.modal
$.fn.modal = function (option) {
$.fn.modal = function (option, _relatedTarget) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.modal')
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]()
else if (options.show) data.show()
if (typeof option == 'string') data[option](_relatedTarget)
else if (options.show) data.show(_relatedTarget)
})
}
@ -1050,23 +1057,21 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
e.preventDefault()
$target
.modal(option)
.modal(option, this)
.one('hide', function () {
$this.is(':visible') && $this.focus()
})
})
$(function () {
var $body = $(document.body)
.on('shown.bs.modal', '.modal', function () { $body.addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $body.removeClass('modal-open') })
})
$(document)
.on('shown.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
}(window.jQuery);
/* ========================================================================
* Bootstrap: tooltip.js v3.0.0
* http://twbs.github.com/bootstrap/javascript.html#affix
* http://twbs.github.com/bootstrap/javascript.html#tooltip
* Inspired by the original jQuery.tipsy by Jason Frame
* ========================================================================
* Copyright 2012 Twitter, Inc.
@ -1157,16 +1162,20 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
return options
}
Tooltip.prototype.enter = function (obj) {
var defaults = this.getDefaults()
Tooltip.prototype.getDelegateOptions = function () {
var options = {}
var defaults = this.getDefaults()
this._options && $.each(this._options, function (key, value) {
if (defaults[key] != value) options[key] = value
})
return options
}
Tooltip.prototype.enter = function (obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](options).data('bs.' + this.type)
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
clearTimeout(self.timeout)
@ -1180,7 +1189,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
Tooltip.prototype.leave = function (obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this._options).data('bs.' + this.type)
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
clearTimeout(self.timeout)
@ -1245,7 +1254,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
.addClass(placement)
}
var calculatedOffset = this.getCalcuatedOffset(placement, pos, actualWidth, actualHeight)
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
this.applyPlacement(calculatedOffset, placement)
this.$element.trigger('shown.bs.' + this.type)
@ -1358,7 +1367,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
}, this.$element.offset())
}
Tooltip.prototype.getCalcuatedOffset = function (placement, pos, actualWidth, actualHeight) {
Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
@ -1405,7 +1414,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
}
Tooltip.prototype.toggle = function (e) {
var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this
var self = e ? $(e.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) : this
self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
}
@ -1503,13 +1512,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
$tip.removeClass('fade top bottom left right in')
// Hide empty titles
//
// IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
// this manually by checking the contents.
if ($tip.find('.popover-title').html() === '') {
$tip.find('.popover-title').hide();
}
if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()
}
Popover.prototype.hasContent = function () {

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

File diff suppressed because one or more lines are too long

109
getting-started.html
View File

@ -15,9 +15,14 @@ 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>
<p>Until Bootstrap 3.0.0 is finalized, download the latest full source code (includes compiled and minified versions of our CSS and JavaScript under the <code>dist/</code> directory).</p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest Bootstrap 3</a></p>
<!--
<h3>Download compiled CSS and JS</h3>
<p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
<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>
<div class="bs-docs-dl-options">
@ -103,8 +108,8 @@ bootstrap/
<body>
<h1>Hello, world!</h1>
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
@ -120,11 +125,11 @@ bootstrap/
<!-- Browser compatibility
<!-- Browser support
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="browsers">Browser compatibility</h1>
<h1 id="browsers">Browser support</h1>
</div>
<p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older and less advanced browsers might receive a less stylized, though fully functional, version of certain components.</p>
@ -149,6 +154,102 @@ bootstrap/
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% endhighlight %}
<p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
<h3>Windows Phone 8 and Internet Explorer 10</h3>
<p>Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.</p>
{% highlight css %}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
{% endhighlight %}
{% highlight js %}
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
{% endhighlight %}
<p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
<h3>Safari percent rounding</h3>
<p>In the latest Safari for Mac, its rendering engine has a little trouble with the long decimal places of our <code>.col-*-1</code> grid classes, meaning if you have 12 individual columns you'll notice they come up short compared to other rows of columns. There's not much we can do here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
<ul>
<li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
<li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
</ul>
<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>
<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>
</div>
<!-- Third party support
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="third-parties">Third party support</h1>
</div>
<p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.</p>
<h3>Google Maps</h3>
<p>If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of <code>* { box-sizing: border-box; }</code>. Previously, you may have also ran into issues with the use of <code>max-width</code> on images. The following snippet should avoid all those problems.</p>
{% highlight css %}
/* Fix Google Maps canvas
*
* Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
* global `box-sizing` changes. You may optionally need to reset the `max-width`
* on images in case you've applied that anywhere else. (That shouldn't be as
* necessary with Bootstrap 3 though as that behavior is relegated to the
* `.img-responsive` class.)
*/
.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }
/* Optional responsive image override */
img { max-width: none; }
{% endhighlight %}
</div>
<!-- Accessibility
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="accessibility">Accessibility</h1>
</div>
<p class="lead">Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>
<h3>Skip navigation</h3>
<p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to content</code> link immediately after your opening <code>&lt;body&gt;</code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
{% highlight html %}
<body>
<a href="#content" class="sr-only">Skip to content</a>
<div class="container" id="content">
The main page content.
</div>
</body>
{% endhighlight %}
<h3>Nested headers</h3>
<p>Another "gotcha" has to do with how you nest your <code>&lt;header&gt;</code> elements. <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">Section 508</a> states that your largest header must be an <code>h1</code>, and the next header must be an <code>&lt;h2&gt;</code>, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.</p>
<h3>Additional resources</h3>
<ul>
<li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
<li><a href="http://a11yproject.com/">The A11Y Project</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
</ul>
</div>

8
index.html
View File

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

233
javascript.html
View File

@ -196,7 +196,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -215,6 +215,17 @@ $('#myModal').on('show.bs.modal', function (e) {
</div><!-- /.modal -->
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Make modals accessible</h4>
<p>
Be sure to add <code>role="dialog"</code> to your primary modal div. In the example above, <code>div#myModal</code>.<br>
Also, the <code>aria-labelledby</code> attribute references your modal title. In this example, <code>h4#myModalLabel</code>.<br>
Finally, <code>aria-hidden="true"</code> tells assistive technologies to skip DOM elements.<br>
Additionally, you may give a description of your modal dialog. Use the <code>aria-describedby</code> attribute in the modal's primary <code>&lt;div&gt;</code> to point to this description (this is not shown in the above example).
</p>
</div>
<h2 id="modals-usage">Usage</h2>
<h3>Via data attributes</h3>
@ -262,7 +273,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<td>remote</td>
<td>path</td>
<td>false</td>
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the root of the modal element. If you're using the data api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
{% highlight html %}
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
{% endhighlight %}
@ -305,19 +316,19 @@ $('#myModal').modal({
</thead>
<tbody>
<tr>
<td>show</td>
<td>show.bs.modal</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
<td>shown</td>
<td>shown.bs.modal</td>
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
<td>hide</td>
<td>hide.bs.modal</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
</tr>
<tr>
<td>hidden</td>
<td>hidden.bs.modal</td>
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
@ -344,16 +355,17 @@ $('#myModal').on('hidden.bs.modal', function () {
<h3>Within a navbar</h3>
<div class="bs-example">
<div id="navbar-example" class="navbar navbar-static">
<nav id="navbar-example" class="navbar navbar-static" role="navigation">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav" role="navigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
@ -389,7 +401,7 @@ $('#myModal').on('hidden.bs.modal', function () {
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div> <!-- /navbar-example -->
</nav> <!-- /navbar-example -->
</div> <!-- /example -->
<h3>Within tabs</h3>
@ -466,10 +478,43 @@ $('.dropdown-toggle').dropdown()
<h3>Methods</h3>
<h4>$().dropdown('toggle')</h4>
<p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>
<h3>Events</h3>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show.bs.dropdown</td>
<td>This event fires immediately when the show instance method is called.</td>
</tr>
<tr>
<td>shown.bs.dropdown</td>
<td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
</tr>
<tr>
<td>hide.bs.dropdown</td>
<td>This event is fired immediately when the hide instance method has been called.</td>
</tr>
<tr>
<td>hidden.bs.dropdown</td>
<td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
</tr>
</tbody>
</table>
</div><!-- ./bs-table-scrollable -->
{% highlight js %}
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})
{% endhighlight %}
</div>
<!-- ScrollSpy
================================================== -->
<div class="bs-docs-section">
@ -481,8 +526,7 @@ $('.dropdown-toggle').dropdown()
<h2 id="scrollspy-examples">Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-example">
<div id="navbar-example2" class="navbar navbar-static">
<div class="navbar-inner">
<nav id="navbar-example2" class="navbar navbar-static" role="navigation">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a>
<ul class="nav navbar-nav">
@ -499,8 +543,7 @@ $('.dropdown-toggle').dropdown()
</li>
</ul>
</div>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
@ -531,7 +574,7 @@ $('.dropdown-toggle').dropdown()
<h3>Via JavaScript</h3>
<p>Call the scrollspy via JavaScript:</p>
{% highlight js %}
$('#navbar-example').scrollspy(options)
$('body').scrollspy({ target: '#navbar-example' })
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
@ -583,7 +626,7 @@ $('[data-spy="scroll"]').each(function () {
</thead>
<tbody>
<tr>
<td>activate</td>
<td>activate.bs.scrollspy</td>
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
</tr>
</tbody>
@ -704,11 +747,11 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
</thead>
<tbody>
<tr>
<td>show</td>
<td>show.bs.tab</td>
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
<tr>
<td>shown</td>
<td>shown.bs.tab</td>
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
</tbody>
@ -873,19 +916,19 @@ $('#example').tooltip(options)
</thead>
<tbody>
<tr>
<td>show</td>
<td>show.bs.tooltip</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
<td>shown</td>
<td>shown.bs.tooltip</td>
<td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
<td>hide</td>
<td>hide.bs.tooltip</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
</tr>
<tr>
<td>hidden</td>
<td>hidden.bs.tooltip</td>
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
@ -1097,19 +1140,19 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
</thead>
<tbody>
<tr>
<td>show</td>
<td>show.bs.popover</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
<td>shown</td>
<td>shown.bs.popover</td>
<td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
<td>hide</td>
<td>hide.bs.popover</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
</tr>
<tr>
<td>hidden</td>
<td>hidden.bs.popover</td>
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
@ -1134,14 +1177,14 @@ $('#myPopover').on('hidden.bs.popover', function () {
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example">
<div class="alert fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
</div><!-- /example -->
<div class="bs-example">
<div class="alert alert-block alert-error fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<div class="alert alert-block alert-danger fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
@ -1157,7 +1200,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
<h3>Markup</h3>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
{% highlight html %}<a class="close" data-dismiss="alert" href="#">&times;</a>{% endhighlight %}
{% highlight html %}<a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>{% endhighlight %}
<h3>Methods</h3>
@ -1181,11 +1224,11 @@ $('#myPopover').on('hidden.bs.popover', function () {
</thead>
<tbody>
<tr>
<td>close</td>
<td>close.bs.alert</td>
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
</tr>
<tr>
<td>closed</td>
<td>closed.bs.alert</td>
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
@ -1358,42 +1401,48 @@ $('.nav-tabs').button()
</div>
<h2 id="collapse-examples">Example accordion</h2>
<p>Using the collapse plugin, we built a simple accordion style widget:</p>
<p>Using the collapse plugin, we built a simple accordion by extending the panel component.</p>
<div class="bs-example">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<div class="panel-group" id="accordion">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h3>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h3>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h3>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
@ -1401,40 +1450,46 @@ $('.nav-tabs').button()
</div>
</div><!-- /example -->
{% highlight html %}
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<div class="panel-group" id="accordion">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h3>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
...
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h3>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
...
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h3>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
...
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
@ -1523,21 +1578,21 @@ $('#myCollapsible').collapse({
</thead>
<tbody>
<tr>
<td>show</td>
<td>show.bs.collapse</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
<td>shown</td>
<td>shown.bs.collapse</td>
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
<td>hide</td>
<td>hide.bs.collapse</td>
<td>
This event is fired immediately when the <code>hide</code> method has been called.
</td>
</tr>
<tr>
<td>hidden</td>
<td>hidden.bs.collapse</td>
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
@ -1570,13 +1625,13 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="">
<img src="data:image/png;base64," data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="">
<img src="data:image/png;base64," data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="">
<img src="data:image/png;base64," data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
@ -1599,7 +1654,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
@ -1632,21 +1687,21 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="">
<img data-src="holder.js/900x500/auto/#777:#777" src="data:image/png;base64," alt="First slide image">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#666" alt="">
<img data-src="holder.js/900x500/auto/#666:#666" src="data:image/png;base64," alt="Second slide image">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="">
<img data-src="holder.js/900x500/auto/#555:#5555" src="data:image/png;base64," alt="Third slide image">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
@ -1663,7 +1718,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</div><!-- /example -->
{% highlight html %}
<div class="item active">
<img src="..." alt="">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
@ -1671,6 +1726,10 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
<h4>Accessibility issue</h4>
<p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p>
</div>
<h2 id="carousel-usage">Usage</h2>
@ -1708,6 +1767,12 @@ $('.carousel').carousel()
<td>"hover"</td>
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
</tr>
<tr>
<td>wrap</td>
<td>boolean</td>
<td>true</td>
<td>Whether the carousel should cycle continuously or have hard stops.</td>
</tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
@ -1716,7 +1781,7 @@ $('.carousel').carousel()
<h4>.carousel(options)</h4>
<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
{% highlight html %}
{% highlight js %}
$('.carousel').carousel({
interval: 2000
})
@ -1750,11 +1815,11 @@ $('.carousel').carousel({
</thead>
<tbody>
<tr>
<td>slide</td>
<td>slide.bs.carousel</td>
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
</tr>
<tr>
<td>slid</td>
<td>slid.bs.carousel</td>
<td>This event is fired when the carousel has completed its slide transition.</td>
</tr>
</tbody>

8
js/carousel.js
View File

@ -41,6 +41,7 @@
Carousel.DEFAULTS = {
interval: 5000
, pause: 'hover'
, wrap: true
}
Carousel.prototype.cycle = function (e) {
@ -105,12 +106,15 @@
var fallback = type == 'next' ? 'first' : 'last'
var that = this
if (!$next.length) {
if (!this.options.wrap) return
$next = this.$element.find('.item')[fallback]()
}
this.sliding = true
isCycling && this.pause()
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })
if ($next.hasClass('active')) return

4
js/collapse.js
View File

@ -48,7 +48,7 @@
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
var actives = this.$parent && this.$parent.find('> .panel > .in')
if (actives && actives.length) {
var hasData = actives.data('bs.collapse')
@ -169,7 +169,7 @@
var $parent = parent && $(parent)
if (!data || !data.transitioning) {
if ($parent) $parent.find('[data-toggle=collapse][data-parent=' + parent + ']').not($this).addClass('collapsed')
if ($parent) $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
$this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
}

35
js/modal.js
View File

@ -29,7 +29,7 @@
this.$backdrop =
this.isShown = null
if (this.options.remote) this.$element.find('.modal-body').load(this.options.remote)
if (this.options.remote) this.$element.load(this.options.remote)
}
Modal.DEFAULTS = {
@ -38,13 +38,13 @@
, show: true
}
Modal.prototype.toggle = function () {
return this[!this.isShown ? 'show' : 'hide']()
Modal.prototype.toggle = function (_relatedTarget) {
return this[!this.isShown ? 'show' : 'hide'](_relatedTarget)
}
Modal.prototype.show = function () {
Modal.prototype.show = function (_relatedTarget) {
var that = this
var e = $.Event('show.bs.modal')
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
this.$element.trigger(e)
@ -73,13 +73,15 @@
that.enforceFocus()
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$element
.one($.support.transition.end, function () {
that.$element.focus().trigger('shown.bs.modal')
that.$element.focus().trigger(e)
})
.emulateTransitionEnd(300) :
that.$element.focus().trigger('shown.bs.modal')
that.$element.focus().trigger(e)
})
}
@ -101,6 +103,7 @@
this.$element
.removeClass('in')
.attr('aria-hidden', true)
.off('click.dismiss.modal')
$.support.transition && this.$element.hasClass('fade') ?
this.$element
@ -153,7 +156,7 @@
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
this.$element.on('click', $.proxy(function (e) {
this.$element.on('click.dismiss.modal', $.proxy(function (e) {
if (e.target !== e.currentTarget) return
this.options.backdrop == 'static'
? this.$element[0].focus.call(this.$element[0])
@ -192,15 +195,15 @@
var old = $.fn.modal
$.fn.modal = function (option) {
$.fn.modal = function (option, _relatedTarget) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.modal')
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]()
else if (options.show) data.show()
if (typeof option == 'string') data[option](_relatedTarget)
else if (options.show) data.show(_relatedTarget)
})
}
@ -228,16 +231,14 @@
e.preventDefault()
$target
.modal(option)
.modal(option, this)
.one('hide', function () {
$this.is(':visible') && $this.focus()
})
})
$(function () {
var $body = $(document.body)
.on('shown.bs.modal', '.modal', function () { $body.addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $body.removeClass('modal-open') })
})
$(document)
.on('shown.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
}(window.jQuery);

6
js/popover.js
View File

@ -58,13 +58,9 @@
$tip.removeClass('fade top bottom left right in')
// Hide empty titles
//
// IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
// this manually by checking the contents.
if ($tip.find('.popover-title').html() === '') {
$tip.find('.popover-title').hide();
}
if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()
}
Popover.prototype.hasContent = function () {

35
js/tests/unit/collapse.js
View File

@ -126,4 +126,39 @@ $(function () {
target3.click()
})
test("should allow dots in data-parent", function () {
$.support.transition = false
stop()
var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
.appendTo($('#qunit-fixture'))
var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(0))
var collapsible1 = $('<div id="body1" class="in"></div>')
.appendTo(accordion.find('.accordion-group').eq(0))
var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(1))
var collapsible2 = $('<div id="body2"></div>')
.appendTo(accordion.find('.accordion-group').eq(1))
var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(2))
var collapsible3 = $('<div id="body3"></div>')
.appendTo(accordion.find('.accordion-group').eq(2))
.on('show.bs.collapse', function () {
ok(target1.hasClass('collapsed'))
ok(target2.hasClass('collapsed'))
ok(!target3.hasClass('collapsed'))
start()
})
target3.click()
})
})

21
js/tests/unit/modal.js
View File

@ -153,4 +153,25 @@ $(function () {
})
.modal("show")
})
test("should trigger hide event once when clicking outside of modal-content", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'><div class='contents'></div></div>")
var triggered
div
.bind("shown.bs.modal", function () {
triggered = 0
$('#modal-test').click()
})
.one("hidden.bs.modal", function() {
div.modal("show")
})
.bind("hide.bs.modal", function () {
triggered += 1
ok(triggered === 1, 'modal hide triggered once')
start()
})
.modal("show")
})
})

20
js/tooltip.js
View File

@ -1,6 +1,6 @@
/* ========================================================================
* Bootstrap: tooltip.js v3.0.0
* http://twbs.github.com/bootstrap/javascript.html#affix
* http://twbs.github.com/bootstrap/javascript.html#tooltip
* Inspired by the original jQuery.tipsy by Jason Frame
* ========================================================================
* Copyright 2012 Twitter, Inc.
@ -91,16 +91,20 @@
return options
}
Tooltip.prototype.enter = function (obj) {
var defaults = this.getDefaults()
Tooltip.prototype.getDelegateOptions = function () {
var options = {}
var defaults = this.getDefaults()
this._options && $.each(this._options, function (key, value) {
if (defaults[key] != value) options[key] = value
})
return options
}
Tooltip.prototype.enter = function (obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](options).data('bs.' + this.type)
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
clearTimeout(self.timeout)
@ -114,7 +118,7 @@
Tooltip.prototype.leave = function (obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this._options).data('bs.' + this.type)
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
clearTimeout(self.timeout)
@ -179,7 +183,7 @@
.addClass(placement)
}
var calculatedOffset = this.getCalcuatedOffset(placement, pos, actualWidth, actualHeight)
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
this.applyPlacement(calculatedOffset, placement)
this.$element.trigger('shown.bs.' + this.type)
@ -292,7 +296,7 @@
}, this.$element.offset())
}
Tooltip.prototype.getCalcuatedOffset = function (placement, pos, actualWidth, actualHeight) {
Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
@ -339,7 +343,7 @@
}
Tooltip.prototype.toggle = function (e) {
var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this
var self = e ? $(e.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) : this
self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
}

31
less/accordion.less
View File

@ -1,31 +0,0 @@
//
// Accordion
// --------------------------------------------------
// Parent container
.accordion {
margin-bottom: @line-height-computed;
}
// Group == heading + body
.accordion-group {
margin-bottom: 2px;
border: 1px solid @accordion-border-color;
border-radius: @border-radius-base;
}
.accordion-heading {
border-bottom: 0;
.accordion-toggle {
display: block;
padding: 8px 15px;
cursor: pointer;
}
}
// Inner needs the styles because you can't animate properly with any styles on the element
.accordion-inner {
padding: 9px 15px;
border-top: 1px solid @accordion-border-color;
}

29
less/alerts.less
View File

@ -7,7 +7,7 @@
// -------------------------
.alert {
padding: @alert-padding (@alert-padding + 20) @alert-padding @alert-padding;
padding: @alert-padding;
margin-bottom: @line-height-computed;
color: @alert-text;
background-color: @alert-bg;
@ -30,14 +30,6 @@
color: darken(@alert-text, 10%);
}
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
// Improve alignment and spacing of inner content
> p,
> ul {
@ -48,8 +40,25 @@
}
}
// Dismissable alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissable {
padding-right: (@alert-padding + 20);
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
}
// Alternate styles
// -------------------------
//
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);

2
less/badges.less
View File

@ -18,7 +18,7 @@
background-color: @badge-bg;
border-radius: @badge-border-radius;
// Empty labels/badges collapse
// Empty badges collapse automatically (not available in IE8)
&:empty {
display: none;
}

1
less/bootstrap.less vendored
View File

@ -55,7 +55,6 @@
@import "labels.less";
@import "badges.less";
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
@import "jumbotron.less";

57
less/button-groups.less
View File

@ -55,9 +55,14 @@
}
// Prevent double borders when buttons are next to each other
.btn-group .btn + .btn {
.btn-group {
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -1px;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
@ -117,6 +122,14 @@
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { .btn-xs(); }
.btn-group-sm > .btn { .btn-sm(); }
.btn-group-lg > .btn { .btn-lg(); }
// Split button dropdowns
// ----------------------
@ -155,26 +168,58 @@
// Vertical button groups
// ----------------------
.btn-group-vertical > .btn {
.btn-group-vertical {
> .btn,
> .btn-group {
display: block;
float: none;
width: 100%;
max-width: 100%;
+ .btn {
}
// Clear floats so dropdown menus can be properly placed
> .btn-group {
.clearfix();
> .btn {
float: none;
}
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
}
.btn-group-vertical .btn {
.btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
border-top-right-radius: @border-radius-base;
.border-bottom-radius(0);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: @border-radius-base;
.border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
.border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
.border-top-radius(0);
}
// Justified button groups
@ -193,7 +238,7 @@
// Checkbox and radio options
.btn-group[data-toggle="buttons"] > .btn > input[type="radio"],
.btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] {
[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
display: none;
}

24
less/buttons.less
View File

@ -54,26 +54,26 @@
// --------------------------------------------------
.btn-default {
.btn-pseudo-states(@btn-default-color; @btn-default-bg; @btn-default-border);
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-primary {
.btn-pseudo-states(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
// Warning appears as orange
.btn-warning {
.btn-pseudo-states(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.btn-pseudo-states(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// Success appears as green
.btn-success {
.btn-pseudo-states(@btn-success-color; @btn-success-bg; @btn-success-border);
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Info appears as blue-green
.btn-info {
.btn-pseudo-states(@btn-info-color; @btn-info-bg; @btn-info-border);
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
@ -121,17 +121,13 @@
// --------------------------------------------------
.btn-lg {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
line-height: @line-height-large; // ensure even-numbered height of button next to large input
border-radius: @border-radius-large;
// line-height: ensure even-numbered height of button next to large input
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}
.btn-sm,
.btn-xs {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
line-height: @line-height-small; // ensure proper height of button next to small input
border-radius: @border-radius-small;
// line-height: ensure proper height of button next to small input
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
.btn-xs {
padding: 3px 5px;

6
less/carousel.less
View File

@ -81,13 +81,11 @@
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
background-color: transparent;
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
background-color: transparent;
}
// Hover/focus state
@ -99,7 +97,6 @@
}
// Toggles
.glyphicon,
.icon-prev,
.icon-next {
position: absolute;
@ -113,7 +110,7 @@
margin-left: -10px;
font-family: serif;
}
// Non-glyphicon toggles
.icon-prev {
&:before {
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
@ -184,7 +181,6 @@
@media screen and (min-width: @screen-tablet) {
// Scale up the controls a smidge
.carousel-control .glyphicon,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;

7
less/code.less
View File

@ -16,7 +16,7 @@ code {
color: @code-color;
background-color: @code-bg;
white-space: nowrap;
border-radius: 4px;
border-radius: @border-radius-base;
}
// Blocks of code
@ -28,7 +28,7 @@ pre {
line-height: @line-height-base;
word-break: break-all;
word-wrap: break-word;
color: @gray-dark;
color: @pre-color;
background-color: @pre-bg;
border: 1px solid @pre-border-color;
border-radius: @border-radius-base;
@ -41,6 +41,7 @@ pre {
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
@ -50,6 +51,6 @@ pre {
// Enable scrollable blocks of code
.pre-scrollable {
max-height: 340px;
max-height: @pre-scrollable-max-height;
overflow-y: scroll;
}

31
less/dropdowns.less
View File

@ -4,7 +4,6 @@
// Dropdown arrow/caret
// --------------------
.caret {
display: inline-block;
width: 0;
@ -18,13 +17,16 @@
}
// The dropdown wrapper (div)
// --------------------------
.dropdown {
position: relative;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
outline: 0;
}
// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
position: absolute;
top: 100%;
@ -36,12 +38,13 @@
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
font-size: @font-size-base;
background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0,0,0,.175));
.background-clip(padding-box);
background-clip: padding-box;
// Aligns the dropdown menu to right
&.pull-right {
@ -67,18 +70,17 @@
}
// Hover/Focus state
// -----------
.dropdown-menu > li > a {
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%);
}
}
// Active state
// ------------
.dropdown-menu > .active > a {
&,
&:hover,
@ -87,17 +89,19 @@
text-decoration: none;
outline: 0;
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
background-color: darken(@dropdown-link-active-bg, 5%);
}
}
// Disabled state
// --------------
//
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a {
&,
&:hover,
&:focus {
color: @gray-light;
color: @dropdown-link-disabled-color;
}
}
// Nuke hover/focus effects
@ -113,7 +117,6 @@
}
// Open state for the dropdown
// ---------------------------
.open {
// Show the menu
> .dropdown-menu {
@ -127,19 +130,15 @@
}
// Dropdown section headers
// ---------------------------
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: @font-size-small;
line-height: @line-height-base;
color: @gray-light;
color: @dropdown-header-color;
}
// Backdrop to catch body clicks on mobile, etc.
// ---------------------------
.dropdown-backdrop {
position: fixed;
left: 0;
@ -150,16 +149,16 @@
}
// Right aligned dropdowns
// ---------------------------
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret

68
less/forms.less
View File

@ -20,7 +20,7 @@ legend {
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
line-height: inherit;
color: @gray-dark;
color: @legend-color;
border: 0;
border-bottom: 1px solid @legend-border-color;
}
@ -121,7 +121,7 @@ input[type="number"] {
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @gray;
color: @input-color;
vertical-align: middle;
background-color: @input-bg;
border: 1px solid @input-border;
@ -208,43 +208,13 @@ input[type="number"] {
}
// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.input-sm {
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
.input-lg {
height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
line-height: @line-height-large;
border-radius: @border-radius-large;
}
.input-sm {
height: @input-height-small;
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
line-height: @line-height-small;
border-radius: @border-radius-small;
}
select {
&.input-lg {
height: @input-height-large;
line-height: @input-height-large;
}
&.input-sm {
height: @input-height-small;
line-height: @input-height-small;
}
}
textarea {
&.input-lg,
&.input-sm {
height: auto;
}
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}
@ -293,12 +263,28 @@ textarea {
// Inline forms
//
// Make forms appear inline(-block).
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
.form-inline {
.form-control,
.radio,
.checkbox {
// Kick in the inline
@media (min-width: @screen-tablet) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
}
@ -307,6 +293,7 @@ textarea {
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
.radio,
.checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
@ -317,6 +304,7 @@ textarea {
margin-left: 0;
}
}
}
// Horizontal forms

204
less/grid.less
View File

@ -2,6 +2,7 @@
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
.container {
.container-fixed();
@ -13,18 +14,18 @@
}
// Common styles for small and large grid columns
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
@ -37,6 +38,18 @@
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
@ -58,41 +71,50 @@
}
// Extra small grid
//
// Container and grid column sizing
// Grid classes for extra small devices like smartphones. No offset, push, or
// pull classes are present here due to the size of the target.
//
// Note that `.col-xs-12` doesn't get floated on purpose—there's no need since
// it's full-width.
// Extra small device columns (smartphones)
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11 {
float: left;
}
.col-1 { width: percentage((1 / @grid-columns)); }
.col-2 { width: percentage((2 / @grid-columns)); }
.col-3 { width: percentage((3 / @grid-columns)); }
.col-4 { width: percentage((4 / @grid-columns)); }
.col-5 { width: percentage((5 / @grid-columns)); }
.col-6 { width: percentage((6 / @grid-columns)); }
.col-7 { width: percentage((7 / @grid-columns)); }
.col-8 { width: percentage((8 / @grid-columns)); }
.col-9 { width: percentage((9 / @grid-columns)); }
.col-10 { width: percentage((10/ @grid-columns)); }
.col-11 { width: percentage((11/ @grid-columns)); }
.col-12 { width: 100%; }
.col-xs-1 { width: percentage((1 / @grid-columns)); }
.col-xs-2 { width: percentage((2 / @grid-columns)); }
.col-xs-3 { width: percentage((3 / @grid-columns)); }
.col-xs-4 { width: percentage((4 / @grid-columns)); }
.col-xs-5 { width: percentage((5 / @grid-columns)); }
.col-xs-6 { width: percentage((6 / @grid-columns)); }
.col-xs-7 { width: percentage((7 / @grid-columns)); }
.col-xs-8 { width: percentage((8 / @grid-columns)); }
.col-xs-9 { width: percentage((9 / @grid-columns)); }
.col-xs-10 { width: percentage((10/ @grid-columns)); }
.col-xs-11 { width: percentage((11/ @grid-columns)); }
.col-xs-12 { width: 100%; }
// Small device columns (phones to tablets)
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
//
// Note that `.col-sm-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@media (min-width: @screen-tablet) {
.container {
max-width: @container-tablet;
}
@ -107,8 +129,7 @@
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
.col-sm-11 {
float: left;
}
.col-sm-1 { width: percentage((1 / @grid-columns)); }
@ -163,11 +184,96 @@
.col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
// Medium and large device columns (desktop and up)
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
//
// Note that `.col-md-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@media (min-width: @screen-desktop) {
.container {
max-width: @container-desktop;
}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11 {
float: left;
}
.col-md-1 { width: percentage((1 / @grid-columns)); }
.col-md-2 { width: percentage((2 / @grid-columns)); }
.col-md-3 { width: percentage((3 / @grid-columns)); }
.col-md-4 { width: percentage((4 / @grid-columns)); }
.col-md-5 { width: percentage((5 / @grid-columns)); }
.col-md-6 { width: percentage((6 / @grid-columns)); }
.col-md-7 { width: percentage((7 / @grid-columns)); }
.col-md-8 { width: percentage((8 / @grid-columns)); }
.col-md-9 { width: percentage((9 / @grid-columns)); }
.col-md-10 { width: percentage((10/ @grid-columns)); }
.col-md-11 { width: percentage((11/ @grid-columns)); }
.col-md-12 { width: 100%; }
// Push and pull columns for source order changes
.col-md-push-1 { left: percentage((1 / @grid-columns)); }
.col-md-push-2 { left: percentage((2 / @grid-columns)); }
.col-md-push-3 { left: percentage((3 / @grid-columns)); }
.col-md-push-4 { left: percentage((4 / @grid-columns)); }
.col-md-push-5 { left: percentage((5 / @grid-columns)); }
.col-md-push-6 { left: percentage((6 / @grid-columns)); }
.col-md-push-7 { left: percentage((7 / @grid-columns)); }
.col-md-push-8 { left: percentage((8 / @grid-columns)); }
.col-md-push-9 { left: percentage((9 / @grid-columns)); }
.col-md-push-10 { left: percentage((10/ @grid-columns)); }
.col-md-push-11 { left: percentage((11/ @grid-columns)); }
.col-md-pull-1 { right: percentage((1 / @grid-columns)); }
.col-md-pull-2 { right: percentage((2 / @grid-columns)); }
.col-md-pull-3 { right: percentage((3 / @grid-columns)); }
.col-md-pull-4 { right: percentage((4 / @grid-columns)); }
.col-md-pull-5 { right: percentage((5 / @grid-columns)); }
.col-md-pull-6 { right: percentage((6 / @grid-columns)); }
.col-md-pull-7 { right: percentage((7 / @grid-columns)); }
.col-md-pull-8 { right: percentage((8 / @grid-columns)); }
.col-md-pull-9 { right: percentage((9 / @grid-columns)); }
.col-md-pull-10 { right: percentage((10/ @grid-columns)); }
.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
//
// 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) {
.container {
max-width: @container-large-desktop;
}
.col-lg-1,
.col-lg-2,
.col-lg-3,
@ -178,8 +284,7 @@
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
.col-lg-11 {
float: left;
}
.col-lg-1 { width: percentage((1 / @grid-columns)); }
@ -233,10 +338,3 @@
.col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
// Large desktops and up
@media (min-width: @screen-large-desktop) {
.container {
max-width: @container-large-desktop;
}
}

15
less/input-groups.less
View File

@ -22,6 +22,19 @@
}
}
// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { .input-lg(); }
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { .input-sm(); }
// Display as table-cell
// -------------------------
.input-group-addon,
@ -49,7 +62,7 @@
font-weight: normal;
line-height: 1;
text-align: center;
background-color: @gray-lighter;
background-color: @input-group-addon-bg;
border: 1px solid @input-group-addon-border-color;
border-radius: @border-radius-base;

7
less/labels.less
View File

@ -6,7 +6,7 @@
display: inline;
padding: .25em .6em;
font-size: 75%;
font-weight: 500;
font-weight: bold;
line-height: 1;
color: @label-color;
text-align: center;
@ -23,6 +23,11 @@
cursor: pointer;
}
}
// Empty labels collapse automatically (not available in IE8)
&:empty {
display: none;
}
}
// Colors

47
less/list-group.less
View File

@ -17,7 +17,7 @@
.list-group-item {
position: relative;
display: block;
padding: 10px 30px 10px 15px;
padding: 10px 15px;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
background-color: @list-group-bg;
@ -25,44 +25,28 @@
// Round the first and last items
&:first-child {
.border-top-radius(@border-radius-base);
.border-top-radius(@list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
.border-bottom-radius(@border-radius-base);
.border-bottom-radius(@list-group-border-radius);
}
// Align badges within list items
> .badge {
float: right;
margin-right: -15px;
}
}
// Custom content options
// -------------------------
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
> .badge + .badge {
margin-right: 5px;
}
// Linked list items
// -------------------------
a& {
color: @list-group-link-color;
// Custom content within linked items
a.list-group-item {
// Colorize content accordingly
.list-group-item-heading {
color: @list-group-link-heading-color;
}
.list-group-item-text {
color: @list-group-link-color;
}
// Hover state
&:hover,
@ -70,9 +54,12 @@ a.list-group-item {
text-decoration: none;
background-color: @list-group-hover-bg;
}
}
// Active class on item itself, not parent
&.active {
&.active,
&.active:hover,
&.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-color;
background-color: @list-group-active-bg;
@ -87,3 +74,15 @@ a.list-group-item {
}
}
}
// Custom content options
// -------------------------
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}

251
less/mixins.less
View File

@ -163,16 +163,6 @@
backface-visibility: @visibility;
}
// Background clipping
.background-clip(@clip) {
background-clip: @clip;
}
// Background sizing
.background-size(@size) {
background-size: @size;
}
// Box sizing
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
@ -236,7 +226,6 @@
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-color: @end-color;
background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
@ -250,7 +239,6 @@
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-color: @end-color;
background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
@ -260,14 +248,12 @@
}
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
background-color: @end-color;
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
}
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-color: mix(@mid-color, @end-color, 80%);
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
@ -275,9 +261,7 @@
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-color: mix(@mid-color, @end-color, 80%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
@ -286,7 +270,6 @@
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@inner-color: #555; @outer-color: #333) {
background-color: @outer-color;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
@ -294,7 +277,6 @@
background-repeat: no-repeat;
}
.striped(@color: #555; @angle: 45deg) {
background-color: @color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
@ -345,6 +327,25 @@
background-color: @color;
}
// Panels
// -------------------------
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
border-color: @border;
.panel-heading {
color: @heading-text-color;
background-color: @heading-bg-color;
border-color: @heading-border;
+ .panel-collapse .panel-body {
border-top-color: @border;
}
}
.panel-footer {
+ .panel-collapse .panel-body {
border-bottom-color: @border;
}
}
}
// Alerts
// -------------------------
.alert-variant(@background; @border; @text-color) {
@ -359,11 +360,11 @@
}
}
// Button pseudo states
// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.btn-pseudo-states(@color; @background; @border) {
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
@ -391,6 +392,39 @@
}
}
// Button sizes
// -------------------------
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
}
// Pagination
// -------------------------
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
> li {
> a,
> span {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
}
&:first-child {
> a,
> span {
.border-left-radius(@border-radius);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius);
}
}
}
}
// Labels
// -------------------------
.label-variant(@color) {
@ -449,65 +483,34 @@
}
// Creates a wrapper for a series of columns
.make-row() {
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
.container & {
@media (min-width: @screen-small) {
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the columns
.make-column(@columns) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the column offsets
.make-column-offset(@columns) {
@media (min-width: @grid-float-breakpoint) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-column-push(@columns) {
@media (min-width: @grid-float-breakpoint) {
left: percentage((@columns / @grid-columns));
}
}
.make-column-pull(@columns) {
@media (min-width: @grid-float-breakpoint) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-small-column(@columns) {
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
float: left;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
@max-width: (@grid-float-breakpoint - 1);
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@max-width: (@screen-small - 1);
// Calculate width based on number of columns available
@media (max-width: @max-width) {
@ -515,6 +518,105 @@
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-small) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-small) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-small) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-small) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-medium) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-medium) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-medium) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-medium) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-large) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-large) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-large) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-large) {
right: percentage((@columns / @grid-columns));
}
}
// Form validation states
//
@ -566,3 +668,26 @@
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
}
}
// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
height: @input-height;
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
select& {
height: @input-height;
line-height: @input-height;
}
textarea& {
height: auto;
}
}

2
less/modals.less
View File

@ -49,7 +49,7 @@
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
.background-clip(padding-box);
background-clip: padding-box;
// Remove focus outline from opened modal
outline: none;
}

422
less/navbar.less
View File

@ -2,34 +2,186 @@
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: 20px;
padding-left: @navbar-padding-horizontal;
padding-right: @navbar-padding-horizontal;
margin-bottom: @navbar-margin-bottom;
background-color: @navbar-bg;
border-radius: @navbar-border-radius;
border: 1px solid @navbar-border;
// Prevent floats from breaking the navbar
.clearfix();
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-border-radius;
}
}
// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.
.navbar-header {
padding-left: @navbar-padding-horizontal;
padding-right: @navbar-padding-horizontal;
.clearfix();
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.
.navbar-collapse {
padding: 5px @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;
@media (min-width: @grid-float-breakpoint) {
width: auto;
padding-top: 0;
padding-bottom: 0;
border-top: 0;
box-shadow: none;
}
}
//
// Navbar alignment options
//
// Display the navbar across the entirity of the page or fixed it to the top or
// bottom of the page.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
@media (min-width: @grid-float-breakpoint) {
border-width: 0 0 1px;
border-radius: 0;
}
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
border-width: 0 0 1px;
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
}
// Brand/project name
.navbar-brand {
float: left;
margin-right: (@navbar-padding-horizontal / 2);
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
font-size: @font-size-large;
line-height: @line-height-computed;
color: @navbar-brand-color;
&:hover,
&:focus {
color: @navbar-brand-hover-color;
text-decoration: none;
background-color: @navbar-brand-hover-bg;
}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
.navbar-vertical-align(34px);
background-color: transparent;
border: 1px solid @navbar-toggle-border-color;
border-radius: @border-radius-base;
&:hover,
&:focus {
background-color: @navbar-toggle-hover-bg;
}
// Bars
.icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: @navbar-toggle-icon-bar-bg;
border-radius: 1px;
}
.icon-bar + .icon-bar {
margin-top: 4px;
}
}
// Navbar nav links
// -------------------------
//
// Builds on top of the `.nav` components with it's own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
// Space out from .navbar .brand and .btn-navbar when stacked in mobile views
margin-top: 10px;
margin-bottom: 15px;
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-left: 0;
margin-right: 0;
}
> li > a {
padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
padding-top: 10px;
padding-bottom: 10px;
color: @navbar-link-color;
line-height: @line-height-computed;
border-radius: @border-radius-base;
&:hover,
&:focus {
color: @navbar-link-hover-color;
@ -53,136 +205,110 @@
}
}
// Right aligned contents
// Make them full width first so that they align properly on mobile
&.pull-right {
width: 100%;
}
}
//
// Navbar alignment options
// --------------------------------------------------
// Static navbar
.navbar-static-top {
border-radius: 0;
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
border-radius: 0;
}
.navbar-fixed-top {
top: 0;
.nav-collapse {
}
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
}
// Scrollable navbar navigation
//
// Sometimes you might have too many links in your fixed navbar and you need to
// maintain access to all that content. To help, add `.nav-collapse-scrollable`
// to your `.nav-collapse` to prevent the the content from flowing past the max-
// height of your browser.
//
// This is not automatically added to the `.navbar-fixed-top` because it causes
// z-index bugs in iOS7 (possibly earlier).
@media (max-width: @screen-small) {
.nav-collapse-scrollable {
margin-bottom: @navbar-padding-vertical;
max-height: 360px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
//
// Navbar optional components
// --------------------------------------------------
// Brand/project name
.navbar-brand {
display: block;
max-width: 200px;
margin-left: auto;
margin-right: auto;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large;
font-weight: 500;
line-height: @line-height-computed;
color: @navbar-brand-color;
text-align: center;
&:hover,
&:focus {
color: @navbar-brand-hover-color;
text-decoration: none;
background-color: @navbar-brand-hover-bg;
}
}
// Collapsible navbar toggle
.navbar-toggle {
position: relative;
float: right;
height: 34px;
width: 48px;
.navbar-vertical-align(34px);
padding: @padding-base-vertical @padding-base-horizontal;
@media (max-width: @screen-phone-max) {
// Dropdowns get custom display
.open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 1px solid @navbar-toggle-border-color;
border-radius: @border-radius-base;
border: 0;
box-shadow: none;
> li > a,
.dropdown-header {
padding: 5px 15px 5px 25px;
}
> li > a {
color: @navbar-link-color;
line-height: @line-height-computed;
&:hover,
&:focus {
background-color: @navbar-toggle-hover-bg;
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
background-image: none;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
}
}
}
// Bars
.icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: @navbar-toggle-icon-bar-bg;
border-radius: 1px;
}
.icon-bar + .icon-bar {
margin-top: 4px;
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specifity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
@media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); }
.navbar-right { .pull-right(); }
}
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.
.navbar-form {
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
padding: 10px @navbar-padding-horizontal;
border-top: 1px solid darken(@navbar-bg, 7%);
border-bottom: 1px solid darken(@navbar-bg, 7%);
// Mixin behavior for optimum display
.form-inline();
.navbar-vertical-align(@input-height-base); // Vertically center in navbar
.form-group {
@media (max-width: @screen-phone-max) {
margin-bottom: 5px;
}
}
// Vertically center in expanded, horizontal navbar
.navbar-vertical-align(@input-height-base);
// Undo 100% width for pull classes
@media (min-width: @grid-float-breakpoint) {
width: auto;
border: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
}
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
.border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.border-bottom-radius(0);
}
// Dropdown menu items and carets
@ -227,6 +353,7 @@
.navbar-inverse {
background-color: @navbar-inverse-bg;
border-color: @navbar-inverse-border;
.navbar-brand {
color: @navbar-inverse-brand-color;
@ -281,6 +408,10 @@
}
}
.navbar-collapse {
border-top-color: darken(@navbar-inverse-bg, 7%);
}
// Dropdowns
.navbar-nav {
> .open > a {
@ -309,7 +440,41 @@
}
}
}
@media (max-width: @screen-phone-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border-color: @navbar-inverse-border;
}
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
}
}
}
@ -319,12 +484,6 @@
@media screen and (min-width: @grid-float-breakpoint) {
.navbar-brand {
float: left;
margin-left: -(@navbar-padding-horizontal);
margin-right: 5px;
max-width: none; // Disables the default mobile setting
}
.navbar-nav {
float: left;
// undo margin to make nav extend full height of navbar
@ -334,13 +493,10 @@
> li {
float: left;
> a {
border-radius: 0;
padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
}
}
&.pull-right {
width: auto;
}
}
// Required to make the collapsing navbar work on regular desktops
@ -350,9 +506,10 @@
left: auto;
display: none;
}
.nav-collapse.collapse {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
overflow: visible !important;
}
@ -376,7 +533,6 @@
.navbar-text {
float: left;
padding: 0 @navbar-padding-horizontal;
.navbar-vertical-align(@line-height-computed);
}

6
less/navs.less
View File

@ -60,6 +60,12 @@
.nav-divider {
.nav-divider();
}
// Prevent IE8 from misplacing imgs
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
> li > a > img {
max-width: none;
}
}

40
less/pagination.less
View File

@ -63,46 +63,10 @@
// Large
.pagination-lg {
> li {
> a,
> span {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
}
&:first-child {
> a,
> span {
.border-left-radius(@border-radius-large);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius-large);
}
}
}
.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
}
// Small
.pagination-sm {
> li {
> a,
> span {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
}
&:first-child {
> a,
> span {
.border-left-radius(@border-radius-small);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius-small);
}
}
}
.pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
}

103
less/panels.less
View File

@ -5,16 +5,26 @@
// Base class
.panel {
padding: 15px;
margin-bottom: 20px;
margin-bottom: @line-height-computed;
background-color: @panel-bg;
border: 1px solid @panel-border;
border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05));
}
// Panel contents
.panel-body {
padding: 15px;
}
// List groups in panels
//
// By default, space out list group content from panel headings to account for
// any kind of custom content between the two.
.panel {
.list-group {
margin: 15px -15px -15px;
margin-bottom: 0;
.list-group-item {
border-width: 1px 0;
@ -30,15 +40,19 @@
}
}
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
.list-group-item:first-child {
border-top-width: 0;
}
}
// Optional heading
.panel-heading {
margin: -15px -15px 15px;
padding: 10px 15px;
background-color: @panel-heading-bg;
border-bottom: 1px solid @panel-border;
border-top-left-radius: (@panel-border-radius - 1);
border-top-right-radius: (@panel-border-radius - 1);
.border-top-radius(@panel-border-radius - 1);
}
// Within heading, strip any `h*` tag of it's default margins for spacing.
@ -46,7 +60,6 @@
margin-top: 0;
margin-bottom: 0;
font-size: (@font-size-base * 1.25);
font-weight: 500;
> a {
color: inherit;
}
@ -54,52 +67,62 @@
// Optional footer (stays gray in every modifier class)
.panel-footer {
margin: 15px -15px -15px;
padding: 10px 15px;
background-color: @panel-footer-bg;
border-top: 1px solid @panel-border;
border-bottom-left-radius: (@panel-border-radius - 1);
border-bottom-right-radius: (@panel-border-radius - 1);
.border-bottom-radius(@panel-border-radius - 1);
}
// Collapsable panels (aka, accordion)
//
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
// the help of our collapse JavaScript plugin.
.panel-group {
// Tighten up margin so it's only between panels
.panel {
margin-bottom: 0;
border-radius: @panel-border-radius;
overflow: hidden; // crop contents when collapsed
+ .panel {
margin-top: 5px;
}
}
.panel-heading {
border-bottom: 0;
+ .panel-collapse .panel-body {
border-top: 1px solid @panel-border;
}
}
.panel-footer {
border-top: 0;
+ .panel-collapse .panel-body {
border-bottom: 1px solid @panel-border;
}
}
// New subcomponent for wrapping collapsable content for proper animations
.panel-collapse {
}
}
// Contextual variations
.panel-primary {
border-color: @panel-primary-border;
.panel-heading {
color: @panel-primary-text;
background-color: @panel-primary-heading-bg;
border-color: @panel-primary-border;
}
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
}
.panel-success {
border-color: @panel-success-border;
.panel-heading {
color: @panel-success-text;
background-color: @panel-success-heading-bg;
border-color: @panel-success-border;
}
.panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
}
.panel-warning {
border-color: @panel-warning-border;
.panel-heading {
color: @panel-warning-text;
background-color: @panel-warning-heading-bg;
border-color: @panel-warning-border;
}
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
}
.panel-danger {
border-color: @panel-danger-border;
.panel-heading {
color: @panel-danger-text;
background-color: @panel-danger-heading-bg;
border-color: @panel-danger-border;
}
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
}
.panel-info {
border-color: @panel-info-border;
.panel-heading {
color: @panel-info-text;
background-color: @panel-info-heading-bg;
border-color: @panel-info-border;
}
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}

2
less/popovers.less
View File

@ -13,8 +13,6 @@
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: @popover-bg;
-webkit-bg-clip: padding-box;
-moz-bg-clip: padding;
background-clip: padding-box;
border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color;

2
less/progress-bars.less
View File

@ -61,7 +61,7 @@
// Striped bars
.progress-striped .progress-bar {
#gradient > .striped(@progress-bar-bg);
.background-size(40px 40px);
background-size: 40px 40px;
}
// Call animation for the active one

108
less/responsive-utilities.less
View File

@ -35,70 +35,100 @@
// Visibility utilities
// For Phones
.visible-sm {
.visible-xs {
.responsive-visibility();
}
.visible-md {
.responsive-invisibility();
}
.visible-lg {
.responsive-invisibility();
}
.hidden-sm {
.responsive-invisibility();
}
.hidden-md {
.responsive-visibility();
}
.hidden-lg {
.responsive-visibility();
}
// Tablets & small desktops only
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
.responsive-invisibility();
}
}
.visible-sm {
.responsive-invisibility();
}
.visible-md {
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
.visible-lg {
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-invisibility();
}
.hidden-sm {
.responsive-visibility();
}
.hidden-md {
@media (min-width: @screen-large-desktop) {
.responsive-invisibility();
}
.hidden-lg {
.responsive-visibility();
}
}
// For desktops
@media (min-width: @screen-desktop) {
.visible-sm {
.responsive-invisibility();
}
.visible-md {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
.responsive-invisibility();
}
}
.visible-lg {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
.responsive-visibility();
}
}
.hidden-xs {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
.responsive-visibility();
}
}
.hidden-sm {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
.responsive-visibility();
}
}
.hidden-md {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
.responsive-visibility();
}
}
.hidden-lg {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
.responsive-invisibility();
}
}

20
less/scaffolding.less
View File

@ -6,7 +6,9 @@
// Reset the box-sizing
// -------------------------
* {
*,
*:before,
*:after {
.box-sizing(border-box);
}
@ -79,7 +81,7 @@ img {
// Perfect circle
.img-circle {
border-radius: 500px; // crank the border-radius so it works with most reasonably sized images
border-radius: 50%; // set radius in percents
}
@ -93,3 +95,17 @@ hr {
border-top: 1px solid @hr-border;
}
// Only display content to screen readers
// See: http://a11yproject.com/posts/how-to-hide-content/
// -------------------------
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}

4
less/thumbnails.less
View File

@ -10,7 +10,7 @@
// Can be `a`, `div`, or `img`
.thumbnail,
.img-thumbnail {
padding: 4px;
padding: @thumbnail-padding;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
@ -37,6 +37,6 @@ a.thumbnail:focus {
margin-right: auto;
}
.thumbnail .caption {
padding: 9px;
padding: @thumbnail-caption-padding;
color: @thumbnail-caption-color;
}

28
less/variables.less
View File

@ -133,6 +133,7 @@
@input-bg: #fff;
@input-bg-disabled: @gray-lighter;
@input-color: @gray;
@input-border: #ccc;
@input-border-radius: @border-radius-base;
@input-border-focus: #66afe9;
@ -143,8 +144,10 @@
@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@legend-color: @gray-dark;
@legend-border-color: #e5e5e5;
@input-group-addon-bg: @gray-lighter;
@input-group-addon-border-color: @input-border;
@ -163,6 +166,10 @@
@dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg;
@dropdown-link-disabled-color: @gray-light;
@dropdown-header-color: @gray-light;
@dropdown-caret-color: #000;
@ -202,6 +209,7 @@
@screen-large-desktop: @screen-large;
// 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);
@ -223,10 +231,12 @@
// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-color: #777;
@navbar-bg: #eee;
@navbar-bg: #f8f8f8;
@navbar-border: darken(@navbar-bg, 6.5%);
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
// Navbar links
@ -234,7 +244,7 @@
@navbar-link-hover-color: #333;
@navbar-link-hover-bg: transparent;
@navbar-link-active-color: #555;
@navbar-link-active-bg: darken(@navbar-bg, 10%);
@navbar-link-active-bg: darken(@navbar-bg, 6.5%);
@navbar-link-disabled-color: #ccc;
@navbar-link-disabled-bg: transparent;
@ -254,6 +264,7 @@
// Reset inverted navbar basics
@navbar-inverse-color: @gray-light;
@navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: @gray-light;
@ -491,11 +502,14 @@
// Thumbnails
// -------------------------
@thumbnail-caption-color: @text-color;
@thumbnail-padding: 4px;
@thumbnail-bg: @body-bg;
@thumbnail-border: #ddd;
@thumbnail-border-radius: @border-radius-base;
@thumbnail-caption-color: @text-color;
@thumbnail-caption-padding: 9px;
// Wells
// -------------------------
@ -557,7 +571,9 @@
@code-bg: #f9f2f4;
@pre-bg: #f5f5f5;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
// Type
// ------------------------
@ -582,10 +598,10 @@
// --------------------------------------------------
// Small screen / tablet
@container-tablet: 728px;
@container-tablet: 720px;
// Medium screen / desktop
@container-desktop: 940px;
// Large screen / wide desktop
@container-large-desktop: 1170px;
@container-large-desktop: 1140px;

3
package.json
View File

@ -25,6 +25,9 @@
, "grunt-contrib-uglify": "~0.2.2"
, "grunt-contrib-qunit": "~0.2.2"
, "grunt-contrib-watch": "~0.5.1"
, "grunt-html-validation": "git://github.com/praveenvijayan/grunt-html-validation.git"
, "grunt-jekyll": "~0.3.8"
, "grunt-recess": "~0.3.3"
, "browserstack-runner": "~0.0.11"
}
}