mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Merge branch 'master' into css-source-maps
Conflicts: Gruntfile.js
This commit is contained in:
Mark Otto
commit
1bc8607bdf
28
.travis.yml
28
.travis.yml
@ -1,10 +1,28 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 0.10
|
||||
before_script:
|
||||
- gem install jekyll
|
||||
- npm install -g grunt-cli
|
||||
before_install:
|
||||
- time sudo pip install --use-mirrors -r test-infra/requirements.txt
|
||||
- rvm use 1.9.3 --fuzzy
|
||||
- if [ "$TWBS_TEST" = validate-html ]; then echo "ruby=$(basename $(rvm gemdir)) jekyll=$JEKYLL_VERSION" > pseudo_Gemfile.lock; fi
|
||||
install:
|
||||
- time npm install -g grunt-cli
|
||||
- time ./test-infra/s3_cache.py download 'node.js packages' package.json ./node_modules || time npm install
|
||||
- if [ "$TWBS_TEST" = validate-html ]; then time ./test-infra/s3_cache.py download rubygems pseudo_Gemfile.lock $(rvm gemdir) || gem install -N jekyll -v $JEKYLL_VERSION; fi
|
||||
after_script:
|
||||
- if [ "$TWBS_TEST" = core ]; then time ./test-infra/s3_cache.py upload 'node.js packages' package.json ./node_modules; fi
|
||||
- if [ "$TWBS_TEST" = validate-html ]; then time ./test-infra/s3_cache.py upload rubygems pseudo_Gemfile.lock $(rvm gemdir); fi
|
||||
env:
|
||||
global:
|
||||
- SAUCE_USERNAME: bootstrap
|
||||
- secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
|
||||
- JEKYLL_VERSION: 1.4.1
|
||||
- SAUCE_USERNAME: bootstrap
|
||||
- secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
|
||||
- secure: "gqjqISbxBJK6byFbsmr1AyP1qoWH+rap06A2gI7v72+Tn2PU2nYkIMUkCvhZw6K889jv+LhQ/ybcBxDOXHpNCExCnSgB4dcnmYp+9oeNZb37jSP0rQ+Ib4OTLjzc3/FawE/fUq5kukZTC7porzc/k0qJNLAZRx3YLALmK1GIdUY="
|
||||
- secure: "Gghh/e3Gsbj1+4RR9Lh2aR/xJl35HWiHqlPIeSUqE9D7uDCVTAwNce/dGL3Ew7uJPfJ6Pgr70wD3zgu3stw0Zmzayax0hiDtGwcQCxVIER08wqGANK9C2Q7PYJkNTNtiTo6ehKWbdV4Z+/U+TEYyQfpQTDbAFYk/vVpsdjp0Lmc="
|
||||
- secure: "RTbRdx4G/2OTLfrZtP1VbRljxEmd6A1F3GqXboeQTldsnAlwpsES65es5CE3ub/rmixLApOY9ot7OPmNixFgC2Y8xOsV7lNCC62QVpmqQEDyGFFQKb3yO6/dmwQxdsCqGfzf9Np6Wh5V22QFvr50ZLKLd7Uhd9oXMDIk/z1MJ3o="
|
||||
matrix:
|
||||
- TWBS_TEST=core
|
||||
- TWBS_TEST=validate-html
|
||||
- TWBS_TEST=sauce-js-unit
|
||||
matrix:
|
||||
fast_finish: true
|
||||
|
||||
@ -37,12 +37,15 @@ We only accept issues that are bug reports or feature requests. Bugs must be iso
|
||||
|
||||
### CSS
|
||||
|
||||
- Adhere to the [RECESS CSS property order](http://markdotto.com/2011/11/29/css-property-order/)
|
||||
- Adhere to the [CSS property order](http://markdotto.com/2011/11/29/css-property-order/)
|
||||
- Multiple-line approach (one property and value per line)
|
||||
- Always a space after a property's colon (e.g., `display: block;` and not `display:block;`)
|
||||
- End all lines with a semi-colon
|
||||
- For multiple, comma-separated selectors, place each selector on its own line
|
||||
- Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
|
||||
- Attribute selectors should only be used where absolutely necessary (e.g., form controls) and should be avoided on custom components for performance and explicitness.
|
||||
- Series of classes for a component should include a base class (e.g., `.component`) and use the base class as a prefix for modifier and sub-components (e.g., `.component-lg`).
|
||||
- Avoid inheritance and over nesting—use single, explicit classes whenever possible.
|
||||
|
||||
### JS
|
||||
|
||||
|
||||
126
Gruntfile.js
126
Gruntfile.js
@ -6,7 +6,9 @@ module.exports = function (grunt) {
|
||||
// Force use of Unix newlines
|
||||
grunt.util.linefeed = '\n';
|
||||
|
||||
RegExp.quote = require('regexp-quote')
|
||||
RegExp.quote = function (string) {
|
||||
return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
|
||||
}
|
||||
var btoa = require('btoa')
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
@ -113,6 +115,7 @@ module.exports = function (grunt) {
|
||||
less: {
|
||||
compileCore: {
|
||||
options: {
|
||||
strictMath: true,
|
||||
sourceMap: true,
|
||||
outputSourceFiles: true,
|
||||
sourceMapURL: '<%= pkg.name %>.css.map',
|
||||
@ -124,6 +127,7 @@ module.exports = function (grunt) {
|
||||
},
|
||||
compileTheme: {
|
||||
options: {
|
||||
strictMath: true,
|
||||
sourceMap: true,
|
||||
outputSourceFiles: true,
|
||||
sourceMapURL: '<%= pkg.name %>-theme.css.map',
|
||||
@ -204,6 +208,9 @@ module.exports = function (grunt) {
|
||||
|
||||
validation: {
|
||||
options: {
|
||||
charset: 'utf-8',
|
||||
doctype: 'HTML5',
|
||||
failHard: true,
|
||||
reset: true,
|
||||
relaxerror: [
|
||||
'Bad value X-UA-Compatible for attribute http-equiv on element meta.',
|
||||
@ -247,90 +254,7 @@ module.exports = function (grunt) {
|
||||
build: process.env.TRAVIS_JOB_ID,
|
||||
concurrency: 3,
|
||||
urls: ['http://127.0.0.1:3000/js/tests/index.html'],
|
||||
browsers: [
|
||||
// See https://saucelabs.com/docs/platforms/webdriver
|
||||
{
|
||||
browserName: 'safari',
|
||||
version: '6',
|
||||
platform: 'OS X 10.8'
|
||||
},
|
||||
{
|
||||
browserName: 'chrome',
|
||||
version: '28',
|
||||
platform: 'OS X 10.6'
|
||||
},
|
||||
/* FIXME: currently fails 1 tooltip test
|
||||
{
|
||||
browserName: 'firefox',
|
||||
version: '25',
|
||||
platform: 'OS X 10.6'
|
||||
},*/
|
||||
// Mac Opera not currently supported by Sauce Labs
|
||||
/* FIXME: currently fails 1 tooltip test
|
||||
{
|
||||
browserName: 'internet explorer',
|
||||
version: '11',
|
||||
platform: 'Windows 8.1'
|
||||
},*/
|
||||
/*
|
||||
{
|
||||
browserName: 'internet explorer',
|
||||
version: '10',
|
||||
platform: 'Windows 8'
|
||||
},
|
||||
{
|
||||
browserName: 'internet explorer',
|
||||
version: '9',
|
||||
platform: 'Windows 7'
|
||||
},
|
||||
{
|
||||
browserName: 'internet explorer',
|
||||
version: '8',
|
||||
platform: 'Windows 7'
|
||||
},
|
||||
{// unofficial
|
||||
browserName: 'internet explorer',
|
||||
version: '7',
|
||||
platform: 'Windows XP'
|
||||
},
|
||||
*/
|
||||
{
|
||||
browserName: 'chrome',
|
||||
version: '31',
|
||||
platform: 'Windows 8.1'
|
||||
},
|
||||
{
|
||||
browserName: 'firefox',
|
||||
version: '25',
|
||||
platform: 'Windows 8.1'
|
||||
},
|
||||
// Win Opera 15+ not currently supported by Sauce Labs
|
||||
{
|
||||
browserName: 'iphone',
|
||||
version: '6.1',
|
||||
platform: 'OS X 10.8'
|
||||
},
|
||||
// iOS Chrome not currently supported by Sauce Labs
|
||||
// Linux (unofficial)
|
||||
{
|
||||
browserName: 'chrome',
|
||||
version: '30',
|
||||
platform: 'Linux'
|
||||
},
|
||||
{
|
||||
browserName: 'firefox',
|
||||
version: '25',
|
||||
platform: 'Linux'
|
||||
}
|
||||
// Android Chrome not currently supported by Sauce Labs
|
||||
/* Android Browser (super-unofficial)
|
||||
{
|
||||
browserName: 'android',
|
||||
version: '4.0',
|
||||
platform: 'Linux'
|
||||
}
|
||||
*/
|
||||
],
|
||||
browsers: grunt.file.readYAML('sauce_browsers.yml')
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -338,31 +262,25 @@ module.exports = function (grunt) {
|
||||
|
||||
|
||||
// These plugins provide necessary tasks.
|
||||
grunt.loadNpmTasks('grunt-banner');
|
||||
grunt.loadNpmTasks('grunt-contrib-clean');
|
||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||
grunt.loadNpmTasks('grunt-contrib-csslint');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-less');
|
||||
grunt.loadNpmTasks('grunt-contrib-qunit');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-csscomb');
|
||||
grunt.loadNpmTasks('grunt-html-validation');
|
||||
grunt.loadNpmTasks('grunt-jekyll');
|
||||
grunt.loadNpmTasks('grunt-jscs-checker');
|
||||
grunt.loadNpmTasks('grunt-saucelabs');
|
||||
grunt.loadNpmTasks('grunt-sed');
|
||||
require('load-grunt-tasks')(grunt, {scope: 'devDependencies'});
|
||||
|
||||
// Docs HTML validation task
|
||||
grunt.registerTask('validate-html', ['jekyll', 'validation']);
|
||||
|
||||
// Test task.
|
||||
var testSubtasks = ['dist-css', 'jshint', 'jscs', 'qunit', 'validate-html'];
|
||||
var testSubtasks = [];
|
||||
// Skip core tests if running a different subset of the test suite
|
||||
if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'core') {
|
||||
testSubtasks = testSubtasks.concat(['dist-css', 'jshint', 'jscs', 'qunit']);
|
||||
}
|
||||
// Skip HTML validation if running a different subset of the test suite
|
||||
if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'validate-html') {
|
||||
testSubtasks.push('validate-html');
|
||||
}
|
||||
// Only run Sauce Labs tests if there's a Sauce access key
|
||||
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined') {
|
||||
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined'
|
||||
// Skip Sauce if running a different subset of the test suite
|
||||
&& (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'sauce-js-unit')) {
|
||||
testSubtasks.push('connect');
|
||||
testSubtasks.push('saucelabs-qunit');
|
||||
}
|
||||
|
||||
@ -57,8 +57,9 @@ Bootstrap's documentation, included in this repo in the root directory, is built
|
||||
### Running documentation locally
|
||||
|
||||
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v1.x).
|
||||
- **Windows users:** read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems.
|
||||
2. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
|
||||
- **Windows users:** run `chcp 65001` first to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors.
|
||||
- **Windows users:** For Ruby 2.0.0 run `chcp 65001` first to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors. For Ruby 1.9.3 you can alternatively do `SET LANG=en_EN.UTF-8`. In addition, ensure you have Python installed and added in your `PATH` or the build will fail due to our Pygments dependency.
|
||||
3. Open <http://localhost:9001> in your browser, and voilà.
|
||||
|
||||
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
|
||||
|
||||
@ -66,7 +66,9 @@
|
||||
<li><a href="#forms-horizontal">Horizontal form</a></li>
|
||||
<li><a href="#forms-controls">Supported controls</a></li>
|
||||
<li><a href="#forms-controls-static">Static control</a></li>
|
||||
<li><a href="#forms-control-states">Control states</a></li>
|
||||
<li><a href="#forms-control-focus">Focus state</a></li>
|
||||
<li><a href="#forms-control-disabled">Disabled state</a></li>
|
||||
<li><a href="#forms-control-validation">Validation states</a></li>
|
||||
<li><a href="#forms-control-sizes">Control sizing</a></li>
|
||||
<li><a href="#forms-help-text">Help text</a></li>
|
||||
</ul>
|
||||
@ -87,6 +89,8 @@
|
||||
<li>
|
||||
<a href="#helper-classes">Helper classes</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#helper-classes-colors">Contextual colors</a></li>
|
||||
<li><a href="#helper-classes-backgrounds">Contextual backgrounds</a></li>
|
||||
<li><a href="#helper-classes-close">Close icon</a></li>
|
||||
<li><a href="#helper-classes-carets">Carets</a></li>
|
||||
<li><a href="#helper-classes-floats">Quick floats</a></li>
|
||||
@ -105,3 +109,11 @@
|
||||
<li><a href="#responsive-utilities-tests">Test cases</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#less">Using LESS</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#less-variables">Variables</a></li>
|
||||
<li><a href="#less-mixins-vendor">Vendor mixins</a></li>
|
||||
<li><a href="#less-mixins-utility">Utility mixins</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -32,7 +32,19 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#browsers">Browser support</a>
|
||||
<a href="#support">Browser and device support</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#support-browsers">Supported browsers</a></li>
|
||||
<li><a href="#support-ie8-ie9">Internet Explorer 8-9</a></li>
|
||||
<li><a href="#support-ie8-respondjs">IE8 and Respond.js</a></li>
|
||||
<li><a href="#support-ie8-box-sizing">IE8 and box-sizing</a></li>
|
||||
<li><a href="#support-ie-compatibility-modes">IE Compatibility modes</a></li>
|
||||
<li><a href="#support-ie10-width">IE10 and Windows (Phone) 8</a></li>
|
||||
<li><a href="#support-safari-percentages">Safari percent rounding</a></li>
|
||||
<li><a href="#support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</a></li>
|
||||
<li><a href="#support-browser-zooming">Browser zooming</a></li>
|
||||
<li><a href="#support-android-stock-browser">Android stock browser</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#third-parties">Third party support</a>
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
<a href="#modals">Modal</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#modals-examples">Examples</a></li>
|
||||
<li><a href="#modals-sizes">Sizes</a></li>
|
||||
<li><a href="#modals-usage">Usage</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
"_*",
|
||||
"docs-assets",
|
||||
"examples",
|
||||
"/fonts",
|
||||
"js/tests",
|
||||
"CNAME",
|
||||
"CONTRIBUTING.md",
|
||||
|
||||
149
components.html
149
components.html
@ -902,9 +902,13 @@ base_url: "../"
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="dropdowns-alignment">Alignment options</h3>
|
||||
<p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
|
||||
<p>Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Deprecated <code>.pull-right</code> alignment</h4>
|
||||
<p>As of v3.1, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
|
||||
...
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
@ -1099,7 +1103,7 @@ base_url: "../"
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="btn-groups-vertical">Vertical variation</h3>
|
||||
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
|
||||
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group-vertical">
|
||||
<button type="button" class="btn btn-default">Button</button>
|
||||
@ -1548,6 +1552,7 @@ base_url: "../"
|
||||
|
||||
|
||||
<h2 id="input-groups-basic">Basic example</h2>
|
||||
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. <strong class="text-danger">We do not support multiple add-ons on a single side.</strong></p>
|
||||
<form class="bs-example bs-example-form" role="form">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
@ -2169,7 +2174,7 @@ base_url: "../"
|
||||
|
||||
<h2 id="navbar-forms">Forms</h2>
|
||||
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
|
||||
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin.</p>
|
||||
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
|
||||
<div class="bs-example">
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<div class="navbar-header">
|
||||
@ -2200,6 +2205,11 @@ base_url: "../"
|
||||
</form>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Mobile device caveats</h4>
|
||||
<p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="{{ page.base_url }}getting-started#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
|
||||
</div>
|
||||
|
||||
<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 navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p>
|
||||
@ -2285,33 +2295,36 @@ base_url: "../"
|
||||
|
||||
|
||||
<h2 id="navbar-fixed-top">Fixed to top</h2>
|
||||
<p>Add <code>.navbar-fixed-top</code>.</p>
|
||||
<p>Add <code>.navbar-fixed-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
|
||||
<div class="bs-example bs-navbar-top-example">
|
||||
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
</div>
|
||||
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div>
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
||||
...
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -2326,33 +2339,36 @@ body { padding-top: 70px; }
|
||||
|
||||
|
||||
<h2 id="navbar-fixed-bottom">Fixed to bottom</h2>
|
||||
<p>Add <code>.navbar-fixed-bottom</code> instead.</p>
|
||||
<p>Add <code>.navbar-fixed-bottom</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
|
||||
<div class="bs-example bs-navbar-bottom-example">
|
||||
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
</div>
|
||||
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-7">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-7">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div>
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
|
||||
...
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -2367,33 +2383,38 @@ body { padding-bottom: 70px; }
|
||||
|
||||
|
||||
<h2 id="navbar-static-top">Static top</h2>
|
||||
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
|
||||
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
|
||||
<p>Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
|
||||
<div class="bs-example bs-navbar-top-example">
|
||||
<nav class="navbar navbar-default navbar-static-top" role="navigation">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
</div>
|
||||
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div>
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<nav class="navbar navbar-default navbar-static-top" role="navigation">
|
||||
...
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
699
css.html
699
css.html
@ -145,7 +145,7 @@ base_url: "../"
|
||||
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Max container width</th>
|
||||
<th>Container width</th>
|
||||
<td>None (auto)</td>
|
||||
<td>750px</td>
|
||||
<td>970px</td>
|
||||
@ -403,7 +403,7 @@ base_url: "../"
|
||||
|
||||
|
||||
<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-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
|
||||
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12 or less.</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-9">
|
||||
Level 1: .col-md-9
|
||||
@ -635,27 +635,27 @@ base_url: "../"
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><h1>h1. Bootstrap heading</h1></td>
|
||||
<td class="info">Semibold 36px</td>
|
||||
<td class="type-info">Semibold 36px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h2>h2. Bootstrap heading</h2></td>
|
||||
<td class="info">Semibold 30px</td>
|
||||
<td class="type-info">Semibold 30px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h3>h3. Bootstrap heading</h3></td>
|
||||
<td class="info">Semibold 24px</td>
|
||||
<td class="type-info">Semibold 24px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>h4. Bootstrap heading</h4></td>
|
||||
<td class="info">Semibold 18px</td>
|
||||
<td class="type-info">Semibold 18px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h5>h5. Bootstrap heading</h5></td>
|
||||
<td class="info">Semibold 14px</td>
|
||||
<td class="type-info">Semibold 14px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>h6. Bootstrap heading</h6></td>
|
||||
<td class="info">Semibold 12px</td>
|
||||
<td class="type-info">Semibold 12px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -782,29 +782,6 @@ base_url: "../"
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Emphasis classes</h3>
|
||||
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
|
||||
<div class="bs-example">
|
||||
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p class="text-muted">...</p>
|
||||
<p class="text-primary">...</p>
|
||||
<p class="text-success">...</p>
|
||||
<p class="text-info">...</p>
|
||||
<p class="text-warning">...</p>
|
||||
<p class="text-danger">...</p>
|
||||
{% endhighlight %}
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Dealing with specificity</h4>
|
||||
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Abbreviations -->
|
||||
<h2 id="type-abbreviations">Abbreviations</h2>
|
||||
@ -880,17 +857,17 @@ base_url: "../"
|
||||
<p>Style and content changes for simple variations on a standard <code><blockquote></code>.</p>
|
||||
|
||||
<h4>Naming a source</h4>
|
||||
<p>Add <code><small></code> tag or <code>.small</code> class for identifying the source. Wrap the name of the source work in <code><cite></code>.</p>
|
||||
<p>Add a <code><footer></code> for identifying the source. Wrap the name of the source work in <code><cite></code>.</p>
|
||||
<div class="bs-example">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -899,7 +876,7 @@ base_url: "../"
|
||||
<div class="bs-example" style="overflow: hidden;">
|
||||
<blockquote class="pull-right">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
@ -1900,10 +1877,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="forms-control-states">Form states</h2>
|
||||
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
|
||||
|
||||
<h3 id="forms-input-focus">Input focus</h3>
|
||||
<h2 id="forms-control-focus">Input focus</h2>
|
||||
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
@ -1914,7 +1888,8 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<input class="form-control" id="focusedInput" type="text" value="This is focused...">
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
|
||||
|
||||
<h2 id="forms-control-disabled">Disabled inputs</h2>
|
||||
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
@ -1983,40 +1958,124 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</form>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="forms-validation">Validation states</h3>
|
||||
|
||||
<h2 id="forms-control-validation">Validation states</h2>
|
||||
<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>
|
||||
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
<div class="form-group has-success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess">
|
||||
<label class="control-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess1">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning">
|
||||
<label class="control-label" for="inputWarning1">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning1">
|
||||
</div>
|
||||
<div class="form-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError">
|
||||
<label class="control-label" for="inputError1">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError1">
|
||||
</div>
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
{% highlight html %}
|
||||
<div class="form-group has-success">
|
||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess">
|
||||
<label class="control-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess1">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning">
|
||||
<label class="control-label" for="inputWarning1">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning1">
|
||||
</div>
|
||||
<div class="form-group has-error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError">
|
||||
<label class="control-label" for="inputError1">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError1">
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>With optional icons</h3>
|
||||
<p>You can also add optional feedback icons with the addition of an extra class and the right icon.</p>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputSuccess2">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess2">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
</div>
|
||||
<div class="form-group has-warning has-feedback">
|
||||
<label class="control-label" for="inputWarning2">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning2">
|
||||
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
|
||||
</div>
|
||||
<div class="form-group has-error has-feedback">
|
||||
<label class="control-label" for="inputError2">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError2">
|
||||
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputSuccess2">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess2">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
</div>
|
||||
<div class="form-group has-warning has-feedback">
|
||||
<label class="control-label" for="inputWarning2">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning2">
|
||||
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
|
||||
</div>
|
||||
<div class="form-group has-error has-feedback">
|
||||
<label class="control-label" for="inputError2">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError2">
|
||||
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Optional icons also work on horizontal and inline forms.</p>
|
||||
<div class="bs-example">
|
||||
<form class="form-horizontal" role="form">
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" id="inputSuccess3">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<form class="form-horizontal" role="form">
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" id="inputSuccess3">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-example">
|
||||
<form class="form-inline" role="form">
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputSuccess4">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess4">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<form class="form-inline" role="form">
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputSuccess4">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess4">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
</div>
|
||||
</form>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
<h2 id="forms-control-sizes">Control sizing</h2>
|
||||
<p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
|
||||
@ -2323,6 +2382,47 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<h1 id="helper-classes">Helper classes</h1>
|
||||
</div>
|
||||
|
||||
<h3 id="helper-classes-colors">Contextual colors</h3>
|
||||
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
|
||||
<div class="bs-example">
|
||||
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p class="text-muted">...</p>
|
||||
<p class="text-primary">...</p>
|
||||
<p class="text-success">...</p>
|
||||
<p class="text-info">...</p>
|
||||
<p class="text-warning">...</p>
|
||||
<p class="text-danger">...</p>
|
||||
{% endhighlight %}
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Dealing with specificity</h4>
|
||||
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="helper-classes-backgrounds">Contextual backgrounds</h3>
|
||||
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>
|
||||
<div class="bs-example bs-example-bg-classes">
|
||||
<p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
<p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
<p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p class="bg-muted">...</p>
|
||||
<p class="bg-primary">...</p>
|
||||
<p class="bg-success">...</p>
|
||||
<p class="bg-info">...</p>
|
||||
<p class="bg-warning">...</p>
|
||||
<p class="bg-danger">...</p>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h3 id="helper-classes-close">Close icon</h3>
|
||||
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
|
||||
@ -2710,3 +2810,496 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Using Less
|
||||
================================================== -->
|
||||
<div class="bs-docs-section" id="less">
|
||||
<div class="page-header">
|
||||
<h1>Using LESS</h1>
|
||||
</div>
|
||||
<p class="lead">Bootstrap's CSS is built on LESS, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Thosing looking to use the source LESS files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
|
||||
|
||||
<p>Grid variables and mixins are covered <a href="{{ page.base_url }}css/#grid-less">within the Grid system section</a>.</p>
|
||||
|
||||
|
||||
<h2 id="less-variables">Variables</h2>
|
||||
<p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="{{ page.base_url }}customize/#less-variables-section">the Customizer</a>.</p>
|
||||
|
||||
<h3 id="less-variables-colors">Colors</h3>
|
||||
<p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
|
||||
<div class="bs-example">
|
||||
<div class="color-swatches">
|
||||
<div class="color-swatch gray-darker"></div>
|
||||
<div class="color-swatch gray-dark"></div>
|
||||
<div class="color-swatch gray"></div>
|
||||
<div class="color-swatch gray-light"></div>
|
||||
<div class="color-swatch gray-lighter"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight css %}
|
||||
@gray-darker: lighten(#000, 13.5%); // #222
|
||||
@gray-dark: lighten(#000, 20%); // #333
|
||||
@gray: lighten(#000, 33.5%); // #555
|
||||
@gray-light: lighten(#000, 60%); // #999
|
||||
@gray-lighter: lighten(#000, 93.5%); // #eee
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="color-swatches">
|
||||
<div class="color-swatch brand-primary"></div>
|
||||
<div class="color-swatch brand-success"></div>
|
||||
<div class="color-swatch brand-warning"></div>
|
||||
<div class="color-swatch brand-danger"></div>
|
||||
<div class="color-swatch brand-info"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight css %}
|
||||
@brand-primary: #428bca;
|
||||
@brand-success: #5cb85c;
|
||||
@brand-warning: #f0ad4e;
|
||||
@brand-danger: #d9534f;
|
||||
@brand-info: #5bc0de;
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>
|
||||
{% highlight css %}
|
||||
// Use as-is
|
||||
.masthead {
|
||||
background-color: @brand-primary;
|
||||
}
|
||||
|
||||
// Reassigned variables in LESS
|
||||
@alert-message-background: @brand-info;
|
||||
.alert {
|
||||
background-color: @alert-message-background;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-variables-scaffolding">Scaffolding</h3>
|
||||
<p>A handful of variables for quickly customizing key elements of your site's skeleton.</p>
|
||||
{% highlight css %}
|
||||
// Scaffolding
|
||||
@body-bg: #fff;
|
||||
@text-color: @black-50;
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-variables-links">Links</h3>
|
||||
<p>Easily style your links with the right color with only one value.</p>
|
||||
{% highlight css %}
|
||||
// Variables
|
||||
@link-color: @brand-primary;
|
||||
@link-color-hover: darken(@link-color, 15%);
|
||||
|
||||
// Usage
|
||||
a {
|
||||
color: @link-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: @link-color-hover;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
<p>Note that the <code>@link-color-hover</code> uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>
|
||||
|
||||
<h3 id="less-variables-typography">Typography</h3>
|
||||
<p>Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins as well.</p>
|
||||
{% highlight css %}
|
||||
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@line-height-base: 1.428571429; // 20/14
|
||||
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
||||
|
||||
@headings-font-family: inherit;
|
||||
@headings-font-weight: 500;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: inherit;
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-variables-icons">Icons</h3>
|
||||
<p>Two quick variables for customizing the location and filename of your icons.</p>
|
||||
{% highlight css %}
|
||||
@icon-font-path: "../fonts/";
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
{% endhighlight %}}
|
||||
|
||||
<h3 id="less-variables-components">Components</h3>
|
||||
<p>Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.</p>
|
||||
{% highlight css %}
|
||||
@padding-base-vertical: 6px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@padding-large-vertical: 10px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
@component-active-color: #fff;
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
@caret-width-base: 4px;
|
||||
@caret-width-large: 5px;
|
||||
{% endhighlight %}}
|
||||
|
||||
|
||||
<h2 id="less-mixins-vendor">Vendor mixins</h2>
|
||||
<p>Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixs in your compiled CSS.</p>
|
||||
|
||||
|
||||
<h3 id="less-mixins-box-sizing">Box-sizing</h3>
|
||||
<p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" target="_blank">helpful article from Mozilla</a>.</p>
|
||||
{% highlight css %}
|
||||
.box-sizing(@box-model) {
|
||||
-webkit-box-sizing: @box-model; // Safari <= 5
|
||||
-moz-box-sizing: @box-model; // Firefox <= 19
|
||||
box-sizing: @box-model;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-rounded-corners">Rounded corners</h3>
|
||||
<p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Preboot does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
|
||||
{% highlight css %}
|
||||
.border-top-radius(@radius) {
|
||||
border-top-right-radius: @radius;
|
||||
border-top-left-radius: @radius;
|
||||
}
|
||||
.border-right-radius(@radius) {
|
||||
border-bottom-right-radius: @radius;
|
||||
border-top-right-radius: @radius;
|
||||
}
|
||||
.border-bottom-radius(@radius) {
|
||||
border-bottom-right-radius: @radius;
|
||||
border-bottom-left-radius: @radius;
|
||||
}
|
||||
.border-left-radius(@radius) {
|
||||
border-bottom-left-radius: @radius;
|
||||
border-top-left-radius: @radius;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-box-shadow">Box (Drop) shadows</h3>
|
||||
<p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the mixin to pick up the required <code>-webkit</code> prefix.</p>
|
||||
<p>Be sure to use <code>rgba()</code> colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
|
||||
{% highlight css %}
|
||||
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
||||
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-transitions">Transitions</h3>
|
||||
<p>Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
|
||||
{% highlight css %}
|
||||
.transition(@transition) {
|
||||
-webkit-transition: @transition;
|
||||
transition: @transition;
|
||||
}
|
||||
.transition-property(@transition-property) {
|
||||
-webkit-transition-property: @transition-property;
|
||||
transition-property: @transition-property;
|
||||
}
|
||||
.transition-delay(@transition-delay) {
|
||||
-webkit-transition-delay: @transition-delay;
|
||||
transition-delay: @transition-delay;
|
||||
}
|
||||
.transition-duration(@transition-duration) {
|
||||
-webkit-transition-duration: @transition-duration;
|
||||
transition-duration: @transition-duration;
|
||||
}
|
||||
.transition-transform(@transition) {
|
||||
-webkit-transition: -webkit-transform @transition;
|
||||
-moz-transition: -moz-transform @transition;
|
||||
-o-transition: -o-transform @transition;
|
||||
transition: transform @transition;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-transformations">Transformations</h3>
|
||||
<p>Rorate, scale, translate (move), or skew any object.</p>
|
||||
{% highlight css %}
|
||||
.rotate(@degrees) {
|
||||
-webkit-transform: rotate(@degrees);
|
||||
-ms-transform: rotate(@degrees); // IE9 only
|
||||
transform: rotate(@degrees);
|
||||
}
|
||||
.scale(@ratio; @ratio-y...) {
|
||||
-webkit-transform: scale(@ratio, @ratio-y);
|
||||
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
|
||||
transform: scale(@ratio, @ratio-y);
|
||||
}
|
||||
.translate(@x; @y) {
|
||||
-webkit-transform: translate(@x, @y);
|
||||
-ms-transform: translate(@x, @y); // IE9 only
|
||||
transform: translate(@x, @y);
|
||||
}
|
||||
.skew(@x; @y) {
|
||||
-webkit-transform: skew(@x, @y);
|
||||
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
|
||||
transform: skew(@x, @y);
|
||||
}
|
||||
.translate3d(@x; @y; @z) {
|
||||
-webkit-transform: translate3d(@x, @y, @z);
|
||||
transform: translate3d(@x, @y, @z);
|
||||
}
|
||||
|
||||
.rotateX(@degrees) {
|
||||
-webkit-transform: rotateX(@degrees);
|
||||
-ms-transform: rotateX(@degrees); // IE9 only
|
||||
transform: rotateX(@degrees);
|
||||
}
|
||||
.rotateY(@degrees) {
|
||||
-webkit-transform: rotateY(@degrees);
|
||||
-ms-transform: rotateY(@degrees); // IE9 only
|
||||
transform: rotateY(@degrees);
|
||||
}
|
||||
.perspective(@perspective) {
|
||||
-webkit-perspective: @perspective;
|
||||
-moz-perspective: @perspective;
|
||||
perspective: @perspective;
|
||||
}
|
||||
.perspective-origin(@perspective) {
|
||||
-webkit-perspective-origin: @perspective;
|
||||
-moz-perspective-origin: @perspective;
|
||||
perspective-origin: @perspective;
|
||||
}
|
||||
.transform-origin(@origin) {
|
||||
-webkit-transform-origin: @origin;
|
||||
-moz-transform-origin: @origin;
|
||||
-ms-transform-origin: @origin; // IE9 only
|
||||
transform-origin: @origin;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-animations">Animations</h3>
|
||||
<p>A single mixin for using all CSS3's animation properties in one declarations and other mixins for individual properties.</p>
|
||||
{% highlight css %}
|
||||
.animation(@animation) {
|
||||
-webkit-animation: @animation;
|
||||
animation: @animation;
|
||||
}
|
||||
.animation-name(@name) {
|
||||
-webkit-animation-name: @name;
|
||||
animation-name: @name;
|
||||
}
|
||||
.animation-duration(@duration) {
|
||||
-webkit-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
}
|
||||
.animation-timing-function(@timing-function) {
|
||||
-webkit-animation-timing-function: @timing-function;
|
||||
animation-timing-function: @timing-function;
|
||||
}
|
||||
.animation-delay(@delay) {
|
||||
-webkit-animation-delay: @delay;
|
||||
animation-delay: @delay;
|
||||
}
|
||||
.animation-iteration-count(@iteration-count) {
|
||||
-webkit-animation-iteration-count: @iteration-count;
|
||||
animation-iteration-count: @iteration-count;
|
||||
}
|
||||
.animation-direction(@direction) {
|
||||
-webkit-animation-direction: @direction;
|
||||
animation-direction: @direction;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-opacity">Opacity</h3>
|
||||
<p>Set the opacity for all browsers and provide a <code>filter</code> fallback for IE8.</p>
|
||||
{% highlight css %}
|
||||
.opacity(@opacity) {
|
||||
opacity: @opacity;
|
||||
// IE8 filter
|
||||
@opacity-ie: (@opacity * 100);
|
||||
filter: ~"alpha(opacity=@{opacity-ie})";
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-placeholder">Placeholder text</h3>
|
||||
<p>Provide context for form controls within each field.</p>
|
||||
{% highlight css %}
|
||||
.placeholder(@color: @input-color-placeholder) {
|
||||
&:-moz-placeholder { color: @color; } // Firefox 4-18
|
||||
&::-moz-placeholder { color: @color; } // Firefox 19+
|
||||
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-columns">Columns</h3>
|
||||
<p>Generate columns via CSS within a single element.</p>
|
||||
{% highlight css %}
|
||||
.content-columns(@width; @count; @gap) {
|
||||
-webkit-column-width: @width;
|
||||
-moz-column-width: @width;
|
||||
column-width: @width;
|
||||
-webkit-column-count: @count;
|
||||
-moz-column-count: @count;
|
||||
column-count: @count;
|
||||
-webkit-column-gap: @gap;
|
||||
-moz-column-gap: @gap;
|
||||
column-gap: @gap;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-gradients">Gradients</h3>
|
||||
<p>Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.</p>
|
||||
{% highlight css %}
|
||||
#gradient > .vertical(#333; #000);
|
||||
#gradient > .horizontal(#333; #000);
|
||||
#gradient > .radial(#333; #000);
|
||||
{% endhighlight %}
|
||||
<p>You can also specify the angle of a standard two-color, linear gradient:</p>
|
||||
{% highlight css %}
|
||||
#gradient > .directional(#333; #000; 45deg);
|
||||
{% endhighlight %}
|
||||
<p>If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.</p>
|
||||
{% highlight css %}
|
||||
#gradient > .striped(#333; #000; 45deg);
|
||||
{% endhighlight %}
|
||||
<p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:</p>
|
||||
{% highlight css %}
|
||||
#gradient > .vertical-three-colors(#777; #333; .25; #000);
|
||||
#gradient > .horizontal-three-colors(#777; #333; .25; #000);
|
||||
{% endhighlight %}
|
||||
<p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using <code>.reset-filter()</code> mixin alignside <code>background-image: none;</code>.</p>
|
||||
|
||||
|
||||
<h2 id="less-mixins-utility">Utility mixins</h2>
|
||||
<p>Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.</p>
|
||||
|
||||
<h3 id="less-mixins-clearfix">Clearfix</h3>
|
||||
<p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">micro clearfix</a> from <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallager</a>.</p>
|
||||
{% highlight css %}
|
||||
// Mixin
|
||||
.clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Usage
|
||||
.container {
|
||||
.clearfix();
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-centering">Horizontal centering</h3>
|
||||
<p>Quickly center any element within its parent. <strong>Requires <code>width</code> or <code>max-width</code> to be set.</strong></p>
|
||||
{% highlight css %}
|
||||
// Mixin
|
||||
.center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Usage
|
||||
.container {
|
||||
width: 940px;
|
||||
.center-block();
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-sizing">Sizing helpers</h3>
|
||||
<p>Specify the dimensions of an object more easily.</p>
|
||||
{% highlight css %}
|
||||
// Mixins
|
||||
.size(@width; @height) {
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
.square(@size) {
|
||||
.size(@size; @size);
|
||||
}
|
||||
|
||||
// Usage
|
||||
.image { .size(400px; 300px); }
|
||||
.avatar { .square(48px); }
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-resizable">Resizable textareas</h3>
|
||||
<p>Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (<code>both</code>).</p>
|
||||
{% highlight css %}
|
||||
.resizable(@direction: both) {
|
||||
// Options: horizontal, vertical, both
|
||||
resize: @direction;
|
||||
// Safari fix
|
||||
overflow: auto;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-truncating">Truncating text</h3>
|
||||
<p>Easily truncate text with an ellipsis with a single mixin. <strong>Requires element to be <code>block</code> or <code>inline-block</code> level.</strong></p>
|
||||
{% highlight css %}
|
||||
// Mixin
|
||||
.text-truncate() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Usage
|
||||
.branch-name {
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
.text-truncate();
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-retina-images">Retina images</h3>
|
||||
<p>Specify two image paths and the @1x image dimensions, and Preboot will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>
|
||||
{% highlight css %}
|
||||
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
|
||||
background-image: url("@{file-1x}");
|
||||
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
background-image: url("@{file-2x}");
|
||||
background-size: @width-1x @height-1x;
|
||||
}
|
||||
}
|
||||
|
||||
// Usage
|
||||
.jumbotron {
|
||||
.retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
|
||||
}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@ -182,6 +182,12 @@ base_url: "../"
|
||||
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<h3>JavaScript components</h3>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" checked value="component-animations.less">
|
||||
Component animations (for JS)
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" checked value="dropdowns.less">
|
||||
@ -226,12 +232,6 @@ base_url: "../"
|
||||
Responsive utilities
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" checked value="component-animations.less">
|
||||
Component animations (for JS)
|
||||
</label>
|
||||
</div>
|
||||
</div><!-- .col-xs-6 .col-sm-4 -->
|
||||
</div><!-- /.row -->
|
||||
</div>
|
||||
@ -1147,6 +1147,8 @@ base_url: "../"
|
||||
<h3>Wells</h3>
|
||||
<label>@well-bg</label>
|
||||
<input type="text" class="form-control" placeholder="#f5f5f5" data-var="@well-bg">
|
||||
<label>@well-border</label>
|
||||
<input type="text" class="form-control" placeholder="darken(@well-bg, 7%)" data-var="@well-border">
|
||||
|
||||
|
||||
<h2 id="variables-accordion">Accordion</h2>
|
||||
@ -1247,6 +1249,11 @@ base_url: "../"
|
||||
<input type="text" class="form-control" placeholder="#000" data-var="@modal-backdrop-bg">
|
||||
<p class="help-block">Modal backdrop background color</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label>@modal-backdrop-opacity</label>
|
||||
<input type="text" class="form-control" placeholder=".5" data-var="@modal-backdrop-opacity">
|
||||
<p class="help-block">Modal backdrop opacity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Modal header and footer</h3>
|
||||
|
||||
561
dist/css/bootstrap.css
vendored
561
dist/css/bootstrap.css
vendored
@ -378,31 +378,49 @@ h6 .small,
|
||||
color: #999;
|
||||
}
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
h3 {
|
||||
.h2,
|
||||
h3,
|
||||
.h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h1 small,
|
||||
.h1 small,
|
||||
h2 small,
|
||||
.h2 small,
|
||||
h3 small,
|
||||
.h3 small,
|
||||
h1 .small,
|
||||
.h1 .small,
|
||||
h2 .small,
|
||||
h3 .small {
|
||||
.h2 .small,
|
||||
h3 .small,
|
||||
.h3 .small {
|
||||
font-size: 65%;
|
||||
}
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
h6 {
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h4 small,
|
||||
.h4 small,
|
||||
h5 small,
|
||||
.h5 small,
|
||||
h6 small,
|
||||
.h6 small,
|
||||
h4 .small,
|
||||
.h4 .small,
|
||||
h5 .small,
|
||||
h6 .small {
|
||||
.h5 .small,
|
||||
h6 .small,
|
||||
.h6 .small {
|
||||
font-size: 75%;
|
||||
}
|
||||
h1,
|
||||
@ -450,6 +468,18 @@ small,
|
||||
cite {
|
||||
font-style: normal;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
.text-muted {
|
||||
color: #999;
|
||||
}
|
||||
@ -483,17 +513,36 @@ cite {
|
||||
.text-info:hover {
|
||||
color: #245269;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
.bg-primary {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
a.bg-primary:hover {
|
||||
background-color: #3071a9;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
.bg-warning {
|
||||
background-color: #fcf8e3;
|
||||
}
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
a.bg-warning:hover {
|
||||
background-color: #f7ecb5;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: #f2dede;
|
||||
}
|
||||
a.bg-danger:hover {
|
||||
background-color: #e4b9b9;
|
||||
}
|
||||
.bg-success {
|
||||
background-color: #dff0d8;
|
||||
}
|
||||
a.bg-success:hover {
|
||||
background-color: #c1e2b3;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: #d9edf7;
|
||||
}
|
||||
a.bg-info:hover {
|
||||
background-color: #afd9ee;
|
||||
}
|
||||
.page-header {
|
||||
padding-bottom: 9px;
|
||||
@ -571,18 +620,18 @@ blockquote {
|
||||
}
|
||||
blockquote p {
|
||||
font-size: 17.5px;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
}
|
||||
blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
blockquote footer,
|
||||
blockquote small,
|
||||
blockquote .small {
|
||||
display: block;
|
||||
line-height: 1.428571429;
|
||||
color: #999;
|
||||
}
|
||||
blockquote footer:before,
|
||||
blockquote small:before,
|
||||
blockquote .small:before {
|
||||
content: '\2014 \00A0';
|
||||
@ -1665,6 +1714,9 @@ fieldset[disabled] .form-control {
|
||||
textarea.form-control {
|
||||
height: auto;
|
||||
}
|
||||
input[type="date"] {
|
||||
line-height: 34px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@ -1749,6 +1801,22 @@ select.input-lg {
|
||||
textarea.input-lg {
|
||||
height: auto;
|
||||
}
|
||||
.has-feedback {
|
||||
position: relative;
|
||||
}
|
||||
.has-feedback .form-control {
|
||||
padding-right: 42.5px;
|
||||
}
|
||||
.has-feedback .form-control-feedback {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
}
|
||||
.has-warning .help-block,
|
||||
.has-warning .control-label,
|
||||
.has-warning .radio,
|
||||
@ -1772,6 +1840,9 @@ textarea.input-lg {
|
||||
background-color: #fcf8e3;
|
||||
border-color: #8a6d3b;
|
||||
}
|
||||
.has-warning .form-control-feedback {
|
||||
color: #8a6d3b;
|
||||
}
|
||||
.has-error .help-block,
|
||||
.has-error .control-label,
|
||||
.has-error .radio,
|
||||
@ -1795,6 +1866,9 @@ textarea.input-lg {
|
||||
background-color: #f2dede;
|
||||
border-color: #a94442;
|
||||
}
|
||||
.has-error .form-control-feedback {
|
||||
color: #a94442;
|
||||
}
|
||||
.has-success .help-block,
|
||||
.has-success .control-label,
|
||||
.has-success .radio,
|
||||
@ -1818,6 +1892,9 @@ textarea.input-lg {
|
||||
background-color: #dff0d8;
|
||||
border-color: #3c763d;
|
||||
}
|
||||
.has-success .form-control-feedback {
|
||||
color: #3c763d;
|
||||
}
|
||||
.form-control-static {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -1835,10 +1912,12 @@ textarea.input-lg {
|
||||
}
|
||||
.form-inline .form-control {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-inline select.form-control {
|
||||
width: auto;
|
||||
.form-inline .control-label {
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-inline .radio,
|
||||
.form-inline .checkbox {
|
||||
@ -1853,6 +1932,9 @@ textarea.input-lg {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
.form-inline .has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.form-horizontal .control-label,
|
||||
.form-horizontal .radio,
|
||||
@ -1879,6 +1961,10 @@ textarea.input-lg {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.form-horizontal .has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
right: 15px;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
@ -2274,9 +2360,6 @@ input[type="button"].btn-block {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.glyphicon:empty {
|
||||
width: 1em;
|
||||
}
|
||||
.glyphicon-asterisk:before {
|
||||
content: "\2a";
|
||||
}
|
||||
@ -2965,6 +3048,14 @@ input[type="button"].btn-block {
|
||||
.open > a {
|
||||
outline: 0;
|
||||
}
|
||||
.dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.dropdown-menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
@ -3001,6 +3092,10 @@ input[type="button"].btn-block {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.navbar-right .dropdown-menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
@ -3033,13 +3128,16 @@ input[type="button"].btn-block {
|
||||
.btn-group .btn-group + .btn-group {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.btn-toolbar .btn-group {
|
||||
.btn-toolbar {
|
||||
margin-left: -5px;
|
||||
}
|
||||
.btn-toolbar .btn-group,
|
||||
.btn-toolbar .input-group {
|
||||
float: left;
|
||||
}
|
||||
.btn-toolbar > .btn + .btn,
|
||||
.btn-toolbar > .btn-group + .btn,
|
||||
.btn-toolbar > .btn + .btn-group,
|
||||
.btn-toolbar > .btn-group + .btn-group {
|
||||
.btn-toolbar > .btn,
|
||||
.btn-toolbar > .btn-group,
|
||||
.btn-toolbar > .input-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
|
||||
@ -3154,12 +3252,12 @@ input[type="button"].btn-block {
|
||||
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group-vertical > .btn-group:first-child > .btn:last-child,
|
||||
.btn-group-vertical > .btn-group:first-child > .dropdown-toggle {
|
||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
|
||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
|
||||
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
@ -3193,6 +3291,7 @@ input[type="button"].btn-block {
|
||||
padding-left: 0;
|
||||
}
|
||||
.input-group .form-control {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -3280,8 +3379,10 @@ textarea.input-group-sm > .input-group-btn > .btn {
|
||||
.input-group .form-control:first-child,
|
||||
.input-group-addon:first-child,
|
||||
.input-group-btn:first-child > .btn,
|
||||
.input-group-btn:first-child > .btn-group > .btn,
|
||||
.input-group-btn:first-child > .dropdown-toggle,
|
||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
|
||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
@ -3291,8 +3392,10 @@ textarea.input-group-sm > .input-group-btn > .btn {
|
||||
.input-group .form-control:last-child,
|
||||
.input-group-addon:last-child,
|
||||
.input-group-btn:last-child > .btn,
|
||||
.input-group-btn:last-child > .btn-group > .btn,
|
||||
.input-group-btn:last-child > .dropdown-toggle,
|
||||
.input-group-btn:first-child > .btn:not(:first-child) {
|
||||
.input-group-btn:first-child > .btn:not(:first-child),
|
||||
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
@ -3301,24 +3404,28 @@ textarea.input-group-sm > .input-group-btn > .btn {
|
||||
}
|
||||
.input-group-btn {
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.input-group-btn:first-child > .btn {
|
||||
margin-right: -1px;
|
||||
}
|
||||
.input-group-btn:last-child > .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.input-group-btn > .btn {
|
||||
position: relative;
|
||||
}
|
||||
.input-group-btn > .btn + .btn {
|
||||
margin-left: -4px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.input-group-btn > .btn:hover,
|
||||
.input-group-btn > .btn:focus,
|
||||
.input-group-btn > .btn:active {
|
||||
z-index: 2;
|
||||
}
|
||||
.input-group-btn:first-child > .btn,
|
||||
.input-group-btn:first-child > .btn-group {
|
||||
margin-right: -1px;
|
||||
}
|
||||
.input-group-btn:last-child > .btn,
|
||||
.input-group-btn:last-child > .btn-group {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
@ -3618,6 +3725,11 @@ textarea.input-group-sm > .input-group-btn > .btn {
|
||||
.navbar-brand:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar-brand > .glyphicon {
|
||||
float: left;
|
||||
margin-top: -2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.navbar > .container .navbar-brand,
|
||||
.navbar > .container-fluid .navbar-brand {
|
||||
@ -3723,10 +3835,12 @@ textarea.input-group-sm > .input-group-btn > .btn {
|
||||
}
|
||||
.navbar-form .form-control {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.navbar-form select.form-control {
|
||||
width: auto;
|
||||
.navbar-form .control-label {
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.navbar-form .radio,
|
||||
.navbar-form .checkbox {
|
||||
@ -3741,6 +3855,9 @@ textarea.input-group-sm > .input-group-btn > .btn {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
.navbar-form .has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar-form .form-group {
|
||||
@ -3771,11 +3888,6 @@ textarea.input-group-sm > .input-group-btn > .btn {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.navbar-nav.pull-right > li > .dropdown-menu,
|
||||
.navbar-nav > li > .dropdown-menu.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.navbar-btn {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
@ -4225,19 +4337,17 @@ a.list-group-item.active > .badge,
|
||||
.jumbotron {
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
line-height: 2.1428571435;
|
||||
color: inherit;
|
||||
background-color: #eee;
|
||||
}
|
||||
.jumbotron h1,
|
||||
.jumbotron .h1 {
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
}
|
||||
.jumbotron p {
|
||||
line-height: 1.4;
|
||||
margin-bottom: 15px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.container .jumbotron {
|
||||
border-radius: 6px;
|
||||
@ -4705,6 +4815,18 @@ a.list-group-item-info.active:focus {
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
}
|
||||
.panel > .table-striped > tbody > tr:last-child td:first-child,
|
||||
.panel > .table-responsive > .table-striped > tbody > tr:last-child td:first-child,
|
||||
.panel > .table-striped > tbody > tr:last-child th:first-child,
|
||||
.panel > .table-responsive > .table-striped > tbody > tr:last-child th:first-child {
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.panel > .table-striped > tbody > tr:last-child td:last-child,
|
||||
.panel > .table-responsive > .table-striped > tbody > tr:last-child td:last-child,
|
||||
.panel > .table-striped > tbody > tr:last-child th:last-child,
|
||||
.panel > .table-responsive > .table-striped > tbody > tr:last-child th:last-child {
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.panel-heading {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid transparent;
|
||||
@ -4890,10 +5012,12 @@ button.close {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1040;
|
||||
z-index: 1050;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
display: none;
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
outline: 0;
|
||||
}
|
||||
.modal.fade .modal-dialog {
|
||||
-webkit-transition: -webkit-transform .3s ease-out;
|
||||
@ -4911,7 +5035,6 @@ button.close {
|
||||
}
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
z-index: 1050;
|
||||
width: auto;
|
||||
margin: 10px;
|
||||
}
|
||||
@ -4932,7 +5055,7 @@ button.close {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1030;
|
||||
z-index: 1040;
|
||||
background-color: #000;
|
||||
}
|
||||
.modal-backdrop.fade {
|
||||
@ -4975,7 +5098,7 @@ button.close {
|
||||
.modal-footer .btn-block + .btn-block {
|
||||
margin-left: 0;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
@media (min-width: 768px) {
|
||||
.modal-dialog {
|
||||
width: 600px;
|
||||
margin: 30px auto;
|
||||
@ -4984,6 +5107,12 @@ button.close {
|
||||
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
|
||||
}
|
||||
.modal-sm {
|
||||
width: 300px;
|
||||
}
|
||||
.modal-lg {
|
||||
width: 900px;
|
||||
}
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
@ -5488,72 +5617,12 @@ td.visible-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-xs.visible-sm {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-xs.visible-sm {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-xs.visible-sm {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-xs.visible-sm,
|
||||
td.visible-xs.visible-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-xs.visible-md {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-xs.visible-md {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-xs.visible-md {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-xs.visible-md,
|
||||
td.visible-xs.visible-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.visible-xs.visible-lg {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-xs.visible-lg {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-xs.visible-lg {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-xs.visible-lg,
|
||||
td.visible-xs.visible-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
.visible-sm,
|
||||
tr.visible-sm,
|
||||
th.visible-sm,
|
||||
td.visible-sm {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.visible-sm.visible-xs {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-sm.visible-xs {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-sm.visible-xs {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-sm.visible-xs,
|
||||
td.visible-sm.visible-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-sm {
|
||||
display: block !important;
|
||||
@ -5569,72 +5638,12 @@ td.visible-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-sm.visible-md {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-sm.visible-md {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-sm.visible-md {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-sm.visible-md,
|
||||
td.visible-sm.visible-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.visible-sm.visible-lg {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-sm.visible-lg {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-sm.visible-lg {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-sm.visible-lg,
|
||||
td.visible-sm.visible-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
.visible-md,
|
||||
tr.visible-md,
|
||||
th.visible-md,
|
||||
td.visible-md {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.visible-md.visible-xs {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-md.visible-xs {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-md.visible-xs {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-md.visible-xs,
|
||||
td.visible-md.visible-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-md.visible-sm {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-md.visible-sm {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-md.visible-sm {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-md.visible-sm,
|
||||
td.visible-md.visible-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-md {
|
||||
display: block !important;
|
||||
@ -5650,72 +5659,12 @@ td.visible-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.visible-md.visible-lg {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-md.visible-lg {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-md.visible-lg {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-md.visible-lg,
|
||||
td.visible-md.visible-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
.visible-lg,
|
||||
tr.visible-lg,
|
||||
th.visible-lg,
|
||||
td.visible-lg {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.visible-lg.visible-xs {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-lg.visible-xs {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-lg.visible-xs {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-lg.visible-xs,
|
||||
td.visible-lg.visible-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-lg.visible-sm {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-lg.visible-sm {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-lg.visible-sm {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-lg.visible-sm,
|
||||
td.visible-lg.visible-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-lg.visible-md {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-lg.visible-md {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-lg.visible-md {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-lg.visible-md,
|
||||
td.visible-lg.visible-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.visible-lg {
|
||||
display: block !important;
|
||||
@ -5731,19 +5680,6 @@ td.visible-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
.hidden-xs {
|
||||
display: block !important;
|
||||
}
|
||||
table.hidden-xs {
|
||||
display: table;
|
||||
}
|
||||
tr.hidden-xs {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-xs,
|
||||
td.hidden-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.hidden-xs,
|
||||
tr.hidden-xs,
|
||||
@ -5752,51 +5688,6 @@ td.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-xs.hidden-sm,
|
||||
tr.hidden-xs.hidden-sm,
|
||||
th.hidden-xs.hidden-sm,
|
||||
td.hidden-xs.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-xs.hidden-md,
|
||||
tr.hidden-xs.hidden-md,
|
||||
th.hidden-xs.hidden-md,
|
||||
td.hidden-xs.hidden-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-xs.hidden-lg,
|
||||
tr.hidden-xs.hidden-lg,
|
||||
th.hidden-xs.hidden-lg,
|
||||
td.hidden-xs.hidden-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.hidden-sm {
|
||||
display: block !important;
|
||||
}
|
||||
table.hidden-sm {
|
||||
display: table;
|
||||
}
|
||||
tr.hidden-sm {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-sm,
|
||||
td.hidden-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.hidden-sm.hidden-xs,
|
||||
tr.hidden-sm.hidden-xs,
|
||||
th.hidden-sm.hidden-xs,
|
||||
td.hidden-sm.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-sm,
|
||||
tr.hidden-sm,
|
||||
@ -5805,51 +5696,6 @@ td.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-sm.hidden-md,
|
||||
tr.hidden-sm.hidden-md,
|
||||
th.hidden-sm.hidden-md,
|
||||
td.hidden-sm.hidden-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-sm.hidden-lg,
|
||||
tr.hidden-sm.hidden-lg,
|
||||
th.hidden-sm.hidden-lg,
|
||||
td.hidden-sm.hidden-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.hidden-md {
|
||||
display: block !important;
|
||||
}
|
||||
table.hidden-md {
|
||||
display: table;
|
||||
}
|
||||
tr.hidden-md {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-md,
|
||||
td.hidden-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.hidden-md.hidden-xs,
|
||||
tr.hidden-md.hidden-xs,
|
||||
th.hidden-md.hidden-xs,
|
||||
td.hidden-md.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-md.hidden-sm,
|
||||
tr.hidden-md.hidden-sm,
|
||||
th.hidden-md.hidden-sm,
|
||||
td.hidden-md.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-md,
|
||||
tr.hidden-md,
|
||||
@ -5858,51 +5704,6 @@ td.hidden-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-md.hidden-lg,
|
||||
tr.hidden-md.hidden-lg,
|
||||
th.hidden-md.hidden-lg,
|
||||
td.hidden-md.hidden-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.hidden-lg {
|
||||
display: block !important;
|
||||
}
|
||||
table.hidden-lg {
|
||||
display: table;
|
||||
}
|
||||
tr.hidden-lg {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-lg,
|
||||
td.hidden-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.hidden-lg.hidden-xs,
|
||||
tr.hidden-lg.hidden-xs,
|
||||
th.hidden-lg.hidden-xs,
|
||||
td.hidden-lg.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-lg.hidden-sm,
|
||||
tr.hidden-lg.hidden-sm,
|
||||
th.hidden-lg.hidden-sm,
|
||||
td.hidden-lg.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-lg.hidden-md,
|
||||
tr.hidden-lg.hidden-md,
|
||||
th.hidden-lg.hidden-md,
|
||||
td.hidden-lg.hidden-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-lg,
|
||||
tr.hidden-lg,
|
||||
|
||||
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
1
dist/js/bootstrap.js
vendored
1
dist/js/bootstrap.js
vendored
@ -982,7 +982,6 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
||||
}
|
||||
|
||||
Modal.prototype.backdrop = function (callback) {
|
||||
var that = this
|
||||
var animate = this.$element.hasClass('fade') ? 'fade' : ''
|
||||
|
||||
if (this.isShown && this.options.backdrop) {
|
||||
|
||||
@ -597,6 +597,35 @@ h1[id] {
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Color swatches
|
||||
*
|
||||
* Color swatches and associated values for our grayscale and brand colors.
|
||||
*/
|
||||
|
||||
.color-swatches {
|
||||
margin: 0 -5px;
|
||||
overflow: hidden; /* clearfix */
|
||||
}
|
||||
.color-swatch {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.color-swatches .gray-darker { background-color: #222; }
|
||||
.color-swatches .gray-dark { background-color: #333; }
|
||||
.color-swatches .gray { background-color: #555; }
|
||||
.color-swatches .gray-light { background-color: #999; }
|
||||
.color-swatches .gray-lighter { background-color: #eee; }
|
||||
.color-swatches .brand-primary { background-color: #428bca; }
|
||||
.color-swatches .brand-success { background-color: #5cb85c; }
|
||||
.color-swatches .brand-warning { background-color: #f0ad4e; }
|
||||
.color-swatches .brand-danger { background-color: #d9534f; }
|
||||
.color-swatches .brand-info { background-color: #5bc0de; }
|
||||
|
||||
|
||||
/*
|
||||
* Team members
|
||||
*
|
||||
@ -730,7 +759,7 @@ h1[id] {
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.bs-example-type .table .info {
|
||||
.bs-example-type .table .type-info {
|
||||
color: #999;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -750,6 +779,11 @@ h1[id] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Contextual background colors */
|
||||
.bs-example-bg-classes p {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.bs-example > .img-circle,
|
||||
.bs-example > .img-rounded,
|
||||
@ -990,6 +1024,7 @@ h1[id] {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.responsive-utilities-test span {
|
||||
display: block;
|
||||
padding: 15px 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -232,7 +232,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
||||
}
|
||||
result = {
|
||||
'bootstrap.css' : cw + tree.toCSS(),
|
||||
'bootstrap.min.css' : cw + tree.toCSS({ compress: true }).replace(/\n/g, '') // FIXME: remove newline hack once less.js upgraded to v1.4
|
||||
'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
168
examples/blog/blog.css
Normal file
168
examples/blog/blog.css
Normal file
@ -0,0 +1,168 @@
|
||||
/*
|
||||
* Globals
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: Georgia, "Times New Roman", Times, serif;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Override Bootstrap's default container.
|
||||
*/
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Masthead for nav
|
||||
*/
|
||||
|
||||
.blog-masthead {
|
||||
background-color: #428bca;
|
||||
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
/* Nav links */
|
||||
.blog-nav {
|
||||
|
||||
}
|
||||
.blog-nav-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
font-weight: 500;
|
||||
color: #cdddeb;
|
||||
}
|
||||
.blog-nav-item:hover,
|
||||
.blog-nav-item:focus {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Active state gets a caret at the bottom */
|
||||
.blog-nav .active {
|
||||
color: #fff;
|
||||
}
|
||||
.blog-nav .active:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -5px;
|
||||
vertical-align: middle;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
border-bottom: 5px solid;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Blog name and description
|
||||
*/
|
||||
|
||||
.blog-header {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.blog-title {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
font-size: 60px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.blog-description {
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Main column and sidebar layout
|
||||
*/
|
||||
|
||||
.blog-main {
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Sidebar modules for boxing content */
|
||||
.sidebar-module {
|
||||
padding: 15px;
|
||||
margin: 0 -15px 15px;
|
||||
}
|
||||
.sidebar-module-inset {
|
||||
padding: 15px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.sidebar-module-inset p:last-child,
|
||||
.sidebar-module-inset ul:last-child,
|
||||
.sidebar-module-inset ol:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Pagination */
|
||||
.pager {
|
||||
margin-bottom: 60px;
|
||||
text-align: left;
|
||||
}
|
||||
.pager > li > a {
|
||||
width: 140px;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Blog posts
|
||||
*/
|
||||
|
||||
.blog-post {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.blog-post-title {
|
||||
margin-bottom: 5px;
|
||||
font-size: 40px;
|
||||
}
|
||||
.blog-post-meta {
|
||||
margin-bottom: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Footer
|
||||
*/
|
||||
|
||||
.blog-footer {
|
||||
padding: 40px 0;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
background-color: #f9f9f9;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
171
examples/blog/index.html
Normal file
171
examples/blog/index.html
Normal file
@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
|
||||
|
||||
<title>Blog Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="blog.css" rel="stylesheet">
|
||||
|
||||
<!-- Just for debugging purposes. Don't actually copy this line! -->
|
||||
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="blog-masthead">
|
||||
<div class="container">
|
||||
<nav class="blog-nav">
|
||||
<a class="blog-nav-item active" href="#">Home</a>
|
||||
<a class="blog-nav-item" href="#">New features</a>
|
||||
<a class="blog-nav-item" href="#">Press</a>
|
||||
<a class="blog-nav-item" href="#">New hires</a>
|
||||
<a class="blog-nav-item" href="#">About</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="blog-header">
|
||||
<h1 class="blog-title">The Bootstrap Blog</h1>
|
||||
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-8 blog-main">
|
||||
|
||||
<div class="blog-post">
|
||||
<h2 class="blog-post-title">Sample blog post</h2>
|
||||
<p class="blog-post-meta">December 1, 2013 by <a href="#">Mark</a></p>
|
||||
|
||||
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
|
||||
<hr>
|
||||
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
<blockquote>
|
||||
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
</blockquote>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
<h2>Heading</h2>
|
||||
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
<pre><code>Example code block</code></pre>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<ul>
|
||||
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
|
||||
<li>Donec id elit non mi porta gravida at eget metus.</li>
|
||||
<li>Nulla vitae elit libero, a pharetra augue.</li>
|
||||
</ul>
|
||||
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
<ol>
|
||||
<li>Vestibulum id ligula porta felis euismod semper.</li>
|
||||
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
|
||||
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
|
||||
</ol>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
|
||||
</div><!-- /.blog-post -->
|
||||
|
||||
<div class="blog-post">
|
||||
<h2 class="blog-post-title">Another blog post</h2>
|
||||
<p class="blog-post-meta">November 23, 2013 by <a href="#">Jacob</a></p>
|
||||
|
||||
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
<blockquote>
|
||||
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
</blockquote>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
</div><!-- /.blog-post -->
|
||||
|
||||
<div class="blog-post">
|
||||
<h2 class="blog-post-title">New feature</h2>
|
||||
<p class="blog-post-meta">November 14, 2013 by <a href="#">Chris</a></p>
|
||||
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<ul>
|
||||
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
|
||||
<li>Donec id elit non mi porta gravida at eget metus.</li>
|
||||
<li>Nulla vitae elit libero, a pharetra augue.</li>
|
||||
</ul>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div><!-- /.blog-post -->
|
||||
|
||||
<ul class="pager">
|
||||
<li><a href="#">Previous</a></li>
|
||||
<li><a href="#">Next</a></li>
|
||||
</ul>
|
||||
|
||||
</div><!-- /.blog-main -->
|
||||
|
||||
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
|
||||
<div class="sidebar-module sidebar-module-inset">
|
||||
<h4>About</h4>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
</div>
|
||||
<div class="sidebar-module">
|
||||
<h4>Archives</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">December 2013</a></li>
|
||||
<li><a href="#">November 2013</a></li>
|
||||
<li><a href="#">October 2013</a></li>
|
||||
<li><a href="#">September 2013</a></li>
|
||||
<li><a href="#">August 2013</a></li>
|
||||
<li><a href="#">July 2013</a></li>
|
||||
<li><a href="#">June 2013</a></li>
|
||||
<li><a href="#">May 2013</a></li>
|
||||
<li><a href="#">April 2013</a></li>
|
||||
<li><a href="#">March 2013</a></li>
|
||||
<li><a href="#">February 2013</a></li>
|
||||
<li><a href="#">January 2013</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="sidebar-module">
|
||||
<h4>Elsewhere</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div><!-- /.blog-sidebar -->
|
||||
|
||||
</div><!-- /.row -->
|
||||
|
||||
</div><!-- /.container -->
|
||||
|
||||
<div class="blog-footer">
|
||||
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
<p>
|
||||
<a href="#">Back to top</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../docs-assets/js/holder.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -40,6 +40,7 @@ body {
|
||||
.site-wrapper {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%; /* For at leat Firefox */
|
||||
min-height: 100%;
|
||||
}
|
||||
.site-wrapper-inner {
|
||||
|
||||
@ -82,6 +82,10 @@
|
||||
<h3>Regarding navbars</h3>
|
||||
<p>As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar.</p>
|
||||
|
||||
<h3>Browsers, scrolling, and fixed elements</h3>
|
||||
<p>Non-responsive layouts highlight a key drawback to fixed elements. <strong class="text-danger">Any fixed component, such as a fixed navbar, will not be scrollable when the viewport becomes narrower than the page content.</strong> In other words, given the non-responsive container width of 970px and a viewport of 800px, you'll potentially hide 170px of content.</p>
|
||||
<p>There is no way around this as it's default browser behavior. The only solution is a responsive layout or using a non-fixed element.</p>
|
||||
|
||||
<h3>Non-responsive grid system</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">One third</div>
|
||||
|
||||
BIN
examples/screenshots/blog.jpg
Normal file
BIN
examples/screenshots/blog.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
@ -277,6 +277,15 @@ bootstrap/
|
||||
<h4>Dashboard</h4>
|
||||
<p>Basic structure for a admin dashboard with fixed sidebar and navbar.</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<a class="thumbnail" href="../examples/blog/">
|
||||
<img src="../examples/screenshots/blog.jpg" alt="">
|
||||
</a>
|
||||
<h4>Blog</h4>
|
||||
<p>Simple two-column blog layout with custom navigation, header, and type.</p>
|
||||
</div>
|
||||
<div class="clearfix visible-xs"></div>
|
||||
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<a class="thumbnail" href="../examples/non-responsive/">
|
||||
<img src="../examples/screenshots/non-responsive.jpg" alt="">
|
||||
@ -284,8 +293,6 @@ bootstrap/
|
||||
<h4>Non-responsive Bootstrap</h4>
|
||||
<p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
|
||||
</div>
|
||||
<div class="clearfix visible-xs"></div>
|
||||
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<a class="thumbnail" href="../examples/theme/">
|
||||
<img src="../examples/screenshots/theme.jpg" alt="">
|
||||
@ -746,11 +753,11 @@ bootstrap/
|
||||
================================================== -->
|
||||
<div class="bs-docs-section">
|
||||
<div class="page-header">
|
||||
<h1 id="browsers">Browser support</h1>
|
||||
<h1 id="support">Browser and device support</h1>
|
||||
</div>
|
||||
<p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>
|
||||
|
||||
<h3>Supported browsers</h3>
|
||||
<h3 id="support-browsers">Supported browsers</h3>
|
||||
<p>Specifically, we support the latest versions of the following:</p>
|
||||
<ul>
|
||||
<li>Chrome (Mac, Windows, iOS, and Android)</li>
|
||||
@ -761,7 +768,7 @@ bootstrap/
|
||||
</ul>
|
||||
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.</p>
|
||||
|
||||
<h3>Internet Explorer 8 and 9</h3>
|
||||
<h3 id="support-ie8-ie9">Internet Explorer 8 and 9</h3>
|
||||
<p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
@ -804,7 +811,7 @@ bootstrap/
|
||||
|
||||
<p>Visit <a href="http://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
|
||||
|
||||
<h3>Internet Explorer 8 and Respond.js</h3>
|
||||
<h3 id="support-ie8-respondjs">Internet Explorer 8 and Respond.js</h3>
|
||||
<p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
|
||||
<h4 id="respond-js-x-domain">Respond.js and cross-domain CSS</h4>
|
||||
<p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p>
|
||||
@ -813,10 +820,10 @@ bootstrap/
|
||||
<h4 id="respond-import">Respond.js and <code>@import</code></h4>
|
||||
<p>Respond.js doesn't work with CSS that's referenced via <code>@import</code>. In particular, some Drupal configurations are known to use <code>@import</code>. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
|
||||
|
||||
<h3>Internet Explorer 8 and box-sizing</h3>
|
||||
<h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3>
|
||||
<p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
|
||||
|
||||
<h3 id="ie-compat-modes">IE Compatibility modes</h3>
|
||||
<h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3>
|
||||
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code><meta></code> tag in your pages:</p>
|
||||
{% highlight html %}
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
@ -825,7 +832,7 @@ bootstrap/
|
||||
<p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
|
||||
<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 id="ie-10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
|
||||
<h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
|
||||
<p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
|
||||
{% highlight css %}
|
||||
@-ms-viewport { width: device-width; }
|
||||
@ -853,7 +860,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
||||
<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>
|
||||
<p>As a heads up, we include this in the Bootstrap docs as an example.</p>
|
||||
|
||||
<h3 id="safari-percentages">Safari percent rounding</h3>
|
||||
<h3 id="support-safari-percentages">Safari percent rounding</h3>
|
||||
<p>As of Safari v6.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much 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>
|
||||
@ -861,14 +868,30 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
||||
</ul>
|
||||
<p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
|
||||
|
||||
<h3 id="mobile-modals">Modals and mobile devices</h3>
|
||||
<h3 id="support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</h3>
|
||||
<h4>Overflow and scrolling</h4>
|
||||
<p>Support for <code>overflow: hidden</code> on the <code><body></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><body></code> content will begin to scroll.</p>
|
||||
<h4>Virtual keyboards</h4>
|
||||
<p>Also, note that if you're using inputs in your modal – iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
|
||||
<p>Also, note that if you're using inputs in your modal or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
|
||||
|
||||
<h3 id="browser-zoom">Browser zooming</h3>
|
||||
<h3 id="support-browser-zoom">Browser zooming</h3>
|
||||
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
|
||||
|
||||
<h3 id="support-android-stock-browser">Android stock browser</h3>
|
||||
<p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
|
||||
<h4>Select menus</h4>
|
||||
<p>On <code><select></code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code><select></code> as an unstyled element on the Android stock broswer. The useragent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
|
||||
{% highlight html %}
|
||||
<script>
|
||||
var nua = navigator.userAgent;
|
||||
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1);
|
||||
if (isAndroid) {
|
||||
$('select.form-control').removeClass('form-control').css('width', '100%');
|
||||
}
|
||||
</script>
|
||||
{% endhighlight %}
|
||||
<p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
122
javascript.html
122
javascript.html
@ -74,7 +74,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-third-party-libs">
|
||||
<h4>Third-party libraries</h4>
|
||||
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the <a href="http://groups.google.com/group/twitter-bootstrap">mailing list</a> if you need help.</p>
|
||||
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -110,7 +110,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Mobile device caveats</h4>
|
||||
<p>There are some caveats regarding using modals on mobile devices. <a href="{{ page.base_url }}getting-started#mobile-modals">See our browser support docs</a> for details.</p>
|
||||
<p>There are some caveats regarding using modals on mobile devices. <a href="{{ page.base_url }}getting-started#fixed-position-keyboards">See our browser support docs</a> for details.</p>
|
||||
</div>
|
||||
|
||||
<h3>Static example</h3>
|
||||
@ -223,9 +223,9 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
@ -235,6 +235,67 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
<p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="modals-sizes">Optional sizes</h2>
|
||||
<p>Modals have two optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p>
|
||||
<div class="bs-example">
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-lg">Large modal</button>
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-sm">Small modal</button>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<!-- Large modal -->
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-lg">Large modal</button>
|
||||
|
||||
<div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Small modal -->
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-sm">Small modal</button>
|
||||
|
||||
<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<!-- Modal content for the above example -->
|
||||
<div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<h2 id="modals-usage">Usage</h2>
|
||||
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.model-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
|
||||
|
||||
@ -843,6 +904,15 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Opt-in functionality</h4>
|
||||
@ -865,9 +935,17 @@ $('#example').tooltip(options)
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Markup</h3>
|
||||
<p>The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>
|
||||
<p>The required markup for a tooltip is only a <code>data</code> attribute and <code>title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Multiple-line links</h4>
|
||||
<p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
|
||||
</div>
|
||||
{% highlight html linenos %}
|
||||
<div class="tooltip">
|
||||
<!-- HTML to write -->
|
||||
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
|
||||
|
||||
<!-- Generated markup by the plugin -->
|
||||
<div class="tooltip top">
|
||||
<div class="tooltip-inner">
|
||||
Tooltip!
|
||||
</div>
|
||||
@ -950,11 +1028,6 @@ $('#example').tooltip(options)
|
||||
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
|
||||
</div>
|
||||
|
||||
<h3>Markup</h3>
|
||||
{% highlight html %}
|
||||
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Methods</h3>
|
||||
|
||||
<h4>$().tooltip(options)</h4>
|
||||
@ -1100,6 +1173,29 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
||||
</button>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on top
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||||
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Multiple-line links</h4>
|
||||
<p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 id="popovers-usage">Usage</h2>
|
||||
@ -1957,7 +2053,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
|
||||
<p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p>
|
||||
<p>Here's how the affix plugin works:</p>
|
||||
<ol>
|
||||
<li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in it's top-most position. At this point no CSS positioning is required.</li>
|
||||
<li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in its top-most position. At this point no CSS positioning is required.</li>
|
||||
<li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's code CSS).</li>
|
||||
<li>If a bottom offset is defined, scrolling past that should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.</li>
|
||||
</ol>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return"],
|
||||
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
|
||||
"requireSpacesInFunctionExpression": { "beforeOpeningCurlyBrace": true },
|
||||
"disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
|
||||
"requireRightStickedOperators": ["!"],
|
||||
|
||||
@ -149,7 +149,6 @@
|
||||
}
|
||||
|
||||
Modal.prototype.backdrop = function (callback) {
|
||||
var that = this
|
||||
var animate = this.$element.hasClass('fade') ? 'fade' : ''
|
||||
|
||||
if (this.isShown && this.options.backdrop) {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
|
||||
.breadcrumb {
|
||||
padding: 8px 15px;
|
||||
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
|
||||
margin-bottom: @line-height-computed;
|
||||
list-style: none;
|
||||
background-color: @breadcrumb-bg;
|
||||
|
||||
@ -37,18 +37,17 @@
|
||||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
margin-left: -5px; // Offset the first child's margin
|
||||
&:extend(.clearfix all);
|
||||
|
||||
.btn-group {
|
||||
.btn-group,
|
||||
.input-group {
|
||||
float: left;
|
||||
}
|
||||
// Space out series of button groups
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
+ .btn,
|
||||
+ .btn-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
> .btn-group,
|
||||
> .input-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -188,13 +187,13 @@
|
||||
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group-vertical > .btn-group:first-child {
|
||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
|
||||
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
.border-top-radius(0);
|
||||
}
|
||||
|
||||
|
||||
@ -46,6 +46,8 @@
|
||||
background-clip: padding-box;
|
||||
|
||||
// Aligns the dropdown menu to right
|
||||
//
|
||||
// Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]`
|
||||
&.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
@ -126,6 +128,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Menu positioning
|
||||
//
|
||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
|
||||
// menu with the parent.
|
||||
.dropdown-menu-right {
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
right: 0;
|
||||
}
|
||||
// With v3, we enabled auto-flipping if you have a dropdown within a right
|
||||
// aligned nav component. To enable the undoing of that, we provide an override
|
||||
// to restore the default dropdown menu alignment.
|
||||
//
|
||||
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
|
||||
// `.pull-right` nav component.
|
||||
.dropdown-menu-left {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
@ -142,7 +163,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: @zindex-dropdown - 10;
|
||||
z-index: (@zindex-dropdown - 10);
|
||||
}
|
||||
|
||||
// Right aligned dropdowns
|
||||
@ -180,7 +201,12 @@
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.navbar-right {
|
||||
.dropdown-menu {
|
||||
.pull-right > .dropdown-menu();
|
||||
.dropdown-menu-right();
|
||||
}
|
||||
// Necessary for overrides of the default right aligned menu.
|
||||
// Will remove come v4 in all likelihood.
|
||||
.dropdown-menu-left {
|
||||
.dropdown-menu-left();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -155,6 +155,14 @@ output {
|
||||
}
|
||||
}
|
||||
|
||||
// Special styles for iOS date input
|
||||
//
|
||||
// In Mobile Safari, date inputs require a pixel line-height that matches the
|
||||
// given height of the input.
|
||||
input[type="date"] {
|
||||
line-height: @input-height-base;
|
||||
}
|
||||
|
||||
|
||||
// Form groups
|
||||
//
|
||||
@ -226,7 +234,12 @@ input[type="checkbox"],
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
||||
// height and font-size of form controls.
|
||||
|
||||
.input-sm {
|
||||
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
||||
}
|
||||
@ -240,15 +253,35 @@ input[type="checkbox"],
|
||||
//
|
||||
// Apply contextual and semantic states to individual form controls.
|
||||
|
||||
// Warning
|
||||
.has-feedback {
|
||||
// Enable absolute positioning
|
||||
position: relative;
|
||||
|
||||
// Ensure icons don't overlap text
|
||||
.form-control {
|
||||
padding-right: (@input-height-base * 1.25);
|
||||
}
|
||||
|
||||
// Feedback icon (requires .glyphicon classes)
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: (@line-height-computed + 5); // Height of the `label` and its margin
|
||||
right: 0;
|
||||
display: block;
|
||||
width: @input-height-base;
|
||||
height: @input-height-base;
|
||||
line-height: @input-height-base;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Feedback states
|
||||
.has-warning {
|
||||
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
|
||||
}
|
||||
// Error
|
||||
.has-error {
|
||||
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
|
||||
}
|
||||
// Success
|
||||
.has-success {
|
||||
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
|
||||
}
|
||||
@ -294,7 +327,7 @@ input[type="checkbox"],
|
||||
// Kick in the inline
|
||||
@media (min-width: @screen-sm) {
|
||||
// Inline-block all the things for "inline"
|
||||
.form-group {
|
||||
.form-group {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
@ -303,12 +336,13 @@ input[type="checkbox"],
|
||||
// In navbar-form, allow folks to *not* use `.form-group`
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
width: auto; // Prevent labels from stacking above inputs in `.form-group`
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Override `width: 100%;` when not within a `.form-group`
|
||||
select.form-control {
|
||||
width: auto;
|
||||
.control-label {
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Remove default margin on radios/checkboxes that were used for stacking, and
|
||||
@ -327,6 +361,14 @@ input[type="checkbox"],
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Validation states
|
||||
//
|
||||
// Reposition the icon because it's now within a grid column and columns have
|
||||
// `position: relative;` on them. Also accounts for the grid gutter padding.
|
||||
.has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -352,7 +394,7 @@ input[type="checkbox"],
|
||||
// and other content below items
|
||||
.radio,
|
||||
.checkbox {
|
||||
min-height: @line-height-computed + (@padding-base-vertical + 1);
|
||||
min-height: (@line-height-computed + (@padding-base-vertical + 1));
|
||||
}
|
||||
|
||||
// Make form groups behave like rows
|
||||
@ -370,4 +412,13 @@ input[type="checkbox"],
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Validation states
|
||||
//
|
||||
// Reposition the icon because it's now within a grid column and columns have
|
||||
// `position: relative;` on them. Also accounts for the grid gutter padding.
|
||||
.has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
right: (@grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,10 +28,6 @@
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
&:empty {
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Individual icons
|
||||
|
||||
@ -10,10 +10,10 @@
|
||||
.container {
|
||||
.container-fixed();
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
width: @container-sm;
|
||||
}
|
||||
@media (min-width: @screen-md) {
|
||||
@media (min-width: @screen-md-min) {
|
||||
width: @container-md;
|
||||
}
|
||||
@media (min-width: @screen-lg-min) {
|
||||
|
||||
@ -17,6 +17,11 @@
|
||||
}
|
||||
|
||||
.form-control {
|
||||
// IE9 fubars the placeholder attribute in text inputs and the arrows on
|
||||
// select elements in input groups. To fix it, we float the input. Details:
|
||||
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
|
||||
float: left;
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -90,8 +95,10 @@
|
||||
.input-group .form-control:first-child,
|
||||
.input-group-addon:first-child,
|
||||
.input-group-btn:first-child > .btn,
|
||||
.input-group-btn:first-child > .btn-group > .btn,
|
||||
.input-group-btn:first-child > .dropdown-toggle,
|
||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
|
||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
|
||||
.border-right-radius(0);
|
||||
}
|
||||
.input-group-addon:first-child {
|
||||
@ -100,8 +107,10 @@
|
||||
.input-group .form-control:last-child,
|
||||
.input-group-addon:last-child,
|
||||
.input-group-btn:last-child > .btn,
|
||||
.input-group-btn:last-child > .btn-group > .btn,
|
||||
.input-group-btn:last-child > .dropdown-toggle,
|
||||
.input-group-btn:first-child > .btn:not(:first-child) {
|
||||
.input-group-btn:first-child > .btn:not(:first-child),
|
||||
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
|
||||
.border-left-radius(0);
|
||||
}
|
||||
.input-group-addon:last-child {
|
||||
@ -112,25 +121,37 @@
|
||||
// -------------------------
|
||||
.input-group-btn {
|
||||
position: relative;
|
||||
// Jankily prevent input button groups from wrapping with `white-space` and
|
||||
// `font-size` in combination with `inline-block` on buttons.
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
// Negative margin for spacing, position for bringing hovered/focused/actived
|
||||
// element above the siblings.
|
||||
> .btn {
|
||||
position: relative;
|
||||
+ .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
// Bring the "active" button to the front
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Negative margin to only have a 1px border between the two
|
||||
&:first-child > .btn {
|
||||
margin-right: -1px;
|
||||
&:first-child {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-right: -1px;
|
||||
}
|
||||
}
|
||||
&:last-child > .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
.input-group-btn > .btn {
|
||||
position: relative;
|
||||
// Jankily prevent input button groups from wrapping
|
||||
+ .btn {
|
||||
margin-left: -4px;
|
||||
}
|
||||
// Bring the "active" button to the front
|
||||
&:hover,
|
||||
&:active {
|
||||
z-index: 2;
|
||||
&:last-child {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,19 +6,17 @@
|
||||
.jumbotron {
|
||||
padding: @jumbotron-padding;
|
||||
margin-bottom: @jumbotron-padding;
|
||||
font-size: @jumbotron-font-size;
|
||||
font-weight: 200;
|
||||
line-height: (@line-height-base * 1.5);
|
||||
color: @jumbotron-color;
|
||||
background-color: @jumbotron-bg;
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
line-height: 1;
|
||||
color: @jumbotron-heading-color;
|
||||
}
|
||||
p {
|
||||
line-height: 1.4;
|
||||
margin-bottom: (@jumbotron-padding / 2);
|
||||
font-size: @jumbotron-font-size;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.container & {
|
||||
|
||||
@ -79,7 +79,7 @@ a.list-group-item {
|
||||
color: inherit;
|
||||
}
|
||||
.list-group-item-text {
|
||||
color: lighten(@list-group-active-bg, 40%);
|
||||
color: @list-group-active-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -147,17 +147,17 @@
|
||||
// Transformations
|
||||
.rotate(@degrees) {
|
||||
-webkit-transform: rotate(@degrees);
|
||||
-ms-transform: rotate(@degrees); // IE9+
|
||||
-ms-transform: rotate(@degrees); // IE9 only
|
||||
transform: rotate(@degrees);
|
||||
}
|
||||
.scale(@ratio; @ratio-y...) {
|
||||
-webkit-transform: scale(@ratio, @ratio-y);
|
||||
-ms-transform: scale(@ratio, @ratio-y); // IE9+
|
||||
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
|
||||
transform: scale(@ratio, @ratio-y);
|
||||
}
|
||||
.translate(@x; @y) {
|
||||
-webkit-transform: translate(@x, @y);
|
||||
-ms-transform: translate(@x, @y); // IE9+
|
||||
-ms-transform: translate(@x, @y); // IE9 only
|
||||
transform: translate(@x, @y);
|
||||
}
|
||||
.skew(@x; @y) {
|
||||
@ -172,12 +172,12 @@
|
||||
|
||||
.rotateX(@degrees) {
|
||||
-webkit-transform: rotateX(@degrees);
|
||||
-ms-transform: rotateX(@degrees); // IE9+
|
||||
-ms-transform: rotateX(@degrees); // IE9 only
|
||||
transform: rotateX(@degrees);
|
||||
}
|
||||
.rotateY(@degrees) {
|
||||
-webkit-transform: rotateY(@degrees);
|
||||
-ms-transform: rotateY(@degrees); // IE9+
|
||||
-ms-transform: rotateY(@degrees); // IE9 only
|
||||
transform: rotateY(@degrees);
|
||||
}
|
||||
.perspective(@perspective) {
|
||||
@ -193,6 +193,7 @@
|
||||
.transform-origin(@origin) {
|
||||
-webkit-transform-origin: @origin;
|
||||
-moz-transform-origin: @origin;
|
||||
-ms-transform-origin: @origin; // IE9 only
|
||||
transform-origin: @origin;
|
||||
}
|
||||
|
||||
@ -201,6 +202,30 @@
|
||||
-webkit-animation: @animation;
|
||||
animation: @animation;
|
||||
}
|
||||
.animation-name(@name) {
|
||||
-webkit-animation-name: @name;
|
||||
animation-name: @name;
|
||||
}
|
||||
.animation-duration(@duration) {
|
||||
-webkit-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
}
|
||||
.animation-timing-function(@timing-function) {
|
||||
-webkit-animation-timing-function: @timing-function;
|
||||
animation-timing-function: @timing-function;
|
||||
}
|
||||
.animation-delay(@delay) {
|
||||
-webkit-animation-delay: @delay;
|
||||
animation-delay: @delay;
|
||||
}
|
||||
.animation-iteration-count(@iteration-count) {
|
||||
-webkit-animation-iteration-count: @iteration-count;
|
||||
animation-iteration-count: @iteration-count;
|
||||
}
|
||||
.animation-direction(@direction) {
|
||||
-webkit-animation-direction: @direction;
|
||||
animation-direction: @direction;
|
||||
}
|
||||
|
||||
// Backface visibility
|
||||
// Prevent browsers from flickering when using CSS 3D transforms.
|
||||
@ -353,7 +378,7 @@
|
||||
//
|
||||
// Keep images from scaling beyond the width of their parents.
|
||||
|
||||
.img-responsive(@display: block;) {
|
||||
.img-responsive(@display: block) {
|
||||
display: @display;
|
||||
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
||||
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
||||
@ -613,30 +638,39 @@
|
||||
position: relative;
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
}
|
||||
.make-xs-column-offset(@columns) {
|
||||
@media (min-width: @screen-xs-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-xs-column-push(@columns) {
|
||||
@media (min-width: @screen-xs-min) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-xs-column-pull(@columns) {
|
||||
@media (min-width: @screen-xs-min) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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-sm-min) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the small column offsets
|
||||
.make-sm-column-offset(@columns) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
@ -653,23 +687,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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-md-min) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the medium column offsets
|
||||
.make-md-column-offset(@columns) {
|
||||
@media (min-width: @screen-md-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
@ -686,23 +716,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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-lg-min) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the large column offsets
|
||||
.make-lg-column-offset(@columns) {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
@ -729,11 +755,11 @@
|
||||
// Common styles for all sizes of grid columns, widths 1-12
|
||||
.col(@index) when (@index = 1) { // initial
|
||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
||||
.col(@index + 1, @item);
|
||||
.col((@index + 1), @item);
|
||||
}
|
||||
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
|
||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
||||
.col(@index + 1, ~"@{list}, @{item}");
|
||||
.col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||
@{list} {
|
||||
@ -751,11 +777,11 @@
|
||||
.make-grid-columns-float(@class) {
|
||||
.col(@index) when (@index = 1) { // initial
|
||||
@item: ~".col-@{class}-@{index}";
|
||||
.col(@index + 1, @item);
|
||||
.col((@index + 1), @item);
|
||||
}
|
||||
.col(@index, @list) when (@index =< @grid-columns) { // general
|
||||
@item: ~".col-@{class}-@{index}";
|
||||
.col(@index + 1, ~"@{list}, @{item}");
|
||||
.col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||
@{list} {
|
||||
@ -790,7 +816,7 @@
|
||||
.make-grid(@index, @class, @type) when (@index >= 0) {
|
||||
.calc-grid(@index, @class, @type);
|
||||
// next iteration
|
||||
.make-grid(@index - 1, @class, @type);
|
||||
.make-grid((@index - 1), @class, @type);
|
||||
}
|
||||
|
||||
|
||||
@ -825,6 +851,10 @@
|
||||
border-color: @border-color;
|
||||
background-color: @background-color;
|
||||
}
|
||||
// Optional feedack icon
|
||||
.form-control-feedback {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Form control focus state
|
||||
|
||||
@ -22,7 +22,12 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-modal-background;
|
||||
z-index: @zindex-modal;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||
// https://github.com/twbs/bootstrap/pull/10951.
|
||||
outline: 0;
|
||||
|
||||
// When fading in the modal, animate it to slide down
|
||||
&.fade .modal-dialog {
|
||||
@ -37,7 +42,6 @@
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: 10px;
|
||||
z-index: (@zindex-modal-background + 10);
|
||||
}
|
||||
|
||||
// Actual modal
|
||||
@ -60,11 +64,11 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: (@zindex-modal-background - 10);
|
||||
z-index: @zindex-modal-background;
|
||||
background-color: @modal-backdrop-bg;
|
||||
// Fade for backdrop
|
||||
&.fade { .opacity(0); }
|
||||
&.in { .opacity(.5); }
|
||||
&.in { .opacity(@modal-backdrop-opacity); }
|
||||
}
|
||||
|
||||
// Modal header
|
||||
@ -116,8 +120,9 @@
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
width: 600px;
|
||||
margin: 30px auto;
|
||||
@ -126,4 +131,8 @@
|
||||
.box-shadow(0 5px 15px rgba(0,0,0,.5));
|
||||
}
|
||||
|
||||
// Modal sizes
|
||||
.modal-sm { width: @modal-sm; }
|
||||
.modal-lg { width: @modal-lg; }
|
||||
|
||||
}
|
||||
|
||||
@ -161,6 +161,13 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Prevent Glyphicons from increasing height of navbar
|
||||
> .glyphicon {
|
||||
float: left;
|
||||
margin-top: -2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.navbar > .container &,
|
||||
.navbar > .container-fluid & {
|
||||
@ -205,7 +212,7 @@
|
||||
|
||||
// Navbar nav links
|
||||
//
|
||||
// Builds on top of the `.nav` components with it's own modifier class to make
|
||||
// Builds on top of the `.nav` components with its own modifier class to make
|
||||
// the nav the full height of the horizontal nav (above 768px).
|
||||
|
||||
.navbar-nav {
|
||||
@ -329,13 +336,6 @@
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
|
||||
// Right aligned menus need alt position
|
||||
.navbar-nav.pull-right > li > .dropdown-menu,
|
||||
.navbar-nav > li > .dropdown-menu.pull-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
// Buttons in navbars
|
||||
//
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Active state, and it's :hover to override normal :hover
|
||||
// Active state, and its :hover to override normal :hover
|
||||
&.active > a {
|
||||
&,
|
||||
&:hover,
|
||||
|
||||
@ -15,15 +15,15 @@
|
||||
> span {
|
||||
display: inline-block;
|
||||
padding: 5px 14px;
|
||||
background-color: @pagination-bg;
|
||||
border: 1px solid @pagination-border;
|
||||
background-color: @pager-bg;
|
||||
border: 1px solid @pager-border;
|
||||
border-radius: @pager-border-radius;
|
||||
}
|
||||
|
||||
> a:hover,
|
||||
> a:focus {
|
||||
text-decoration: none;
|
||||
background-color: @pagination-hover-bg;
|
||||
background-color: @pager-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
> a:focus,
|
||||
> span {
|
||||
color: @pager-disabled-color;
|
||||
background-color: @pagination-bg;
|
||||
background-color: @pager-bg;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
// Panel contents
|
||||
.panel-body {
|
||||
padding: 15px;
|
||||
padding: @panel-body-padding;
|
||||
&:extend(.clearfix all);
|
||||
}
|
||||
|
||||
@ -95,6 +95,19 @@
|
||||
border: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> .table-striped,
|
||||
> .table-responsive > .table-striped {
|
||||
> tbody > tr:last-child {
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
border-bottom-left-radius: (@panel-border-radius - 1);
|
||||
}
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
border-bottom-left-radius: (@panel-border-radius - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -102,14 +115,14 @@
|
||||
.panel-heading {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid transparent;
|
||||
.border-top-radius(@panel-border-radius - 1);
|
||||
.border-top-radius((@panel-border-radius - 1));
|
||||
|
||||
> .dropdown .dropdown-toggle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Within heading, strip any `h*` tag of it's default margins for spacing.
|
||||
// Within heading, strip any `h*` tag of its default margins for spacing.
|
||||
.panel-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
@ -126,7 +139,7 @@
|
||||
padding: 10px 15px;
|
||||
background-color: @panel-footer-bg;
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
.border-bottom-radius(@panel-border-radius - 1);
|
||||
.border-bottom-radius((@panel-border-radius - 1));
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -23,172 +23,51 @@
|
||||
|
||||
|
||||
// Visibility utilities
|
||||
|
||||
.visible-xs {
|
||||
.responsive-invisibility();
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
&.visible-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.visible-sm {
|
||||
.responsive-invisibility();
|
||||
&.visible-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
&.visible-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.visible-md {
|
||||
.responsive-invisibility();
|
||||
&.visible-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
&.visible-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.visible-lg {
|
||||
.responsive-invisibility();
|
||||
&.visible-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-xs {
|
||||
.responsive-visibility();
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
&.hidden-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.hidden-sm {
|
||||
.responsive-visibility();
|
||||
&.hidden-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
&.hidden-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.hidden-md {
|
||||
.responsive-visibility();
|
||||
&.hidden-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
&.hidden-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.hidden-lg {
|
||||
.responsive-visibility();
|
||||
&.hidden-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
line-height: 1.4;
|
||||
.opacity(0);
|
||||
|
||||
&.in { .opacity(.9); }
|
||||
&.in { .opacity(@tooltip-opacity); }
|
||||
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
|
||||
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
|
||||
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
|
||||
|
||||
@ -21,9 +21,9 @@ h1, h2, h3, h4, h5, h6,
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
|
||||
@ -32,9 +32,9 @@ h3 {
|
||||
font-size: 65%;
|
||||
}
|
||||
}
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
margin-top: (@line-height-computed / 2);
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
|
||||
@ -61,7 +61,7 @@ p {
|
||||
|
||||
.lead {
|
||||
margin-bottom: @line-height-computed;
|
||||
font-size: floor(@font-size-base * 1.15);
|
||||
font-size: floor((@font-size-base * 1.15));
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
|
||||
@ -81,7 +81,13 @@ small,
|
||||
// Undo browser default styling
|
||||
cite { font-style: normal; }
|
||||
|
||||
// Contextual emphasis
|
||||
// Alignment
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
|
||||
// Contextual colors
|
||||
.text-muted {
|
||||
color: @text-muted;
|
||||
}
|
||||
@ -116,11 +122,42 @@ cite { font-style: normal; }
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
// Contextual backgrounds
|
||||
// For now we'll leave these alongside the text classes until v4 when we can
|
||||
// safely shift things around (per SemVer rules).
|
||||
.bg-primary {
|
||||
// Given the contrast here, this is the only class to have its color inverted
|
||||
// automatically.
|
||||
color: #fff;
|
||||
background-color: @brand-primary;
|
||||
a&:hover {
|
||||
background-color: darken(@brand-primary, 10%);
|
||||
}
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: @state-warning-bg;
|
||||
a&:hover {
|
||||
background-color: darken(@state-warning-bg, 10%);
|
||||
}
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: @state-danger-bg;
|
||||
a&:hover {
|
||||
background-color: darken(@state-danger-bg, 10%);
|
||||
}
|
||||
}
|
||||
.bg-success {
|
||||
background-color: @state-success-bg;
|
||||
a&:hover {
|
||||
background-color: darken(@state-success-bg, 10%);
|
||||
}
|
||||
}
|
||||
.bg-info {
|
||||
background-color: @state-info-bg;
|
||||
a&:hover {
|
||||
background-color: darken(@state-info-bg, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Page header
|
||||
@ -229,12 +266,14 @@ blockquote {
|
||||
border-left: 5px solid @blockquote-border-color;
|
||||
p {
|
||||
font-size: (@font-size-base * 1.25);
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Deprecating small and .small for v3.1
|
||||
// Context: https://github.com/twbs/bootstrap/issues/11660
|
||||
footer,
|
||||
small,
|
||||
.small {
|
||||
display: block;
|
||||
|
||||
@ -45,18 +45,18 @@
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: ceil(@font-size-base * 1.25); // ~18px
|
||||
@font-size-small: ceil(@font-size-base * 0.85); // ~12px
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor(@font-size-base * 2.6); // ~36px
|
||||
@font-size-h2: floor(@font-size-base * 2.15); // ~30px
|
||||
@font-size-h3: ceil(@font-size-base * 1.7); // ~24px
|
||||
@font-size-h4: ceil(@font-size-base * 1.25); // ~18px
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil(@font-size-base * 0.85); // ~12px
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@line-height-base: 1.428571429; // 20/14
|
||||
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
|
||||
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
||||
|
||||
@headings-font-family: inherit;
|
||||
@headings-font-weight: 500;
|
||||
@ -189,6 +189,9 @@
|
||||
|
||||
@dropdown-header-color: @gray-light;
|
||||
|
||||
// Note: Deprecated @dropdown-caret-color as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
// COMPONENT VARIABLES
|
||||
// --------------------------------------------------
|
||||
@ -263,7 +266,7 @@
|
||||
@navbar-height: 50px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
|
||||
@navbar-default-color: #777;
|
||||
@ -363,8 +366,16 @@
|
||||
// Pager
|
||||
// -------------------------
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: 15px;
|
||||
@pager-disabled-color: @gray-light;
|
||||
|
||||
@pager-hover-bg: @pagination-hover-bg;
|
||||
|
||||
@pager-active-bg: @pagination-active-bg;
|
||||
@pager-active-color: @pagination-active-color;
|
||||
|
||||
@pager-disabled-color: @pagination-disabled-color;
|
||||
|
||||
|
||||
// Jumbotron
|
||||
@ -374,7 +385,7 @@
|
||||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: @gray-lighter;
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil(@font-size-base * 1.5);
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
@ -402,6 +413,7 @@
|
||||
@tooltip-max-width: 200px;
|
||||
@tooltip-color: #fff;
|
||||
@tooltip-bg: #000;
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
@tooltip-arrow-width: 5px;
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
@ -450,9 +462,13 @@
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
@modal-backdrop-bg: #000;
|
||||
@modal-backdrop-opacity: .5;
|
||||
@modal-header-border-color: #e5e5e5;
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
// Alerts
|
||||
// -------------------------
|
||||
@ -491,24 +507,26 @@
|
||||
|
||||
// List group
|
||||
// -------------------------
|
||||
@list-group-bg: #fff;
|
||||
@list-group-border: #ddd;
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
@list-group-bg: #fff;
|
||||
@list-group-border: #ddd;
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
@list-group-hover-bg: #f5f5f5;
|
||||
@list-group-active-color: @component-active-color;
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-heading-color: #333;
|
||||
@list-group-hover-bg: #f5f5f5;
|
||||
@list-group-active-color: @component-active-color;
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-heading-color: #333;
|
||||
|
||||
// Panels
|
||||
// -------------------------
|
||||
@panel-bg: #fff;
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-body-padding: 15px;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-footer-bg: #f5f5f5;
|
||||
|
||||
@panel-default-text: @gray-dark;
|
||||
@ -550,6 +568,7 @@
|
||||
// Wells
|
||||
// -------------------------
|
||||
@well-bg: #f5f5f5;
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
// Badges
|
||||
@ -568,10 +587,12 @@
|
||||
|
||||
// Breadcrumbs
|
||||
// -------------------------
|
||||
@breadcrumb-bg: #f5f5f5;
|
||||
@breadcrumb-color: #ccc;
|
||||
@breadcrumb-active-color: @gray-light;
|
||||
@breadcrumb-separator: "/";
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
@breadcrumb-bg: #f5f5f5;
|
||||
@breadcrumb-color: #ccc;
|
||||
@breadcrumb-active-color: @gray-light;
|
||||
@breadcrumb-separator: "/";
|
||||
|
||||
|
||||
// Carousel
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
padding: 19px;
|
||||
margin-bottom: 20px;
|
||||
background-color: @well-bg;
|
||||
border: 1px solid darken(@well-bg, 7%);
|
||||
border: 1px solid @well-border;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
|
||||
blockquote {
|
||||
|
||||
94
package.json
94
package.json
@ -1,55 +1,55 @@
|
||||
{
|
||||
"name": "bootstrap"
|
||||
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
|
||||
, "version": "3.0.3"
|
||||
, "keywords": ["bootstrap", "css"]
|
||||
, "homepage": "http://getbootstrap.com"
|
||||
, "author": "Twitter, Inc."
|
||||
, "scripts": { "test": "grunt test" }
|
||||
, "repository": {
|
||||
"name": "bootstrap",
|
||||
"description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development.",
|
||||
"version": "3.0.3",
|
||||
"keywords": ["bootstrap", "css"],
|
||||
"homepage": "http://getbootstrap.com",
|
||||
"author": "Twitter, Inc.",
|
||||
"scripts": { "test": "grunt test" },
|
||||
"repository": {
|
||||
"type": "git"
|
||||
, "url": "https://github.com/twbs/bootstrap.git"
|
||||
}
|
||||
, "bugs": {
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/twbs/bootstrap/issues"
|
||||
}
|
||||
, "licenses": [
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "Apache-2.0"
|
||||
, "url": "http://www.apache.org/licenses/LICENSE-2.0"
|
||||
"type": "Apache-2.0",
|
||||
"url": "http://www.apache.org/licenses/LICENSE-2.0"
|
||||
}
|
||||
]
|
||||
, "devDependencies": {
|
||||
"btoa": "~1.1.1"
|
||||
, "grunt": "~0.4.1"
|
||||
, "grunt-banner": "~0.2.0"
|
||||
, "grunt-contrib-clean": "~0.5.0"
|
||||
, "grunt-contrib-concat": "~0.3.0"
|
||||
, "grunt-contrib-connect": "~0.5.0"
|
||||
, "grunt-contrib-copy": "~0.4.1"
|
||||
, "grunt-contrib-csslint": "~0.2.0"
|
||||
, "grunt-contrib-jshint": "~0.7.0"
|
||||
, "grunt-contrib-less": "~0.8.0"
|
||||
, "grunt-contrib-qunit": "~0.3.0"
|
||||
, "grunt-contrib-uglify": "~0.2.4"
|
||||
, "grunt-contrib-watch": "~0.5.3"
|
||||
, "grunt-csscomb": "~1.1.0"
|
||||
, "grunt-html-validation": "~0.1.6"
|
||||
, "grunt-jekyll": "~0.4.0"
|
||||
, "grunt-jscs-checker": "~0.2.5"
|
||||
, "grunt-saucelabs": "~4.1.2"
|
||||
, "grunt-sed": "~0.1.1"
|
||||
, "regexp-quote": "~0.0.0"
|
||||
}
|
||||
, "jspm": {
|
||||
"main": "js/bootstrap"
|
||||
, "directories": { "lib": "dist" }
|
||||
, "shim": {
|
||||
"js/bootstrap": {
|
||||
"imports": "jquery"
|
||||
, "exports": "$"
|
||||
}
|
||||
}
|
||||
, "buildConfig": { "uglify": true }
|
||||
],
|
||||
"devDependencies": {
|
||||
"btoa": "~1.1.1",
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-banner": "~0.2.0",
|
||||
"grunt-contrib-clean": "~0.5.0",
|
||||
"grunt-contrib-concat": "~0.3.0",
|
||||
"grunt-contrib-connect": "~0.5.0",
|
||||
"grunt-contrib-copy": "~0.4.1",
|
||||
"grunt-contrib-csslint": "~0.2.0",
|
||||
"grunt-contrib-jshint": "~0.7.0",
|
||||
"grunt-contrib-less": "~0.8.0",
|
||||
"grunt-contrib-qunit": "~0.3.0",
|
||||
"grunt-contrib-uglify": "~0.2.4",
|
||||
"grunt-contrib-watch": "~0.5.3",
|
||||
"grunt-csscomb": "~1.1.0",
|
||||
"grunt-html-validation": "~0.1.11",
|
||||
"grunt-jekyll": "~0.4.0",
|
||||
"grunt-jscs-checker": "~0.2.5",
|
||||
"grunt-saucelabs": "~4.1.2",
|
||||
"grunt-sed": "~0.1.1",
|
||||
"load-grunt-tasks": "~0.2.0"
|
||||
},
|
||||
"jspm": {
|
||||
"main": "js/bootstrap",
|
||||
"directories": { "lib": "dist" },
|
||||
"shim": {
|
||||
"js/bootstrap": {
|
||||
"imports": "jquery",
|
||||
"exports": "$"
|
||||
}
|
||||
},
|
||||
"buildConfig": { "uglify": true }
|
||||
}
|
||||
}
|
||||
|
||||
91
sauce_browsers.yml
Normal file
91
sauce_browsers.yml
Normal file
@ -0,0 +1,91 @@
|
||||
[
|
||||
# Docs: https://saucelabs.com/docs/platforms/webdriver
|
||||
|
||||
{
|
||||
browserName: "safari",
|
||||
version: "6",
|
||||
platform: "OS X 10.8"
|
||||
},
|
||||
{
|
||||
browserName: "chrome",
|
||||
version: "31",
|
||||
platform: "OS X 10.9"
|
||||
},
|
||||
|
||||
# { # FIXME: currently fails 1 tooltip test
|
||||
# browserName: "firefox",
|
||||
# version: "25",
|
||||
# platform: "OS X 10.6"
|
||||
# },
|
||||
|
||||
# Mac Opera not currently supported by Sauce Labs
|
||||
|
||||
# { # FIXME: currently fails 1 tooltip test
|
||||
# browserName: "internet explorer",
|
||||
# version: "11",
|
||||
# platform: "Windows 8.1"
|
||||
# },
|
||||
|
||||
# {
|
||||
# browserName: "internet explorer",
|
||||
# version: "10",
|
||||
# platform: "Windows 8"
|
||||
# },
|
||||
# {
|
||||
# browserName: "internet explorer",
|
||||
# version: "9",
|
||||
# platform: "Windows 7"
|
||||
# },
|
||||
# {
|
||||
# browserName: "internet explorer",
|
||||
# version: "8",
|
||||
# platform: "Windows 7"
|
||||
# },
|
||||
|
||||
# { # Unofficial
|
||||
# browserName: "internet explorer",
|
||||
# version: "7",
|
||||
# platform: "Windows XP"
|
||||
# },
|
||||
|
||||
{
|
||||
browserName: "chrome",
|
||||
version: "31",
|
||||
platform: "Windows 8.1"
|
||||
},
|
||||
{
|
||||
browserName: "firefox",
|
||||
version: "25",
|
||||
platform: "Windows 8.1"
|
||||
},
|
||||
|
||||
# Win Opera 15+ not currently supported by Sauce Labs
|
||||
|
||||
{
|
||||
browserName: "iphone",
|
||||
version: "6.1",
|
||||
platform: "OS X 10.8"
|
||||
},
|
||||
|
||||
# iOS Chrome not currently supported by Sauce Labs
|
||||
|
||||
# Linux (unofficial):
|
||||
{
|
||||
browserName: "chrome",
|
||||
version: "30",
|
||||
platform: "Linux"
|
||||
},
|
||||
{
|
||||
browserName: "firefox",
|
||||
version: "25",
|
||||
platform: "Linux"
|
||||
}
|
||||
|
||||
# Android Chrome not currently supported by Sauce Labs
|
||||
|
||||
# { # Android Browser (super-unofficial)
|
||||
# browserName: "android",
|
||||
# version: "4.0",
|
||||
# platform: "Linux"
|
||||
# }
|
||||
]
|
||||
1
test-infra/requirements.txt
Normal file
1
test-infra/requirements.txt
Normal file
@ -0,0 +1 @@
|
||||
boto==2.20.0
|
||||
107
test-infra/s3_cache.py
Executable file
107
test-infra/s3_cache.py
Executable file
@ -0,0 +1,107 @@
|
||||
#!/usr/bin/env python2.7
|
||||
from __future__ import absolute_import, unicode_literals, print_function, division
|
||||
|
||||
from sys import argv
|
||||
from os import environ, stat, remove as _delete_file
|
||||
from os.path import isfile, dirname, basename, abspath
|
||||
from hashlib import sha256
|
||||
from subprocess import check_call as run
|
||||
|
||||
from boto.s3.connection import S3Connection
|
||||
from boto.s3.key import Key
|
||||
from boto.exception import S3ResponseError
|
||||
|
||||
|
||||
NEED_TO_UPLOAD_MARKER = '.need-to-upload'
|
||||
BYTES_PER_MB = 1024 * 1024
|
||||
try:
|
||||
BUCKET_NAME = environ['TWBS_S3_BUCKET']
|
||||
except KeyError:
|
||||
raise SystemExit("TWBS_S3_BUCKET environment variable not set!")
|
||||
|
||||
|
||||
def _sha256_of_file(filename):
|
||||
hasher = sha256()
|
||||
with open(filename, 'rb') as input_file:
|
||||
hasher.update(input_file.read())
|
||||
file_hash = hasher.hexdigest()
|
||||
print('sha256({}) = {}'.format(filename, file_hash))
|
||||
return file_hash
|
||||
|
||||
|
||||
def _delete_file_quietly(filename):
|
||||
try:
|
||||
_delete_file(filename)
|
||||
except (OSError, IOError):
|
||||
pass
|
||||
|
||||
|
||||
def _tarball_size(directory):
|
||||
kib = stat(_tarball_filename_for(directory)).st_size // BYTES_PER_MB
|
||||
return "{} MiB".format(kib)
|
||||
|
||||
|
||||
def _tarball_filename_for(directory):
|
||||
return abspath('./{}.tar.gz'.format(basename(directory)))
|
||||
|
||||
|
||||
def _create_tarball(directory):
|
||||
print("Creating tarball of {}...".format(directory))
|
||||
run(['tar', '-czf', _tarball_filename_for(directory), '-C', dirname(directory), basename(directory)])
|
||||
|
||||
|
||||
def _extract_tarball(directory):
|
||||
print("Extracting tarball of {}...".format(directory))
|
||||
run(['tar', '-xzf', _tarball_filename_for(directory), '-C', dirname(directory)])
|
||||
|
||||
|
||||
def download(directory):
|
||||
_delete_file_quietly(NEED_TO_UPLOAD_MARKER)
|
||||
try:
|
||||
print("Downloading {} tarball from S3...".format(friendly_name))
|
||||
key.get_contents_to_filename(_tarball_filename_for(directory))
|
||||
except S3ResponseError as err:
|
||||
open(NEED_TO_UPLOAD_MARKER, 'a').close()
|
||||
print(err)
|
||||
raise SystemExit("Cached {} download failed!".format(friendly_name))
|
||||
print("Downloaded {}.".format(_tarball_size(directory)))
|
||||
_extract_tarball(directory)
|
||||
print("{} successfully installed from cache.".format(friendly_name))
|
||||
|
||||
|
||||
def upload(directory):
|
||||
_create_tarball(directory)
|
||||
print("Uploading {} tarball to S3... ({})".format(friendly_name, _tarball_size(directory)))
|
||||
key.set_contents_from_filename(_tarball_filename_for(directory))
|
||||
print("{} cache successfully updated.".format(friendly_name))
|
||||
_delete_file_quietly(NEED_TO_UPLOAD_MARKER)
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
# Uses environment variables:
|
||||
# AWS_ACCESS_KEY_ID - AWS Access Key ID
|
||||
# AWS_SECRET_ACCESS_KEY - AWS Secret Access Key
|
||||
argv.pop(0)
|
||||
if len(argv) != 4:
|
||||
raise SystemExit("USAGE: node_modules_cache.py <download | upload> <friendly name> <dependencies file> <directory>")
|
||||
mode, friendly_name, dependencies_file, directory = argv
|
||||
|
||||
conn = S3Connection()
|
||||
bucket = conn.lookup(BUCKET_NAME)
|
||||
if bucket is None:
|
||||
raise SystemExit("Could not access bucket!")
|
||||
|
||||
dependencies_file_hash = _sha256_of_file(dependencies_file)
|
||||
|
||||
key = Key(bucket, dependencies_file_hash)
|
||||
key.storage_class = 'REDUCED_REDUNDANCY'
|
||||
|
||||
if mode == 'download':
|
||||
download(directory)
|
||||
elif mode == 'upload':
|
||||
if isfile(NEED_TO_UPLOAD_MARKER): # FIXME
|
||||
upload(directory)
|
||||
else:
|
||||
print("No need to upload anything.")
|
||||
else:
|
||||
raise SystemExit("Unrecognized mode {!r}".format(mode))
|
||||
Loading…
Reference in New Issue
Block a user