mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-21 13:24:08 +03:00
Code 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
parent 91b3935b6c d1e18e55ac
commit 17f9ddd8ec
67 changed files with 6757 additions and 2102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3
View File
@@ -33,6 +33,9 @@ nbproject
*.komodoproject
.komodotools
# grunt-html-validation
validation-staus.json
# Folders to ignore
.hg
.svn
.travis.yml
+7 -1
View File
@@ -2,4 +2,10 @@ language: node_js
node_js:
- 0.8
before_script:
- npm install -g grunt-cli
- 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: ""
Gruntfile.js
+52 -1
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))
});
};
README.md
+1 -1
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.
_config.yml
+3 -3
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
_includes/footer.html
+8
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>
_includes/nav-components.html
+4 -5
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>
_includes/nav-css.html
+1
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>
_includes/nav-getting-started.html
+7 -1
View File
@@ -14,9 +14,15 @@
<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>
<li>
<a href="#customizing">Customizing Bootstrap</a>
</li>
</li>
_includes/nav-main.html
+13 -10
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">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<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">
<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 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>
</div>
</nav>
</div>
</div>
</header>
_includes/social-buttons.html
+2 -2
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>
_layouts/customize.html
+5 -4
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="container bs-docs-container">
<div class="col-lg-12">
{{ content }}
</div>
</div>
_layouts/default.html
+8 -7
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>
</div>
</aside>
</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>
_layouts/home.html
+3 -2
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 %}
assets/css/docs.css
+48 -44
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;
}
}
assets/js/application.js
+4 -82
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)
assets/js/customizer.js
+175
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
}
}
assets/js/jquery.bbq.min.js
Vendored
+1287
View File
File diff suppressed because it is too large Load Diff
assets/js/jszip.js
+1425
View File
File diff suppressed because it is too large Load Diff
assets/js/less.js
+9
View File
File diff suppressed because one or more lines are too long
assets/js/uglify.js
+14
View File
File diff suppressed because one or more lines are too long
bower.json
+1 -1
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": [
"**/.*"
],
browserstack.json
+37
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"
}
]
}
components.html
+517 -461
View File
File diff suppressed because it is too large Load Diff
css.html
+390 -191
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);
}
// Negative margin nested rows out to align the content of columns
.row {
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);
}
// 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>
customize.html
+51 -24
View File
File diff suppressed because one or more lines are too long
dist/css/bootstrap.css
Vendored
+1092 -358
View File
File diff suppressed because it is too large Load Diff
dist/css/bootstrap.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/js/bootstrap.js
Vendored
+42 -37
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)
})
}
@@ -1045,28 +1052,26 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var $this = $(this)
var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
var option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())
var option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
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.
@@ -1130,7 +1135,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var eventIn = trigger == 'hover' ? 'mouseenter' : 'focus'
var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
}
}
@@ -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 () {
@@ -1526,7 +1531,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
o.content)
}
Popover.prototype.arrow =function () {
Popover.prototype.arrow = function () {
return this.$arrow = this.$arrow || this.tip().find('.arrow')
}
dist/js/bootstrap.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
getting-started.html
+105 -4
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>
index.html
+4 -4
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>
javascript.html
+176 -111
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,26 +526,24 @@ $('.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">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a>
<ul class="nav navbar-nav">
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li class="divider"></li>
<li><a href="#three">three</a></li>
</ul>
</li>
</ul>
</div>
<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">
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li class="divider"></li>
<li><a href="#three">three</a></li>
</ul>
</li>
</ul>
</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">
Collapsible Group Item #1
</a>
<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">
Collapsible Group Item #2
</a>
<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">
Collapsible Group Item #3
</a>
<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">
Collapsible Group Item #1
</a>
<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">
Collapsible Group Item #2
</a>
<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">
Collapsible Group Item #3
</a>
<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>
js/carousel.js
+6 -2
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
js/collapse.js
+2 -2
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')
}
js/modal.js
+19 -18
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)
})
}
@@ -223,21 +226,19 @@
var $this = $(this)
var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
var option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())
var option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
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);
js/popover.js
+2 -6
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 () {
@@ -81,7 +77,7 @@
o.content)
}
Popover.prototype.arrow =function () {
Popover.prototype.arrow = function () {
return this.$arrow = this.$arrow || this.tip().find('.arrow')
}
js/tests/unit/collapse.js
+35
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()
})
})
js/tests/unit/modal.js
+161 -140
View File
@@ -1,156 +1,177 @@
$(function () {
module("modal")
module("modal")
test("should provide no conflict", function () {
var modal = $.fn.modal.noConflict()
ok(!$.fn.modal, 'modal was set back to undefined (org value)')
$.fn.modal = modal
})
test("should provide no conflict", function () {
var modal = $.fn.modal.noConflict()
ok(!$.fn.modal, 'modal was set back to undefined (org value)')
$.fn.modal = modal
})
test("should be defined on jquery object", function () {
var div = $("<div id='modal-test'></div>")
ok(div.modal, 'modal method is defined')
})
test("should be defined on jquery object", function () {
var div = $("<div id='modal-test'></div>")
ok(div.modal, 'modal method is defined')
})
test("should return element", function () {
var div = $("<div id='modal-test'></div>")
ok(div.modal() == div, 'document.body returned')
$('#modal-test').remove()
})
test("should return element", function () {
var div = $("<div id='modal-test'></div>")
ok(div.modal() == div, 'document.body returned')
$('#modal-test').remove()
})
test("should expose defaults var for settings", function () {
ok($.fn.modal.Constructor.DEFAULTS, 'default object exposed')
})
test("should expose defaults var for settings", function () {
ok($.fn.modal.Constructor.DEFAULTS, 'default object exposed')
})
test("should insert into dom when show method is called", function () {
stop()
$.support.transition = false
$("<div id='modal-test'></div>")
.on("shown.bs.modal", function () {
ok($('#modal-test').length, 'modal inserted into dom')
$(this).remove()
start()
})
.modal("show")
})
test("should insert into dom when show method is called", function () {
stop()
$.support.transition = false
$("<div id='modal-test'></div>")
.on("shown.bs.modal", function () {
ok($('#modal-test').length, 'modal inserted into dom')
$(this).remove()
start()
})
.modal("show")
})
test("should fire show event", function () {
stop()
$.support.transition = false
$("<div id='modal-test'></div>")
.on("show.bs.modal", function () {
ok(true, "show was called")
})
.on("shown.bs.modal", function () {
$(this).remove()
start()
})
.modal("show")
})
test("should fire show event", function () {
stop()
$.support.transition = false
$("<div id='modal-test'></div>")
.on("show.bs.modal", function () {
ok(true, "show was called")
})
.on("shown.bs.modal", function () {
$(this).remove()
start()
})
.modal("show")
})
test("should not fire shown when default prevented", function () {
stop()
$.support.transition = false
$("<div id='modal-test'></div>")
.on("show.bs.modal", function (e) {
e.preventDefault()
ok(true, "show was called")
start()
})
.on("shown.bs.modal", function () {
ok(false, "shown was called")
})
.modal("show")
})
test("should not fire shown when default prevented", function () {
stop()
$.support.transition = false
$("<div id='modal-test'></div>")
.on("show.bs.modal", function (e) {
e.preventDefault()
ok(true, "show was called")
start()
})
.on("shown.bs.modal", function () {
ok(false, "shown was called")
})
.modal("show")
})
test("should hide modal when hide is called", function () {
stop()
$.support.transition = false
test("should hide modal when hide is called", function () {
stop()
$.support.transition = false
$("<div id='modal-test'></div>")
.on("shown.bs.modal", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
$(this).modal("hide")
})
.on("hidden.bs.modal", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
$('#modal-test').remove()
start()
})
.modal("show")
})
$("<div id='modal-test'></div>")
.on("shown.bs.modal", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
$(this).modal("hide")
})
.on("hidden.bs.modal", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
$('#modal-test').remove()
start()
})
.modal("show")
})
test("should toggle when toggle is called", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.on("shown.bs.modal", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.modal("toggle")
})
.on("hidden.bs.modal", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
div.remove()
start()
})
.modal("toggle")
})
test("should toggle when toggle is called", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.on("shown.bs.modal", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.modal("toggle")
})
.on("hidden.bs.modal", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
div.remove()
start()
})
.modal("toggle")
})
test("should remove from dom when click [data-dismiss=modal]", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'><span class='close' data-dismiss='modal'></span></div>")
div
.on("shown.bs.modal", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.find('.close').click()
})
.on("hidden.bs.modal", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
div.remove()
start()
})
.modal("toggle")
})
test("should remove from dom when click [data-dismiss=modal]", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'><span class='close' data-dismiss='modal'></span></div>")
div
.on("shown.bs.modal", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.find('.close').click()
})
.on("hidden.bs.modal", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
div.remove()
start()
})
.modal("toggle")
})
test("should allow modal close with 'backdrop:false'", function () {
stop()
$.support.transition = false
var div = $("<div>", { id: 'modal-test', "data-backdrop": false })
div
.on("shown.bs.modal", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
div.modal("hide")
})
.on("hidden.bs.modal", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
div.remove()
start()
})
.modal("show")
})
test("should allow modal close with 'backdrop:false'", function () {
stop()
$.support.transition = false
var div = $("<div>", { id: 'modal-test', "data-backdrop": false })
div
.on("shown.bs.modal", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
div.modal("hide")
})
.on("hidden.bs.modal", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
div.remove()
start()
})
.modal("show")
})
test("should close modal when clicking outside of modal-content", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'><div class='contents'></div></div>")
div
.bind("shown.bs.modal", function () {
ok($('#modal-test').length, 'modal insterted into dom')
$('.contents').click()
ok($('#modal-test').is(":visible"), 'modal visible')
$('#modal-test').click()
})
.bind("hidden.bs.modal", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
div.remove()
start()
})
.modal("show")
})
test("should close modal when clicking outside of modal-content", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'><div class='contents'></div></div>")
div
.bind("shown.bs.modal", function () {
ok($('#modal-test').length, 'modal insterted into dom')
$('.contents').click()
ok($('#modal-test').is(":visible"), 'modal visible')
$('#modal-test').click()
})
.bind("hidden.bs.modal", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
div.remove()
start()
})
.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")
})
})
js/tooltip.js
+13 -9
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.
@@ -64,7 +64,7 @@
var eventIn = trigger == 'hover' ? 'mouseenter' : 'focus'
var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
}
}
@@ -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)
}
less/accordion.less
-31
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;
}
less/alerts.less
+19 -10
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);
less/badges.less
+1 -1
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;
}
less/bootstrap.less
Vendored
-1
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";
less/button-groups.less
+56 -11
View File
@@ -55,8 +55,13 @@
}
// Prevent double borders when buttons are next to each other
.btn-group .btn + .btn {
margin-left: -1px;
.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
@@ -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 {
display: block;
float: none;
width: 100%;
max-width: 100%;
+ .btn {
.btn-group-vertical {
> .btn,
> .btn-group {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
// 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;
}
less/buttons.less
+10 -14
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;
less/carousel.less
+1 -5
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;
less/code.less
+4 -3
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;
}
less/dropdowns.less
+15 -16
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
less/forms.less
+43 -55
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,28 +263,46 @@ 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 {
display: inline-block;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match (which also avoids
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
.radio,
.checkbox {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
// 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;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match (which also avoids
// 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;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
}
}
less/grid.less
+151 -53
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;
}
}
less/input-groups.less
+14 -1
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;
less/labels.less
+6 -1
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
less/list-group.less
+33 -34
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,54 +25,41 @@
// 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;
}
// Linked list items
// -------------------------
// Custom content within linked items
a.list-group-item {
// Colorize content accordingly
.list-group-item-heading {
color: @list-group-link-heading-color;
> .badge + .badge {
margin-right: 5px;
}
.list-group-item-text {
// Linked list items
a& {
color: @list-group-link-color;
}
// Hover state
&:hover,
&:focus {
text-decoration: none;
background-color: @list-group-hover-bg;
.list-group-item-heading {
color: @list-group-link-heading-color;
}
// Hover state
&:hover,
&:focus {
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;
}
less/mixins.less
+189 -64
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();
@media (min-width: @screen-small) {
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
.container & {
@media (min-width: @screen-small) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@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;
}
}
less/modals.less
+1 -1
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;
}
less/navbar.less
+288 -132
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%;
@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: 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 {
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;
}
}
}
}
}
// Component alignment
//
// Navbar alignment options
// --------------------------------------------------
// 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.
// Static navbar
.navbar-static-top {
border-radius: 0;
@media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); }
.navbar-right { .pull-right(); }
}
// 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;
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 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);
}
less/navs.less
+6
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;
}
}
less/pagination.less
+2 -38
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);
}
less/panels.less
+64 -41
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));
}
// List groups in panels
// 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);
}
less/popovers.less
-2
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;
less/progress-bars.less
+1 -1
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
less/responsive-utilities.less
+74 -44
View File
@@ -35,70 +35,100 @@
// Visibility utilities
// For Phones
.visible-sm {
.visible-xs {
.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-invisibility();
}
@media (min-width: @screen-large-desktop) {
.responsive-invisibility();
}
}
.visible-sm {
.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-invisibility();
}
@media (min-width: @screen-large-desktop) {
.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-sm {
.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();
}
// Tablets & small desktops only
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.visible-sm {
.responsive-invisibility();
}
.visible-md {
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
.visible-lg {
.responsive-invisibility();
}
.hidden-sm {
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-visibility();
}
.hidden-md {
.responsive-invisibility();
}
.hidden-lg {
.responsive-visibility();
}
}
// For desktops
@media (min-width: @screen-desktop) {
.visible-sm {
.responsive-invisibility();
}
.visible-md {
.responsive-invisibility();
}
.visible-lg {
.responsive-visibility();
}
.hidden-sm {
.responsive-visibility();
}
.hidden-md {
.responsive-visibility();
}
.hidden-lg {
@media (min-width: @screen-large-desktop) {
.responsive-invisibility();
}
}
less/scaffolding.less
+18 -2
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;
}
less/thumbnails.less
+2 -2
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;
}
less/variables.less
+22 -6
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;
package.json
+3
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"
}
}