Skip to content

B
bootstrap
Commit 3c7a43a1 authored by Ivan Khalopik's avatar Ivan Khalopik
Browse files
Options

Merge remote-tracking branch 'bootstrap/3.0.0-wip' into 3.0.0-wip 

Conflicts:
	js/tests/unit/bootstrap-collapse.js
parents 41c78256 b352f98f
Show whitespace changes
Inline Side-by-side
Showing with 9522 additions and 8255 deletions
.editorconfig 0 → 100644
View file @ 3c7a43a1
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[Makefile]
indent_style = tab
.gitignore
View file @ 3c7a43a1
...@@ -13,6 +13,7 @@ _gh_pages ...@@ -13,6 +13,7 @@ _gh_pages
*.vi *.vi
*~ *~
*.sass-cache *.sass-cache
*.ruby-version
# OS or Editor folders # OS or Editor folders
.DS_Store .DS_Store
......
CONTRIBUTING.md
View file @ 3c7a43a1
...@@ -9,7 +9,7 @@ Looking to contribute something to Bootstrap? **Here's how you can help.** ...@@ -9,7 +9,7 @@ Looking to contribute something to Bootstrap? **Here's how you can help.**
We only accept issues that are bug reports or feature requests. Bugs must be isolated and reproducible problems that we can fix within the Bootstrap core. Please read the following guidelines before opening any issue. We only accept issues that are bug reports or feature requests. Bugs must be isolated and reproducible problems that we can fix within the Bootstrap core. Please read the following guidelines before opening any issue.
1. **Search for existing issues.** We get a lot of duplicate issues, and you'd help us out a lot by first checking if someone else has reported the same issue. Moreover, the issue may have already been resolved with a fix available. 1. **Search for existing issues.** We get a lot of duplicate issues, and you'd help us out a lot by first checking if someone else has reported the same issue. Moreover, the issue may have already been resolved with a fix available.
2. **Create an isolated and reproducible test case.** Be sure the problem exists in Bootstrap's code with a [reduced test cases](http://css-tricks.com/reduced-test-cases/) that should be included in each bug report. 2. **Create an isolated and reproducible test case.** Be sure the problem exists in Bootstrap's code with a [reduced test case](http://css-tricks.com/reduced-test-cases/) that should be included in each bug report.
3. **Include a live example.** Make use of jsFiddle or jsBin to share your isolated test cases. 3. **Include a live example.** Make use of jsFiddle or jsBin to share your isolated test cases.
4. **Share as much information as possible.** Include operating system and version, browser and version, version of Bootstrap, customized or vanilla build, etc. where appropriate. Also include steps to reproduce the bug. 4. **Share as much information as possible.** Include operating system and version, browser and version, version of Bootstrap, customized or vanilla build, etc. where appropriate. Also include steps to reproduce the bug.
......
Makefile
View file @ 3c7a43a1
...@@ -88,8 +88,6 @@ bootstrap/css/*.css: less/*.less ...@@ -88,8 +88,6 @@ bootstrap/css/*.css: less/*.less
mkdir -p bootstrap/css mkdir -p bootstrap/css
recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css
recess --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css
# #
# FONTS # FONTS
......
README.md
View file @ 3c7a43a1
<a href="http://getbootstrap.com">
<img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-docs-readme.png" width="100px">
</a>
# [Bootstrap v3.0.0](http://getbootstrap.com) [![Build Status](https://secure.travis-ci.org/twitter/bootstrap.png)](http://travis-ci.org/twitter/bootstrap) # [Bootstrap v3.0.0](http://getbootstrap.com) [![Build Status](https://secure.travis-ci.org/twitter/bootstrap.png)](http://travis-ci.org/twitter/bootstrap)
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat). Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat).
...@@ -16,7 +12,7 @@ Three quick start options are available: ...@@ -16,7 +12,7 @@ Three quick start options are available:
* [Download the latest release](https://github.com/twitter/bootstrap/zipball/master). * [Download the latest release](https://github.com/twitter/bootstrap/zipball/master).
* Clone the repo: `git clone git://github.com/twitter/bootstrap.git`. * Clone the repo: `git clone git://github.com/twitter/bootstrap.git`.
* Install with Twitter's [Bower](http://twitter.github.com/bower): `bower install bootstrap`. * Install with Twitter's [Bower](http://github.com/bower/bower): `bower install bootstrap`.
Read the [Getting Started page](http://getbootstrap.com/getting-started/) for information on the framework contents, basic template guidelines, and more. Read the [Getting Started page](http://getbootstrap.com/getting-started/) for information on the framework contents, basic template guidelines, and more.
...@@ -55,14 +51,17 @@ $ npm install ...@@ -55,14 +51,17 @@ $ npm install
When completed, you'll be able to run the various make commands provided: When completed, you'll be able to run the various make commands provided:
#### build - `make` or `make bootstrap` #### Build - `make`
`make` runs the Recess compiler to rebuild the `/less` files and compile the docs. `make bootstrap` creates the `/bootstrap` directory with compiled files. **Requires recess and uglify-js.** `make` runs the Recess compiler to rebuild the `/less` files and compile the docs. **Requires recess and uglify-js.**
#### Compile CSS, JS, and fonts - `make bootstrap`
`make bootstrap` creates the `/bootstrap` directory with compiled files. **Requires recess and uglify-js.**
#### test - `make test` #### Tests - `make test`
Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). **Requires phantomjs.** Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). **Requires phantomjs.**
#### watch - `make watch` #### Watch - `make watch`
This is a convenience method for watching just Less files and automatically building them whenever you save. **Requires the Watchr gem.** This is a convenience method for watching just Less files and automatically building them whenever you save. **Requires the watchr gem.**
Should you encounter problems with installing dependencies or running the makefile commands, uninstall any previous versions (global and local) you may have installed, and then rerun `npm install`. Should you encounter problems with installing dependencies or running the makefile commands, uninstall any previous versions (global and local) you may have installed, and then rerun `npm install`.
...@@ -72,6 +71,8 @@ Should you encounter problems with installing dependencies or running the makefi ...@@ -72,6 +71,8 @@ Should you encounter problems with installing dependencies or running the makefi
Please submit all pull requests against *-wip branches. If your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo). Please submit all pull requests against *-wip branches. If your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo).
Editor preferences are also available in the [editor config](.editorconfig) for easy application in common text editors. Read more and download plugins at [http://editorconfig.com](http://editorconfig.com).
## Community ## Community
......
docs/_includes/colophon.html
View file @ 3c7a43a1
<!-- Footer <!-- Footer
================================================== --> ================================================== -->
<footer class="bs-docs-footer"> <footer class="bs-docs-footer">
<div class="container"> <div class="bs-docs-container">
<div class="bs-docs-social"> <div class="bs-docs-social">
<ul class="bs-docs-social-buttons"> <ul class="bs-docs-social-buttons">
......
docs/_includes/docs-nav.html 0 → 100644
View file @ 3c7a43a1
<div class="bs-docs-sidebar">
<ul class="nav bs-docs-sidenav">
<h3 class="bs-docs-sidenav-heading"><a href="/">Bootstrap</a></h3>
<li><a href="#welcome">Welcome!</a></li>
<li><a href="#getting-started">Getting started</a></li>
<li><a href="#whats-included">What's included</a></li>
<li><a href="#examples">Templates and examples</a></li>
<li><a href="#customizing">Customizing Bootstrap</a></li>
<!-- CSS -->
<li><a class="nav-header" href="#css">CSS</a></li>
<li><a href="#css-overview">Overview</a></li>
<li>
<a href="#grid">Grid system</a>
<ul class="nav">
<li><a href="#grid-example">Example usage</a></li>
<li><a href="#grid-offsetting">Offset columns</a></li>
<li><a href="#grid-nesting">Nested columns</a></li>
<li><a href="#grid-column-ordering">Column ordering</a></li>
<li><a href="#grid-small">Small device grid</a></li>
<li><a href="#grid-less">LESS mixins and variables</a></li>
</ul>
</li>
<li>
<a href="#type">Typography</a>
<ul class="nav">
<li><a href="#type-headings">Headings</a></li>
<li><a href="#type-body-copy">Body copy</a></li>
<li><a href="#type-emphasis">Emphasis</a></li>
<li><a href="#type-abbreviations">Abbreviations</a></li>
<li><a href="#type-addresses">Addresses</a></li>
<li><a href="#type-blockquotes">Blockquotes</a></li>
<li><a href="#type-lists">Lists</a></li>
<li><a href="#type-"></a></li>
</ul>
</li>
<li><a href="#code">Code</a></li>
<li>
<a href="#tables">Tables</a>
<ul class="nav">
<li><a href="#tables-example">Basic example</a></li>
<li><a href="#tables-striped">Zebra striping</a></li>
<li><a href="#tables-bordered">Bordered tables</a></li>
<li><a href="#tables-hover-rows">Hover rows</a></li>
<li><a href="#tables-condensed">Condensed tables</a></li>
<li><a href="#tables-row-classes">Contextual row classes</a></li>
</ul>
</li>
<li>
<a href="#forms">Forms</a>
<ul class="nav">
<li><a href="#forms-example">Basic example</a></li>
<li><a href="#forms-inline">Inline variation</a></li>
<li><a href="#forms-horizontal">Horizontal variation</a></li>
<li><a href="#forms-controls">Supported controls</a></li>
<li><a href="#forms-control-states">Control states</a></li>
<li><a href="#forms-input-groups">Input groups</a></li>
<li><a href="#forms-control-sizes">Control sizing</a></li>
<li><a href="#forms-actions">Form actions</a></li>
<li><a href="#forms-help-text">Help text</a></li>
</ul>
</li>
<li>
<a href="#buttons">Buttons</a>
<ul class="nav">
<li><a href="#buttons-options">Button options</a></li>
<li><a href="#buttons-sizes">Sizes</a></li>
<li><a href="#buttons-disabled">Disabled</a></li>
<li><a href="#buttons-tags">Button tags</a></li>
</ul>
</li>
<li><a href="#images">Images</a></li>
<li><a href="#helper-classes">Helper classes</a></li>
<li><a href="#responsive-utilities">Responsive utilities</a></li>
<!-- Components -->
<li><a class="nav-header" href="#components">Components</a></li>
<li><a href="#icons">Glyphicons</a></li>
<li>
<a href="#dropdowns">Dropdowns</a>
<ul class="nav">
<li><a href="#dropdowns-example">Example</a></li>
<li><a href="#dropdowns-alignment">Alignment options</a></li>
<li><a href="#dropdowns-disabled">Disabled menu items</a></li>
<li><a href="#dropdowns-submenus">Submenus</a></li>
</ul>
</li>
<li>
<a href="#btn-groups">Button groups</a>
<ul class="nav">
<li><a href="#btn-groups-single">Basic button group</a></li>
<li><a href="#btn-groups-toolbar">Button toolbar</a></li>
<li><a href="#btn-groups-vertical">Vertical variation</a></li>
<li><a href="#btn-groups-justified">Justified link buttons</a></li>
</ul>
</li>
<li>
<a href="#btn-dropdowns">Button dropdowns</a>
<ul class="nav">
<li><a href="#btn-dropdowns-single">Single button dropdown</a></li>
<li><a href="#btn-dropdowns-split">Split button dropdown</a></li>
<li><a href="#btn-dropdowns-sizes">Button sizes</a></li>
<li><a href="#btn-dropdowns-dropup">Dropup variation</a></li>
</ul>
</li>
<li>
<a href="#nav">Navs</a>
<ul class="nav">
<li><a href="#nav-tabs">Tabs nav</a></li>
<li><a href="#nav-pills">Pills nav</a></li>
<li><a href="#nav-justified">Justified nav</a></li>
<li><a href="#nav-disabled-links">Disabled links</a></li>
<li><a href="#nav-alignment">Alignment options</a></li>
<li><a href="#nav-dropdowns">Using dropdowns</a></li>
</ul>
</li>
<li>
<a href="#navbar">Navbar</a>
<ul class="nav">
<li><a href="#navbar-basic">Basic navbar</a></li>
<li><a href="#navbar-nav">Nav links</a></li>
<li><a href="#navbar-forms">Forms in navbars</a></li>
<li><a href="#navbar-buttons">Buttons in navbars</a></li>
<li><a href="#navbar-text">Text in navbars</a></li>
<li><a href="#navbar-links">Links in navbars</a></li>
<li><a href="#navbar-component-alignment">Component alignment</a></li>
<li><a href="#navbar-fixed-top">Fixed top navbar</a></li>
<li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
<li><a href="#navbar-static-top">Static top navbar</a></li>
<li><a href="#navbar-responsive">Responsive navbar</a></li>
</ul>
</li>
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
<li>
<a href="#pagination">Pagination</a>
<ul class="nav">
<li><a href="#pagination-default">Default pagination</a></li>
<li><a href="#pagination-pager">Pager</a></li>
</ul>
</li>
<li><a href="#labels">Labels</a></li>
<li><a href="#badges">Badges</a></li>
<li>
<a href="#type-components">Typography</a>
<ul class="nav">
<li><a href="#type-components-jumbotron">Jumbotron</a></li>
<li><a href="#type-components-page-header">Page header</a></li>
</ul>
</li>
<li><a href="#thumbnails">Thumbnails</a></li>
<li>
<a href="#alerts">Alerts</a>
<ul class="nav">
<li><a href="#alerts-default">Default alert</a></li>
<li><a href="#alerts-block">Block alerts</a></li>
<li><a href="#alerts-alternatives">Contextual alternatives</a></li>
</ul>
</li>
<li>
<a href="#progress">Progress bars</a>
<ul class="nav">
<li><a href="#progress-basic">Basic progress bar</a></li>
<li><a href="#progress-alternatives">Contextual alternatives</a></li>
<li><a href="#progress-striped">Striped</a></li>
<li><a href="#progress-animated">Animated</a></li>
<li><a href="#progress-stacked">Stacked</a></li>
</ul>
</li>
<li><a href="#media">Media object</a></li>
<li>
<a href="#list-group">List group</a>
<ul class="nav">
<li><a href="#list-group-basic">Basic list group</a></li>
<li><a href="#list-group-chevrons">Chevrons</a></li>
<li><a href="#list-group-badges">Badges</a></li>
<li><a href="#list-group-badges-chevrons">Badges and chevrons</a></li>
<li><a href="#list-group-linked">Linked items</a></li>
<li><a href="#list-group-custom-content">Custom content</a></li>
<!-- <li><a href="#list-group-pic">Leading picture</a></li> -->
</ul>
</li>
<li>
<a href="#panels">Panels</a>
<ul class="nav">
<li><a href="#panels-basic">Basic panel</a></li>
<li><a href="#panels-heading">Panel with heading</a></li>
<li><a href="#panels-alternatives">Contextual alternatives</a></li>
<li><a href="#panels-list-group">With list groups</a>
</ul>
</li>
<li><a href="#wells">Wells</a></li>
<!-- JavaScript -->
<li><a class="nav-header" href="#js">JavaScript</a></li>
<li>
<a href="#js-overview">Overview</a>
<ul class="nav">
<li><a href="#js-individual-compiled">Individual or compiled</a></li>
<li><a href="#js-data-attributes">Data attributes</a></li>
<li><a href="#js-programmatic-api">Programmatic API</a></li>
<li><a href="#js-noconflict">No Conflict</a></li>
<li><a href="#js-events">Evens</a></li>
</ul>
</li>
<li><a href="#transitions">Transitions</a></li>
<li>
<a href="#modals">Modal</a>
<ul class="nav">
<li><a href="#modals-examples">Examples</a></li>
<li><a href="#modals-usage">Usage</a></li>
</ul>
</li>
<li><a href="#dropdowns">Dropdown</a></li>
<li><a href="#scrollspy">Scrollspy</a></li>
<li><a href="#tabs">Tab</a></li>
<li><a href="#tooltips">Tooltip</a></li>
<li><a href="#popovers">Popover</a></li>
<li><a href="#js-alerts">Alert</a></li>
<li><a href="#js-buttons">Button</a></li>
<li><a href="#collapse">Collapse</a></li>
<li><a href="#carousel">Carousel</a></li>
<li><a href="#typeahead">Typeahead</a></li>
<li><a href="#affix">Affix</a></li>
</ul>
</div>
docs/_includes/header.html
View file @ 3c7a43a1
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/assets/css/bootstrap.css" rel="stylesheet"> <link href="/assets/css/bootstrap.css" rel="stylesheet">
{% if page.layout == "default" %} {% if page.layout != "example" %}
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="/assets/css/docs.css" rel="stylesheet"> <link href="/assets/css/docs.css" rel="stylesheet">
<link href="/assets/css/pygments-manni.css" rel="stylesheet"> <link href="/assets/css/pygments-manni.css" rel="stylesheet">
......
docs/_includes/navbar.html
View file @ 3c7a43a1
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<div class="navbar navbar-fixed-top bs-docs-navbar"> <div class="navbar navbar-inverse navbar-fixed-left bs-docs-navbar">
<div class="container"> <div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="/">Bootstrap</a> <a class="navbar-brand" href="/">B</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li {% if page.title == "Bootstrap" %}class="active"{% endif %}> <!-- <li {% if page.title == "Bootstrap" %}class="active"{% endif %}>
<a href="/">Home</a> <a href="/"><span class="glyphicon glyphicon-home"></span></a>
</li> </li>
<li {% if page.title == "Getting started" %}class="active"{% endif %}> --> <li {% if page.title == "Getting started" %}class="active"{% endif %}>
<a href="/getting-started">Getting started</a> <a href="/getting-started" data-toggle="tooltip" data-placement="right" title="Getting started"><span class="glyphicon glyphicon-list"></span></a>
</li> </li>
<li {% if page.title == "CSS" %}class="active"{% endif %}> <li {% if page.title == "CSS" %}class="active"{% endif %}>
<a href="/css">CSS</a> <a href="/css" data-toggle="tooltip" data-placement="right" title="CSS"><span class="glyphicon glyphicon-tint"></span></a>
</li> </li>
<li {% if page.title == "Components" %}class="active"{% endif %}> <li {% if page.title == "Components" %}class="active"{% endif %}>
<a href="/components">Components</a> <a href="/components" data-toggle="tooltip" data-placement="right" title="Components"><span class="glyphicon glyphicon-fire"></span></a>
</li> </li>
<li {% if page.title == "JavaScript plugins" %}class="active"{% endif %}> <li {% if page.title == "JavaScript plugins" %}class="active"{% endif %}>
<a href="/javascript">JavaScript</a> <a href="/javascript" data-toggle="tooltip" data-placement="right" title="JavaScript plugins"><span class="glyphicon glyphicon-dashboard"></span></a>
</li> </li>
<li {% if page.title == "Customize and download" %}class="active"{% endif %}> <li {% if page.title == "Customize and download" %}class="active"{% endif %}>
<a href="/customize">Customize</a> <a href="/customize" data-toggle="tooltip" data-placement="right" title="Customize"><span class="glyphicon glyphicon-cog"></span></a>
</li> </li>
</ul> </ul>
</div> </div>
......
docs/_layouts/default.html
View file @ 3c7a43a1
...@@ -5,10 +5,10 @@ ...@@ -5,10 +5,10 @@
{% include header.html %} {% include header.html %}
<!-- Place anything custom after this. --> <!-- Place anything custom after this. -->
</head> </head>
<body class="bs-docs-body" data-spy="scroll" data-target=".bs-docs-sidebar"> <body class="bs-docs-docs" data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Main navbar for all docs pages. --> <!-- Docs nav -->
{% include navbar.html %} {% include docs-nav.html %}
<!-- Page content of course! --> <!-- Page content of course! -->
{{ content }} {{ content }}
......
docs/_layouts/home.html 0 → 100644
View file @ 3c7a43a1
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
{% include header.html %}
<!-- Place anything custom after this. -->
</head>
<body class="bs-docs-home">
<!-- Page content of course! -->
{{ content }}
<!-- JS and analytics only. -->
{% include footer.html %}
</body>
</html>
docs/assets/css/bootstrap.css
View file @ 3c7a43a1
...@@ -290,7 +290,6 @@ html { ...@@ -290,7 +290,6 @@ html {
body { body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
font-size: 1.4rem;
line-height: 20px; line-height: 20px;
color: #333333; color: #333333;
background-color: #ffffff; background-color: #ffffff;
...@@ -323,7 +322,6 @@ a:focus { ...@@ -323,7 +322,6 @@ a:focus {
} }
img { img {
width: auto\9;
height: auto; height: auto;
max-width: 100%; max-width: 100%;
vertical-align: middle; vertical-align: middle;
...@@ -344,9 +342,8 @@ p { ...@@ -344,9 +342,8 @@ p {
.lead { .lead {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 21px; font-size: 21px;
font-size: 2.1rem;
font-weight: 200; font-weight: 200;
line-height: 1.3; line-height: 1.4;
} }
small { small {
...@@ -365,12 +362,12 @@ cite { ...@@ -365,12 +362,12 @@ cite {
font-style: normal; font-style: normal;
} }
.muted { .text-muted {
color: #999999; color: #999999;
} }
a.muted:hover, a.text-muted:hover,
a.muted:focus { a.text-muted:focus {
color: #808080; color: #808080;
} }
...@@ -383,12 +380,12 @@ a.text-warning:focus { ...@@ -383,12 +380,12 @@ a.text-warning:focus {
color: #a47e3c; color: #a47e3c;
} }
.text-error { .text-danger {
color: #b94a48; color: #b94a48;
} }
a.text-error:hover, a.text-danger:hover,
a.text-error:focus { a.text-danger:focus {
color: #953b39; color: #953b39;
} }
...@@ -428,7 +425,6 @@ h6, ...@@ -428,7 +425,6 @@ h6,
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 500;
line-height: 20px; line-height: 20px;
text-rendering: optimizelegibility;
} }
h1 small, h1 small,
...@@ -469,58 +465,52 @@ h6 { ...@@ -469,58 +465,52 @@ h6 {
h1, h1,
.h1 { .h1 {
font-size: 38.5; font-size: 38.5px;
font-size: 4rem;
} }
h2, h2,
.h2 { .h2 {
font-size: 31.5; font-size: 31.5px;
font-size: 3rem;
} }
h3, h3,
.h3 { .h3 {
font-size: 24.5; font-size: 24.5px;
font-size: 2.5rem;
} }
h4, h4,
.h4 { .h4 {
font-size: 17.5; font-size: 17.5px;
font-size: 2rem;
} }
h5, h5,
.h5 { .h5 {
font-size: 14; font-size: 14px;
font-size: 1.6rem;
} }
h6, h6,
.h6 { .h6 {
font-size: 11.9; font-size: 11.9px;
font-size: 1.2rem;
} }
h1 small, h1 small,
.h1 small { .h1 small {
font-size: 24.5; font-size: 24.5px;
} }
h2 small, h2 small,
.h2 small { .h2 small {
font-size: 17.5; font-size: 17.5px;
} }
h3 small, h3 small,
.h3 small { .h3 small {
font-size: 14; font-size: 14px;
} }
h4 small, h4 small,
.h4 small { .h4 small {
font-size: 14; font-size: 14px;
} }
.page-header { .page-header {
...@@ -546,7 +536,11 @@ li { ...@@ -546,7 +536,11 @@ li {
line-height: 20px; line-height: 20px;
} }
.list-unstyled, .list-unstyled {
margin-left: 0;
list-style: none;
}
.list-inline { .list-inline {
margin-left: 0; margin-left: 0;
list-style: none; list-style: none;
...@@ -585,6 +579,16 @@ dd { ...@@ -585,6 +579,16 @@ dd {
clear: both; clear: both;
} }
.dl-horizontal:before,
.dl-horizontal:after {
display: table;
content: " ";
}
.dl-horizontal:after {
clear: both;
}
.dl-horizontal dt { .dl-horizontal dt {
float: left; float: left;
width: 160px; width: 160px;
...@@ -619,18 +623,21 @@ abbr.initialism { ...@@ -619,18 +623,21 @@ abbr.initialism {
} }
blockquote { blockquote {
padding: 0 0 0 15px; padding: 10px 20px;
margin: 0 0 20px; margin: 0 0 20px;
border-left: 5px solid #eeeeee; border-left: 5px solid #eeeeee;
} }
blockquote p { blockquote p {
margin-bottom: 0; font-size: 17.5px;
font-size: 17.5;
font-weight: 300; font-weight: 300;
line-height: 1.25; line-height: 1.25;
} }
blockquote p:last-child {
margin-bottom: 0;
}
blockquote small { blockquote small {
display: block; display: block;
line-height: 20px; line-height: 20px;
...@@ -680,7 +687,7 @@ code, ...@@ -680,7 +687,7 @@ code,
pre { pre {
padding: 0 3px 2px; padding: 0 3px 2px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 12; font-size: 12px;
color: #333333; color: #333333;
border-radius: 4px; border-radius: 4px;
} }
...@@ -697,7 +704,7 @@ pre { ...@@ -697,7 +704,7 @@ pre {
display: block; display: block;
padding: 9.5px; padding: 9.5px;
margin: 0 0 10px; margin: 0 0 10px;
font-size: 13; font-size: 13px;
line-height: 20px; line-height: 20px;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
...@@ -742,9 +749,24 @@ pre code { ...@@ -742,9 +749,24 @@ pre code {
clear: both; clear: both;
} }
.row { .container:before,
margin-right: -15px; .container:after {
margin-left: -15px; display: table;
content: " ";
}
.container:after {
clear: both;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
} }
.row:before, .row:before,
...@@ -757,54 +779,103 @@ pre code { ...@@ -757,54 +779,103 @@ pre code {
clear: both; clear: both;
} }
[class*="col-span-"] { .row .row {
margin-right: -15px;
margin-left: -15px;
}
.col {
position: relative; position: relative;
float: left;
width: 100%;
min-height: 1px; min-height: 1px;
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
} }
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666666666666%;
}
.col-sm-10 {
width: 83.33333333333334%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666666666666%;
}
.col-sm-7 {
width: 58.333333333333336%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-4 {
width: 33.33333333333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.666666666666664%;
}
.col-sm-1 {
width: 8.333333333333332%;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.container { .col-lg-12 {
max-width: 728px;
}
[class*="col-span-"] {
float: left;
}
.col-span-12 {
width: 100%; width: 100%;
} }
.col-span-11 { .col-lg-11 {
width: 91.66666666666666%; width: 91.66666666666666%;
} }
.col-span-10 { .col-lg-10 {
width: 83.33333333333334%; width: 83.33333333333334%;
} }
.col-span-9 { .col-lg-9 {
width: 75%; width: 75%;
} }
.col-span-8 { .col-lg-8 {
width: 66.66666666666666%; width: 66.66666666666666%;
} }
.col-span-7 { .col-lg-7 {
width: 58.333333333333336%; width: 58.333333333333336%;
} }
.col-span-6 { .col-lg-6 {
width: 50%; width: 50%;
} }
.col-span-5 { .col-lg-5 {
width: 41.66666666666667%; width: 41.66666666666667%;
} }
.col-span-4 { .col-lg-4 {
width: 33.33333333333333%; width: 33.33333333333333%;
} }
.col-span-3 { .col-lg-3 {
width: 25%; width: 25%;
} }
.col-span-2 { .col-lg-2 {
width: 16.666666666666664%; width: 16.666666666666664%;
} }
.col-span-1 { .col-lg-1 {
width: 8.333333333333332%; width: 8.333333333333332%;
} }
.col-offset-12 { .col-offset-12 {
...@@ -917,6 +988,16 @@ pre code { ...@@ -917,6 +988,16 @@ pre code {
} }
} }
@media screen and (min-width: 768px) {
.container {
max-width: 728px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
}
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
.container { .container {
max-width: 940px; max-width: 940px;
...@@ -929,15 +1010,13 @@ pre code { ...@@ -929,15 +1010,13 @@ pre code {
} }
} }
[class*="col-span-"].pull-right { /*[class*="col-span-"].pull-right {
float: right; float: right;
} }*/
table { table {
max-width: 100%; max-width: 100%;
background-color: transparent; background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
} }
th { th {
...@@ -949,15 +1028,17 @@ th { ...@@ -949,15 +1028,17 @@ th {
margin-bottom: 20px; margin-bottom: 20px;
} }
.table th, .table thead > tr > th,
.table td { .table tbody > tr > th,
.table thead > tr > td,
.table tbody > tr > td {
padding: 8px; padding: 8px;
line-height: 20px; line-height: 20px;
vertical-align: top; vertical-align: top;
border-top: 1px solid #dddddd; border-top: 1px solid #dddddd;
} }
.table thead th { .table thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
} }
...@@ -978,8 +1059,10 @@ th { ...@@ -978,8 +1059,10 @@ th {
background-color: #ffffff; background-color: #ffffff;
} }
.table-condensed th, .table-condensed thead > tr > th,
.table-condensed td { .table-condensed tbody > tr > th,
.table-condensed thead > tr > td,
.table-condensed tbody > tr > td {
padding: 4px 5px; padding: 4px 5px;
} }
...@@ -990,70 +1073,72 @@ th { ...@@ -990,70 +1073,72 @@ th {
border-radius: 4px; border-radius: 4px;
} }
.table-bordered th, .table-bordered > thead > tr > th,
.table-bordered td { .table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td {
border-left: 1px solid #dddddd; border-left: 1px solid #dddddd;
} }
.table-bordered caption + thead tr:first-child th, .table-bordered > caption + thead > tr:first-child th,
.table-bordered caption + tbody tr:first-child th, .table-bordered > caption + tbody > tr:first-child th,
.table-bordered caption + tbody tr:first-child td, .table-bordered > caption + tbody > tr:first-child td,
.table-bordered colgroup + thead tr:first-child th, .table-bordered > colgroup + thead > tr:first-child th,
.table-bordered colgroup + tbody tr:first-child th, .table-bordered > colgroup + tbody > tr:first-child th,
.table-bordered colgroup + tbody tr:first-child td, .table-bordered > colgroup + tbody > tr:first-child td,
.table-bordered thead:first-child tr:first-child th, .table-bordered > thead:first-child > tr:first-child th,
.table-bordered tbody:first-child tr:first-child th, .table-bordered > tbody:first-child > tr:first-child th,
.table-bordered tbody:first-child tr:first-child td { .table-bordered > tbody:first-child > tr:first-child td {
border-top: 0; border-top: 0;
} }
.table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered > thead:first-child > tr:first-child > th:first-child,
.table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered > tbody:first-child > tr:first-child > td:first-child,
.table-bordered tbody:first-child tr:first-child > th:first-child { .table-bordered > tbody:first-child > tr:first-child > th:first-child {
border-top-left-radius: 4px; border-top-left-radius: 4px;
} }
.table-bordered thead:first-child tr:first-child > th:last-child, .table-bordered > thead:first-child > tr:first-child > th:last-child,
.table-bordered tbody:first-child tr:first-child > td:last-child, .table-bordered > tbody:first-child > tr:first-child > td:last-child,
.table-bordered tbody:first-child tr:first-child > th:last-child { .table-bordered > tbody:first-child > tr:first-child > th:last-child {
border-top-right-radius: 4px; border-top-right-radius: 4px;
} }
.table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered > thead:last-child > tr:last-child > th:first-child,
.table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered > tbody:last-child > tr:last-child > td:first-child,
.table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered > tbody:last-child > tr:last-child > th:first-child,
.table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered > tfoot:last-child > tr:last-child > td:first-child,
.table-bordered tfoot:last-child tr:last-child > th:first-child { .table-bordered > tfoot:last-child > tr:last-child > th:first-child {
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
.table-bordered thead:last-child tr:last-child > th:last-child, .table-bordered > thead:last-child > tr:last-child > th:last-child,
.table-bordered tbody:last-child tr:last-child > td:last-child, .table-bordered > tbody:last-child > tr:last-child > td:last-child,
.table-bordered tbody:last-child tr:last-child > th:last-child, .table-bordered > tbody:last-child > tr:last-child > th:last-child,
.table-bordered tfoot:last-child tr:last-child > td:last-child, .table-bordered > tfoot:last-child > tr:last-child > td:last-child,
.table-bordered tfoot:last-child tr:last-child > th:last-child { .table-bordered > tfoot:last-child > tr:last-child > th:last-child {
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.table-bordered tfoot + tbody:last-child tr:last-child > td:first-child { .table-bordered > tfoot + tbody:last-child > tr:last-child > td:first-child {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.table-bordered tfoot + tbody:last-child tr:last-child > td:last-child { .table-bordered > tfoot + tbody:last-child > tr:last-child > td:last-child {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.table-bordered caption + thead tr:first-child th:first-child, .table-bordered > caption + thead > tr:first-child > th:first-child,
.table-bordered caption + tbody tr:first-child td:first-child, .table-bordered > caption + tbody > tr:first-child > td:first-child,
.table-bordered colgroup + thead tr:first-child th:first-child, .table-bordered > colgroup + thead > tr:first-child > th:first-child,
.table-bordered colgroup + tbody tr:first-child td:first-child { .table-bordered > colgroup + tbody > tr:first-child > td:first-child {
border-top-left-radius: 4px; border-top-left-radius: 4px;
} }
.table-bordered caption + thead tr:first-child th:last-child, .table-bordered > caption + thead > tr:first-child > th:last-child,
.table-bordered caption + tbody tr:first-child td:last-child, .table-bordered > caption + tbody > tr:first-child > td:last-child,
.table-bordered colgroup + thead tr:first-child th:last-child, .table-bordered > colgroup + thead > tr:first-child > th:last-child,
.table-bordered colgroup + tbody tr:first-child td:last-child { .table-bordered > colgroup + tbody > tr:first-child > td:last-child {
border-top-right-radius: 4px; border-top-right-radius: 4px;
} }
...@@ -1085,9 +1170,9 @@ table th[class*="col-span-"] { ...@@ -1085,9 +1170,9 @@ table th[class*="col-span-"] {
border-color: #d6e9c6; border-color: #d6e9c6;
} }
.table > tbody > tr > td.error, .table > tbody > tr > td.danger,
.table > tbody > tr > th.error, .table > tbody > tr > th.danger,
.table > tbody > tr.error > td { .table > tbody > tr.danger > td {
background-color: #f2dede; background-color: #f2dede;
border-color: #eed3d7; border-color: #eed3d7;
} }
...@@ -1106,9 +1191,9 @@ table th[class*="col-span-"] { ...@@ -1106,9 +1191,9 @@ table th[class*="col-span-"] {
border-color: #c9e2b3; border-color: #c9e2b3;
} }
.table-hover > tbody > tr > td.error:hover, .table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.error:hover, .table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.error:hover > td { .table-hover > tbody > tr.danger:hover > td {
background-color: #ebcccc; background-color: #ebcccc;
border-color: #e6c1c7; border-color: #e6c1c7;
} }
...@@ -1135,7 +1220,7 @@ legend { ...@@ -1135,7 +1220,7 @@ legend {
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 21; font-size: 21px;
line-height: 40px; line-height: 40px;
color: #333333; color: #333333;
border: 0; border: 0;
...@@ -1167,7 +1252,7 @@ input[type="color"] { ...@@ -1167,7 +1252,7 @@ input[type="color"] {
display: inline-block; display: inline-block;
min-height: 34px; min-height: 34px;
padding: 6px 9px; padding: 6px 9px;
font-size: 14; font-size: 14px;
line-height: 20px; line-height: 20px;
color: #555555; color: #555555;
vertical-align: middle; vertical-align: middle;
...@@ -1176,10 +1261,10 @@ input[type="color"] { ...@@ -1176,10 +1261,10 @@ input[type="color"] {
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-transition: border-color linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border-color linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border-color linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border-color linear 0.2s, box-shadow linear 0.2s;
} }
input, input,
...@@ -1198,6 +1283,12 @@ input[type="checkbox"] { ...@@ -1198,6 +1283,12 @@ input[type="checkbox"] {
width: auto; width: auto;
} }
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
textarea { textarea {
height: auto; height: auto;
} }
...@@ -1290,6 +1381,7 @@ textarea::-webkit-input-placeholder { ...@@ -1290,6 +1381,7 @@ textarea::-webkit-input-placeholder {
display: inline; display: inline;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
cursor: pointer;
} }
.radio input[type="radio"], .radio input[type="radio"],
...@@ -1305,19 +1397,22 @@ textarea::-webkit-input-placeholder { ...@@ -1305,19 +1397,22 @@ textarea::-webkit-input-placeholder {
margin-top: -5px; margin-top: -5px;
} }
/*
// Move the options list down to align with labels
.controls > .radio:first-child, .controls > .radio:first-child,
.controls > .checkbox:first-child { .controls > .checkbox:first-child {
padding-top: 5px; padding-top: 5px; // has to be padding because margin collaspes
} }
*/
.radio-inline, .radio-inline,
.checkbox-inline { .checkbox-inline {
display: inline-block; display: inline-block;
padding-top: 5px;
padding-left: 20px; padding-left: 20px;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
vertical-align: middle; vertical-align: middle;
cursor: pointer;
} }
.radio-inline + .radio-inline, .radio-inline + .radio-inline,
...@@ -1343,7 +1438,7 @@ input[type="search"].input-large, ...@@ -1343,7 +1438,7 @@ input[type="search"].input-large,
input[type="tel"].input-large, input[type="tel"].input-large,
input[type="color"].input-large { input[type="color"].input-large {
padding: 11px 14px; padding: 11px 14px;
font-size: 17.5; font-size: 17.5px;
border-radius: 6px; border-radius: 6px;
} }
...@@ -1365,7 +1460,7 @@ input[type="tel"].input-small, ...@@ -1365,7 +1460,7 @@ input[type="tel"].input-small,
input[type="color"].input-small { input[type="color"].input-small {
min-height: 26px; min-height: 26px;
padding: 2px 10px; padding: 2px 10px;
font-size: 11.9; font-size: 11.9px;
border-radius: 3px; border-radius: 3px;
} }
...@@ -1494,6 +1589,16 @@ select:focus:invalid:focus { ...@@ -1494,6 +1589,16 @@ select:focus:invalid:focus {
clear: both; clear: both;
} }
.form-actions:before,
.form-actions:after {
display: table;
content: " ";
}
.form-actions:after {
clear: both;
}
.help-block, .help-block,
.help-inline { .help-inline {
color: #737373; color: #737373;
...@@ -1552,7 +1657,7 @@ select:focus:invalid:focus { ...@@ -1552,7 +1657,7 @@ select:focus:invalid:focus {
.input-group-addon { .input-group-addon {
padding: 6px 8px; padding: 6px 8px;
font-size: 14; font-size: 14px;
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
...@@ -1566,12 +1671,12 @@ select:focus:invalid:focus { ...@@ -1566,12 +1671,12 @@ select:focus:invalid:focus {
.input-group-addon.input-small { .input-group-addon.input-small {
padding: 2px 10px; padding: 2px 10px;
font-size: 11.9; font-size: 11.9px;
} }
.input-group-addon.input-large { .input-group-addon.input-large {
padding: 11px 14px; padding: 11px 14px;
font-size: 17.5; font-size: 17.5px;
} }
.input-group input:first-child, .input-group input:first-child,
...@@ -1687,6 +1792,14 @@ select:focus:invalid:focus { ...@@ -1687,6 +1792,14 @@ select:focus:invalid:focus {
.form-horizontal .control-group:after { .form-horizontal .control-group:after {
clear: both; clear: both;
} }
.form-horizontal .control-group:before,
.form-horizontal .control-group:after {
display: table;
content: " ";
}
.form-horizontal .control-group:after {
clear: both;
}
.form-horizontal .control-group input, .form-horizontal .control-group input,
.form-horizontal .control-group select, .form-horizontal .control-group select,
.form-horizontal .control-group textarea { .form-horizontal .control-group textarea {
...@@ -1701,13 +1814,16 @@ select:focus:invalid:focus { ...@@ -1701,13 +1814,16 @@ select:focus:invalid:focus {
.form-horizontal .control-group > .controls { .form-horizontal .control-group > .controls {
margin-left: 180px; margin-left: 180px;
} }
.form-horizontal .form-actions {
padding-left: 180px;
}
} }
.btn { .btn {
display: inline-block; display: inline-block;
padding: 6px 12px; padding: 6px 12px;
margin-bottom: 0; margin-bottom: 0;
font-size: 14; font-size: 14px;
font-weight: 500; font-weight: 500;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
...@@ -1751,19 +1867,19 @@ fieldset[disabled] .btn { ...@@ -1751,19 +1867,19 @@ fieldset[disabled] .btn {
.btn-large { .btn-large {
padding: 11px 14px; padding: 11px 14px;
font-size: 17.5; font-size: 17.5px;
border-radius: 6px; border-radius: 6px;
} }
.btn-small { .btn-small {
padding: 2px 10px; padding: 2px 10px;
font-size: 11.9; font-size: 11.9px;
border-radius: 3px; border-radius: 3px;
} }
.btn-mini { .btn-mini {
padding: 0 6px; padding: 0 6px;
font-size: 10.5; font-size: 10.5px;
border-radius: 3px; border-radius: 3px;
} }
...@@ -2036,8 +2152,6 @@ fieldset[disabled] .btn-link:focus { ...@@ -2036,8 +2152,6 @@ fieldset[disabled] .btn-link:focus {
@font-face { @font-face {
font-family: 'Glyphicons Halflings'; font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
src: url('../fonts/glyphiconshalflings-regular.eot'); src: url('../fonts/glyphiconshalflings-regular.eot');
src: url('../fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphiconshalflings-regular.woff') format('woff'), url('../fonts/glyphiconshalflings-regular.ttf') format('truetype'), url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg'); src: url('../fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphiconshalflings-regular.woff') format('woff'), url('../fonts/glyphiconshalflings-regular.ttf') format('truetype'), url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
} }
...@@ -2045,6 +2159,7 @@ fieldset[disabled] .btn-link:focus { ...@@ -2045,6 +2159,7 @@ fieldset[disabled] .btn-link:focus {
.glyphicon:before { .glyphicon:before {
font-family: 'Glyphicons Halflings'; font-family: 'Glyphicons Halflings';
font-style: normal; font-style: normal;
font-weight: normal;
line-height: 1; line-height: 1;
} }
...@@ -2742,7 +2857,7 @@ fieldset[disabled] .btn-link:focus { ...@@ -2742,7 +2857,7 @@ fieldset[disabled] .btn-link:focus {
} }
.dropdown-menu .divider { .dropdown-menu .divider {
height: 1px; height: 2px;
margin: 9px 0; margin: 9px 0;
overflow: hidden; overflow: hidden;
background-color: #e5e5e5; background-color: #e5e5e5;
...@@ -2766,10 +2881,9 @@ fieldset[disabled] .btn-link:focus { ...@@ -2766,10 +2881,9 @@ fieldset[disabled] .btn-link:focus {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: #357ebd; background-color: #357ebd;
background-image: -moz-linear-gradient(top, #428bca, #357ebd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd));
background-image: -webkit-linear-gradient(top, #428bca, #357ebd); background-image: -webkit-linear-gradient(top, #428bca, #357ebd);
background-image: -o-linear-gradient(top, #428bca, #357ebd); background-image: -moz-linear-gradient(top, #428bca, #357ebd);
background-image: linear-gradient(to bottom, #428bca, #357ebd); background-image: linear-gradient(to bottom, #428bca, #357ebd);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
...@@ -2781,10 +2895,9 @@ fieldset[disabled] .btn-link:focus { ...@@ -2781,10 +2895,9 @@ fieldset[disabled] .btn-link:focus {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: #357ebd; background-color: #357ebd;
background-image: -moz-linear-gradient(top, #428bca, #357ebd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd));
background-image: -webkit-linear-gradient(top, #428bca, #357ebd); background-image: -webkit-linear-gradient(top, #428bca, #357ebd);
background-image: -o-linear-gradient(top, #428bca, #357ebd); background-image: -moz-linear-gradient(top, #428bca, #357ebd);
background-image: linear-gradient(to bottom, #428bca, #357ebd); background-image: linear-gradient(to bottom, #428bca, #357ebd);
background-repeat: repeat-x; background-repeat: repeat-x;
outline: 0; outline: 0;
...@@ -2890,127 +3003,350 @@ fieldset[disabled] .btn-link:focus { ...@@ -2890,127 +3003,350 @@ fieldset[disabled] .btn-link:focus {
z-index: 1051; z-index: 1051;
} }
.well { .list-group {
min-height: 20px; margin: 0 0 20px;
padding: 19px; background-color: #ffffff;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
} }
.well blockquote { .list-group-item {
border-color: #ddd; position: relative;
border-color: rgba(0, 0, 0, 0.15); display: block;
padding: 10px 30px 10px 15px;
margin-bottom: -1px;
border: 1px solid #dddddd;
} }
.well-large { .list-group-item:first-child {
padding: 24px; border-top-right-radius: 4px;
border-radius: 6px; border-top-left-radius: 4px;
} }
.well-small { .list-group-item:last-child {
padding: 9px; margin-bottom: 0;
border-radius: 3px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
} }
.close { .list-group-item-heading {
float: right; margin-top: 0;
font-size: 20px; margin-bottom: 5px;
font-weight: bold;
line-height: 20px;
color: #000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
} }
.close:hover, .list-group-item-text {
.close:focus { margin-bottom: 0;
color: #000; line-height: 1.3;
text-decoration: none;
cursor: pointer;
opacity: 0.5;
filter: alpha(opacity=50);
} }
button.close { a.list-group-item .list-group-item-heading {
padding: 0; color: #333;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
} }
.nav { a.list-group-item .list-group-item-text {
padding-left: 0; color: #555;
margin-bottom: 0;
margin-left: 0;
list-style: none;
} }
.nav:before, a.list-group-item:hover,
.nav:after { a.list-group-item:focus {
display: table; text-decoration: none;
content: " "; background-color: #f5f5f5;
} }
.nav:after { a.list-group-item.active {
clear: both; z-index: 2;
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
} }
.nav > li { a.list-group-item.active .list-group-item-heading {
display: block; color: inherit;
} }
.nav > li > a { a.list-group-item.active .list-group-item-text {
position: relative; color: #e1edf7;
display: block;
padding: 10px 15px;
} }
.nav > li > a:hover, .list-group-item > .badge,
.nav > li > a:focus { .list-group-item > .glyphicon-chevron-right {
text-decoration: none; float: right;
background-color: #eeeeee; margin-right: -15px;
} }
.nav > .pull-right { .list-group-item > .glyphicon-chevron-right {
float: right; margin-right: -15px;
} }
.nav-tabs { .list-group-item > .glyphicon + .badge {
border-bottom: 1px solid #ddd; margin-right: 5px;
} }
.nav-tabs > li { .panel {
float: left; padding: 15px;
margin-bottom: -1px; margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
} }
.nav-tabs > li > a { .panel-heading {
margin-right: 2px; padding: 10px 15px;
line-height: 20px; margin: -15px -15px 15px;
border: 1px solid transparent; font-size: 17.5px;
border-radius: 4px 4px 0 0; font-weight: 500;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
} }
.nav-tabs > li > a:hover { .panel-primary {
border-color: #eeeeee #eeeeee #dddddd; border-color: #428bca;
} }
.nav-tabs > .active > a, .panel-primary .panel-heading {
.nav-tabs > .active > a:hover, color: #ffffff;
.nav-tabs > .active > a:focus { background-color: #428bca;
color: #555555; border-color: #428bca;
}
.panel-success {
border-color: #d6e9c6;
}
.panel-success .panel-heading {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.panel-warning {
border-color: #fbeed5;
}
.panel-warning .panel-heading {
color: #c09853;
background-color: #fcf8e3;
border-color: #fbeed5;
}
.panel-danger {
border-color: #eed3d7;
}
.panel-danger .panel-heading {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.panel-info {
border-color: #bce8f1;
}
.panel-info .panel-heading {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
.list-group-flush {
margin: 15px -15px -15px;
}
.list-group-flush .list-group-item {
border-width: 1px 0;
}
.list-group-flush .list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-flush .list-group-item:last-child {
border-bottom: 0;
}
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
.well-large {
padding: 24px;
border-radius: 6px;
}
.well-small {
padding: 9px;
border-radius: 3px;
}
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: 0.5;
filter: alpha(opacity=50);
}
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
.nav {
padding-left: 0;
margin-bottom: 0;
margin-left: 0;
list-style: none;
}
.nav:before,
.nav:after {
display: table;
content: " ";
}
.nav:after {
clear: both;
}
.nav:before,
.nav:after {
display: table;
content: " ";
}
.nav:after {
clear: both;
}
.nav > li {
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > li.disabled > a {
color: #999999;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
color: #999999;
text-decoration: none;
cursor: default;
background-color: transparent;
}
.nav > li + .nav-header {
margin-top: 9px;
}
.nav > .pull-right {
float: right;
}
.nav .divider {
height: 2px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 20px;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #555555;
cursor: default; cursor: default;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0;
}
.nav-tabs.nav-justified > li {
display: table-cell;
float: none;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
text-align: center;
}
.nav-tabs.nav-justified > li > a {
margin-right: 0;
border-bottom: 1px solid #ddd;
}
.nav-tabs.nav-justified > .active > a {
border-bottom-color: #ffffff;
}
.nav-pills > li { .nav-pills > li {
float: left; float: left;
} }
...@@ -3023,9 +3359,9 @@ button.close { ...@@ -3023,9 +3359,9 @@ button.close {
margin-left: 2px; margin-left: 2px;
} }
.nav-pills > .active > a, .nav-pills > li.active > a,
.nav-pills > .active > a:hover, .nav-pills > li.active > a:hover,
.nav-pills > .active > a:focus { .nav-pills > li.active > a:focus {
color: #fff; color: #fff;
background-color: #428bca; background-color: #428bca;
} }
...@@ -3040,56 +3376,23 @@ button.close { ...@@ -3040,56 +3376,23 @@ button.close {
} }
.nav-justified { .nav-justified {
max-height: 40px; width: 100%;
} }
.nav-justified > li { .nav-justified > li {
display: table-cell; display: table-cell;
float: none; float: none;
width: 1%; width: 1%;
text-align: center;
}
.nav-list > li > a {
margin-bottom: -1px;
border: 1px solid #e5e5e5;
}
.nav-list > li:first-child > a {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.nav-list > li:last-child > a {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
z-index: 2;
color: #fff;
background-color: #428bca;
border-color: #428bca;
} }
.nav > .disabled > a { .nav-justified > li > a {
color: #999999; text-align: center;
}
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: #999999;
text-decoration: none;
cursor: default;
background-color: transparent;
} }
.nav-header { .nav-header {
display: block; display: block;
padding: 3px 15px; padding: 3px 15px;
font-size: 11px; font-size: 10.5px;
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
color: #999999; color: #999999;
...@@ -3097,16 +3400,14 @@ button.close { ...@@ -3097,16 +3400,14 @@ button.close {
text-transform: uppercase; text-transform: uppercase;
} }
.nav li + .nav-header { .tabbable:before,
margin-top: 9px; .tabbable:after {
display: table;
content: " ";
} }
.nav .divider { .tabbable:after {
height: 1px; clear: both;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
} }
.tabbable:before, .tabbable:before,
...@@ -3153,8 +3454,8 @@ button.close { ...@@ -3153,8 +3454,8 @@ button.close {
margin-top: 8px; margin-top: 8px;
} }
.nav .dropdown-toggle:hover .caret { .nav .dropdown-toggle:hover .caret {
border-top-color: @link-color-hover; border-top-color: @link-hover-color;
border-bottom-color: @link-color-hover; border-bottom-color: @link-hover-color;
} }
// Active dropdown links // Active dropdown links
...@@ -3180,8 +3481,8 @@ button.close { ...@@ -3180,8 +3481,8 @@ button.close {
.nav-pills .open .dropdown-toggle, .nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover { .nav > li.dropdown.open.active > a:hover {
color: #fff; color: #fff;
background-color: @grayLight; background-color: @gray-light;
border-color: @grayLight; border-color: @gray-light;
} }
.nav li.dropdown.open .caret, .nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret, .nav li.dropdown.open.active .caret,
...@@ -3193,14 +3494,16 @@ button.close { ...@@ -3193,14 +3494,16 @@ button.close {
// Dropdowns in stacked tabs // Dropdowns in stacked tabs
.tabs-stacked .open > a:hover { .tabs-stacked .open > a:hover {
border-color: @grayLight; border-color: @gray-light;
} }
*/ */
.navbar { .navbar {
position: relative; position: relative;
padding: 10px 15px; padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px;
background-color: #eeeeee; background-color: #eeeeee;
border-radius: 4px; border-radius: 4px;
} }
...@@ -3215,33 +3518,43 @@ button.close { ...@@ -3215,33 +3518,43 @@ button.close {
clear: both; clear: both;
} }
.navbar .nav { .navbar:before,
margin-top: 15px; .navbar:after {
display: table;
content: " ";
} }
.navbar .nav > li > a { .navbar:after {
clear: both;
}
.navbar-nav {
margin-top: 5px;
}
.navbar-nav > li > a {
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
line-height: 20px; line-height: 20px;
color: #777777; color: #777777;
} }
.navbar .nav > li > a:hover, .navbar-nav > li > a:hover,
.navbar .nav > li > a:focus { .navbar-nav > li > a:focus {
color: #333333; color: #333333;
background-color: transparent; background-color: transparent;
} }
.navbar .nav > .active > a, .navbar-nav > .active > a,
.navbar .nav > .active > a:hover, .navbar-nav > .active > a:hover,
.navbar .nav > .active > a:focus { .navbar-nav > .active > a:focus {
color: #555555; color: #555555;
background-color: #d5d5d5; background-color: #d5d5d5;
} }
.navbar .nav > .disabled > a, .navbar-nav > .disabled > a,
.navbar .nav > .disabled > a:hover, .navbar-nav > .disabled > a:hover,
.navbar .nav > .disabled > a:focus { .navbar-nav > .disabled > a:focus {
color: #cccccc; color: #cccccc;
background-color: transparent; background-color: transparent;
} }
...@@ -3265,15 +3578,16 @@ button.close { ...@@ -3265,15 +3578,16 @@ button.close {
.navbar-fixed-bottom { .navbar-fixed-bottom {
bottom: 0; bottom: 0;
margin-bottom: 0;
} }
.navbar-brand { .navbar-brand {
display: block; display: block;
max-width: 200px; max-width: 200px;
padding: 7px 15px; padding: 15px;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
font-size: 18px; font-size: 17.5px;
font-weight: 500; font-weight: 500;
line-height: 20px; line-height: 20px;
color: #777777; color: #777777;
...@@ -3314,57 +3628,49 @@ button.close { ...@@ -3314,57 +3628,49 @@ button.close {
margin-top: 4px; margin-top: 4px;
} }
.navbar .nav > .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e1e1e1;
border-bottom: 1px solid #fbfbfb;
}
.navbar-form { .navbar-form {
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }
.navbar .nav > li > .dropdown-menu { .navbar-nav > li > .dropdown-menu {
margin-top: 0; margin-top: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
} }
.navbar-fixed-bottom .nav > li > .dropdown-menu { .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.navbar .nav li.dropdown > a:hover .caret, .navbar-nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret { .navbar-nav li.dropdown > a:focus .caret {
border-top-color: #333333; border-top-color: #333333;
border-bottom-color: #333333; border-bottom-color: #333333;
} }
.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar-nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle, .navbar-nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle { .navbar-nav li.dropdown.open.active > .dropdown-toggle {
color: #555555; color: #555555;
background-color: #d5d5d5; background-color: #d5d5d5;
} }
.navbar .nav li.dropdown > .dropdown-toggle .caret { .navbar-nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #777777; border-top-color: #777777;
border-bottom-color: #777777; border-bottom-color: #777777;
} }
.navbar .nav li.dropdown.open > .dropdown-toggle .caret, .navbar-nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret, .navbar-nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { .navbar-nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: #555555; border-top-color: #555555;
border-bottom-color: #555555; border-bottom-color: #555555;
} }
.navbar .pull-right > li > .dropdown-menu, .navbar-nav.pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right { .navbar-nav > li > .dropdown-menu.pull-right {
right: 0; right: 0;
left: auto; left: auto;
} }
...@@ -3387,26 +3693,26 @@ button.close { ...@@ -3387,26 +3693,26 @@ button.close {
color: #999999; color: #999999;
} }
.navbar-inverse .nav > li > a { .navbar-inverse .navbar-nav > li > a {
color: #999999; color: #999999;
} }
.navbar-inverse .nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .nav > li > a:focus { .navbar-inverse .navbar-nav > li > a:focus {
color: #ffffff; color: #ffffff;
background-color: transparent; background-color: transparent;
} }
.navbar-inverse .nav > .active > a, .navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .nav > .active > a:focus { .navbar-inverse .navbar-nav > .active > a:focus {
color: #ffffff; color: #ffffff;
background-color: #080808; background-color: #080808;
} }
.navbar-inverse .nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .nav > .disabled > a:focus { .navbar-inverse .navbar-nav > .disabled > a:focus {
color: #444444; color: #444444;
background-color: transparent; background-color: transparent;
} }
...@@ -3424,73 +3730,45 @@ button.close { ...@@ -3424,73 +3730,45 @@ button.close {
background-color: #fff; background-color: #fff;
} }
.navbar-inverse .nav > .divider { .navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle,
background-color: #151515; .navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle,
border-bottom-color: #2f2f2f; .navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle {
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
color: #ffffff; color: #ffffff;
background-color: #080808; background-color: #080808;
} }
.navbar-inverse .nav li.dropdown > a:hover .caret { .navbar-inverse .navbar-nav li.dropdown > a:hover .caret {
border-top-color: #ffffff; border-top-color: #ffffff;
border-bottom-color: #ffffff; border-bottom-color: #ffffff;
} }
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret { .navbar-inverse .navbar-nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #999999; border-top-color: #999999;
border-bottom-color: #999999; border-bottom-color: #999999;
} }
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret, .navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret, .navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret { .navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: #ffffff; border-top-color: #ffffff;
border-bottom-color: #ffffff; border-bottom-color: #ffffff;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.navbar {
padding-top: 0;
padding-bottom: 0;
}
.navbar-brand { .navbar-brand {
float: left; float: left;
padding-top: 15px; margin-right: 5px;
padding-bottom: 15px; margin-left: -5px;
margin-left: -10px;
} }
.navbar .nav { .navbar .nav {
float: left; float: left;
margin-top: 0; margin-top: 0;
} }
.navbar .nav:before,
.navbar .nav:after {
display: table;
content: " ";
}
.navbar .nav:after {
clear: both;
}
.navbar .nav.pull-right {
float: right;
}
.navbar .nav > li { .navbar .nav > li {
float: left; float: left;
} }
.navbar .nav > .divider { .navbar .nav.pull-right {
width: 1px; float: right;
height: 30px;
margin: 10px 9px;
border-right: 1px solid #fbfbfb;
border-bottom: 0;
}
.navbar-inverse .nav > .divider {
border-right-color: #2f2f2f;
} }
.navbar-toggle { .navbar-toggle {
position: relative; position: relative;
...@@ -3504,62 +3782,25 @@ button.close { ...@@ -3504,62 +3782,25 @@ button.close {
} }
} }
/* .navbar-btn {
margin-top: 8px;
}
// Janky solution for now to account for links outside the .nav
// -------------------------
.navbar-link { .navbar-link {
color: @navbar-link-color; color: #777777;
&:hover {
color: @navbar-link-color-hover;
}
} }
// Buttons in navbar .navbar-link:hover {
// ------------------------- color: #333333;
.navbar .btn,
.navbar .btn-group {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
.navbar .btn-group .btn,
.navbar .input-prepend .btn,
.navbar .input-append .btn {
margin-top: 0; // then undo the margin here so we don't accidentally double it
} }
// Navbar forms .navbar-inverse .navbar-link {
// ------------------------- color: #999999;
.navbar-form {
margin-bottom: 0; // remove default bottom margin
.clearfix();
input,
select,
.radio,
.checkbox {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
input,
select,
.btn {
display: inline-block;
margin-bottom: 0;
}
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
margin-top: 3px;
}
.input-append,
.input-prepend {
margin-top: 5px;
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
input {
margin-top: 0; // remove the margin on top since it's on the parent
}
}
} }
*/ .navbar-inverse .navbar-link:hover {
color: #ffffff;
}
.btn .caret { .btn .caret {
border-top-color: #ffffff; border-top-color: #ffffff;
...@@ -3599,6 +3840,16 @@ button.close { ...@@ -3599,6 +3840,16 @@ button.close {
clear: both; clear: both;
} }
.btn-toolbar:before,
.btn-toolbar:after {
display: table;
content: " ";
}
.btn-toolbar:after {
clear: both;
}
.btn-toolbar .btn-group { .btn-toolbar .btn-group {
float: left; float: left;
} }
...@@ -3639,6 +3890,25 @@ button.close { ...@@ -3639,6 +3890,25 @@ button.close {
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
} }
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group > .btn {
border-radius: 0;
}
.btn-group > .btn-group:last-child > .btn {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group > .btn-group:first-child > .btn {
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.btn-group .dropdown-toggle:active, .btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle { .btn-group.open .dropdown-toggle {
outline: 0; outline: 0;
...@@ -3742,6 +4012,10 @@ button.close { ...@@ -3742,6 +4012,10 @@ button.close {
content: "\00a0 /"; content: "\00a0 /";
} }
.breadcrumb > li:last-child:after {
display: none;
}
.breadcrumb > .active { .breadcrumb > .active {
color: #999999; color: #999999;
} }
...@@ -3805,7 +4079,7 @@ button.close { ...@@ -3805,7 +4079,7 @@ button.close {
.pagination-large > li > a, .pagination-large > li > a,
.pagination-large > li > span { .pagination-large > li > span {
padding: 11px 14px; padding: 11px 14px;
font-size: 17.5; font-size: 17.5px;
} }
.pagination-large > li:first-child > a, .pagination-large > li:first-child > a,
...@@ -3839,13 +4113,13 @@ button.close { ...@@ -3839,13 +4113,13 @@ button.close {
.pagination-small > li > a, .pagination-small > li > a,
.pagination-small > li > span { .pagination-small > li > span {
padding: 2px 10px; padding: 2px 10px;
font-size: 11.9; font-size: 11.9px;
} }
.pagination-mini > li > a, .pagination-mini > li > a,
.pagination-mini > li > span { .pagination-mini > li > span {
padding: 0 6px; padding: 0 6px;
font-size: 10.5; font-size: 10.5px;
} }
.pager { .pager {
...@@ -3864,6 +4138,16 @@ button.close { ...@@ -3864,6 +4138,16 @@ button.close {
clear: both; clear: both;
} }
.pager:before,
.pager:after {
display: table;
content: " ";
}
.pager:after {
clear: both;
}
.pager li { .pager li {
display: inline; display: inline;
} }
...@@ -3872,8 +4156,8 @@ button.close { ...@@ -3872,8 +4156,8 @@ button.close {
.pager li > span { .pager li > span {
display: inline-block; display: inline-block;
padding: 5px 14px; padding: 5px 14px;
background-color: #fff; background-color: #ffffff;
border: 1px solid #ddd; border: 1px solid #dddddd;
border-radius: 15px; border-radius: 15px;
} }
...@@ -3899,7 +4183,7 @@ button.close { ...@@ -3899,7 +4183,7 @@ button.close {
.pager .disabled > span { .pager .disabled > span {
color: #999999; color: #999999;
cursor: default; cursor: default;
background-color: #fff; background-color: #ffffff;
} }
.modal-open { .modal-open {
...@@ -3976,17 +4260,18 @@ button.close { ...@@ -3976,17 +4260,18 @@ button.close {
} }
.modal-header { .modal-header {
padding: 9px 15px; min-height: 35px;
padding: 15px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
.modal-header .close { .modal-header .close {
margin-top: 2px; margin-top: -2px;
} }
.modal-title { .modal-title {
margin: 0; margin: 0;
line-height: 30px; line-height: 20px;
} }
.modal-body { .modal-body {
...@@ -4011,6 +4296,16 @@ button.close { ...@@ -4011,6 +4296,16 @@ button.close {
clear: both; clear: both;
} }
.modal-footer:before,
.modal-footer:after {
display: table;
content: " ";
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn { .modal-footer .btn + .btn {
margin-bottom: 0; margin-bottom: 0;
margin-left: 5px; margin-left: 5px;
...@@ -4043,7 +4338,7 @@ button.close { ...@@ -4043,7 +4338,7 @@ button.close {
position: absolute; position: absolute;
z-index: 1030; z-index: 1030;
display: block; display: block;
font-size: 11px; font-size: 10.5px;
line-height: 1.4; line-height: 1.4;
opacity: 0; opacity: 0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
...@@ -4141,9 +4436,9 @@ button.close { ...@@ -4141,9 +4436,9 @@ button.close {
border-radius: 6px; border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box; background-clip: padding-box;
-webkit-bg-clip: padding-box;
-moz-bg-clip: padding;
} }
.popover.top { .popover.top {
...@@ -4288,11 +4583,10 @@ button.close { ...@@ -4288,11 +4583,10 @@ button.close {
color: #a47e3c; color: #a47e3c;
} }
.close { .alert .close {
position: relative; position: relative;
top: -2px; top: -2px;
right: -21px; right: -21px;
line-height: 20px;
color: inherit; color: inherit;
} }
...@@ -4311,22 +4605,18 @@ button.close { ...@@ -4311,22 +4605,18 @@ button.close {
color: #356635; color: #356635;
} }
.alert-danger, .alert-danger {
.alert-error {
color: #b94a48; color: #b94a48;
background-color: #f2dede; background-color: #f2dede;
border-color: #eed3d7; border-color: #eed3d7;
} }
.alert-danger hr, .alert-danger hr {
.alert-error hr {
border-top-color: #e6c1c7; border-top-color: #e6c1c7;
} }
.alert-danger > a, .alert-danger > a,
.alert-error > a, .alert-danger > p > a {
.alert-danger > p > a,
.alert-error > p > a {
color: #953b39; color: #953b39;
} }
...@@ -4363,7 +4653,8 @@ button.close { ...@@ -4363,7 +4653,8 @@ button.close {
.img-thumbnail { .img-thumbnail {
padding: 4px; padding: 4px;
line-height: 20px; line-height: 20px;
border: 1px solid #ddd; background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px; border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
...@@ -4393,7 +4684,7 @@ a.thumbnail:focus { ...@@ -4393,7 +4684,7 @@ a.thumbnail:focus {
.thumbnail .caption { .thumbnail .caption {
padding: 9px; padding: 9px;
color: #555555; color: #333333;
} }
.media, .media,
...@@ -4433,6 +4724,7 @@ a.thumbnail:focus { ...@@ -4433,6 +4724,7 @@ a.thumbnail:focus {
} }
.label { .label {
display: inline;
padding: .25em .6em; padding: .25em .6em;
font-size: 75%; font-size: 75%;
font-weight: 500; font-weight: 500;
...@@ -4445,42 +4737,47 @@ a.thumbnail:focus { ...@@ -4445,42 +4737,47 @@ a.thumbnail:focus {
border-radius: .25em; border-radius: .25em;
} }
a.label:hover, .label[href]:hover,
a.label:focus { .label[href]:focus {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
background-color: #808080;
} }
.label-danger { .label-danger {
background-color: #d9534f; background-color: #d9534f;
} }
.label-danger[href] { .label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c; background-color: #c9302c;
} }
.label-warning { .label-success {
background-color: #f0ad4e; background-color: #5cb85c;
} }
.label-warning[href] { .label-success[href]:hover,
background-color: #ec971f; .label-success[href]:focus {
background-color: #449d44;
} }
.label-success { .label-warning {
background-color: #5cb85c; background-color: #f0ad4e;
} }
.label-success[href] { .label-warning[href]:hover,
background-color: #449d44; .label-warning[href]:focus {
background-color: #ec971f;
} }
.label-info { .label-info {
background-color: #5bc0de; background-color: #5bc0de;
} }
.label-info[href] { .label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5; background-color: #31b0d5;
} }
...@@ -4488,7 +4785,7 @@ a.label:focus { ...@@ -4488,7 +4785,7 @@ a.label:focus {
display: inline-block; display: inline-block;
min-width: 10px; min-width: 10px;
padding: 3px 7px; padding: 3px 7px;
font-size: 12px; font-size: 11.9px;
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;
color: #fff; color: #fff;
...@@ -4519,7 +4816,7 @@ a.badge:focus { ...@@ -4519,7 +4816,7 @@ a.badge:focus {
top: 0; top: 0;
} }
.nav-list > .active > a > .badge, a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge { .nav-pills > .active > a > .badge {
color: #428bca; color: #428bca;
background-color: #fff; background-color: #fff;
...@@ -4588,7 +4885,7 @@ a.badge:focus { ...@@ -4588,7 +4885,7 @@ a.badge:focus {
float: left; float: left;
width: 0; width: 0;
height: 100%; height: 100%;
font-size: 12px; font-size: 11.9px;
color: #fff; color: #fff;
text-align: center; text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
...@@ -4599,6 +4896,9 @@ a.badge:focus { ...@@ -4599,6 +4896,9 @@ a.badge:focus {
-moz-transition: width 0.6s ease; -moz-transition: width 0.6s ease;
-o-transition: width 0.6s ease; -o-transition: width 0.6s ease;
transition: width 0.6s ease; transition: width 0.6s ease;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
} }
.progress-striped .progress-bar { .progress-striped .progress-bar {
...@@ -4606,7 +4906,6 @@ a.badge:focus { ...@@ -4606,7 +4906,6 @@ a.badge:focus {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-webkit-background-size: 40px 40px; -webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px; -moz-background-size: 40px 40px;
...@@ -4631,7 +4930,6 @@ a.badge:focus { ...@@ -4631,7 +4930,6 @@ a.badge:focus {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
} }
...@@ -4644,7 +4942,6 @@ a.badge:focus { ...@@ -4644,7 +4942,6 @@ a.badge:focus {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
} }
...@@ -4657,7 +4954,6 @@ a.badge:focus { ...@@ -4657,7 +4954,6 @@ a.badge:focus {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
} }
...@@ -4670,7 +4966,6 @@ a.badge:focus { ...@@ -4670,7 +4966,6 @@ a.badge:focus {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
} }
...@@ -4782,10 +5077,9 @@ a.badge:focus { ...@@ -4782,10 +5077,9 @@ a.badge:focus {
.carousel-control.left { .carousel-control.left {
background-color: rgba(0, 0, 0, 0.0001); background-color: rgba(0, 0, 0, 0.0001);
background-color: transparent; background-color: transparent;
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001))); background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001)); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001)); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
...@@ -4796,10 +5090,9 @@ a.badge:focus { ...@@ -4796,10 +5090,9 @@ a.badge:focus {
left: auto; left: auto;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
background-color: transparent; background-color: transparent;
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5))); background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5)); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5)); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
...@@ -4854,16 +5147,21 @@ a.badge:focus { ...@@ -4854,16 +5147,21 @@ a.badge:focus {
.carousel-caption { .carousel-caption {
position: absolute; position: absolute;
right: 20%; right: 15%;
bottom: 20px; bottom: 20px;
left: 20%; left: 15%;
display: none; z-index: 10;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
color: #fff; color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
} }
.carousel-caption .btn {
text-shadow: none;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.carousel-control .glyphicon { .carousel-control .glyphicon {
width: 30px; width: 30px;
...@@ -4873,14 +5171,9 @@ a.badge:focus { ...@@ -4873,14 +5171,9 @@ a.badge:focus {
font-size: 30px; font-size: 30px;
} }
.carousel-caption { .carousel-caption {
right: 0; right: 20%;
left: 0; left: 20%;
z-index: 10; padding-bottom: 30px;
display: block;
max-width: 60%;
padding: 30px;
margin-right: 0;
margin-left: 0;
} }
} }
...@@ -4909,7 +5202,7 @@ a.badge:focus { ...@@ -4909,7 +5202,7 @@ a.badge:focus {
border-radius: 6px; border-radius: 6px;
} }
.jumbotron h1 { .jumbotron h1 {
font-size: 60px; font-size: 63px;
} }
} }
...@@ -4959,53 +5252,79 @@ a.badge:focus { ...@@ -4959,53 +5252,79 @@ a.badge:focus {
width: device-width; width: device-width;
} }
@media screen and (max-width: 400px) {
@-ms-viewport {
width: 320px;
}
}
.hidden { .hidden {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.visible-phone { .visible-phone {
display: none !important; display: inherit !important;
} }
.visible-tablet { .visible-tablet {
display: none !important; display: none !important;
} }
.hidden-desktop { .visible-desktop {
display: none !important; display: none !important;
} }
.visible-desktop { .hidden-phone {
display: none !important;
}
.hidden-tablet {
display: inherit !important; display: inherit !important;
} }
@media (min-width: 768px) and (max-width: 979px) { .hidden-desktop {
.hidden-desktop { display: inherit !important;
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-phone {
display: none !important;
}
.visible-tablet {
display: inherit !important; display: inherit !important;
} }
.visible-desktop { .visible-desktop {
display: none !important ; display: none !important;
} }
.visible-tablet { .hidden-phone {
display: inherit !important; display: inherit !important;
} }
.hidden-tablet { .hidden-tablet {
display: none !important; display: none !important;
} }
}
@media (max-width: 767px) {
.hidden-desktop { .hidden-desktop {
display: inherit !important; display: inherit !important;
} }
.visible-desktop { }
@media (min-width: 992px) {
.visible-phone {
display: none !important; display: none !important;
} }
.visible-phone { .visible-tablet {
display: none !important;
}
.visible-desktop {
display: inherit !important; display: inherit !important;
} }
.hidden-phone { .hidden-phone {
display: inherit !important;
}
.hidden-tablet {
display: inherit !important;
}
.hidden-desktop {
display: none !important; display: none !important;
} }
} }
......
docs/assets/css/docs.css
View file @ 3c7a43a1
...@@ -9,24 +9,58 @@ ...@@ -9,24 +9,58 @@
-------------------------------------------------- */ -------------------------------------------------- */
body { body {
padding-top: 54px;
position: relative; /* For scrollyspy */ position: relative; /* For scrollyspy */
/* We add the padding to the body for >768px only */ /* We add the padding to the body for >768px only */
} }
/* */ hr {
.bs-docs-footer { margin-top: 30px;
margin-bottom: 30px;
}
.bs-docs-dl-options h4 {
margin-top: 15px;
margin-bottom: 5px;
}
.bs-docs-container,
.bs-home-container {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
} }
.bs-docs-container {
max-width: 860px;
}
.bs-docs-container .row {
margin-left: -15px;
margin-right: -15px;
}
/* Side notes for calling out things */
.bs-docs-sidenote {
margin: 20px 0;
padding: 15px 30px 15px 15px;
background-color: #fcf2f2;
border-left: 5px solid #df7c7b;
}
.bs-docs-sidenote h4 {
margin-top: 0;
}
.bs-docs-sidenote p:last-child {
margin-bottom: 0;
}
.bs-docs-sidenote code,
.bs-docs-sidenote .highlight {
background-color: #fff;
}
/* Sections /* Sections
-------------------------------------------------- */ -------------------------------------------------- */
/* Padding for in-page bookmarks */ /* Padding for in-page bookmarks */
section { section,
.bs-docs-section {
padding-top: 30px; padding-top: 30px;
} }
...@@ -41,69 +75,42 @@ section > ul li { ...@@ -41,69 +75,42 @@ section > ul li {
/* Navbar /* Jumbotrons
-------------------------------------------------- */ -------------------------------------------------- */
.bs-docs-navbar { .bs-docs-section-header {
background-color: #fff; padding-top: 60px;
border-bottom: 1px solid #ccc; /* IE8 */ color: #b94a48;
border-bottom: 1px solid rgba(0,0,0,.1); border-bottom: 5px solid #b94a48;
}
.bs-docs-navbar .nav > .active > a,
.bs-docs-navbar .nav > .active > a:hover {
font-weight: 500;
background-color: transparent;
} }
/* Jumbotrons
-------------------------------------------------- */
/* Base class */ /* Base class */
.bs-docs-jumbotron { .bs-docs-jumbotron {
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;
padding: 30px 15px; padding: 30px 15px;
color: #fff;
text-align: center; text-align: center;
background-color: #b94a48;
} }
.bs-docs-jumbotron h1 { .bs-docs-jumbotron h1 {
font-size: 50px; font-size: 50px;
} line-height: 1;
/* Link styles (used on .masthead-links as well) */
.bs-docs-jumbotron a {
color: #fff;
color: rgba(255,255,255,.5);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.bs-docs-jumbotron a:hover {
color: #fff;
} }
/* Download button */ /* Download button */
.bs-docs-jumbotron .btn { .bs-docs-jumbotron .btn {
margin-top: 5px;
margin-bottom: 5px;
padding: 18px 24px; padding: 18px 24px;
font-size: 21px; font-size: 21px;
color: #b94a48; /* redeclare to override the `.jumbotron a` */ color: #b94a48; /* redeclare to override the `.jumbotron a` */
background-color: #fff; background-color: #fff;
border-color: #e5e5e5;
} }
.bs-docs-jumbotron .btn,
.bs-docs-jumbotron .btn:hover, .bs-docs-jumbotron .btn:hover,
.bs-docs-jumbotron .btn:active { .bs-docs-jumbotron .btn:active {
color: #b94a48; /* redeclare to override the `.jumbotron a` */ color: #fff; /* redeclare to override the `.jumbotron a` */
background-color: #fff; background-color: #b94a48;
border-color: #fff; border-color: #b94a48;
}
/* Masthead (docs home)
------------------------- */
.masthead h1 {
line-height: 1;
} }
/* Textual links in masthead */ /* Textual links in masthead */
...@@ -113,42 +120,10 @@ section > ul li { ...@@ -113,42 +120,10 @@ section > ul li {
} }
.masthead-links li { .masthead-links li {
display: inline; display: inline;
padding: 0 10px;
color: rgba(255,255,255,.25);
}
/* Marketing section of Overview
-------------------------------------------------- */
.bs-docs-marketing {
text-align: center;
color: #5a5a5a;
}
.bs-docs-marketing h1 {
margin: 60px 0 10px;
font-size: 50px;
line-height: 1;
}
.bs-docs-marketing h2 {
margin-bottom: 5px;
}
.bs-docs-marketing p {
font-size: 16px;
line-height: 1.4;
}
.bs-docs-marketing .marketing-byline {
margin-bottom: 40px;
font-size: 21px;
font-weight: 300;
line-height: 1.25;
color: #999; color: #999;
} }
.marketing-img { .masthead-links li + li {
display: block; margin-left: 20px;
margin: 30px auto 10px;
max-height: 145px;
} }
...@@ -159,13 +134,13 @@ section > ul li { ...@@ -159,13 +134,13 @@ section > ul li {
.show-grid { .show-grid {
margin-bottom: 15px; margin-bottom: 15px;
} }
.show-grid [class*="col-span-"] { .show-grid .col {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
background-color: #eee; background-color: #eee;
border: 1px solid #ddd; border: 1px solid #ddd;
} }
.show-grid [class*="col-span-"]:hover { .show-grid .col:hover {
background-color: #ddd; background-color: #ddd;
} }
...@@ -174,33 +149,84 @@ section > ul li { ...@@ -174,33 +149,84 @@ section > ul li {
/* Sidenav /* Sidenav
-------------------------------------------------- */ -------------------------------------------------- */
/* Base styles are not affixable given mobile-first */ .bs-docs-sidebar {
.bs-docs-sidenav { display: none;
margin: 20px 0 0; position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bs-docs-sidenav.affix {
position: static;
top: 0; top: 0;
left: 0;
bottom: 0;
width: 240px;
overflow-y: scroll;
text-shadow: 0 1px 0 #fff;
background-color: #f5f5f5;
box-shadow: inset -1px 0 0 #e5e5e5;
} }
/* Chevrons within each link */ /* Nav: first level */
.bs-docs-sidenav .glyphicon-chevron-right { .bs-docs-sidebar > .nav {
float: right; margin: 0 0 25px 0;
margin-top: 1px;
margin-right: -6px;
opacity: .25;
color: #000;
} }
.bs-docs-sidenav a:hover .glyphicon-chevron-right { .bs-docs-sidebar .nav > li > a {
opacity: .5; display: block;
color: #666;
padding: 4px 25px;
} }
.bs-docs-sidenav .active .glyphicon-chevron-right, .bs-docs-sidebar .nav > li > a:hover,
.bs-docs-sidenav .active a:hover .glyphicon-chevron-right { .bs-docs-sidebar .nav > li > a:focus {
color: #fff; text-decoration: none;
opacity: 1; border-right: 1px solid #d5d5d5;
}
.bs-docs-sidebar .nav > .active > a,
.bs-docs-sidebar .nav > .active:hover > a,
.bs-docs-sidebar .nav > .active:focus > a {
font-weight: 500;
color: #b94a48;
background-color: transparent;
border-right: 1px solid #b94a48;
}
/* Nav: second level (shown on .active) */
.bs-docs-sidebar .nav .nav {
display: none;
margin-bottom: 5px;
}
.bs-docs-sidebar .nav > .active > ul {
display: block;
}
.bs-docs-sidebar .nav .nav > li > a {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 40px;
font-size: 90%;
}
.bs-docs-sidenav-heading {
margin: 0 0 25px;
}
.bs-docs-sidenav-heading a {
display: block;
padding: 15px 25px;
color: #b94a48;
border-bottom: 1px solid #e5e5e5;
box-shadow: 0 1px 0 #fff;
}
.bs-docs-sidenav-heading a:hover {
color: #a3403e;
text-decoration: none;
}
/* Section headings for groups of links */
.bs-docs-sidenav > li > .nav-header {
margin-top: 20px;
margin-bottom: 5px;
font-size: 14px;
font-weight: 500;
color: #333;
}
.bs-docs-sidenav > .active > .nav-header,
.bs-docs-sidenav > .active > .nav-header:hover {
color: #333;
border-color: #333;
} }
...@@ -240,9 +266,6 @@ section > ul li { ...@@ -240,9 +266,6 @@ section > ul li {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.prettyprint .linenums {
/*margin-left: 0;*/
}
/* Tweak content of examples for optimum awesome */ /* Tweak content of examples for optimum awesome */
.bs-docs-example > p:last-child, .bs-docs-example > p:last-child,
...@@ -254,7 +277,10 @@ section > ul li { ...@@ -254,7 +277,10 @@ section > ul li {
.bs-docs-example > textarea:last-child, .bs-docs-example > textarea:last-child,
.bs-docs-example > .table:last-child, .bs-docs-example > .table:last-child,
.bs-docs-example > .jumbotron:last-child, .bs-docs-example > .jumbotron:last-child,
.bs-docs-example > .alert:last-child { .bs-docs-example > .alert:last-child,
.bs-docs-example > .panel:last-child,
.bs-docs-example > .list-group:last-child,
.bs-docs-example > .well:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -282,20 +308,31 @@ section > ul li { ...@@ -282,20 +308,31 @@ section > ul li {
margin: 0; margin: 0;
} }
/* List groups */
.bs-docs-example > .list-group {
max-width: 400px;
}
/* Navbar examples */ /* Navbar examples */
.bs-navbar-top-example, .bs-navbar-top-example,
.bs-navbar-bottom-example { .bs-navbar-bottom-example {
z-index: 1; z-index: 1;
padding: 0; padding: 0;
height: 90px; min-height: 110px;
overflow: hidden; /* cut the drop shadows off */ overflow: hidden; /* cut the drop shadows off */
} }
.bs-navbar-top-example .navbar-fixed-top, .bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom { .bs-navbar-bottom-example .navbar-fixed-bottom {
position: relative;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.bs-navbar-top-example .navbar-fixed-top {
top: -1px;
}
.bs-navbar-bottom-example .navbar-fixed-bottom {
bottom: -1px;
}
.bs-navbar-top-example { .bs-navbar-top-example {
-webkit-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px;
...@@ -345,7 +382,7 @@ section > ul li { ...@@ -345,7 +382,7 @@ section > ul li {
margin-bottom: 5px; margin-bottom: 5px;
} }
.bs-docs-example-submenu { .bs-docs-example-submenu {
min-height: 180px; min-height: 230px;
} }
.bs-docs-example-submenu > .pull-left + .pull-left { .bs-docs-example-submenu > .pull-left + .pull-left {
margin-left: 20px; margin-left: 20px;
...@@ -356,6 +393,30 @@ section > ul li { ...@@ -356,6 +393,30 @@ section > ul li {
margin-bottom: 15px; margin-bottom: 15px;
} }
/* Tooltips */
.bs-docs-tooltip-examples {
text-align: center;
margin: 0 0 10px;
list-style: none;
}
.bs-docs-tooltip-examples li {
display: inline;
padding: 0 10px;
}
/* Popovers */
.bs-docs-example-popover {
padding-bottom: 24px;
background-color: #f9f9f9;
}
.bs-docs-example-popover .popover {
position: relative;
display: block;
float: left;
width: 260px;
margin: 20px;
}
/* Example templates /* Example templates
-------------------------------------------------- */ -------------------------------------------------- */
...@@ -485,8 +546,8 @@ section > ul li { ...@@ -485,8 +546,8 @@ section > ul li {
-------------------------------------------------- */ -------------------------------------------------- */
.bs-docs-footer { .bs-docs-footer {
text-align: center; padding-top: 30px;
padding: 30px 0; padding-bottom: 30px;
margin-top: 100px; margin-top: 100px;
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
...@@ -507,22 +568,22 @@ section > ul li { ...@@ -507,22 +568,22 @@ section > ul li {
/* Social proof buttons from GitHub & Twitter */ /* Social proof buttons from GitHub & Twitter */
.bs-docs-social { .bs-docs-social {
margin-top: 10px; margin-top: 80px;
margin-bottom: 20px; margin-bottom: 20px;
text-align: center;
} }
/* Quick links on Home */ /* Quick links on Home */
.bs-docs-social-buttons { .bs-docs-social-buttons {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 0 10px;
list-style: none; list-style: none;
} }
.bs-docs-social-buttons li { .bs-docs-social-buttons li {
display: inline-block; display: inline-block;
padding: 5px 8px;
line-height: 1; line-height: 1;
} }
.bs-docs-social-buttons li + li {
margin-left: 15px;
}
.bs-docs-social-buttons .twitter-follow-button { .bs-docs-social-buttons .twitter-follow-button {
width: 225px !important; width: 225px !important;
} }
...@@ -564,6 +625,7 @@ input.focused { ...@@ -564,6 +625,7 @@ input.focused {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
white-space: nowrap;
} }
.highlight pre code { .highlight pre code {
font-size: inherit; font-size: inherit;
...@@ -605,9 +667,46 @@ input.focused { ...@@ -605,9 +667,46 @@ input.focused {
/* Tablets and up */ /* Tablets and up */
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
/* Back to top link */
.bs-docs-top {
float: left;
padding: 7px 15px;
font-weight: 500;
color: #999;
background-color: #eee;
border-radius: 4px;
}
.bs-docs-top:hover {
color: #fff;
text-decoration: none;
background-color: #999;
}
.bs-docs-top.affix {
position: fixed;
right: 15px;
bottom: 15px;
}
.bs-docs-section-header h1 {
font-size: 80px;
font-size: 8rem;
line-height: 1;
}
/* Account for fixed navbar (which is static to start) */ /* Account for fixed navbar (which is static to start) */
body { .bs-docs-docs {
padding-top: 50px; /* Default height of navbar */ padding-left: 260px;
}
/* Undo custom padding */
.bs-docs-container {
padding-left: 0;
padding-right: 0;
}
/* Show the docs nav */
.bs-docs-sidebar {
display: block;
} }
/* Tweak display of docs jumbotrons */ /* Tweak display of docs jumbotrons */
...@@ -619,9 +718,9 @@ input.focused { ...@@ -619,9 +718,9 @@ input.focused {
font-size: 100px; font-size: 100px;
} }
.masthead p { .masthead p {
margin-left: 15%;
margin-right: 15%;
font-size: 30px; font-size: 30px;
margin-left: 10%;
margin-right: 10%;
} }
.subhead { .subhead {
padding-top: 60px; padding-top: 60px;
...@@ -629,37 +728,31 @@ input.focused { ...@@ -629,37 +728,31 @@ input.focused {
text-align: left; text-align: left;
} }
/* From here, start to affix the nav because we keep columns here */ .bs-navbar-top-example .navbar-fixed-top,
.bs-docs-sidenav.affix { .bs-navbar-bottom-example .navbar-fixed-bottom {
position: fixed;
top: 54px;
}
.bs-docs-sidenav {
width: 170px;
}
.bs-docs-sidenav.affix-bottom {
position: absolute; position: absolute;
top: auto;
bottom: 270px;
} }
} }
/* Tablets/desktops and up */ /* Tablets/desktops and up */
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
.bs-docs-docs {
padding-left: 280px;
}
/* Icons */ /* Icons */
.the-icons li { .the-icons li {
width: 12.5%; width: 12.5%;
} }
.bs-docs-sidenav {
width: 220px;
}
} }
/* Large desktops and up */ /* Large desktops and up */
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
.bs-docs-sidenav { .bs-docs-docs {
width: 260px; padding-left: 300px;
} }
} }
docs/assets/js/application.js
View file @ 3c7a43a1
...@@ -13,14 +13,18 @@ ...@@ -13,14 +13,18 @@
e.preventDefault() e.preventDefault()
}) })
// side bar // back to top
// setTimeout(function () {
// $('.bs-docs-sidenav').affix({
// offset: {
// top: function () { return $window.width() <= 980 ? 290 : 210 }
// , bottom: 270
// }
// })
// }, 100)
setTimeout(function () { setTimeout(function () {
$('.bs-docs-sidenav').affix({ $('.bs-docs-top').affix()
offset: {
top: function () { return $window.width() <= 980 ? 290 : 210 }
, bottom: 270
}
})
}, 100) }, 100)
// make code pretty // make code pretty
...@@ -49,6 +53,11 @@ ...@@ -49,6 +53,11 @@
$('.tooltip-test').tooltip() $('.tooltip-test').tooltip()
$('.popover-test').popover() $('.popover-test').popover()
$('.bs-docs-navbar').tooltip({
selector: "a[data-toggle=tooltip]",
container: ".bs-docs-navbar .nav"
})
// popover demo // popover demo
$("a[data-toggle=popover]") $("a[data-toggle=popover]")
.popover() .popover()
......
docs/assets/js/bootstrap-scrollspy.js
View file @ 3c7a43a1
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
this.activeTarget = target this.activeTarget = target
$(this.selector) $(this.selector)
.parent('.active') .parents('.active')
.removeClass('active') .removeClass('active')
selector = this.selector selector = this.selector
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
+ this.selector + '[href="' + target + '"]' + this.selector + '[href="' + target + '"]'
active = $(selector) active = $(selector)
.parent('li') .parents('li')
.addClass('active') .addClass('active')
if (active.parent('.dropdown-menu').length) { if (active.parent('.dropdown-menu').length) {
......
docs/assets/js/bootstrap.js
View file @ 3c7a43a1
...@@ -57,7 +57,8 @@ ...@@ -57,7 +57,8 @@
}) })
}(window.jQuery);/* ========================================================== }(window.jQuery);
/* ==========================================================
* bootstrap-alert.js v3.0.0 * bootstrap-alert.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#alerts * http://twitter.github.com/bootstrap/javascript.html#alerts
* ========================================================== * ==========================================================
...@@ -155,7 +156,8 @@ ...@@ -155,7 +156,8 @@
$(document).on('click.alert.data-api', dismiss, Alert.prototype.close) $(document).on('click.alert.data-api', dismiss, Alert.prototype.close)
}(window.jQuery);/* ============================================================ }(window.jQuery);
/* ============================================================
* bootstrap-button.js v3.0.0 * bootstrap-button.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#buttons * http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================ * ============================================================
...@@ -259,7 +261,8 @@ ...@@ -259,7 +261,8 @@
$btn.button('toggle') $btn.button('toggle')
}) })
}(window.jQuery);/* ========================================================== }(window.jQuery);
/* ==========================================================
* bootstrap-carousel.js v3.0.0 * bootstrap-carousel.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#carousel * http://twitter.github.com/bootstrap/javascript.html#carousel
* ========================================================== * ==========================================================
...@@ -465,7 +468,8 @@ ...@@ -465,7 +468,8 @@
e.preventDefault() e.preventDefault()
}) })
}(window.jQuery);/* ============================================================= }(window.jQuery);
/* =============================================================
* bootstrap-collapse.js v3.0.0 * bootstrap-collapse.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#collapse * http://twitter.github.com/bootstrap/javascript.html#collapse
* ============================================================= * =============================================================
...@@ -631,7 +635,8 @@ ...@@ -631,7 +635,8 @@
$(target).collapse(option) $(target).collapse(option)
}) })
}(window.jQuery);/* ============================================================ }(window.jQuery);
/* ============================================================
* bootstrap-dropdown.js v3.0.0 * bootstrap-dropdown.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#dropdowns * http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================ * ============================================================
...@@ -1621,7 +1626,7 @@ ...@@ -1621,7 +1626,7 @@
this.activeTarget = target this.activeTarget = target
$(this.selector) $(this.selector)
.parent('.active') .parents('.active')
.removeClass('active') .removeClass('active')
selector = this.selector selector = this.selector
...@@ -1629,7 +1634,7 @@ ...@@ -1629,7 +1634,7 @@
+ this.selector + '[href="' + target + '"]' + this.selector + '[href="' + target + '"]'
active = $(selector) active = $(selector)
.parent('li') .parents('li')
.addClass('active') .addClass('active')
if (active.parent('.dropdown-menu').length) { if (active.parent('.dropdown-menu').length) {
...@@ -1683,7 +1688,8 @@ ...@@ -1683,7 +1688,8 @@
}) })
}) })
}(window.jQuery);/* ======================================================== }(window.jQuery);
/* ========================================================
* bootstrap-tab.js v3.0.0 * bootstrap-tab.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#tabs * http://twitter.github.com/bootstrap/javascript.html#tabs
* ======================================================== * ========================================================
...@@ -1826,7 +1832,8 @@ ...@@ -1826,7 +1832,8 @@
$(this).tab('show') $(this).tab('show')
}) })
}(window.jQuery);/* ============================================================= }(window.jQuery);
/* =============================================================
* bootstrap-typeahead.js v3.0.0 * bootstrap-typeahead.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#typeahead * http://twitter.github.com/bootstrap/javascript.html#typeahead
* ============================================================= * =============================================================
......
docs/assets/js/bootstrap.min.js
View file @ 3c7a43a1
...@@ -3,4 +3,4 @@ ...@@ -3,4 +3,4 @@
* Copyright 2012 Twitter, Inc. * Copyright 2012 Twitter, Inc.
* http://www.apache.org/licenses/LICENSE-2.0.txt * http://www.apache.org/licenses/LICENSE-2.0.txt
*/ */
!function(e){"use strict";e(function(){e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.alert.data-api",t,n.prototype.close)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},getActiveIndex:function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},to:function(t){var n=this.getActiveIndex(),r=this;if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){r.to(t)}):n==t?this.pause().cycle():this.slide(t>n?"next":"prev",e(this.$items[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u](),f=e.Event("slide",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning||this.$element.hasClass("in"))return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning||!this.$element.hasClass("in"))return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},e.fn.collapse.defaults,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),!function(e){"use strict";function r(){e(t).each(function(){i(e(this)).removeClass("open")})}function i(t){var n=t.attr("data-target"),r;n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=n&&e(n);if(!r||!r.length)r=t.parent();return r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||s.toggleClass("open"),n.focus(),!1},keydown:function(n){var r,s,o,u,a,f;if(!/(38|40|27)/.test(n.keyCode))return;r=e(this),n.preventDefault(),n.stopPropagation();if(r.is(".disabled, :disabled"))return;u=i(r),a=u.hasClass("open");if(!a||a&&n.keyCode==27)return n.which==27&&u.find(t).focus(),r.click();s=e("[role=menu] li:not(.divider):visible a",u);if(!s.length)return;f=s.index(s.filter(":focus")),n.keyCode==38&&f>0&&f--,n.keyCode==40&&f<s.length-1&&f++,~f||(f=0),s.eq(f).focus()}};var s=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var r=e(this),i=r.data("dropdown");i||r.data("dropdown",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.dropdown.Constructor=n,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=s,this},e(document).on("click.dropdown.data-api",r).on("click.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.dropdown-menu",function(e){e.stopPropagation()}).on("click.dropdown.data-api",t,n.prototype.toggle).on("keydown.dropdown.data-api",t+", [role=menu]",n.prototype.keydown)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.prototype={constructor:t,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var t=this,n=e.Event("show");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown")}):t.$element.focus().trigger("shown")})},hide:function(t){t&&t.preventDefault();var n=this;t=e.Event("hide"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var t=this;e(document).on("focusin.modal",function(e){t.$element[0]!==e.target&&!t.$element.has(e.target).length&&t.$element.focus()})},escape:function(){var e=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(t){t.which==27&&e.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},hideModal:function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden")})},removeBackdrop:function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},backdrop:function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()}};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})});var r=e(document.body).on("shown",".modal",function(){r.addClass("modal-open")}).on("hidden",".modal",function(){r.removeClass("modal-open")})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s,o,u,a;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,o=this.options.trigger.split(" ");for(a=o.length;a--;)u=o[a],u=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):u!="manual"&&(i=u=="hover"?"mouseenter":"focus",s=u=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this)));this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e.fn[this.type].defaults,r={},i;this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)},this),i=e(t.currentTarget)[this.type](r).data(this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var t,n,r,i,s,o,u=e.Event("show");if(this.hasContent()&&this.enabled){this.$element.trigger(u);if(u.isDefaultPrevented())return;t=this.tip(),this.setContent(),this.options.animation&&t.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,t[0],this.$element[0]):this.options.placement,t.detach().css({top:0,left:0,display:"block"}),this.options.container?t.appendTo(this.options.container):t.insertAfter(this.$element),n=this.getPosition(),r=t[0].offsetWidth,i=t[0].offsetHeight;switch(s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}this.applyPlacement(o,s),this.$element.trigger("shown")}},applyPlacement:function(e,t){var n=this.tip(),r=n[0].offsetWidth,i=n[0].offsetHeight,s,o,u,a;n.offset(e).addClass(t).addClass("in"),s=n[0].offsetWidth,o=n[0].offsetHeight,t=="top"&&o!=i&&(e.top=e.top+i-o,a=!0),t=="bottom"||t=="top"?(u=0,e.left<0&&(u=e.left*-2,e.left=0,n.offset(e),s=n[0].offsetWidth,o=n[0].offsetHeight),this.replaceArrow(u-r+s,s,"left")):this.replaceArrow(o-i,o,"top"),a&&n.offset(e)},replaceArrow:function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide");this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden"),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},hasContent:function(){return this.getTitle()},getPosition:function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},arrow:function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(t){var n=t?e(t.currentTarget)[this.type](this._options).data(this.type):this;n.tip().hasClass("in")?n.hide():n.show()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=(typeof n.content=="function"?n.content.call(t[0]):n.content)||t.attr("data-content"),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parent(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parent("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active:last a")[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=e(this.options.menu),this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length<this.options.minLength?this.shown?this.hide():this:(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this)},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;return t||(this.$element.setAttribute(e,"return;"),t=typeof this.$element[e]=="function"),t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},focus:function(e){this.focused=!0},blur:function(e){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},click:function(e){e.stopPropagation(),e.preventDefault(),this.select(),this.$element.focus()},mouseenter:function(t){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=!1,!this.focused&&this.shown&&this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1},e.fn.typeahead.Constructor=t,e.fn.typeahead.noConflict=function(){return e.fn.typeahead=n,this},e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)).on("click.affix.data-api",e.proxy(function(){setTimeout(e.proxy(this.checkPosition,this),1)},this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery); !function(e){"use strict";e(function(){e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.alert.data-api",t,n.prototype.close)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},getActiveIndex:function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},to:function(t){var n=this.getActiveIndex(),r=this;if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){r.to(t)}):n==t?this.pause().cycle():this.slide(t>n?"next":"prev",e(this.$items[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u](),f=e.Event("slide",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning||this.$element.hasClass("in"))return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning||!this.$element.hasClass("in"))return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},e.fn.collapse.defaults,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),!function(e){"use strict";function r(){e(t).each(function(){i(e(this)).removeClass("open")})}function i(t){var n=t.attr("data-target"),r;n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=n&&e(n);if(!r||!r.length)r=t.parent();return r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||s.toggleClass("open"),n.focus(),!1},keydown:function(n){var r,s,o,u,a,f;if(!/(38|40|27)/.test(n.keyCode))return;r=e(this),n.preventDefault(),n.stopPropagation();if(r.is(".disabled, :disabled"))return;u=i(r),a=u.hasClass("open");if(!a||a&&n.keyCode==27)return n.which==27&&u.find(t).focus(),r.click();s=e("[role=menu] li:not(.divider):visible a",u);if(!s.length)return;f=s.index(s.filter(":focus")),n.keyCode==38&&f>0&&f--,n.keyCode==40&&f<s.length-1&&f++,~f||(f=0),s.eq(f).focus()}};var s=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var r=e(this),i=r.data("dropdown");i||r.data("dropdown",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.dropdown.Constructor=n,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=s,this},e(document).on("click.dropdown.data-api",r).on("click.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.dropdown-menu",function(e){e.stopPropagation()}).on("click.dropdown.data-api",t,n.prototype.toggle).on("keydown.dropdown.data-api",t+", [role=menu]",n.prototype.keydown)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.prototype={constructor:t,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var t=this,n=e.Event("show");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown")}):t.$element.focus().trigger("shown")})},hide:function(t){t&&t.preventDefault();var n=this;t=e.Event("hide"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var t=this;e(document).on("focusin.modal",function(e){t.$element[0]!==e.target&&!t.$element.has(e.target).length&&t.$element.focus()})},escape:function(){var e=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(t){t.which==27&&e.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},hideModal:function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden")})},removeBackdrop:function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},backdrop:function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()}};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})});var r=e(document.body).on("shown",".modal",function(){r.addClass("modal-open")}).on("hidden",".modal",function(){r.removeClass("modal-open")})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s,o,u,a;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,o=this.options.trigger.split(" ");for(a=o.length;a--;)u=o[a],u=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):u!="manual"&&(i=u=="hover"?"mouseenter":"focus",s=u=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this)));this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e.fn[this.type].defaults,r={},i;this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)},this),i=e(t.currentTarget)[this.type](r).data(this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var t,n,r,i,s,o,u=e.Event("show");if(this.hasContent()&&this.enabled){this.$element.trigger(u);if(u.isDefaultPrevented())return;t=this.tip(),this.setContent(),this.options.animation&&t.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,t[0],this.$element[0]):this.options.placement,t.detach().css({top:0,left:0,display:"block"}),this.options.container?t.appendTo(this.options.container):t.insertAfter(this.$element),n=this.getPosition(),r=t[0].offsetWidth,i=t[0].offsetHeight;switch(s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}this.applyPlacement(o,s),this.$element.trigger("shown")}},applyPlacement:function(e,t){var n=this.tip(),r=n[0].offsetWidth,i=n[0].offsetHeight,s,o,u,a;n.offset(e).addClass(t).addClass("in"),s=n[0].offsetWidth,o=n[0].offsetHeight,t=="top"&&o!=i&&(e.top=e.top+i-o,a=!0),t=="bottom"||t=="top"?(u=0,e.left<0&&(u=e.left*-2,e.left=0,n.offset(e),s=n[0].offsetWidth,o=n[0].offsetHeight),this.replaceArrow(u-r+s,s,"left")):this.replaceArrow(o-i,o,"top"),a&&n.offset(e)},replaceArrow:function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide");this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden"),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},hasContent:function(){return this.getTitle()},getPosition:function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},arrow:function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(t){var n=t?e(t.currentTarget)[this.type](this._options).data(this.type):this;n.tip().hasClass("in")?n.hide():n.show()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=(typeof n.content=="function"?n.content.call(t[0]):n.content)||t.attr("data-content"),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parents(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parents("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active:last a")[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=e(this.options.menu),this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length<this.options.minLength?this.shown?this.hide():this:(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this)},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;return t||(this.$element.setAttribute(e,"return;"),t=typeof this.$element[e]=="function"),t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},focus:function(e){this.focused=!0},blur:function(e){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},click:function(e){e.stopPropagation(),e.preventDefault(),this.select(),this.$element.focus()},mouseenter:function(t){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=!1,!this.focused&&this.shown&&this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1},e.fn.typeahead.Constructor=t,e.fn.typeahead.noConflict=function(){return e.fn.typeahead=n,this},e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)).on("click.affix.data-api",e.proxy(function(){setTimeout(e.proxy(this.checkPosition,this),1)},this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);
\ No newline at end of file \ No newline at end of file
docs/components.html deleted 100644 → 0
View file @ 41c78256
---
layout: default
title: Components
---
<!-- Subhead
================================================== -->
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>Components</h1>
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
</div>
</header>
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row">
<div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#dropdowns"><i class="glyphicon glyphicon-chevron-right"></i> Dropdowns</a></li>
<li><a href="#buttonGroups"><i class="glyphicon glyphicon-chevron-right"></i> Button groups</a></li>
<li><a href="#buttonDropdowns"><i class="glyphicon glyphicon-chevron-right"></i> Button dropdowns</a></li>
<li><a href="#navs"><i class="glyphicon glyphicon-chevron-right"></i> Navs</a></li>
<li><a href="#navbar"><i class="glyphicon glyphicon-chevron-right"></i> Navbar</a></li>
<li><a href="#breadcrumbs"><i class="glyphicon glyphicon-chevron-right"></i> Breadcrumbs</a></li>
<li><a href="#pagination"><i class="glyphicon glyphicon-chevron-right"></i> Pagination</a></li>
<li><a href="#labels"><i class="glyphicon glyphicon-chevron-right"></i> Labels</a></li>
<li><a href="#badges"><i class="glyphicon glyphicon-chevron-right"></i> Badges</a></li>
<li><a href="#typography"><i class="glyphicon glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#thumbnails"><i class="glyphicon glyphicon-chevron-right"></i> Thumbnails</a></li>
<li><a href="#alerts"><i class="glyphicon glyphicon-chevron-right"></i> Alerts</a></li>
<li><a href="#progress"><i class="glyphicon glyphicon-chevron-right"></i> Progress bars</a></li>
<li><a href="#media"><i class="glyphicon glyphicon-chevron-right"></i> Media object</a></li>
<li><a href="#misc"><i class="glyphicon glyphicon-chevron-right"></i> Misc</a></li>
</ul>
</div>
<div class="col-span-9">
<!-- Dropdowns
================================================== -->
<section id="dropdowns">
<div class="page-header">
<h1>Dropdown menus</h1>
</div>
<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
<h3>Example</h3>
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
<div class="bs-docs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
{% endhighlight %}
<h3>Aligning the menus</h3>
<p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
{% highlight html linenos %}
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
...
</ul>
{% endhighlight %}
<h3>Disabled menu options</h3>
<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
<div class="bs-docs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
<li><a tabindex="-1" href="#">Another link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
<li><a tabindex="-1" href="#">Another link</a></li>
</ul>
{% endhighlight %}
<h3>Sub menus on dropdowns</h3>
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
<div class="bs-docs-example bs-docs-example-submenu">
<div class="pull-left">
<p class="muted">Default</p>
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="pull-left">
<p class="muted">Dropup</p>
<div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="pull-left">
<p class="muted">Left submenu</p>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-left">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
{% highlight html linenos %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
...
<li class="dropdown-submenu pull-left">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
...
</ul>
{% endhighlight %}
</section>
<!-- Button Groups
================================================== -->
<section id="buttonGroups">
<div class="page-header">
<h1>Button groups</h1>
</div>
<p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="./javascript.html#buttons">our buttons plugin</a>.</p>
<h3>Single button group</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bs-docs-example">
<div class="btn-group" style="margin: 9px 0 5px;">
<button type="button" class="btn">Left</button>
<button type="button" class="btn">Middle</button>
<button type="button" class="btn">Right</button>
</div>
</div>
{% highlight html linenos %}
<div class="btn-group">
<button type="button" class="btn">Left</button>
<button type="button" class="btn">Middle</button>
<button type="button" class="btn">Right</button>
</div>
{% endhighlight %}
<h3>Multiple button groups</h3>
<p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button type="button" class="btn">1</button>
<button type="button" class="btn">2</button>
<button type="button" class="btn">3</button>
<button type="button" class="btn">4</button>
</div>
<div class="btn-group">
<button type="button" class="btn">5</button>
<button type="button" class="btn">6</button>
<button type="button" class="btn">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn">8</button>
</div>
</div>
</div>
{% highlight html linenos %}
<div class="btn-toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>
{% endhighlight %}
<h3>Vertical button groups</h3>
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
<div class="bs-docs-example">
<div class="btn-group btn-group-vertical">
<button type="button" class="btn"><i class="glyphicon glyphicon-align-left"></i></button>
<button type="button" class="btn"><i class="glyphicon glyphicon-align-center"></i></button>
<button type="button" class="btn"><i class="glyphicon glyphicon-align-right"></i></button>
<button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button>
</div>
</div>
{% highlight html linenos %}
<div class="btn-group btn-group-vertical">
...
</div>
{% endhighlight %}
<h3>Justified button groups</h3>
<p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
<div class="bs-docs-example">
<div class="btn-group btn-group-justified">
<a href="#" class="btn">Left</a>
<a href="#" class="btn">Right</a>
<a href="#" class="btn">Middle</a>
</div>
</div>
{% highlight html linenos %}
<div class="btn-group btn-group-justified">
...
</div>
{% endhighlight %}
</section>
<!-- Split button dropdowns
================================================== -->
<section id="buttonDropdowns">
<div class="page-header">
<h1>Button dropdown menus</h1>
</div>
<p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup. Requires the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a>.</p>
<h3>Single or split button</h3>
<p>Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.</p>
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin-bottom: 10px;">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-primary">Action</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-danger">Danger</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-warning">Warning</button>
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-success">Success</button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div>
{% highlight html linenos %}
<!-- Single button -->
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- Split button -->
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
{% endhighlight %}
<h3>Works with all button sizes</h3>
<p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
Mini button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div><!-- /example -->
{% highlight html linenos %}
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Mini button group -->
<div class="btn-group">
<button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
Mini button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
{% endhighlight %}
<h3>Dropup buttons</h3>
<p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
<div class="bs-docs-example">
<div class="btn-toolbar">
<div class="btn-group dropup">
<button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn primary">Right dropup</button>
<button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="btn-group dropup">
<button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
{% endhighlight %}
</section>
<!-- Navs
================================================== -->
<section id="navs">
<div class="page-header">
<h1>Navs</small></h1>
</div>
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
<h2>Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<div class="bs-docs-example">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html linenos %}
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
{% endhighlight %}
<h2>List</h2>
<p>Swap the tabs class for <code>.nav-list</code>.</p>
<div class="bs-docs-example">
<ul class="nav nav-list" style="max-width: 300px;">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html linenos %}
<ul class="nav nav-list">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
{% endhighlight %}
<h2>Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html linenos %}
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
{% endhighlight %}
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-docs-example">
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html linenos %}
<ul class="nav nav-pills nav-stacked">
...
</ul>
{% endhighlight %}
<h2>Options</h2>
<h3>Justified links</h3>
<p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
<div class="bs-docs-example">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<br>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html linenos %}
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
{% endhighlight %}
<h3>Disabled state</h3>
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<li><a href="#">Clickable link</a></li>
<li><a href="#">Clickable link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
</ul>
</div>
{% highlight html linenos %}
<ul class="nav nav-tabs">
...
<li class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
{% endhighlight %}
<h3>Component alignment</h3>
<p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<hr class="bs-docs-separator">
<h2>Dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>
<div class="bs-docs-example">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
{% highlight html linenos %}
<ul class="nav nav-tabs">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
{% endhighlight %}
<h3>Pills with dropdowns</h3>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /example -->
{% highlight html linenos %}
<ul class="nav nav-pills">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
{% endhighlight %}
</section>
<!-- Navbar
================================================== -->
<section id="navbar">
<div class="page-header">
<h1>Navbar</h1>
</div>
<h2>Basic navbar</h2>
<p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
<div class="bs-docs-example">
<div class="navbar">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="navbar">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
{% endhighlight %}
<h2>Navbar components</h2>
<h3>Brand</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<div class="bs-docs-example">
<div class="navbar">
<a class="navbar-brand" href="#">Title</a>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<a class="navbar-brand" href="#">Title</a>
{% endhighlight %}
<h3>Nav links</h3>
<p>Nav items are simple to add via unordered lists.</p>
<div class="bs-docs-example">
<div class="navbar">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
</ul>
{% endhighlight %}
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
<div class="bs-docs-example">
<div class="navbar">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li class="divider"></li>
<li><a href="#">Link</a></li>
<li class="divider"></li>
<li><a href="#">Link</a></li>
<li class="divider"></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<ul class="nav">
...
<li class="divider"></li>
...
</ul>
{% endhighlight %}
<h3>Forms</h3>
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
<div class="bs-docs-example">
<div class="navbar">
<form class="navbar-form pull-left">
<input type="text" style="width: 200px;">
<button type="submit" class="btn">Submit</button>
</form>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<form class="navbar-form pull-left">
<input type="text" style="width: 200px;">
<button type="submit" class="btn">Submit</button>
</form>
{% endhighlight %}
<h3>Component alignment</h3>
<p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<h3>Using dropdowns</h3>
<p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Text</h3>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
<h2>Optional display variations</h2>
<p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
<h3>Fixed to top</h3>
<p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<div class="bs-docs-example bs-navbar-top-example">
<div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="navbar navbar-fixed-top">
...
</div>
{% endhighlight %}
<h3>Fixed to bottom</h3>
<p>Add <code>.navbar-fixed-bottom</code> instead.</p>
<div class="bs-docs-example bs-navbar-bottom-example">
<div class="navbar navbar-fixed-bottom" style="position: absolute; bottom: -1px;">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="navbar navbar-fixed-bottom">
...
</div>
{% endhighlight %}
<h3>Static top navbar</h3>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p>
<div class="bs-docs-example bs-navbar-top-example">
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="navbar navbar-static-top">
...
</div>
{% endhighlight %}
<h2>Responsive navbar</h2>
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="span8" placeholder="Search">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
</div><!-- /example -->
{% highlight html linenos %}
<div class="navbar">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="navbar-brand" href="#">Title</a>
<!-- Place everything within .navbar-collapse to hide it until above 768px -->
<div class="nav-collapse collapse navbar-responsive-collapse">
...
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
{% endhighlight %}
<div class="alert alert-info">
<strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
</div>
<h2>Inverted variation</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-docs-example">
<div class="navbar navbar-inverse" style="position: static;">
<div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="span8" placeholder="Search">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar -->
</div><!-- /example -->
{% highlight html linenos %}
<div class="navbar navbar-inverse">
...
</div>
{% endhighlight %}
</section>
<!-- Breadcrumbs
================================================== -->
<section id="breadcrumbs">
<div class="page-header">
<h1>Breadcrumbs <small></small></h1>
</div>
<p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
<div class="bs-docs-example">
<ul class="breadcrumb">
<li class="active">Home</li>
</ul>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li class="active">Library</li>
</ul>
<ul class="breadcrumb" style="margin-bottom: 5px;">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ul>
</div>
{% highlight html linenos %}
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ul>
{% endhighlight %}
</section>
<!-- Pagination
================================================== -->
<section id="pagination">
<div class="page-header">
<h1>Pagination</h1>
</div>
<p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="./components.html#pagination-pager">pager alternative</a>.</p>
<h2>Standard pagination</h2>
<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
<div class="bs-docs-example">
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
{% highlight html linenos %}
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
{% endhighlight %}
<h3>Disabled and active states</h3>
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<div class="bs-docs-example">
<ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
{% highlight html linenos %}
<ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
...
</ul>
{% endhighlight %}
<p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p>
{% highlight html linenos %}
<ul class="pagination">
<li class="disabled"><span>&laquo;</span></li>
<li class="active"><span>1</span></li>
...
</ul>
{% endhighlight %}
<h3>Sizes</h3>
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
<div class="bs-docs-example">
<div>
<ul class="pagination pagination-large">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
<div>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
<div>
<ul class="pagination pagination-small">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
<div>
<ul class="pagination pagination-mini">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
</div>
{% highlight html linenos %}
<ul class="pagination pagination-large">...</ul>
<ul class="pagination pagination">...</ul>
<ul class="pagination pagination-small">...</ul>
<ul class="pagination pagination-mini">...</ul>
{% endhighlight %}
<h2 id="pagination-pager">Pager</h2>
<p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
<h3>Default example</h3>
<p>By default, the pager centers links.</p>
<div class="bs-docs-example">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
{% highlight html linenos %}
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
{% endhighlight %}
<h3>Aligned links</h3>
<p>Alternatively, you can align each link to the sides:</p>
<div class="bs-docs-example">
<ul class="pager">
<li class="previous"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
</div>
{% highlight html linenos %}
<ul class="pager">
<li class="previous"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
{% endhighlight %}
<h3>Optional disabled state</h3>
<p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>
<div class="bs-docs-example">
<ul class="pager">
<li class="previous disabled"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
</div>
{% highlight html linenos %}
<ul class="pager">
<li class="previous disabled"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
{% endhighlight %}
</section>
<!-- Labels
================================================== -->
<section id="labels">
<div class="page-header">
<h1>Labels</h1>
</div>
<p class="lead"></p>
<h3>Example</h3>
<div class="bs-docs-example">
<h1>Example heading <span class="label">New</span></h1>
<h2>Example heading <span class="label">New</span></h2>
<h3>Example heading <span class="label">New</span></h3>
<h4>Example heading <span class="label">New</span></h4>
<h5>Example heading <span class="label">New</span></h5>
<h6>Example heading <span class="label">New</span></h6>
</div>
{% highlight html linenos %}
<h3>Example heading <span class="label">New</span></h3>
{% endhighlight %}
<h3>Available variations</h3>
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Markup</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="label">Default</span>
</td>
<td>
<code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-success">Success</span>
</td>
<td>
<code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-warning">Warning</span>
</td>
<td>
<code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-danger">Danger</span>
</td>
<td>
<code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-info">Info</span>
</td>
<td>
<code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
</section>
<!-- Badges
================================================== -->
<section id="badges">
<div class="page-header">
<h1>Badges</h1>
</div>
<p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
<div class="bs-docs-example">
<a href="#">Inbox <span class="badge">42</span></a>
</div>
{% highlight html linenos %}
<a href="#">Inbox <span class="badge">42</span></a>
{% endhighlight %}
<h4>Self collapsing</h4>
<p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
<h4>Adapts to active nav states</h4>
<p>Built-in styles are included for placing badges in active states in pill and list navigations.</p>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br>
<ul class="nav nav-list" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
Home
</a>
</li>
<li><a href="#">Profile</a></li>
<li>
<a href="#">
<span class="badge pull-right">3</span>
Messages
</a>
</li>
</ul>
</div>
{% highlight html linenos %}
<ul class="nav nav-list">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
Home
</a>
</li>
...
</ul>
{% endhighlight %}
</section>
<!-- Typographic components
================================================== -->
<section id="typography">
<div class="page-header">
<h1>Typographic components</h1>
</div>
<h2>Jumbotron</h2>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<div class="bs-docs-example">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</div>
{% highlight html linenos %}
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
{% endhighlight %}
<h2>Page header</h2>
<p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
<div class="bs-docs-example">
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
</div>
{% highlight html linenos %}
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
{% endhighlight %}
</section>
<!-- Thumbnails
================================================== -->
<section id="thumbnails">
<div class="page-header">
<h1>Thumbnails</h1>
</div>
<p class="lead">Extend Bootstrap's <a href="./css/#gridsystem">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
<h3>Default thumbnails</h3>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<div class="bs-docs-example">
<div class="row">
<div class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
<div class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
<div class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
<div class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
</div>
</div><!-- /.bs-docs-example -->
{% highlight html linenos %}
<div class="row">
<div class="span3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
...
</div>
{% endhighlight %}
<h3>Custom content thumbnails</h3>
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<div class="bs-docs-example">
<div class="row">
<div class="span4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</div>
<div class="span4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</div>
<div class="span4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</div>
</div>
</div><!-- /.bs-docs-example -->
{% highlight html linenos %}
<div class="row">
<div class="span3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</div>
</div>
{% endhighlight %}
</section>
<!-- Alerts
================================================== -->
<section id="alerts">
<div class="page-header">
<h1>Alerts</h1>
</div>
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="./javascript.html#alerts">alerts jQuery plugin</a>.</p>
<h3>Default alert</h3>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
<div class="bs-docs-example">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
{% highlight html linenos %}
<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
{% endhighlight %}
<h3>Block alerts</h3>
<p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
<div class="bs-docs-example">
<div class="alert alert-block">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<h4>Warning!</h4>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
</div>
{% highlight html linenos %}
<div class="alert alert-block">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<h4>Warning!</h4>
<p>...</p>
</div>
{% endhighlight %}
<h3>Contextual alternatives</h3>
<p>Add optional classes to change an alert's connotation.</p>
<div class="bs-docs-example">
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
</div>
{% highlight html linenos %}
<div class="alert alert-error">...</div>
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
{% endhighlight %}
</section>
<!-- Progress bars
================================================== -->
<section id="progress">
<div class="page-header">
<h1>Progress bars</h1>
</div>
<p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
<p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in IE8-9 or older versions of Firefox. Internet Explorer 10 and below, as well as Opera 12, do not support animations.</p>
<h3>Basic</h3>
<p>Default progress bar with a vertical gradient.</p>
<div class="bs-docs-example">
<div class="progress">
<div class="progress-bar" style="width: 60%;"></div>
</div>
</div>
{% highlight html linenos %}
<div class="progress">
<div class="progress-bar" style="width: 60%;"></div>
</div>
{% endhighlight %}
<h3>Additional colors</h3>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-docs-example">
<div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>
</div>
{% highlight html linenos %}
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>
{% endhighlight %}
<h3>Striped</h3>
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-docs-example">
<div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>
</div>
{% highlight html linenos %}
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>
{% endhighlight %}
<h3>Animated</h3>
<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
<div class="bs-docs-example">
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div>
</div>
</div>
{% highlight html linenos %}
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div>
</div>
{% endhighlight %}
<h3>Stacked</h3>
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
<div class="bs-docs-example">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>
</div>
{% highlight html linenos %}
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>
{% endhighlight %}
</section>
<!-- Media object
================================================== -->
<section id="media">
<div class="page-header">
<h1>Media object</h1>
</div>
<p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
<h3>Default example</h3>
<p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
<div class="bs-docs-example">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
</div><!-- /.bs-docs-example -->
{% highlight html linenos %}
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
{% endhighlight %}
<h3>Media list</h3>
<p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
<div class="bs-docs-example">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div>
</div>
</div>
</li>
<li class="media">
<a class="pull-right" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div>
</li>
</ul>
</div>
{% highlight html linenos %}
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
{% endhighlight %}
</section>
<!-- Miscellaneous
================================================== -->
<section id="misc">
<div class="page-header">
<h1>Miscellaneous <small>Lightweight utility components</small></h1>
</div>
<h2>Wells</h2>
<p>Use the well as a simple effect on an element to give it an inset effect.</p>
<div class="bs-docs-example">
<div class="well">
Look, I'm in a well!
</div>
</div>
{% highlight html linenos %}
<div class="well">...</div>
{% endhighlight %}
<h3>Optional classes</h3>
<p>Control padding and rounded corners with two optional modifier classes.</p>
<div class="bs-docs-example">
<div class="well well-large">
Look, I'm in a well!
</div>
</div>
{% highlight html linenos %}
<div class="well well-large">...</div>
{% endhighlight %}
<div class="bs-docs-example">
<div class="well well-small">
Look, I'm in a well!
</div>
</div>
{% highlight html linenos %}
<div class="well well-small">...</div>
{% endhighlight %}
<h2>Close icon</h2>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<div class="bs-docs-example">
<p><button class="close" style="float: none;">&times;</button></p>
</div>
{% highlight html linenos %}
<button class="close" style="float: none;">&times;</button>
{% endhighlight %}
<h2>Helper classes</h2>
<p>Simple, focused classes for small display or behavior tweaks.</p>
<h4>.pull-left</h4>
<p>Float an element left</p>
{% highlight html linenos %}
<div class="pull-left">...</div>
{% endhighlight %}
{% highlight css linenos %}
.pull-left {
float: left;
}
{% endhighlight %}
<h4>.pull-right</h4>
<p>Float an element right</p>
{% highlight html linenos %}
<div class="pull-right">...</div>
{% endhighlight %}
{% highlight css linenos %}
.pull-right {
float: right;
}
{% endhighlight %}
<h4>.muted</h4>
<p>Change an element's color to <code>#999</code></p>
{% highlight html linenos %}
<p class="muted">...</p>
{% endhighlight %}
{% highlight css linenos %}
.muted {
color: #999;
}
{% endhighlight %}
<h4>.clearfix</h4>
<p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
{% highlight html linenos %}
<div class="clearfix">...</div>
{% endhighlight %}
{% highlight css linenos %}
.clearfix {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
{% endhighlight %}
</section>
</div><!-- /span9 -->
</div><!-- row -->
</div><!-- /.container -->
docs/css.html deleted 100644 → 0
View file @ 41c78256
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/customize.html
View file @ 3c7a43a1
...@@ -3,32 +3,17 @@ layout: default ...@@ -3,32 +3,17 @@ layout: default
title: Customize and download title: Customize and download
--- ---
<div class="bs-docs-sidebar">
<!-- Masthead <h5 class="bs-docs-sidenav-heading">Customize and download</h5>
================================================== --> <ul class="nav bs-docs-sidenav">
<header class="bs-docs-jumbotron subhead"> <li><a href="#components">1. Choose components</a></li>
<div class="container"> <li><a href="#plugins">2. Select jQuery plugins</a></li>
<h1>Customize and download</h1> <li><a href="#variables">3. Customize variables</a></li>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p> <li><a href="#download">4. Download</a></li>
</div>
</header>
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row">
<div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#components"><i class="glyphicon glyphicon-chevron-right"></i> 1. Choose components</a></li>
<li><a href="#plugins"><i class="glyphicon glyphicon-chevron-right"></i> 2. Select jQuery plugins</a></li>
<li><a href="#variables"><i class="glyphicon glyphicon-chevron-right"></i> 3. Customize variables</a></li>
<li><a href="#download"><i class="glyphicon glyphicon-chevron-right"></i> 4. Download</a></li>
</ul> </ul>
</div> </div>
<div class="col-span-9">
<div class="container bs-docs-container">
<!-- Customize form <!-- Customize form
================================================== --> ================================================== -->
...@@ -41,7 +26,7 @@ title: Customize and download ...@@ -41,7 +26,7 @@ title: Customize and download
</h1> </h1>
</div> </div>
<div class="row download-builder"> <div class="row download-builder">
<div class="span3"> <div class="col-span-3">
<h3>Scaffolding</h3> <h3>Scaffolding</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> Normalize and reset</label> <label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> Normalize and reset</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="print.less"> Print</label> <label class="checkbox"><input checked="checked" type="checkbox" value="print.less"> Print</label>
...@@ -57,7 +42,7 @@ title: Customize and download ...@@ -57,7 +42,7 @@ title: Customize and download
<label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label> <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="sprites.less"> Icons</label> <label class="checkbox"><input checked="checked" type="checkbox" value="sprites.less"> Icons</label>
</div><!-- /span --> </div><!-- /span -->
<div class="span3"> <div class="col-span-3">
<h3>Components</h3> <h3>Components</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label> <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label> <label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label>
...@@ -78,7 +63,7 @@ title: Customize and download ...@@ -78,7 +63,7 @@ title: Customize and download
<label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label> <label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label> <label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label>
</div><!-- /span --> </div><!-- /span -->
<div class="span3"> <div class="col-span-3">
<h3>Miscellaneous</h3> <h3>Miscellaneous</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> Wells</label> <label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> Wells</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label> <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
...@@ -102,7 +87,7 @@ title: Customize and download ...@@ -102,7 +87,7 @@ title: Customize and download
</h1> </h1>
</div> </div>
<div class="row download-builder"> <div class="row download-builder">
<div class="span3"> <div class="col-span-3">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-transition.js"> <input type="checkbox" checked="true" value="bootstrap-transition.js">
Transitions <small>(required for any animation)</small> Transitions <small>(required for any animation)</small>
...@@ -132,7 +117,7 @@ title: Customize and download ...@@ -132,7 +117,7 @@ title: Customize and download
Popovers <small>(requires Tooltips)</small> Popovers <small>(requires Tooltips)</small>
</label> </label>
</div><!-- /span --> </div><!-- /span -->
<div class="span3"> <div class="col-span-3">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-affix.js"> <input type="checkbox" checked="true" value="bootstrap-affix.js">
Affix Affix
...@@ -158,7 +143,7 @@ title: Customize and download ...@@ -158,7 +143,7 @@ title: Customize and download
Typeahead Typeahead
</label> </label>
</div><!-- /span --> </div><!-- /span -->
<div class="span3"> <div class="col-span-3">
<h4 class="muted">Heads up!</h4> <h4 class="muted">Heads up!</h4>
<p class="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p> <p class="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
</div><!-- /span --> </div><!-- /span -->
...@@ -174,183 +159,183 @@ title: Customize and download ...@@ -174,183 +159,183 @@ title: Customize and download
</h1> </h1>
</div> </div>
<div class="row download-builder"> <div class="row download-builder">
<div class="span3"> <div class="col-span-3">
<h3>Scaffolding</h3> <h3>Scaffolding</h3>
<label>@body-background</label> <label>@body-background</label>
<input type="text" class="span3" placeholder="#fff"> <input type="text" placeholder="#fff">
<label>@text-color</label> <label>@text-color</label>
<input type="text" class="span3" placeholder="@grayDark"> <input type="text" placeholder="@grayDark">
<h3>Links</h3> <h3>Links</h3>
<label>@link-color</label> <label>@link-color</label>
<input type="text" class="span3" placeholder="#08c"> <input type="text" placeholder="#08c">
<label>@link-color-hover</label> <label>@link-color-hover</label>
<input type="text" class="span3" placeholder="darken(@link-color, 15%)"> <input type="text" placeholder="darken(@link-color, 15%)">
<h3>Grid system</h3> <h3>Grid system</h3>
<label>@grid-columns</label> <label>@grid-columns</label>
<input type="text" class="span3" placeholder="12"> <input type="text" placeholder="12">
<label>@grid-column-width</label> <label>@grid-column-width</label>
<input type="text" class="span3" placeholder="60px"> <input type="text" placeholder="60px">
<label>@grid-gutter-width</label> <label>@grid-gutter-width</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" placeholder="20px">
<label>@grid-column-width-1200</label> <label>@grid-column-width-1200</label>
<input type="text" class="span3" placeholder="70px"> <input type="text" placeholder="70px">
<label>@grid-gutter-width-1200</label> <label>@grid-gutter-width-1200</label>
<input type="text" class="span3" placeholder="30px"> <input type="text" placeholder="30px">
<label>@grid-column-width-768</label> <label>@grid-column-width-768</label>
<input type="text" class="span3" placeholder="42px"> <input type="text" placeholder="42px">
<label>@grid-gutter-width-768</label> <label>@grid-gutter-width-768</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" placeholder="20px">
</div><!-- /span --> </div><!-- /span -->
<div class="span3"> <div class="col-span-3">
<h3>Typography</h3> <h3>Typography</h3>
<label>@font-family-sans-serif</label> <label>@font-family-sans-serif</label>
<input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> <input type="text" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
<label>@font-family-serif</label> <label>@font-family-serif</label>
<input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif"> <input type="text" placeholder="Georgia, 'Times New Roman', Times, serif">
<label>@font-family-monospace</label> <label>@font-family-monospace</label>
<input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace"> <input type="text" placeholder="Menlo, Monaco, 'Courier New', monospace">
<label>@font-size-base</label> <label>@font-size-base</label>
<input type="text" class="span3" placeholder="14px"> <input type="text" placeholder="14px">
<label>@font-family-base</label> <label>@font-family-base</label>
<input type="text" class="span3" placeholder="@font-family-sans-serif"> <input type="text" placeholder="@font-family-sans-serif">
<label>@line-height-base</label> <label>@line-height-base</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" placeholder="20px">
<label>@headings-font-family</label> <label>@headings-font-family</label>
<input type="text" class="span3" placeholder="inherit"> <input type="text" placeholder="inherit">
<label>@headings-font-weight</label> <label>@headings-font-weight</label>
<input type="text" class="span3" placeholder="bold"> <input type="text" placeholder="bold">
<label>@headingsColor</label> <label>@headingsColor</label>
<input type="text" class="span3" placeholder="inherit"> <input type="text" placeholder="inherit">
<label>@font-size-large</label> <label>@font-size-large</label>
<input type="text" class="span3" placeholder="@font-size-base * 1.25"> <input type="text" placeholder="@font-size-base * 1.25">
<label>@font-size-small</label> <label>@font-size-small</label>
<input type="text" class="span3" placeholder="@font-size-base * 0.85"> <input type="text" placeholder="@font-size-base * 0.85">
<label>@font-size-mini</label> <label>@font-size-mini</label>
<input type="text" class="span3" placeholder="@font-size-base * 0.75"> <input type="text" placeholder="@font-size-base * 0.75">
<label>@padding-large</label> <label>@padding-large</label>
<input type="text" class="span3" placeholder="11px 19px"> <input type="text" placeholder="11px 19px">
<label>@padding-small</label> <label>@padding-small</label>
<input type="text" class="span3" placeholder="2px 10px"> <input type="text" placeholder="2px 10px">
<label>@padding-mini</label> <label>@padding-mini</label>
<input type="text" class="span3" placeholder="1px 6px"> <input type="text" placeholder="1px 6px">
<label>@border-radius-base</label> <label>@border-radius-base</label>
<input type="text" class="span3" placeholder="4px"> <input type="text" placeholder="4px">
<label>@border-radius-large</label> <label>@border-radius-large</label>
<input type="text" class="span3" placeholder="6px"> <input type="text" placeholder="6px">
<label>@border-radius-small</label> <label>@border-radius-small</label>
<input type="text" class="span3" placeholder="3px"> <input type="text" placeholder="3px">
<label>@hero-background</label> <label>@hero-background</label>
<input type="text" class="span3" placeholder="@grayLighter"> <input type="text" placeholder="@grayLighter">
<label>@hero-heading-color</label> <label>@hero-heading-color</label>
<input type="text" class="span3" placeholder="inherit"> <input type="text" placeholder="inherit">
<label>@hero-lead-color</label> <label>@hero-lead-color</label>
<input type="text" class="span3" placeholder="inherit"> <input type="text" placeholder="inherit">
<h3>Tables</h3> <h3>Tables</h3>
<label>@table-background</label> <label>@table-background</label>
<input type="text" class="span3" placeholder="transparent"> <input type="text" placeholder="transparent">
<label>@table-background-accent</label> <label>@table-background-accent</label>
<input type="text" class="span3" placeholder="#f9f9f9"> <input type="text" placeholder="#f9f9f9">
<label>@table-background-hover</label> <label>@table-background-hover</label>
<input type="text" class="span3" placeholder="#f5f5f5"> <input type="text" placeholder="#f5f5f5">
<label>@table-border</label> <label>@table-border-color</label>
<input type="text" class="span3" placeholder="#ddd"> <input type="text" placeholder="#ddd">
<h3>Forms</h3> <h3>Forms</h3>
<label>@input-color-placeholder</label> <label>@input-color-placeholder</label>
<input type="text" class="span3" placeholder="@grayLight"> <input type="text" placeholder="@grayLight">
<label>@input-background</label> <label>@input-background</label>
<input type="text" class="span3" placeholder="#fff"> <input type="text" placeholder="#fff">
<label>@input-border</label> <label>@input-border</label>
<input type="text" class="span3" placeholder="#ccc"> <input type="text" placeholder="#ccc">
<label>@input-border-radius</label> <label>@input-border-radius</label>
<input type="text" class="span3" placeholder="3px"> <input type="text" placeholder="3px">
<label>@input-background-disabled</label> <label>@input-background-disabled</label>
<input type="text" class="span3" placeholder="@grayLighter"> <input type="text" placeholder="@grayLighter">
<label>@form-actions-background</label> <label>@form-actions-background</label>
<input type="text" class="span3" placeholder="#f5f5f5"> <input type="text" placeholder="#f5f5f5">
<label>@btn-backround-primary</label> <label>@btn-backround-primary</label>
<input type="text" class="span3" placeholder="@link-color"> <input type="text" placeholder="@link-color">
<label>@btn-backround-primary-highlight</label> <label>@btn-backround-primary-highlight</label>
<input type="text" class="span3" placeholder="darken(#fff, 10%)"> <input type="text" placeholder="darken(#fff, 10%)">
</div><!-- /span --> </div><!-- /span -->
<div class="span3"> <div class="col-span-3">
<h3>Form states &amp; alerts</h3> <h3>Form states &amp; alerts</h3>
<label>@state-warning-text</label> <label>@state-warning-text</label>
<input type="text" class="span3" placeholder="#c09853"> <input type="text" placeholder="#c09853">
<label>@state-warning-background</label> <label>@state-warning-background</label>
<input type="text" class="span3" placeholder="#fcf8e3"> <input type="text" placeholder="#fcf8e3">
<label>@state-error-text</label> <label>@state-error-text</label>
<input type="text" class="span3" placeholder="#b94a48"> <input type="text" placeholder="#b94a48">
<label>@state-error-background</label> <label>@state-error-background</label>
<input type="text" class="span3" placeholder="#f2dede"> <input type="text" placeholder="#f2dede">
<label>@state-success-text</label> <label>@state-success-text</label>
<input type="text" class="span3" placeholder="#468847"> <input type="text" placeholder="#468847">
<label>@state-success-background</label> <label>@state-success-background</label>
<input type="text" class="span3" placeholder="#dff0d8"> <input type="text" placeholder="#dff0d8">
<label>@state-info-text</label> <label>@state-info-text</label>
<input type="text" class="span3" placeholder="#3a87ad"> <input type="text" placeholder="#3a87ad">
<label>@state-info-background</label> <label>@state-info-background</label>
<input type="text" class="span3" placeholder="#d9edf7"> <input type="text" placeholder="#d9edf7">
<h3>Navbar</h3> <h3>Navbar</h3>
<label>@navbar-height</label> <label>@navbar-height</label>
<input type="text" class="span3" placeholder="40px"> <input type="text" placeholder="40px">
<label>@navbar-background</label> <label>@navbar-background</label>
<input type="text" class="span3" placeholder="@grayDarker"> <input type="text" placeholder="@grayDarker">
<label>@navbar-background-highlight</label> <label>@navbar-background-highlight</label>
<input type="text" class="span3" placeholder="@grayDark"> <input type="text" placeholder="@grayDark">
<label>@navbar-text</label> <label>@navbar-color</label>
<input type="text" class="span3" placeholder="@grayLight"> <input type="text" placeholder="@grayLight">
<label>@navbar-brand-color</label> <label>@navbar-brand-color</label>
<input type="text" class="span3" placeholder="@navbar-link-color"> <input type="text" placeholder="@navbar-link-color">
<label>@navbar-link-color</label> <label>@navbar-link-color</label>
<input type="text" class="span3" placeholder="@grayLight"> <input type="text" placeholder="@grayLight">
<label>@navbar-link-color-hover</label> <label>@navbar-link-color-hover</label>
<input type="text" class="span3" placeholder="#fff"> <input type="text" placeholder="#fff">
<label>@navbar-link-color-active</label> <label>@navbar-link-color-active</label>
<input type="text" class="span3" placeholder="@navbar-link-color-hover"> <input type="text" placeholder="@navbar-link-color-hover">
<label>@navbar-link-background-hover</label> <label>@navbar-link-background-hover</label>
<input type="text" class="span3" placeholder="transparent"> <input type="text" placeholder="transparent">
<label>@navbar-link-background-active</label> <label>@navbar-link-background-active</label>
<input type="text" class="span3" placeholder="@navbar-background"> <input type="text" placeholder="@navbar-background">
<label>@navbarSearchBackground</label> <label>@navbarSearchBackground</label>
<input type="text" class="span3" placeholder="lighten(@navbar-background, 25%)"> <input type="text" placeholder="lighten(@navbar-background, 25%)">
<label>@navbarSearchBackgroundFocus</label> <label>@navbarSearchBackgroundFocus</label>
<input type="text" class="span3" placeholder="#fff"> <input type="text" placeholder="#fff">
<label>@navbarSearchBorder</label> <label>@navbarSearchBorder</label>
<input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)"> <input type="text" placeholder="darken(@navbarSearchBackground, 30%)">
<label>@navbarSearchPlaceholderColor</label> <label>@navbarSearchPlaceholderColor</label>
<input type="text" class="span3" placeholder="#ccc"> <input type="text" placeholder="#ccc">
<label>@navbar-collapse-width</label> <label>@navbar-collapse-width</label>
<input type="text" class="span3" placeholder="979px"> <input type="text" placeholder="979px">
<label>@navbar-collapse-width-desktop</label> <label>@navbar-collapse-width-desktop</label>
<input type="text" class="span3" placeholder="@navbar-collapse-width + 1"> <input type="text" placeholder="@navbar-collapse-width + 1">
<h3>Dropdowns</h3> <h3>Dropdowns</h3>
<label>@dropdown-background</label> <label>@dropdown-background</label>
<input type="text" class="span3" placeholder="#fff"> <input type="text" placeholder="#fff">
<label>@dropdown-border</label> <label>@dropdown-border</label>
<input type="text" class="span3" placeholder="rgba(0,0,0,.2)"> <input type="text" placeholder="rgba(0,0,0,.2)">
<label>@dropdown-link-color</label> <label>@dropdown-link-color</label>
<input type="text" class="span3" placeholder="@grayDark"> <input type="text" placeholder="@grayDark">
<label>@dropdown-link-color-hover</label> <label>@dropdown-link-color-hover</label>
<input type="text" class="span3" placeholder="#fff"> <input type="text" placeholder="#fff">
<label>@dropdown-link-background-hover</label> <label>@dropdown-link-background-hover</label>
<input type="text" class="span3" placeholder="@link-color"> <input type="text" placeholder="@link-color">
</div><!-- /span --> </div><!-- /span -->
</div><!-- /row --> </div><!-- /row -->
</section> </section>
...@@ -370,8 +355,4 @@ title: Customize and download ...@@ -370,8 +355,4 @@ title: Customize and download
</form> </form>
</div><!-- /span9 -->
</div><!-- row -->
</div><!-- /.container --> </div><!-- /.container -->
docs/docs.html 0 → 100644
View file @ 3c7a43a1
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/examples/carousel.html
View file @ 3c7a43a1
...@@ -27,37 +27,6 @@ body { ...@@ -27,37 +27,6 @@ body {
left: 0; left: 0;
right: 0; right: 0;
z-index: 10; z-index: 10;
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
.navbar-wrapper .navbar {
}
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner {
border: 0;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
/* Downsize the brand/project name a bit */
.navbar .brand {
padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
/* Navbar links: increase padding for taller navbar */
.navbar .nav > li > a {
padding: 15px 20px;
}
/* Offset the responsive button for proper vertical alignment */
.navbar .navbar-toggle {
margin-top: 10px;
} }
...@@ -69,22 +38,12 @@ body { ...@@ -69,22 +38,12 @@ body {
.carousel { .carousel {
margin-bottom: 60px; margin-bottom: 60px;
} }
/* Since positioning the image, we need to help out the caption */
.carousel .container { .carousel-caption {
position: relative;
z-index: 9;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10; z-index: 10;
} }
/* Declare heights because of positioning of img element */
.carousel .item { .carousel .item {
height: 500px; height: 500px;
} }
...@@ -96,37 +55,26 @@ body { ...@@ -96,37 +55,26 @@ body {
height: 500px; height: 500px;
} }
.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
/* MARKETING CONTENT /* MARKETING CONTENT
-------------------------------------------------- */ -------------------------------------------------- */
/* Pad the edges of the mobile views a bit */
.marketing {
padding-left: 15px;
padding-right: 15px;
}
/* Center align the text within the three columns below the carousel */ /* Center align the text within the three columns below the carousel */
.marketing .col-span-4 { .marketing .col-lg-4 {
text-align: center; text-align: center;
margin-bottom: 20px;
} }
.marketing h2 { .marketing h2 {
font-weight: normal; font-weight: normal;
} }
.marketing .col-span-4 p { .marketing .col-lg-4 p {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
...@@ -167,16 +115,40 @@ body { ...@@ -167,16 +115,40 @@ body {
/* RESPONSIVE CSS /* RESPONSIVE CSS
-------------------------------------------------- */ -------------------------------------------------- */
@media (max-width: 979px) { @media (min-width: 768px) {
/* Remve the edge padding needed for mobile */
.marketing {
padding-left: 0;
padding-right: 0;
}
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
/*@media (max-width: 979px) {
.container.navbar-wrapper { .container.navbar-wrapper {
margin-bottom: 0; margin-bottom: 0;
width: auto; width: auto;
} }
.navbar-inner {
border-radius: 0;
margin: -20px 0;
}
.carousel .item { .carousel .item {
height: 500px; height: 500px;
...@@ -202,10 +174,6 @@ body { ...@@ -202,10 +174,6 @@ body {
@media (max-width: 767px) { @media (max-width: 767px) {
.navbar-inner {
margin: -20px;
}
.carousel { .carousel {
margin-left: -20px; margin-left: -20px;
margin-right: -20px; margin-right: -20px;
...@@ -244,7 +212,19 @@ body { ...@@ -244,7 +212,19 @@ body {
line-height: 1.5; line-height: 1.5;
} }
} .navbar-wrapper {
margin-top: 0;
}
.navbar {
border-radius: 0;
}
#myCarousel {
margin-top: 54px;
}
}*/
</style> </style>
...@@ -252,25 +232,21 @@ body { ...@@ -252,25 +232,21 @@ body {
<!-- NAVBAR <!-- NAVBAR
================================================== --> ================================================== -->
<div class="navbar-wrapper"> <div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container"> <div class="container">
<div class="navbar navbar-inverse"> <div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"> <div class="container">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. --> <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </a>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
...@@ -284,52 +260,57 @@ body { ...@@ -284,52 +260,57 @@ body {
</ul> </ul>
</li> </li>
</ul> </ul>
</div><!--/.nav-collapse --> </div>
</div><!-- /.navbar-inner --> </div>
</div><!-- /.navbar --> </div>
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
</div>
</div>
<!-- Carousel <!-- Carousel
================================================== --> ================================================== -->
<div id="myCarousel" class="carousel slide"> <div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="item active"> <div class="item active">
<img src="../assets/img/examples/slide-01.jpg" alt=""> <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:First slide" alt="">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h1>Example headline.</h1> <h1>Example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a> <p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p>
</div> </div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img src="../assets/img/examples/slide-02.jpg" alt=""> <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Second slide" alt="">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h1>Another example headline.</h1> <h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a> <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div> </div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img src="../assets/img/examples/slide-03.jpg" alt=""> <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Third slide" alt="">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h1>One more for good measure.</h1> <h1>One more for good measure.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a> <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel --> </div><!-- /.carousel -->
...@@ -342,24 +323,24 @@ body { ...@@ -342,24 +323,24 @@ body {
<!-- Three columns of text below the carousel --> <!-- Three columns of text below the carousel -->
<div class="row"> <div class="row">
<div class="col-span-4"> <div class="col col-lg-4">
<img class="img-circle" data-src="holder.js/140x140"> <img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn" href="#">View details &raquo;</a></p> <p><a class="btn" href="#">View details &raquo;</a></p>
</div><!-- /.col-span-4 --> </div><!-- /.col-lg-4 -->
<div class="col-span-4"> <div class="col col-lg-4">
<img class="img-circle" data-src="holder.js/140x140"> <img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2> <h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn" href="#">View details &raquo;</a></p> <p><a class="btn" href="#">View details &raquo;</a></p>
</div><!-- /.col-span-4 --> </div><!-- /.col-lg-4 -->
<div class="col-span-4"> <div class="col col-lg-4">
<img class="img-circle" data-src="holder.js/140x140"> <img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details &raquo;</a></p> <p><a class="btn" href="#">View details &raquo;</a></p>
</div><!-- /.col-span-4 --> </div><!-- /.col-lg-4 -->
</div><!-- /.row --> </div><!-- /.row -->
...@@ -368,24 +349,24 @@ body { ...@@ -368,24 +349,24 @@ body {
<hr class="featurette-divider"> <hr class="featurette-divider">
<div class="featurette"> <div class="featurette">
<img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-chrome.png"> <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
<h2 class="featurette-heading">First featurette headling. <span class="muted">It'll blow your mind.</span></h2> <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<hr class="featurette-divider"> <hr class="featurette-divider">
<div class="featurette"> <div class="featurette">
<img class="featurette-image pull-left" src="../assets/img/examples/browser-icon-firefox.png"> <img class="featurette-image img-circle pull-left" data-src="holder.js/512x512">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="muted">See for yourself.</span></h2> <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<hr class="featurette-divider"> <hr class="featurette-divider">
<div class="featurette"> <div class="featurette">
<img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-safari.png"> <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
<h2 class="featurette-heading">And lastly, this one. <span class="muted">Checkmate.</span></h2> <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
......
docs/examples/grid.html 0 → 100644
View file @ 3c7a43a1
---
layout: example
title: Grid template
---
<!-- Custom styles for this template -->
<style>
.container {
padding-left: 15px;
padding-right: 15px;
}
.row {
margin-bottom: 20px;
margin-left: -15px;
margin-right: -15px;
}
[class*="col-lg-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
}
</style>
<div class="container">
<h2>Bootstrap grids</h2>
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
<h4>Three equal columns</h4>
<div class="row">
<div class="col col-lg-4">.col .col-lg-4</div>
<div class="col col-lg-4">.col .col-lg-4</div>
<div class="col col-lg-4">.col .col-lg-4</div>
</div>
<h4>Three unequal columns</h4>
<div class="row">
<div class="col col-lg-3">.col .col-lg-3</div>
<div class="col col-lg-6">.col .col-lg-6</div>
<div class="col col-lg-3">.col .col-lg-3</div>
</div>
<h4>Two columns</h4>
<div class="row">
<div class="col col-lg-8">.col .col-lg-8</div>
<div class="col col-lg-4">.col .col-lg-4</div>
</div>
<h4>Full width, single column</h4>
<p class="text-muted">No grid classes are necessary for full-width elements.</p>
</div> <!-- /container -->
docs/examples/jumbotron-narrow.html
View file @ 3c7a43a1
...@@ -94,7 +94,7 @@ title: Narrow page template ...@@ -94,7 +94,7 @@ title: Narrow page template
<li><a href="#">About</a></li> <li><a href="#">About</a></li>
<li><a href="#">Contact</a></li> <li><a href="#">Contact</a></li>
</ul> </ul>
<h3 class="muted">Project name</h3> <h3 class="text-muted">Project name</h3>
</div> </div>
<div class="jumbotron"> <div class="jumbotron">
...@@ -104,7 +104,7 @@ title: Narrow page template ...@@ -104,7 +104,7 @@ title: Narrow page template
</div> </div>
<div class="row marketing"> <div class="row marketing">
<div class="col-span-6"> <div class="col col-lg-6">
<h4>Subheading</h4> <h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
...@@ -115,7 +115,7 @@ title: Narrow page template ...@@ -115,7 +115,7 @@ title: Narrow page template
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div> </div>
<div class="col-span-6"> <div class="col col-lg-6">
<h4>Subheading</h4> <h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
......
docs/examples/jumbotron.html
View file @ 3c7a43a1
...@@ -46,7 +46,7 @@ title: Jumbotron template ...@@ -46,7 +46,7 @@ title: Jumbotron template
</a> </a>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
...@@ -85,17 +85,17 @@ title: Jumbotron template ...@@ -85,17 +85,17 @@ title: Jumbotron template
<!-- Example row of columns --> <!-- Example row of columns -->
<div class="row"> <div class="row">
<div class="col-span-4"> <div class="col col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p> <p><a class="btn" href="#">View details &raquo;</a></p>
</div> </div>
<div class="col-span-4"> <div class="col col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p> <p><a class="btn" href="#">View details &raquo;</a></p>
</div> </div>
<div class="col-span-4"> <div class="col col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details &raquo;</a></p> <p><a class="btn" href="#">View details &raquo;</a></p>
......
docs/examples/justified-nav.html
View file @ 3c7a43a1
...@@ -42,7 +42,7 @@ title: Justified nav template ...@@ -42,7 +42,7 @@ title: Justified nav template
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.nav-justified li a { .nav-justified > li > a {
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
color: #777; color: #777;
...@@ -60,17 +60,17 @@ title: Justified nav template ...@@ -60,17 +60,17 @@ title: Justified nav template
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */ background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
} }
.nav-justified .active a { .nav-justified > .active > a {
background-color: #ddd; background-color: #ddd;
background-image: none; background-image: none;
box-shadow: inset 0 3px 7px rgba(0,0,0,.15); box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
} }
.nav-justified li:first-child a { .nav-justified > li:first-child > a {
border-left: 0; border-left: 0;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
} }
.nav-justified li:last-child a { .nav-justified > li:last-child > a {
border-right: 0; border-right: 0;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
...@@ -86,7 +86,6 @@ title: Justified nav template ...@@ -86,7 +86,6 @@ title: Justified nav template
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
/* Make the nav on the same line */
} }
</style> </style>
...@@ -96,8 +95,8 @@ title: Justified nav template ...@@ -96,8 +95,8 @@ title: Justified nav template
<div class="container"> <div class="container">
<div class="masthead"> <div class="masthead">
<h3 class="muted">Project name</h3> <h3 class="text-muted">Project name</h3>
<ul class="nav nav-justified"> <ul class="nav navbar-nav nav-justified">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li> <li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li> <li><a href="#">Services</a></li>
...@@ -119,17 +118,17 @@ title: Justified nav template ...@@ -119,17 +118,17 @@ title: Justified nav template
<!-- Example row of columns --> <!-- Example row of columns -->
<div class="row"> <div class="row">
<div class="col-span-4"> <div class="col col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p> <p><a class="btn" href="#">View details &raquo;</a></p>
</div> </div>
<div class="col-span-4"> <div class="col col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p> <p><a class="btn" href="#">View details &raquo;</a></p>
</div> </div>
<div class="col-span-4"> <div class="col col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn" href="#">View details &raquo;</a></p> <p><a class="btn" href="#">View details &raquo;</a></p>
......
docs/examples/navbar-fixed-top.html
View file @ 3c7a43a1
...@@ -27,7 +27,7 @@ title: Fixed navbar template ...@@ -27,7 +27,7 @@ title: Fixed navbar template
</a> </a>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
...@@ -44,7 +44,7 @@ title: Fixed navbar template ...@@ -44,7 +44,7 @@ title: Fixed navbar template
</ul> </ul>
</li> </li>
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav navbar-nav pull-right">
<li><a href="/examples/navbar/">Default</a></li> <li><a href="/examples/navbar/">Default</a></li>
<li><a href="/examples/navbar-static-top/">Static top</a></li> <li><a href="/examples/navbar-static-top/">Static top</a></li>
<li class="active"><a href="/examples/navbar-fixed-top/">Fixed top</a></li> <li class="active"><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
...@@ -60,7 +60,7 @@ title: Fixed navbar template ...@@ -60,7 +60,7 @@ title: Fixed navbar template
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p> <p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a> <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
......
docs/examples/navbar-static-top.html
View file @ 3c7a43a1
...@@ -23,7 +23,7 @@ title: Static navbar template ...@@ -23,7 +23,7 @@ title: Static navbar template
</a> </a>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
...@@ -40,7 +40,7 @@ title: Static navbar template ...@@ -40,7 +40,7 @@ title: Static navbar template
</ul> </ul>
</li> </li>
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav navbar-nav pull-right">
<li><a href="/examples/navbar/">Default</a></li> <li><a href="/examples/navbar/">Default</a></li>
<li class="active"><a href="/examples/navbar-static-top/">Static top</a></li> <li class="active"><a href="/examples/navbar-static-top/">Static top</a></li>
<li><a href="/examples/navbar-fixed-top/">Fixed top</a></li> <li><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
...@@ -57,7 +57,7 @@ title: Static navbar template ...@@ -57,7 +57,7 @@ title: Static navbar template
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p> <p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a> <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
......
docs/examples/navbar.html
View file @ 3c7a43a1
...@@ -29,7 +29,7 @@ title: Navbar template ...@@ -29,7 +29,7 @@ title: Navbar template
</a> </a>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
...@@ -46,7 +46,7 @@ title: Navbar template ...@@ -46,7 +46,7 @@ title: Navbar template
</ul> </ul>
</li> </li>
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav navbar-nav pull-right">
<li class="active"><a href="/examples/navbar/">Default</a></li> <li class="active"><a href="/examples/navbar/">Default</a></li>
<li><a href="/examples/navbar-static-top/">Static top</a></li> <li><a href="/examples/navbar-static-top/">Static top</a></li>
<li><a href="/examples/navbar-fixed-top/">Fixed top</a></li> <li><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
...@@ -60,7 +60,7 @@ title: Navbar template ...@@ -60,7 +60,7 @@ title: Navbar template
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p> <p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a> <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
......
docs/examples/signin.html
View file @ 3c7a43a1
...@@ -13,8 +13,8 @@ title: Sign in form template ...@@ -13,8 +13,8 @@ title: Sign in form template
} }
.form-signin { .form-signin {
max-width: 300px; max-width: 330px;
padding: 30px; padding: 15px;
margin: 0 auto; margin: 0 auto;
} }
.form-signin .form-signin-heading, .form-signin .form-signin-heading,
......
docs/examples/starter-template.html
View file @ 3c7a43a1
...@@ -24,7 +24,7 @@ title: Starter template ...@@ -24,7 +24,7 @@ title: Starter template
</button> </button>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
......
docs/examples/sticky-footer-navbar.html
View file @ 3c7a43a1
...@@ -22,14 +22,13 @@ title: Sticky footer with navbar template ...@@ -22,14 +22,13 @@ title: Sticky footer with navbar template
height: 100%; height: 100%;
/* Negative indent footer by its height */ /* Negative indent footer by its height */
margin: 0 auto -60px; margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
} }
/* Set the fixed height of the footer here */ /* Set the fixed height of the footer here */
#push,
#footer { #footer {
height: 60px; height: 60px;
}
#footer {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
...@@ -50,7 +49,7 @@ title: Sticky footer with navbar template ...@@ -50,7 +49,7 @@ title: Sticky footer with navbar template
/* Not required for template or sticky footer method. */ /* Not required for template or sticky footer method. */
#wrap > .container { #wrap > .container {
padding-top: 60px; padding: 60px 15px 0;
} }
.container .credit { .container .credit {
margin: 20px 0; margin: 20px 0;
...@@ -77,7 +76,7 @@ title: Sticky footer with navbar template ...@@ -77,7 +76,7 @@ title: Sticky footer with navbar template
</button> </button>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
...@@ -104,14 +103,12 @@ title: Sticky footer with navbar template ...@@ -104,14 +103,12 @@ title: Sticky footer with navbar template
<h1>Sticky footer with fixed navbar</h1> <h1>Sticky footer with fixed navbar</h1>
</div> </div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to <a href="./sticky-footer.html">the default sticky footer</a> minus the navbar.</p> <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div> </div>
<div id="push"></div>
</div> </div>
<div id="footer"> <div id="footer">
<div class="container"> <div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div> </div>
</div> </div>
docs/examples/sticky-footer.html
View file @ 3c7a43a1
...@@ -22,14 +22,13 @@ title: Sticky footer template ...@@ -22,14 +22,13 @@ title: Sticky footer template
height: 100%; height: 100%;
/* Negative indent footer by its height */ /* Negative indent footer by its height */
margin: 0 auto -60px; margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
} }
/* Set the fixed height of the footer here */ /* Set the fixed height of the footer here */
#push,
#footer { #footer {
height: 60px; height: 60px;
}
#footer {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
...@@ -50,6 +49,7 @@ title: Sticky footer template ...@@ -50,6 +49,7 @@ title: Sticky footer template
.container { .container {
width: auto; width: auto;
max-width: 680px; max-width: 680px;
padding: 0 15px;
} }
.container .credit { .container .credit {
margin: 20px 0; margin: 20px 0;
...@@ -68,14 +68,12 @@ title: Sticky footer template ...@@ -68,14 +68,12 @@ title: Sticky footer template
<h1>Sticky footer</h1> <h1>Sticky footer</h1>
</div> </div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use <a href="./sticky-footer-navbar.html">the sticky footer with a fixed navbar</a> if need be, too.</p> <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div> </div>
<div id="push"></div>
</div> </div>
<div id="footer"> <div id="footer">
<div class="container"> <div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div> </div>
</div> </div>
docs/getting-started.html deleted 100644 → 0
View file @ 41c78256
---
layout: default
title: Getting started
description: Overview of the project, its contents, and how to get started with a simple template.
---
<!-- Subhead
================================================== -->
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>Getting started</h1>
<p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
</div>
</header>
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row">
<div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#download-bootstrap"><i class="glyphicon glyphicon-chevron-right"></i> Download</a></li>
<li><a href="#file-structure"><i class="glyphicon glyphicon-chevron-right"></i> File structure</a></li>
<li><a href="#contents"><i class="glyphicon glyphicon-chevron-right"></i> What's included</a></li>
<li><a href="#html-template"><i class="glyphicon glyphicon-chevron-right"></i> HTML template</a></li>
<li><a href="#examples"><i class="glyphicon glyphicon-chevron-right"></i> Examples</a></li>
<li><a href="#what-next"><i class="glyphicon glyphicon-chevron-right"></i> What next?</a></li>
</ul>
</div>
<div class="col-span-9">
<!-- Download
================================================== -->
<section id="download-bootstrap">
<div class="page-header">
<h1>1. Download</h1>
</div>
<p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.</p>
<div class="row">
<div class="span6">
<h2>Compiled</h2>
<p><strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.</p>
<p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
</div>
<div class="span6">
<h2>Source</h2>
<p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
<p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
</div>
<div class="span6">
<h2>Bower</h2>
<p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
{% highlight bash %}bower install bootstrap{% endhighlight %}
</div>
</div>
</section>
<!-- File structure
================================================== -->
<section id="file-structure">
<div class="page-header">
<h1>2. File structure</h1>
</div>
<p class="lead">Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.</p>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
{% highlight bash %}
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── fonts/
├── glyphiconshalflings-regular.eot
├── glyphiconshalflings-regular.otf
├── glyphiconshalflings-regular.svg
├── glyphiconshalflings-regular.ttf
└── glyphiconshalflings-regular.woff
{% endhighlight %}
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
</section>
<!-- Contents
================================================== -->
<section id="contents">
<div class="page-header">
<h1>3. What's included</h1>
</div>
<p class="lead">Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <a href="http://getbootstrap.com">Bootstrap documentation</a>.</p>
<h2>Docs sections</h2>
<p>In addition to the getting started documentation you're reading now, the Bootstrap docs are broken into a few key pages.</p>
<h4><a href="http://twitter.github.com/bootstrap/css.html">Core CSS</a></h4>
<p>Global styles for the body, Normalize, links, grid system, tables, forms, buttons, icons, and more.</p>
<h4><a href="http://twitter.github.com/bootstrap/components.html">Components</a></h4>
<p>Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more. Head here to see what kind of custom components Bootstrap has to offer beyond basic HTML elements.</p>
<h4><a href="http://twitter.github.com/bootstrap/javascript.html">JavaScript plugins</a></h4>
<p>Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.</p>
</section>
<!-- HTML template
================================================== -->
<section id="html-template">
<div class="page-header">
<h1>4. Basic HTML template</h1>
</div>
<p class="lead">With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="./getting-started.html#file-structure">File structure</a>.</p>
<p>Now, here's a look at a <strong>typical HTML file</strong>:</p>
{% highlight html linenos %}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
</body>
</html>
{% endhighlight %}
<p>To make this <strong>a Bootstrapped template</strong>, just include the appropriate CSS and JS files:</p>
{% highlight html linenos %}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
{% endhighlight %}
<p><strong>And you're set!</strong> With those two files added, you can begin to develop any site or application with Bootstrap.</p>
<hr>
<h4>Responsive features in IE8</h4>
<p>Internet Explorer 8 lacks support for media queries, the method by which we deliver responsive CSS to folks. To enable that, you need to include a third party tool (which we include in the project repository) called <a href="https://github.com/scottjehl/Respond">Respond.js</a>.</p>
<pre class="prettyprint linenums">
&lt;!--[if lt IE 9]&gt;
&lt;script src="/assets/js/respond/respond.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;
</pre>
</section>
<!-- Examples
================================================== -->
<section id="examples">
<div class="page-header">
<h1>5. Examples</h1>
</div>
<p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
<div class="row bs-docs-examples">
<div class="span4">
<a class="thumbnail" href="/examples/starter-template/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
</a>
<h4>Starter template</h4>
<p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/jumbotron/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
</a>
<h4>Basic marketing site</h4>
<p>Featuring a hero unit for a primary message and three supporting elements.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
</a>
<h4>Narrow marketing</h4>
<p>Slim, lightweight marketing template for small projects or teams.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/justified-nav/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
</a>
<h4>Justified nav</h4>
<p>Marketing page with equal-width navigation links in a modified navbar.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/signin/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
</a>
<h4>Sign in</h4>
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
</a>
<h4>Sticky footer</h4>
<p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
</a>
<h4>Sticky footer w/ navbar</h4>
<p>Add a fixed navbar to the default sticky footer template.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/carousel/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
</a>
<h4>Carousel jumbotron</h4>
<p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
</a>
<h4>Navbar</h4>
<p>Basic template for showcasing how the navbar works.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
</a>
<h4>Static top navbar</h4>
<p>Basic template for showcasing the static navbar variation.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
</a>
<h4>Fixed top navbar</h4>
<p>Basic template for showcasing the fixed navbar variation.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/grid/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-.png" alt="">
</a>
<h4>Grid examples</h4>
<p></p>
</div>
</div>
</section>
<!-- Next
================================================== -->
<section id="what-next">
<div class="page-header">
<h1>What next?</h1>
</div>
<p class="lead">Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.</p>
<a class="btn btn-large btn-primary" href="./css.html" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Visit docs']);">Visit the Bootstrap docs</a>
<a class="btn btn-large" href="./customize.html" style="margin-left: 5px;" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Customize']);">Customize Bootstrap</a>
</section>
</div><!-- /span9 -->
</div><!-- row -->
</div><!-- /.container -->
docs/index.html
View file @ 3c7a43a1
--- ---
layout: default layout: home
title: Bootstrap title: Bootstrap
--- ---
<div class="bs-docs-jumbotron masthead"> <div class="bs-docs-jumbotron masthead">
<div class="container"> <div class="container">
<h1>Bootstrap</h1> <h1>Bootstrap</h1>
<p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p> <p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
<p> <p>
<a href="assets/bootstrap.zip" class="btn btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0']);">Download Bootstrap</a> <a href="assets/bootstrap.zip" class="btn btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0']);">Download Bootstrap</a>
<a href="./docs/" class="btn btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Docs', 'View docs']);">View docs</a>
</p> </p>
<div class="bs-docs-social">
<ul class="bs-docs-social-buttons">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
</div>
<ul class="masthead-links"> <ul class="masthead-links">
<li>
<a href="./customize/" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Customize']);">Customize</a>
</li>
<li> <li>
<a href="http://github.com/twitter/bootstrap" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a> <a href="http://github.com/twitter/bootstrap" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
</li> </li>
<li> <li>
<a href="./getting-started/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a> <a href="./docs/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
</li>
<li>
<a href="http://expo.getbootstrap.com" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Bootstrap Expo</a>
</li> </li>
<li>Version 3.0.0</li> <li>Version 3.0.0</li>
</ul> </ul>
</div>
</div>
<div class="container">
<div class="bs-docs-marketing">
<h1>Introducing Bootstrap.</h1>
<p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
<div class="row">
<div class="col-span-4">
<img class="marketing-img" src="assets/img/bs-docs-twitter-github.png">
<h2>By nerds, for nerds.</h2>
<p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
</div>
<div class="col-span-4">
<img class="marketing-img" src="assets/img/bs-docs-responsive-illustrations.png">
<h2>Made for everyone.</h2>
<p>Bootstrap 3 has been rebuilt from the ground up to push the Web forward. It looks and behaves great on the latest smartphones, tablets, and desktops (including support for IE8+).</p>
</div>
<div class="col-span-4">
<img class="marketing-img" src="assets/img/bs-docs-bootstrap-features.png">
<h2>Packed with features.</h2>
<p>A 12-column responsive <a href="./css/#grid-system">grid</a>, dozens of components, <a href="./javascript/">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize/">web-based Customizer</a> to make Bootstrap your own.</p>
</div>
</div>
<h1>Built with Bootstrap.</h1>
<p class="marketing-byline">For more sites built with Bootstrap, <a href="http://expo.getbootstrap.com">visit the Expo</a> or <a href="./getting-started/#examples">browse the examples</a>.</p>
<div class="row bs-docs-gallery">
<div class="col-span-3">
<a class="thumbnail" href="http://delicious.com" target="_blank">
<img src="http://expo.getbootstrap.com/screenshots/delicious.jpg" alt="Delicious">
</a>
</div>
<div class="col-span-3">
<a class="thumbnail" href="https://yourkarma.com" target="_blank">
<img src="http://expo.getbootstrap.com/screenshots/karma.jpg" alt="Karma">
</a>
</div>
<div class="col-span-3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank">
<img src="http://expo.getbootstrap.com/screenshots/soundready.jpg" alt="SoundReady">
</a>
</div>
<div class="col-span-3">
<a class="thumbnail" href="http://kippt.com/" target="_blank">
<img src="http://expo.getbootstrap.com/screenshots/kippt.jpg" alt="Kippt">
</a>
</div>
</div>
</div> </div>
</div> </div>
docs/javascript.html deleted 100644 → 0
View file @ 41c78256
---
layout: default
title: JavaScript plugins
---
<!-- Subhead
================================================== -->
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>JavaScript</h1>
<p class="lead">Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.
</div>
</header>
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row">
<div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#overview"><i class="glyphicon glyphicon-chevron-right"></i> Overview</a></li>
<li><a href="#transitions"><i class="glyphicon glyphicon-chevron-right"></i> Transitions</a></li>
<li><a href="#modals"><i class="glyphicon glyphicon-chevron-right"></i> Modal</a></li>
<li><a href="#dropdowns"><i class="glyphicon glyphicon-chevron-right"></i> Dropdown</a></li>
<li><a href="#scrollspy"><i class="glyphicon glyphicon-chevron-right"></i> Scrollspy</a></li>
<li><a href="#tabs"><i class="glyphicon glyphicon-chevron-right"></i> Tab</a></li>
<li><a href="#tooltips"><i class="glyphicon glyphicon-chevron-right"></i> Tooltip</a></li>
<li><a href="#popovers"><i class="glyphicon glyphicon-chevron-right"></i> Popover</a></li>
<li><a href="#alerts"><i class="glyphicon glyphicon-chevron-right"></i> Alert</a></li>
<li><a href="#buttons"><i class="glyphicon glyphicon-chevron-right"></i> Button</a></li>
<li><a href="#collapse"><i class="glyphicon glyphicon-chevron-right"></i> Collapse</a></li>
<li><a href="#carousel"><i class="glyphicon glyphicon-chevron-right"></i> Carousel</a></li>
<li><a href="#typeahead"><i class="glyphicon glyphicon-chevron-right"></i> Typeahead</a></li>
<li><a href="#affix"><i class="glyphicon glyphicon-chevron-right"></i> Affix</a></li>
</ul>
</div>
<div class="col-span-9">
<!-- Overview
================================================== -->
<section id="overview">
<div class="page-header">
<h1>JavaScript in Bootstrap</h1>
</div>
<h3>Individual or compiled</h3>
<p>Plugins can be included individually (though some have required dependencies), or all at once. Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
<h3>Data attributes</h3>
<p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
{% highlight js linenos %}
$('body').off('.data-api')
{% endhighlight %}
<p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
{% highlight js linenos %}
$('body').off('.alert.data-api')
{% endhighlight %}
<h3>Programmatic API</h3>
<p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
{% highlight js linenos %}
$(".btn.danger").button("toggle").addClass("fat")
{% endhighlight %}
<p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
{% highlight js linenos %}
$("#myModal").modal() // initialized with defaults
$("#myModal").modal({ keyboard: false }) // initialized with no keyboard
$("#myModal").modal('show') // initializes and invokes show immediately</p>
{% endhighlight %}
<p>Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
<h3>No conflict</h3>
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
{% highlight js linenos %}
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality
{% endhighlight %}
<h3>Events</h3>
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
<p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
{% highlight js linenos %}
$('#myModal').on('show', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
{% endhighlight %}
</section>
<!-- Transitions
================================================== -->
<section id="transitions">
<div class="page-header">
<h1>Transitions <small>bootstrap-transition.js</small></h1>
</div>
<h3>About transitions</h3>
<p>For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this&mdash;it's already there.</p>
<h3>Use cases</h3>
<p>A few examples of the transition plugin:</p>
<ul>
<li>Sliding or fading in modals</li>
<li>Fading out tabs</li>
<li>Fading out alerts</li>
<li>Sliding carousel panes</li>
</ul>
<!-- Ideas: include docs for .fade.in, .slide.in, etc -->
</section>
<!-- Modal
================================================== -->
<section id="modals">
<div class="page-header">
<h1>Modals <small>bootstrap-modal.js</small></h1>
</div>
<h2>Examples</h2>
<p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
<h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-docs-example bs-docs-example-modal">
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dalog -->
</div><!-- /.modal -->
</div><!-- /example -->
{% highlight html linenos %}
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dalog -->
</div><!-- /.modal -->
{% endhighlight %}
<h3>Live demo</h3>
<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
<h4>Tooltips in a modal</h4>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
<hr>
<h4>Overflowing text to show optional scrollbar</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dalog -->
</div><!-- /.modal -->
<div class="bs-docs-example" style="padding-bottom: 24px;">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
</div><!-- /example -->
{% highlight html linenos %}
<div class="modal">
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
<!-- Modal -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dalog -->
</div><!-- /.modal -->
{% endhighlight %}
<h2>Usage</h2>
<h3>Via data attributes</h3>
<p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
{% highlight html linenos %}
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
{% endhighlight %}
<h3>Via JavaScript</h3>
<p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
{% highlight js linenos %}$('#myModal').modal(options){% endhighlight %}
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>backdrop</td>
<td>boolean</td>
<td>true</td>
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
</tr>
<tr>
<td>keyboard</td>
<td>boolean</td>
<td>true</td>
<td>Closes the modal when escape key is pressed</td>
</tr>
<tr>
<td>show</td>
<td>boolean</td>
<td>true</td>
<td>Shows the modal when initialized.</td>
</tr>
<tr>
<td>remote</td>
<td>path</td>
<td>false</td>
<td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
{% highlight html linenos %}
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
{% endhighlight %}
</tr>
</tbody>
</table>
<h3>Methods</h3>
<h4>.modal(options)</h4>
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
{% highlight js linenos %}
$('#myModal').modal({
keyboard: false
})
{% endhighlight %}
<h4>.modal('toggle')</h4>
<p>Manually toggles a modal.</p>
{% highlight js linenos %}$('#myModal').modal('toggle'){% endhighlight %}
<h4>.modal('show')</h4>
<p>Manually opens a modal.</p>
{% highlight js linenos %}$('#myModal').modal('show'){% endhighlight %}
<h4>.modal('hide')</h4>
<p>Manually hides a modal.</p>
{% highlight js linenos %}$('#myModal').modal('hide'){% endhighlight %}
<h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
<td>shown</td>
<td>This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</td>
</tr>
<tr>
<td>hide</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
</tr>
<tr>
<td>hidden</td>
<td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td>
</tr>
</tbody>
</table>
{% highlight js linenos %}
$('#myModal').on('hidden', function () {
// do something…
})
{% endhighlight %}
</section>
<!-- Dropdowns
================================================== -->
<section id="dropdowns">
<div class="page-header">
<h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>
</div>
<h2>Examples</h2>
<p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
<h3>Within a navbar</h3>
<div class="bs-docs-example">
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a>
<ul class="nav" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div> <!-- /navbar-example -->
</div> <!-- /example -->
<h3>Within tabs</h3>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul> <!-- /tabs -->
</div> <!-- /example -->
<hr class="bs-docs-separator">
<h2>Usage</h2>
<h3>Via data attributes</h3>
<p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
{% highlight html linenos %}
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
{% endhighlight %}
<p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
{% highlight html linenos %}
<div class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
{% endhighlight %}
<h3>Via JavaScript</h3>
<p>Call the dropdowns via JavaScript:</p>
{% highlight js linenos %}
$('.dropdown-toggle').dropdown()
{% endhighlight %}
<h3>Options</h3>
<p><em>None</em></p>
<h3>Methods</h3>
<h4>$().dropdown('toggle')</h4>
<p>A programmatic api for toggling menus for a given navbar or tabbed navigation.</p>
</section>
<!-- ScrollSpy
================================================== -->
<section id="scrollspy">
<div class="page-header">
<h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
</div>
<h2>Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-docs-example">
<div id="navbarExample" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a>
<ul class="nav">
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li class="divider"></li>
<li><a href="#three">three</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h4 id="mdo">@mdo</h4>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
<h4 id="one">one</h4>
<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
<h4 id="two">two</h4>
<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
<h4 id="three">three</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
</p>
</div>
</div><!-- /example -->
<hr class="bs-docs-separator">
<h2>Usage</h2>
<h3>Via data attributes</h3>
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body) and <code>data-target=".navbar"</code> to select which nav to use. You'll want to use scrollspy with a <code>.nav</code> component.</p>
{% highlight html linenos %}
<body data-spy="scroll" data-target=".navbar">
...
</body>
{% endhighlight %}
<h3>Via JavaScript</h3>
<p>Call the scrollspy via JavaScript:</p>
{% highlight js linenos %}
$('.navbar').scrollspy()
{% endhighlight %}
<div class="alert alert-info">
<strong>Heads up!</strong>
Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.
</div>
<h3>Methods</h3>
<h4>.scrollspy('refresh')</h4>
<p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
{% highlight js linenos %}
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
{% endhighlight %}
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>offset</td>
<td>number</td>
<td>10</td>
<td>Pixels to offset from top when calculating position of scroll.</td>
</tr>
</tbody>
</table>
<h3>Events</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>activate</td>
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
</tr>
</tbody>
</table>
</section>
<!-- Tabs
================================================== -->
<section id="tabs">
<div class="page-header">
<h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
</div>
<h2>Example tabs</h2>
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
<div class="bs-docs-example bs-docs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
</div>
</div>
</div><!-- /example -->
<hr class="bs-docs-separator">
<h2>Usage</h2>
<p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
{% highlight js linenos %}
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
{% endhighlight %}
<p>You can activate individual tabs in several ways:</p>
{% highlight js linenos %}
$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
{% endhighlight %}
<h3>Markup</h3>
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.</p>
{% highlight html linenos %}
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
{% endhighlight %}
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
<h3>Methods</h3>
<h4>$().tab</h4>
<p>
Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
</p>
{% highlight html linenos %}
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<script>
$(function () {
$('#myTab a:last').tab('show');
})
</script>
{% endhighlight %}
<h3>Events</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
<tr>
<td>shown</td>
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
</tbody>
</table>
{% highlight js linenos %}
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
{% endhighlight %}
</section>
<!-- Tooltips
================================================== -->
<section id="tooltips">
<div class="page-header">
<h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
</div>
<h2>Examples</h2>
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
<p>Hover over the links below to see tooltips:</p>
<div class="bs-docs-example tooltip-demo">
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
</div><!-- /example -->
<h3>Four directions</h3>
<div class="bs-docs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
</ul>
</div><!-- /example -->
<h3>Tooltips in input groups</h3>
<p>When using tooltips and popovers with the Bootstrap input groups, you'll have to set the <code>container</code> (documented below) option to avoid unwanted side effects.</p>
<hr class="bs-docs-separator">
<h2>Usage</h2>
<p>Trigger the tooltip via JavaScript:</p>
{% highlight js linenos %}
$('#example').tooltip(options)
{% endhighlight %}
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>animation</td>
<td>boolean</td>
<td>true</td>
<td>apply a css fade transition to the tooltip</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>Insert html into the tooltip. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
<td>placement</td>
<td>string | function</td>
<td>'top'</td>
<td>how to position the tooltip - top | bottom | left | right</td>
</tr>
<tr>
<td>selector</td>
<td>string</td>
<td>false</td>
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
</tr>
<tr>
<td>title</td>
<td>string | function</td>
<td>''</td>
<td>default title value if `title` tag isn't present</td>
</tr>
<tr>
<td>trigger</td>
<td>string</td>
<td>'hover focus'</td>
<td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space seperated, trigger types.</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
</td>
</tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the tooltip to a specific element <code>container: 'body'</code></p>
</td>
</tr>
</tbody>
</table>
<div class="alert alert-info">
<strong>Heads up!</strong>
Options for individual tooltips can alternatively be specified through the use of data attributes.
</div>
<h3>Markup</h3>
{% highlight html linenos %}
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
{% endhighlight %}
<h3>Methods</h3>
<h4>$().tooltip(options)</h4>
<p>Attaches a tooltip handler to an element collection.</p>
<h4>.tooltip('show')</h4>
<p>Reveals an element's tooltip.</p>
{% highlight js linenos %}$('#element').tooltip('show'){% endhighlight %}
<h4>.tooltip('hide')</h4>
<p>Hides an element's tooltip.</p>
{% highlight js linenos %}$('#element').tooltip('hide'){% endhighlight %}
<h4>.tooltip('toggle')</h4>
<p>Toggles an element's tooltip.</p>
{% highlight js linenos %}$('#element').tooltip('toggle'){% endhighlight %}
<h4>.tooltip('destroy')</h4>
<p>Hides and destroys an element's tooltip.</p>
{% highlight js linenos %}$('#element').tooltip('destroy'){% endhighlight %}
</section>
<!-- Popovers
================================================== -->
<section id="popovers">
<div class="page-header">
<h1>Popovers <small>bootstrap-popover.js</small></h1>
</div>
<h2>Examples</h2>
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong></p>
<h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bs-docs-example bs-docs-example-popover">
<div class="popover top">
<div class="arrow"></div>
<h3 class="popover-title">Popover top</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover right">
<div class="arrow"></div>
<h3 class="popover-title">Popover right</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover bottom">
<div class="arrow"></div>
<h3 class="popover-title">Popover bottom</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover left">
<div class="arrow"></div>
<h3 class="popover-title">Popover left</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<p>No markup shown as popovers are generated from JavaScript and content within a <code>data</code> attribute.</p>
<h3>Live demo</h3>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
<h4>Four directions</h4>
<div class="bs-docs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
<li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
<li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
<li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
<li><a href="#" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
</ul>
</div><!-- /example -->
<hr class="bs-docs-separator">
<h2>Usage</h2>
<p>Enable popovers via JavaScript:</p>
{% highlight js linenos %}$('#example').popover(options){% endhighlight %}
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>animation</td>
<td>boolean</td>
<td>true</td>
<td>apply a css fade transition to the tooltip</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
<td>placement</td>
<td>string | function</td>
<td>'right'</td>
<td>how to position the popover - top | bottom | left | right</td>
</tr>
<tr>
<td>selector</td>
<td>string</td>
<td>false</td>
<td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
</tr>
<tr>
<td>trigger</td>
<td>string</td>
<td>'click'</td>
<td>how popover is triggered - click | hover | focus | manual</td>
</tr>
<tr>
<td>title</td>
<td>string | function</td>
<td>''</td>
<td>default title value if `title` attribute isn't present</td>
</tr>
<tr>
<td>content</td>
<td>string | function</td>
<td>''</td>
<td>default content value if `data-content` attribute isn't present</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
</td>
</tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the popover to a specific element <code>container: 'body'</code></p>
</td>
</tr>
</tbody>
</table>
<div class="alert alert-info">
<strong>Heads up!</strong>
Options for individual popovers can alternatively be specified through the use of data attributes.
</div>
<h3>Markup</h3>
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
<h3>Methods</h3>
<h4>$().popover(options)</h4>
<p>Initializes popovers for an element collection.</p>
<h4>.popover('show')</h4>
<p>Reveals an elements popover.</p>
{% highlight js linenos %}$('#element').popover('show'){% endhighlight %}
<h4>.popover('hide')</h4>
<p>Hides an elements popover.</p>
{% highlight js linenos %}$('#element').popover('hide'){% endhighlight %}
<h4>.popover('toggle')</h4>
<p>Toggles an elements popover.</p>
{% highlight js linenos %}$('#element').popover('toggle'){% endhighlight %}
<h4>.popover('destroy')</h4>
<p>Hides and destroys an element's popover.</p>
{% highlight js linenos %}$('#element').popover('destroy'){% endhighlight %}
</section>
<!-- Alert
================================================== -->
<section id="alerts">
<div class="page-header">
<h1>Alert messages <small>bootstrap-alert.js</small></h1>
</div>
<h2>Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-docs-example">
<div class="alert fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
</div><!-- /example -->
<div class="bs-docs-example">
<div class="alert alert-block alert-error fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<h4 class="alert-heading">Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
</p>
</div>
</div><!-- /example -->
<hr class="bs-docs-separator">
<h2>Usage</h2>
<p>Enable dismissal of an alert via JavaScript:</p>
{% highlight js linenos %}$(".alert").alert(){% endhighlight %}
<h3>Markup</h3>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
{% highlight html linenos %}<a class="close" data-dismiss="alert" href="#">&times;</a>{% endhighlight %}
<h3>Methods</h3>
<h4>$().alert()</h4>
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
<h4>.alert('close')</h4>
<p>Closes an alert.</p>
{% highlight js linenos %}$(".alert").alert('close'){% endhighlight %}
<h3>Events</h3>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>close</td>
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
</tr>
<tr>
<td>closed</td>
<td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
</tr>
</tbody>
</table>
{% highlight js linenos %}
$('#my-alert').bind('closed', function () {
// do something…
})
{% endhighlight %}
</section>
<!-- Buttons
================================================== -->
<section id="buttons">
<div class="page-header">
<h1>Buttons <small>bootstrap-button.js</small></h1>
</div>
<h2>Example uses</h2>
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
<h4>Stateful</h4>
<p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
</div><!-- /example -->
{% highlight html linenos %}
<button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
{% endhighlight %}
<h4>Single toggle</h4>
<p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
</div><!-- /example -->
{% highlight html linenos %}
<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
{% endhighlight %}
<h4>Checkbox</h4>
<p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-checkbox">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="btn-group" data-toggle="buttons-checkbox">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>
{% endhighlight %}
<h4>Radio</h4>
<p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-radio">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="btn-group" data-toggle="buttons-radio">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
{% endhighlight %}
<hr class="bs-docs-separator">
<h2>Usage</h2>
<p>Enable buttons via JavaScript:</p>
{% highlight js linenos %}
$('.nav-tabs').button()
{% endhighlight %}
<h3>Markup</h3>
<p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
<h3>Options</h3>
<p><em>None</em></p>
<h3>Methods</h3>
<h4>$().button('toggle')</h4>
<p>Toggles push state. Gives the button the appearance that it has been activated.</p>
<div class="alert alert-info">
<strong>Heads up!</strong>
You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.
</div>
{% highlight html linenos %}
<button type="button" class="btn" data-toggle="button">...</button>
{% endhighlight %}
<h4>$().button('loading')</h4>
<p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
</p>
{% highlight html linenos %}
<button type="button" class="btn" data-loading-text="loading stuff...">...</button>
{% endhighlight %}
<div class="alert alert-info">
<strong>Heads up!</strong>
<a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.
</div>
<h4>$().button('reset')</h4>
<p>Resets button state - swaps text to original text.</p>
<h4>$().button(string)</h4>
<p>Resets button state - swaps text to any data defined text state.</p>
{% highlight html linenos %}
<button type="button" class="btn" data-complete-text="finished!" >...</button>
<script>
$('.btn').button('complete')
</script>
{% endhighlight %}
</section>
<!-- Collapse
================================================== -->
<section id="collapse">
<div class="page-header">
<h1>Collapse <small>bootstrap-collapse.js</small></h1>
</div>
<h3>About</h3>
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
<p class="muted"><strong>*</strong> Requires the Transitions plugin to be included.</p>
<h2>Example accordion</h2>
<p>Using the collapse plugin, we built a simple accordion style widget:</p>
<div class="bs-docs-example">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
...
</div>
</div>
</div>
</div>
{% endhighlight %}
<p>You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.</p>
{% highlight html linenos %}
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">...</div>
{% endhighlight %}
<hr class="bs-docs-separator">
<h2>Usage</h2>
<h3>Via data attributes</h3>
<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
<p>To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.</p>
<h3>Via JavaScript</h3>
<p>Enable manually with:</p>
{% highlight js linenos %}
$(".collapse").collapse()
{% endhighlight %}
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>parent</td>
<td>selector</td>
<td>false</td>
<td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
</tr>
<tr>
<td>toggle</td>
<td>boolean</td>
<td>true</td>
<td>Toggles the collapsible element on invocation</td>
</tr>
</tbody>
</table>
<h3>Methods</h3>
<h4>.collapse(options)</h4>
<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
{% highlight js linenos %}
$('#myCollapsible').collapse({
toggle: false
})
{% endhighlight %}
<h4>.collapse('toggle')</h4>
<p>Toggles a collapsible element to shown or hidden.</p>
<h4>.collapse('show')</h4>
<p>Shows a collapsible element.</p>
<h4>.collapse('hide')</h4>
<p>Hides a collapsible element.</p>
<h3>Events</h3>
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
<td>shown</td>
<td>This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).</td>
</tr>
<tr>
<td>hide</td>
<td>
This event is fired immediately when the <code>hide</code> method has been called.
</td>
</tr>
<tr>
<td>hidden</td>
<td>This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).</td>
</tr>
</tbody>
</table>
{% highlight js linenos %}
$('#myCollapsible').on('hidden', function () {
// do something…
})
{% endhighlight %}
</section>
<!-- Carousel
================================================== -->
<section id="carousel">
<div class="page-header">
<h1>Carousel <small>bootstrap-carousel.js</small></h1>
</div>
<h2>Examples</h2>
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
<div class="bs-docs-example">
<div class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#fff/text:First slide" alt="">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#fff/text:Second slide" alt="">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#fff/text:Third slide" alt="">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
{% endhighlight %}
<h3>Optional captions</h3>
<p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
<p><strong>Captions are hidden in mobile views</strong> and shown with viewports greater than 768px wide.</p>
<div class="bs-docs-example">
<div class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#777" alt="">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#777" alt="">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="item active">
<img src="..." alt="">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
{% endhighlight %}
<hr class="bs-docs-separator">
<h2>Usage</h2>
<h3>Via data attributes</h3>
<p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p>
<h3>Via JavaScript</h3>
<p>Call carousel manually with:</p>
{% highlight js linenos %}
$('.carousel').carousel()
{% endhighlight %}
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>interval</td>
<td>number</td>
<td>5000</td>
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
</tr>
<tr>
<td>pause</td>
<td>string</td>
<td>"hover"</td>
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
</tr>
</tbody>
</table>
<h3>Methods</h3>
<h4>.carousel(options)</h4>
<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
{% highlight html linenos %}
$('.carousel').carousel({
interval: 2000
})
{% endhighlight %}
<h4>.carousel('cycle')</h4>
<p>Cycles through the carousel items from left to right.</p>
<h4>.carousel('pause')</h4>
<p>Stops the carousel from cycling through items.</p>
<h4>.carousel(number)</h4>
<p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>
<h4>.carousel('prev')</h4>
<p>Cycles to the previous item.</p>
<h4>.carousel('next')</h4>
<p>Cycles to the next item.</p>
<h3>Events</h3>
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>slide</td>
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
</tr>
<tr>
<td>slid</td>
<td>This event is fired when the carousel has completed its slide transition.</td>
</tr>
</tbody>
</table>
</section>
<!-- Typeahead
================================================== -->
<section id="typeahead">
<div class="page-header">
<h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
</div>
<h2>Example</h2>
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
</div><!-- /example -->
{% highlight html linenos %}
<input type="text" data-provide="typeahead">
{% endhighlight %}
<p>You'll want to set <code>autocomplete="off"</code> to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.</p>
<hr class="bs-docs-separator">
<h2>Usage</h2>
<h3>Via data attributes</h3>
<p>Add data attributes to register an element with typeahead functionality as shown in the example above.</p>
<h3>Via JavaScript</h3>
<p>Call the typeahead manually with:</p>
{% highlight js linenos %}
$('.typeahead').typeahead()
{% endhighlight %}
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-source=""</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 100px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>source</td>
<td>array, function</td>
<td>[ ]</td>
<td>The data source to query against. May be an array of strings or a function. The function is passed two arguments, the <code>query</code> value in the input field and the <code>process</code> callback. The function may be used synchronously by returning the data source directly or asynchronously via the <code>process</code> callback's single argument.</td>
</tr>
<tr>
<td>items</td>
<td>number</td>
<td>8</td>
<td>The max number of items to display in the dropdown.</td>
</tr>
<tr>
<td>minLength</td>
<td>number</td>
<td>1</td>
<td>The minimum character length needed before triggering autocomplete suggestions</td>
</tr>
<tr>
<td>matcher</td>
<td>function</td>
<td>case insensitive</td>
<td>The method used to determine if a query matches an item. Accepts a single argument, the <code>item</code> against which to test the query. Access the current query with <code>this.query</code>. Return a boolean <code>true</code> if query is a match.</td>
</tr>
<tr>
<td>sorter</td>
<td>function</td>
<td>exact match,<br> case sensitive,<br> case insensitive</td>
<td>Method used to sort autocomplete results. Accepts a single argument <code>items</code> and has the scope of the typeahead instance. Reference the current query with <code>this.query</code>.</td>
</tr>
<tr>
<td>updater</td>
<td>function</td>
<td>returns selected item</td>
<td>The method used to return selected item. Accepts a single argument, the <code>item</code> and has the scope of the typeahead instance.</td>
</tr>
<tr>
<td>highlighter</td>
<td>function</td>
<td>highlights all default matches</td>
<td>Method used to highlight autocomplete results. Accepts a single argument <code>item</code> and has the scope of the typeahead instance. Should return html.</td>
</tr>
</tbody>
</table>
<h3>Methods</h3>
<h4>.typeahead(options)</h4>
<p>Initializes an input with a typeahead.</p>
</section>
<!-- Affix
================================================== -->
<section id="affix">
<div class="page-header">
<h1>Affix <small>bootstrap-affix.js</small></h1>
</div>
<h2>Example</h2>
<p>The subnavigation on the left is a live demo of the affix plugin.</p>
<hr class="bs-docs-separator">
<h2>Usage</h2>
<h3>Via data attributes</h3>
<p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p>
{% highlight html linenos %}
<div data-spy="affix" data-offset-top="200">...</div>
{% endhighlight %}
<div class="alert alert-info">
<strong>Heads up!</strong>
You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.
</div>
<h3>Via JavaScript</h3>
<p>Call the affix plugin via JavaScript:</p>
{% highlight js linenos %}
$('#navbar').affix()
{% endhighlight %}
<h3>Methods</h3>
<h4>.affix('refresh')</h4>
<p>When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:</p>
{% highlight js linenos %}
$('[data-spy="affix"]').each(function () {
$(this).affix('refresh')
});
{% endhighlight %}
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>offset</td>
<td>number | function | object</td>
<td>10</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provide an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td>
</tr>
</tbody>
</table>
</section>
</div><!-- /span9 -->
</div><!-- row -->
</div><!-- /.container -->
js/bootstrap-scrollspy.js
View file @ 3c7a43a1
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
this.activeTarget = target this.activeTarget = target
$(this.selector) $(this.selector)
.parent('.active') .parents('.active')
.removeClass('active') .removeClass('active')
selector = this.selector selector = this.selector
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
+ this.selector + '[href="' + target + '"]' + this.selector + '[href="' + target + '"]'
active = $(selector) active = $(selector)
.parent('li') .parents('li')
.addClass('active') .addClass('active')
if (active.parent('.dropdown-menu').length) { if (active.parent('.dropdown-menu').length) {
......
less/alerts.less
View file @ 3c7a43a1
...@@ -9,10 +9,10 @@ ...@@ -9,10 +9,10 @@
.alert { .alert {
padding: 8px 35px 8px 14px; padding: 8px 35px 8px 14px;
margin-bottom: @line-height-base; margin-bottom: @line-height-base;
color: @state-warning-text; color: @alert-text;
background-color: @state-warning-background; background-color: @alert-bg;
border: 1px solid @state-warning-border; border: 1px solid @alert-border;
border-radius: @border-radius-base; border-radius: @alert-border-radius;
// Headings for larger alerts // Headings for larger alerts
h4 { h4 {
...@@ -22,63 +22,61 @@ ...@@ -22,63 +22,61 @@
} }
// Match the hr to the border of the alert // Match the hr to the border of the alert
hr { hr {
border-top-color: darken(@state-warning-border, 5%); border-top-color: darken(@alert-border, 5%);
} }
// Inherit color for immediate links and bolden them some // Inherit color for immediate links and bolden them some
> a, > a,
> p > a { > p > a {
font-weight: 500; font-weight: 500;
color: darken(@state-warning-text, 10%); color: darken(@alert-text, 10%);
} }
}
// Adjust close link position // Adjust close link position
.close { .close {
position: relative; position: relative;
top: -2px; top: -2px;
right: -21px; right: -21px;
line-height: @line-height-base;
color: inherit; color: inherit;
}
} }
// Alternate styles // Alternate styles
// ------------------------- // -------------------------
.alert-success { .alert-success {
background-color: @state-success-background; background-color: @alert-success-bg;
border-color: @state-success-border; border-color: @alert-success-border;
color: @state-success-text; color: @alert-success-text;
hr { hr {
border-top-color: darken(@state-success-border, 5%); border-top-color: darken(@alert-success-border, 5%);
} }
> a, > a,
> p > a { > p > a {
color: darken(@state-success-text, 10%); color: darken(@alert-success-text, 10%);
} }
} }
.alert-danger, .alert-danger {
.alert-error { background-color: @alert-danger-bg;
background-color: @state-error-background; border-color: @alert-danger-border;
border-color: @state-error-border; color: @alert-danger-text;
color: @state-error-text;
hr { hr {
border-top-color: darken(@state-error-border, 5%); border-top-color: darken(@alert-danger-border, 5%);
} }
> a, > a,
> p > a { > p > a {
color: darken(@state-error-text, 10%); color: darken(@alert-danger-text, 10%);
} }
} }
.alert-info { .alert-info {
background-color: @state-info-background; background-color: @alert-info-bg;
border-color: @state-info-border; border-color: @alert-info-border;
color: @state-info-text; color: @alert-info-text;
hr { hr {
border-top-color: darken(@state-info-border, 5%); border-top-color: darken(@alert-info-border, 5%);
} }
> a, > a,
> p > a { > p > a {
color: darken(@state-info-text, 10%); color: darken(@alert-info-text, 10%);
} }
} }
......
less/badges.less
View file @ 3c7a43a1
...@@ -8,14 +8,14 @@ ...@@ -8,14 +8,14 @@
display: inline-block; display: inline-block;
min-width: 10px; min-width: 10px;
padding: 3px 7px; padding: 3px 7px;
font-size: 12px; font-size: @font-size-small;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
line-height: 1; line-height: 1;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
background-color: @grayLight; background-color: @gray-light;
border-radius: 10px; border-radius: 10px;
// Empty labels/badges collapse // Empty labels/badges collapse
...@@ -48,7 +48,7 @@ a.badge { ...@@ -48,7 +48,7 @@ a.badge {
} }
// Account for counters in navs // Account for counters in navs
.nav-list > .active > a > .badge, a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge { .nav-pills > .active > a > .badge {
color: @link-color; color: @link-color;
background-color: #fff; background-color: #fff;
......
less/bootstrap.less
View file @ 3c7a43a1
...@@ -30,6 +30,8 @@ ...@@ -30,6 +30,8 @@
@import "component-animations.less"; @import "component-animations.less";
@import "glyphicons.less"; @import "glyphicons.less";
@import "dropdowns.less"; @import "dropdowns.less";
@import "list-group.less";
@import "panels.less";
@import "wells.less"; @import "wells.less";
@import "close.less"; @import "close.less";
......
less/breadcrumbs.less
View file @ 3c7a43a1
...@@ -18,8 +18,11 @@ ...@@ -18,8 +18,11 @@
padding: 0 5px; padding: 0 5px;
color: #ccc; color: #ccc;
} }
&:last-child:after {
display: none; // No divider after last element
}
} }
> .active { > .active {
color: @grayLight; color: @gray-light;
} }
} }
less/button-groups.less
View file @ 3c7a43a1
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
// Optional: Group multiple button groups together for a toolbar // Optional: Group multiple button groups together for a toolbar
.btn-toolbar { .btn-toolbar {
.clear_float(); .clearfix();
.btn-group { .btn-group {
float: left; float: left;
...@@ -73,6 +73,21 @@ ...@@ -73,6 +73,21 @@
.border-right-radius(@border-radius-large); .border-right-radius(@border-radius-large);
} }
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group > .btn {
border-radius: 0;
}
.btn-group > .btn-group:last-child > .btn {
.border-right-radius(@border-radius-base);
}
.btn-group > .btn-group:first-child > .btn {
margin-left: 0;
.border-left-radius(@border-radius-base);
}
// On active and open, don't show outline // On active and open, don't show outline
.btn-group .dropdown-toggle:active, .btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle { .btn-group.open .dropdown-toggle {
......
less/buttons.less
View file @ 3c7a43a1
...@@ -110,26 +110,26 @@ input[type="button"] { ...@@ -110,26 +110,26 @@ input[type="button"] {
.btn { .btn {
color: @btn-color; color: @btn-color;
.btn-pseudo-states(@btn-background, @btn-border); .btn-pseudo-states(@btn-bg, @btn-border);
} }
.btn-primary { .btn-primary {
.btn-pseudo-states(@btn-background-primary, @btn-border-primary); .btn-pseudo-states(@btn-primary-bg, @btn-primary-border);
} }
// Warning appears as orange // Warning appears as orange
.btn-warning { .btn-warning {
.btn-pseudo-states(@btn-background-warning, @btn-border-warning); .btn-pseudo-states(@btn-warning-bg, @btn-warning-border);
} }
// Danger and error appear as red // Danger and error appear as red
.btn-danger { .btn-danger {
.btn-pseudo-states(@btn-background-danger, @btn-border-danger); .btn-pseudo-states(@btn-danger-bg, @btn-danger-border);
} }
// Success appears as green // Success appears as green
.btn-success { .btn-success {
.btn-pseudo-states(@btn-background-success, @btn-border-success); .btn-pseudo-states(@btn-success-bg, @btn-success-border);
} }
// Info appears as blue-green // Info appears as blue-green
.btn-info { .btn-info {
.btn-pseudo-states(@btn-background-info, @btn-border-info); .btn-pseudo-states(@btn-info-bg, @btn-info-border);
} }
...@@ -159,7 +159,7 @@ fieldset[disabled] .btn-link { ...@@ -159,7 +159,7 @@ fieldset[disabled] .btn-link {
} }
.btn-link:hover, .btn-link:hover,
.btn-link:focus { .btn-link:focus {
color: @link-color-hover; color: @link-hover-color;
text-decoration: underline; text-decoration: underline;
background-color: transparent; background-color: transparent;
} }
...@@ -168,7 +168,7 @@ fieldset[disabled] .btn-link { ...@@ -168,7 +168,7 @@ fieldset[disabled] .btn-link {
fieldset[disabled] & { fieldset[disabled] & {
&:hover, &:hover,
&:focus { &:focus {
color: @grayDark; color: @gray-dark;
text-decoration: none; text-decoration: none;
} }
} }
......
less/carousel.less
View file @ 3c7a43a1
...@@ -155,19 +155,23 @@ ...@@ -155,19 +155,23 @@
// Hidden by default for smaller viewports // Hidden by default for smaller viewports
.carousel-caption { .carousel-caption {
position: absolute; position: absolute;
left: 20%; left: 15%;
right: 20%; right: 15%;
bottom: 20px; bottom: 20px;
display: none; z-index: 10;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
color: #fff; color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6); text-shadow: 0 1px 2px rgba(0,0,0,.6);
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
} }
// Scale up controls for >768px // Scale up controls for tablets and up
@media screen and (min-width: 768px) { @media screen and (min-width: @screen-tablet) {
// Scale up the controls a smidge // Scale up the controls a smidge
.carousel-control .glyphicon { .carousel-control .glyphicon {
...@@ -180,13 +184,8 @@ ...@@ -180,13 +184,8 @@
// Show and left align the captions // Show and left align the captions
.carousel-caption { .carousel-caption {
left: 0; left: 20%;
right: 0; right: 20%;
z-index: 10; padding-bottom: 30px;
display: block;
max-width: 60%;
padding: 30px;
margin-left: 0;
margin-right: 0;
} }
} }
less/close.less
View file @ 3c7a43a1
...@@ -5,12 +5,13 @@ ...@@ -5,12 +5,13 @@
.close { .close {
float: right; float: right;
font-size: 20px; font-size: (@font-size-base * 1.5);
font-weight: bold; font-weight: bold;
line-height: @line-height-base; line-height: 1;
color: #000; color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,1); text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(.2); .opacity(.2);
&:hover, &:hover,
&:focus { &:focus {
color: #000; color: #000;
......
less/code.less
View file @ 3c7a43a1
...@@ -9,7 +9,7 @@ pre { ...@@ -9,7 +9,7 @@ pre {
padding: 0 3px 2px; padding: 0 3px 2px;
font-family: @font-family-monospace; font-family: @font-family-monospace;
font-size: (@font-size-base - 2); font-size: (@font-size-base - 2);
color: @grayDark; color: @gray-dark;
border-radius: 4px; border-radius: 4px;
} }
......
less/dropdowns.less
View file @ 3c7a43a1
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
padding: 5px 0; padding: 5px 0;
margin: 2px 0 0; // override default ul margin: 2px 0 0; // override default ul
list-style: none; list-style: none;
background-color: @dropdown-background; background-color: @dropdown-bg;
border: 1px solid #ccc; // IE8 fallback border: 1px solid #ccc; // IE8 fallback
border: 1px solid @dropdown-border; border: 1px solid @dropdown-border;
border-radius: @border-radius-base; border-radius: @border-radius-base;
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
font-weight: normal; font-weight: normal;
line-height: @line-height-base; line-height: @line-height-base;
color: @dropdown-link-color; color: @dropdown-link-color;
white-space: nowrap; white-space: nowrap; // prevent links from randomly breaking onto new lines
} }
} }
...@@ -82,8 +82,8 @@ ...@@ -82,8 +82,8 @@
.dropdown-submenu:hover > a, .dropdown-submenu:hover > a,
.dropdown-submenu:focus > a { .dropdown-submenu:focus > a {
text-decoration: none; text-decoration: none;
color: @dropdown-link-color-hover; color: @dropdown-link-hover-color;
#gradient > .vertical(@dropdown-link-background-hover, darken(@dropdown-link-background-hover, 5%)); #gradient > .vertical(@dropdown-link-hover-bg, darken(@dropdown-link-hover-bg, 5%));
} }
// Active state // Active state
...@@ -91,10 +91,10 @@ ...@@ -91,10 +91,10 @@
.dropdown-menu > .active > a, .dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { .dropdown-menu > .active > a:focus {
color: @dropdown-link-color-active; color: @dropdown-link-active-color;
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
#gradient > .vertical(@dropdown-link-background-active, darken(@dropdown-link-background-active, 5%)); #gradient > .vertical(@dropdown-link-active-bg, darken(@dropdown-link-active-bg, 5%));
} }
// Disabled state // Disabled state
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus { .dropdown-menu > .disabled > a:focus {
color: @grayLight; color: @gray-light;
} }
// Nuke hover/focus effects // Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:hover,
...@@ -186,12 +186,12 @@ ...@@ -186,12 +186,12 @@
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
border-width: 5px 0 5px 5px; border-width: 5px 0 5px 5px;
border-left-color: darken(@dropdown-background, 20%); border-left-color: darken(@dropdown-bg, 20%);
margin-top: 5px; margin-top: 5px;
margin-right: -10px; margin-right: -10px;
} }
.dropdown-submenu:hover > a:after { .dropdown-submenu:hover > a:after {
border-left-color: @dropdown-link-color-hover; border-left-color: @dropdown-link-hover-color;
} }
// Left aligned submenus // Left aligned submenus
......
less/forms.less
View file @ 3c7a43a1
...@@ -23,7 +23,7 @@ legend { ...@@ -23,7 +23,7 @@ legend {
margin-bottom: @line-height-base; margin-bottom: @line-height-base;
font-size: (@font-size-base * 1.5); font-size: (@font-size-base * 1.5);
line-height: (@line-height-base * 2); line-height: (@line-height-base * 2);
color: @grayDark; color: @gray-dark;
border: 0; border: 0;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
...@@ -62,11 +62,11 @@ input[type="color"] { ...@@ -62,11 +62,11 @@ input[type="color"] {
line-height: @line-height-base; line-height: @line-height-base;
color: @gray; color: @gray;
vertical-align: middle; vertical-align: middle;
background-color: @input-background; background-color: @input-bg;
border: 1px solid @input-border; border: 1px solid @input-border;
border-radius: @input-border-radius; border-radius: @input-border-radius;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border linear .2s, box-shadow linear .2s"); .transition(~"border-color linear .2s, box-shadow linear .2s");
} }
// Reset appearance properties for textual inputs and textarea // Reset appearance properties for textual inputs and textarea
...@@ -88,6 +88,11 @@ input[type="checkbox"] { ...@@ -88,6 +88,11 @@ input[type="checkbox"] {
width: auto; // Override of generic input selector width: auto; // Override of generic input selector
} }
// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
.box-sizing(border-box);
}
// Reset height since textareas have rows // Reset height since textareas have rows
textarea { textarea {
height: auto; height: auto;
...@@ -173,6 +178,7 @@ textarea { ...@@ -173,6 +178,7 @@ textarea {
display: inline; display: inline;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
cursor: pointer;
} }
} }
...@@ -188,21 +194,24 @@ textarea { ...@@ -188,21 +194,24 @@ textarea {
margin-top: ((@line-height-base / 4) * -1); margin-top: ((@line-height-base / 4) * -1);
} }
/*
// Move the options list down to align with labels // Move the options list down to align with labels
.controls > .radio:first-child, .controls > .radio:first-child,
.controls > .checkbox:first-child { .controls > .checkbox:first-child {
padding-top: 5px; // has to be padding because margin collaspes padding-top: 5px; // has to be padding because margin collaspes
} }
*/
// Radios and checkboxes on same line // Radios and checkboxes on same line
.radio-inline, .radio-inline,
.checkbox-inline { .checkbox-inline {
display: inline-block; display: inline-block;
padding-top: 5px; // padding-top: 5px;
padding-left: 20px; padding-left: 20px;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
font-weight: normal; font-weight: normal;
cursor: pointer;
} }
.radio-inline + .radio-inline, .radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline { .checkbox-inline + .checkbox-inline {
...@@ -286,7 +295,7 @@ textarea { ...@@ -286,7 +295,7 @@ textarea {
&[readonly], &[readonly],
fieldset[disabled] & { fieldset[disabled] & {
cursor: not-allowed; cursor: not-allowed;
background-color: @input-background-disabled; background-color: @input-bg-disabled;
} }
} }
// Explicitly reset the colors here // Explicitly reset the colors here
...@@ -307,15 +316,15 @@ input[type="checkbox"] { ...@@ -307,15 +316,15 @@ input[type="checkbox"] {
// Warning // Warning
.has-warning { .has-warning {
.formFieldState(@state-warning-text, @state-warning-text, @state-warning-background); .formFieldState(@state-warning-text, @state-warning-text, @state-warning-bg);
} }
// Error // Error
.has-error { .has-error {
.formFieldState(@state-error-text, @state-error-text, @state-error-background); .formFieldState(@state-danger-text, @state-danger-text, @state-danger-bg);
} }
// Success // Success
.has-success { .has-success {
.formFieldState(@state-success-text, @state-success-text, @state-success-background); .formFieldState(@state-success-text, @state-success-text, @state-success-bg);
} }
// HTML5 invalid states // HTML5 invalid states
...@@ -341,9 +350,9 @@ select:focus:invalid { ...@@ -341,9 +350,9 @@ select:focus:invalid {
padding: (@line-height-base - 1) 20px @line-height-base; padding: (@line-height-base - 1) 20px @line-height-base;
margin-top: @line-height-base; margin-top: @line-height-base;
margin-bottom: @line-height-base; margin-bottom: @line-height-base;
background-color: @form-actions-background; background-color: @form-actions-bg;
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
.clear_float(); // Adding clearfix to allow for .pull-right button containers .clearfix(); // Adding clearfix to allow for .pull-right button containers
} }
...@@ -421,7 +430,7 @@ select:focus:invalid { ...@@ -421,7 +430,7 @@ select:focus:invalid {
line-height: @line-height-base; line-height: @line-height-base;
text-align: center; text-align: center;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
background-color: @grayLighter; background-color: @gray-lighter;
border: 1px solid #ccc; border: 1px solid #ccc;
&.input-small { &.input-small {
...@@ -509,7 +518,7 @@ select:focus:invalid { ...@@ -509,7 +518,7 @@ select:focus:invalid {
// Horizontal forms // Horizontal forms
// -------------------------------------------------- // --------------------------------------------------
@media screen and (min-width: 768px) { @media screen and (min-width: @screen-tablet) {
.form-horizontal { .form-horizontal {
...@@ -517,7 +526,7 @@ select:focus:invalid { ...@@ -517,7 +526,7 @@ select:focus:invalid {
.control-group { .control-group {
position: relative; position: relative;
margin-bottom: @line-height-base; margin-bottom: @line-height-base;
.clear_float(); .clearfix();
input, input,
select, select,
...@@ -539,5 +548,10 @@ select:focus:invalid { ...@@ -539,5 +548,10 @@ select:focus:invalid {
margin-left: @component-offset-horizontal; margin-left: @component-offset-horizontal;
} }
// Make sure form actions buttons are aligned with controls
.form-actions {
padding-left: @component-offset-horizontal;
}
} }
} }
less/glyphicons.less
View file @ 3c7a43a1
...@@ -26,14 +26,13 @@ ...@@ -26,14 +26,13 @@
url('@{glyphicons-font-path}/glyphiconshalflings-regular.woff') format('woff'), url('@{glyphicons-font-path}/glyphiconshalflings-regular.woff') format('woff'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.ttf') format('truetype'), url('@{glyphicons-font-path}/glyphiconshalflings-regular.ttf') format('truetype'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg'); url('@{glyphicons-font-path}/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
font-style: normal;
font-weight: normal;
} }
// Catchall baseclass // Catchall baseclass
.glyphicon:before { .glyphicon:before {
font-family: 'Glyphicons Halflings'; font-family: 'Glyphicons Halflings';
font-style: normal; font-style: normal;
font-weight: normal;
line-height: 1; line-height: 1;
} }
......
less/grid.less
View file @ 3c7a43a1
...@@ -12,38 +12,56 @@ ...@@ -12,38 +12,56 @@
.row { .row {
.make-row(); .make-row();
} }
[class*="col-span-"] {
// Common styles for small and large grid columns
.col {
position: relative; position: relative;
// Float and set width: 100%; for easy stacking on mobile devices
float: left;
width: 100%;
// Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2); padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2);
} }
// Generate small grid classes first
.generate-grid-columns(@grid-columns);
// Then generate the larger grid classes via media query
@media screen and (min-width: @screen-small) {
.generate-large-grid-columns(@grid-columns);
}
// Responsive: Tablets and up // Responsive: Tablets and up
@media screen and (min-width: 768px) { @media screen and (min-width: @screen-tablet) {
.container { .container {
max-width: 728px; max-width: 728px;
} }
// Generate the grid columns and offsets .row {
[class*="col-span-"] { float: left; } margin-left: (@grid-gutter-width / -2);
.generate-grid-columns(@grid-columns); margin-right: (@grid-gutter-width / -2);
}
} }
// Responsive: Desktops and up // Responsive: Desktops and up
@media screen and (min-width: 992px) { @media screen and (min-width: @screen-desktop) {
.container { .container {
max-width: 940px; max-width: 940px;
} }
} }
// Responsive: Large desktops and up // Responsive: Large desktops and up
@media screen and (min-width: 1200px) { @media screen and (min-width: @screen-large-desktop) {
.container { .container {
max-width: 1170px; max-width: 1170px;
} }
} }
// Reset utility classes due to specificity // Reset utility classes due to specificity
[class*="col-span-"].pull-right { /*[class*="col-span-"].pull-right {
float: right; float: right;
} }*/
less/jumbotron.less
View file @ 3c7a43a1
...@@ -6,11 +6,11 @@ ...@@ -6,11 +6,11 @@
.jumbotron { .jumbotron {
padding: 30px; padding: 30px;
margin-bottom: 30px; margin-bottom: 30px;
font-size: 21px; font-size: (@font-size-base * 1.5);
font-weight: 200; font-weight: 200;
line-height: (@line-height-base * 1.5); line-height: (@line-height-base * 1.5);
color: @jumbotron-lead-color; color: @jumbotron-lead-color;
background-color: @jumbotron-background; background-color: @jumbotron-bg;
h1 { h1 {
line-height: 1; line-height: 1;
color: @jumbotron-heading-color; color: @jumbotron-heading-color;
...@@ -20,13 +20,13 @@ ...@@ -20,13 +20,13 @@
} }
} }
@media screen and (min-width: 768px) { @media screen and (min-width: @screen-tablet) {
.jumbotron { .jumbotron {
padding: 50px 60px; padding: 50px 60px;
border-radius: 6px; // Only round corners at higher resolutions border-radius: @border-radius-large; // Only round corners at higher resolutions
h1 { h1 {
font-size: 60px; font-size: (@font-size-base * 4.5);
} }
} }
} }
less/labels.less
View file @ 3c7a43a1
...@@ -2,45 +2,69 @@ ...@@ -2,45 +2,69 @@
// Labels // Labels
// -------------------------------------------------- // --------------------------------------------------
// Base classes
.label { .label {
display: inline;
padding: .25em .6em; padding: .25em .6em;
font-size: 75%; font-size: 75%;
font-weight: 500; font-weight: 500;
color: #fff;
line-height: 1; line-height: 1;
vertical-align: middle; color: #fff;
white-space: nowrap;
text-align: center; text-align: center;
background-color: @grayLight; white-space: nowrap;
vertical-align: middle;
background-color: @gray-light;
border-radius: .25em; border-radius: .25em;
}
// Hover state, but only for links // Add hover effects, but only for links
a.label { &[href] {
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
background-color: darken(@gray-light, 10%);
}
} }
} }
// Colors // Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) // Contextual variations (linked labels get darker on :hover)
.label { .label-danger {
// Danger (red) background-color: @label-danger-bg;
&-danger { background-color: @label-danger-background; } &[href] {
&-danger[href] { background-color: darken(@label-danger-background, 10%); } &:hover,
// Warnings (orange) &:focus {
&-warning { background-color: @label-warning-background; } background-color: darken(@label-danger-bg, 10%);
&-warning[href] { background-color: darken(@label-warning-background, 10%); } }
// Success (green) }
&-success { background-color: @label-success-background; }
&-success[href] { background-color: darken(@label-success-background, 10%); }
// Info (turquoise)
&-info { background-color: @label-info-background; }
&-info[href] { background-color: darken(@label-info-background, 10%); }
} }
.label-success {
background-color: @label-success-bg;
&[href] {
&:hover,
&:focus {
background-color: darken(@label-success-bg, 10%);
}
}
}
.label-warning {
background-color: @label-warning-bg;
&[href] {
&:hover,
&:focus {
background-color: darken(@label-warning-bg, 10%);
}
}
}
.label-info {
background-color: @label-info-bg;
&[href] {
&:hover,
&:focus {
background-color: darken(@label-info-bg, 10%);
}
}
}
\ No newline at end of file
less/list-group.less 0 → 100644
View file @ 3c7a43a1
//
// List groups
// --------------------------------------------------
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin: 0 0 20px; // reset all margins because ul and ol
background-color: @list-group-bg;
}
// Individual list items
// -------------------------
.list-group-item {
position: relative;
display: block;
padding: 10px 30px 10px 15px;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
border: 1px solid @list-group-border;
}
// Round the first and last items
.list-group-item:first-child {
.border-top-radius(@border-radius-base);
}
.list-group-item:last-child {
margin-bottom: 0;
.border-bottom-radius(@border-radius-base);
}
// Custom content options
// -------------------------
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}
// Linked list items
// -------------------------
// Custom content within linked items
a.list-group-item {
.list-group-item-heading {
color: #333;
}
.list-group-item-text {
color: #555;
}
}
// Hover state
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: @list-group-hover-bg;
}
// Active class on item itself, not parent
a.list-group-item.active {
z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-text;
background-color: @list-group-active-bg;
border-color: @list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: lighten(@list-group-active-bg, 40%);
}
}
// Chevrons and badges within list items
// -------------------------
.list-group-item > .badge,
.list-group-item > .glyphicon-chevron-right {
float: right;
margin-right: -15px;
}
.list-group-item > .glyphicon-chevron-right {
margin-right: -15px;
}
.list-group-item > .glyphicon + .badge {
margin-right: 5px;
}
less/mixins.less
View file @ 3c7a43a1
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
// that are clearfixed. // that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using // 2. The use of `table` rather than `block` is only necessary if using
// `:before` to contain the top-margins of child elements. // `:before` to contain the top-margins of child elements.
.clear_float() { .clearfix() {
&:before, &:before,
&:after { &:after {
content: " "; /* 1 */ content: " "; /* 1 */
...@@ -155,7 +155,6 @@ ...@@ -155,7 +155,6 @@
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885 -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
-o-transform: skew(@x, @y); -o-transform: skew(@x, @y);
transform: skew(@x, @y); transform: skew(@x, @y);
-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
} }
.translate3d(@x, @y, @z) { .translate3d(@x, @y, @z) {
-webkit-transform: translate3d(@x, @y, @z); -webkit-transform: translate3d(@x, @y, @z);
...@@ -249,20 +248,18 @@ ...@@ -249,20 +248,18 @@
#gradient { #gradient {
.horizontal(@startColor: #555, @endColor: #333) { .horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor; background-color: @endColor;
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x; background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
} }
.vertical(@startColor: #555, @endColor: #333) { .vertical(@startColor: #555, @endColor: #333) {
background-color: @endColor; background-color: @endColor;
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x; background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
...@@ -270,9 +267,8 @@ ...@@ -270,9 +267,8 @@
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) { .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor; background-color: @endColor;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
} }
.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
...@@ -280,10 +276,9 @@ ...@@ -280,10 +276,9 @@
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat; background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
} }
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
...@@ -291,7 +286,6 @@ ...@@ -291,7 +286,6 @@
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat; background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
...@@ -301,7 +295,7 @@ ...@@ -301,7 +295,7 @@
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
background-image: -o-radial-gradient(circle, @innerColor, @outerColor); background-image: radial-gradient(circle, @innerColor, @outerColor);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.striped(@color: #555, @angle: 45deg) { .striped(@color: #555, @angle: 45deg) {
...@@ -309,7 +303,6 @@ ...@@ -309,7 +303,6 @@
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
} }
} }
...@@ -346,7 +339,7 @@ ...@@ -346,7 +339,7 @@
// ------------------------- // -------------------------
// Dividers (basically an hr) within dropdowns and nav lists // Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@top: #e5e5e5, @bottom: #fff) { .nav-divider(@top: #e5e5e5, @bottom: #fff) {
height: 1px; height: 2px; // 1px for background, one for border
margin: ((@line-height-base / 2) - 1) 0; margin: ((@line-height-base / 2) - 1) 0;
overflow: hidden; overflow: hidden;
background-color: @top; background-color: @top;
...@@ -400,31 +393,38 @@ ...@@ -400,31 +393,38 @@
.container-fixed() { .container-fixed() {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
.clear_float(); .clearfix();
} }
// Make a grid // Make a grid
// Creates a wrapper for a series of columns // Creates a wrapper for a series of columns
.make-row() { .make-row() {
// Negative margin the row out to align the content of columns // Then clear the floated columns
.clearfix();
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@grid-gutter-width / -2); margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2); margin-right: (@grid-gutter-width / -2);
// Then clear the floated columns }
.clear_float();
} }
// Generate the columns // Generate the columns
.make-column(@columns) { .make-column(@columns) {
@media (min-width: @grid-float-breakpoint) { position: relative;
// Float and set width: 100%; for easy stacking on mobile devices
float: left; float: left;
// Calculate width based on number of columns available width: 100%;
width: percentage(@columns / @grid-columns);
}
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
// Set inner padding as gutters instead of margin // Inner gutter via padding
padding-left: (@grid-gutter-width / 2); padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
width: percentage((@columns / @grid-columns));
}
} }
// Generate the column offsets // Generate the column offsets
.make-column-offset(@columns) { .make-column-offset(@columns) {
...@@ -445,15 +445,41 @@ ...@@ -445,15 +445,41 @@
// The Grid
// Small grid columns
.generate-grid-columns(@grid-columns) { .generate-grid-columns(@grid-columns) {
// Default columns .col-sm-X (@index) when (@index > 0) {
.col-span-X (@index) when (@index > 0) { .col-sm-@{index} { .col-sm-(@index); }
.col-span-@{index} { .col-span-(@index); } .col-sm-X((@index - 1));
.col-span-X((@index - 1)); }
.col-sm-X (0) {}
// Generate columns
.col-sm-X(@grid-columns);
// Apply the styles
.col-sm-(@columns) {
width: percentage((@columns / @grid-columns));
}
}
// Large grid columns
.generate-large-grid-columns(@grid-columns) {
.col-lg-X (@index) when (@index > 0) {
.col-lg-@{index} { .col-lg-(@index); }
.col-lg-X((@index - 1));
}
.col-lg-X (0) {}
// Generate the columns
.col-lg-X(@grid-columns);
// Apply the styles
.col-lg-(@columns) {
width: percentage((@columns / @grid-columns));
} }
.col-span-X(0) {}
// Offsets (gaps between columns) // Offsets (gaps between columns)
.col-offset-X (@index) when (@index > 0) { .col-offset-X (@index) when (@index > 0) {
...@@ -477,9 +503,6 @@ ...@@ -477,9 +503,6 @@
.col-pull-X (0) {} .col-pull-X (0) {}
// Apply the styles // Apply the styles
.col-span-(@columns) {
width: percentage((@columns / @grid-columns));
}
.col-offset-(@columns) { .col-offset-(@columns) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
...@@ -491,7 +514,6 @@ ...@@ -491,7 +514,6 @@
} }
// Generate .spanX and .offsetX // Generate .spanX and .offsetX
.col-span-X(@grid-columns);
.col-offset-X(@grid-columns); .col-offset-X(@grid-columns);
.col-push-X(@grid-columns); .col-push-X(@grid-columns);
.col-pull-X(@grid-columns); .col-pull-X(@grid-columns);
......
less/modals.less
View file @ 3c7a43a1
...@@ -74,18 +74,19 @@ ...@@ -74,18 +74,19 @@
// Modal header // Modal header
// Top section of the modal w/ title and dismiss // Top section of the modal w/ title and dismiss
.modal-header { .modal-header {
padding: 9px 15px; padding: @modal-title-padding;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
min-height: (@modal-title-padding + @modal-title-line-height);
} }
// Close icon // Close icon
.modal-header .close { .modal-header .close {
margin-top: 2px; margin-top: -2px;
} }
// Title text within header // Title text within header
.modal-title { .modal-title {
margin: 0; margin: 0;
line-height: 30px; // effectively set a min-height for the header line-height: @modal-title-line-height;
} }
// Modal body // Modal body
...@@ -119,7 +120,7 @@ ...@@ -119,7 +120,7 @@
} }
// Scale up the modal // Scale up the modal
@media screen and (min-width: 768px) { @media screen and (min-width: @screen-tablet) {
.modal-dialog { .modal-dialog {
left: 50%; left: 50%;
......
less/navbar.less
View file @ 3c7a43a1
...@@ -5,43 +5,45 @@ ...@@ -5,43 +5,45 @@
// Wrapper and base class // Wrapper and base class
.navbar { .navbar {
position: relative; position: relative;
padding: 10px 15px; margin-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
background-color: @navbar-bg; background-color: @navbar-bg;
border-radius: @border-radius-base; border-radius: @border-radius-base;
// Prevent floats from breaking the navbar // Prevent floats from breaking the navbar
.clear_float(); .clearfix();
} }
// Navbar nav links // Navbar nav links
// ------------------------- // -------------------------
.navbar { .navbar-nav {
.nav { // Space out from .navbar .brand and .btn-navbar when stacked in mobile views
// space out from .navbar .brand and .btn-navbar margin-top: 5px;
margin-top: 15px;
} > li > a {
.nav > li > a {
padding-top: ((@navbar-height - @line-height-base) / 2); padding-top: ((@navbar-height - @line-height-base) / 2);
padding-bottom: ((@navbar-height - @line-height-base) / 2); padding-bottom: ((@navbar-height - @line-height-base) / 2);
color: @navbar-link-color; color: @navbar-link-color;
line-height: 20px; line-height: 20px;
} }
.nav > li > a:hover, > li > a:hover,
.nav > li > a:focus { > li > a:focus {
color: @navbar-link-color-hover; color: @navbar-link-hover-color;
background-color: @navbar-link-bg-hover; background-color: @navbar-link-hover-bg;
} }
.nav > .active > a, > .active > a,
.nav > .active > a:hover, > .active > a:hover,
.nav > .active > a:focus { > .active > a:focus {
color: @navbar-link-color-active; color: @navbar-link-active-color;
background-color: @navbar-link-bg-active; background-color: @navbar-link-active-bg;
} }
.nav > .disabled > a, > .disabled > a,
.nav > .disabled > a:hover, > .disabled > a:hover,
.nav > .disabled > a:focus { > .disabled > a:focus {
color: @navbar-link-color-disabled; color: @navbar-link-disabled-color;
background-color: @navbar-link-bg-disabled; background-color: @navbar-link-disabled-bg;
} }
} }
...@@ -65,8 +67,13 @@ ...@@ -65,8 +67,13 @@
z-index: @zindex-navbar-fixed; z-index: @zindex-navbar-fixed;
border-radius: 0; border-radius: 0;
} }
.navbar-fixed-top { top: 0; } .navbar-fixed-top {
.navbar-fixed-bottom { bottom: 0; } top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
}
...@@ -80,17 +87,17 @@ ...@@ -80,17 +87,17 @@
max-width: 200px; max-width: 200px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 7px 15px; padding: 15px;
font-size: 18px; font-size: @font-size-large;
font-weight: 500; font-weight: 500;
line-height: @line-height-base; line-height: @line-height-base;
color: @navbar-brand-color; color: @navbar-brand-color;
text-align: center; text-align: center;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-brand-color-hover; color: @navbar-brand-hover-color;
text-decoration: none; text-decoration: none;
background-color: @navbar-brand-bg-hover; background-color: @navbar-brand-hover-bg;
} }
} }
...@@ -122,11 +129,6 @@ ...@@ -122,11 +129,6 @@
} }
} }
// Dividers in navbar
.navbar .nav > .divider {
.nav-divider(darken(@navbar-bg, 5%), lighten(@navbar-bg, 5%));
}
// Navbar form // Navbar form
.navbar-form { .navbar-form {
.navbar-vertical-align(34px); // Vertically center in navbar .navbar-vertical-align(34px); // Vertically center in navbar
...@@ -135,32 +137,32 @@ ...@@ -135,32 +137,32 @@
// Dropdown menus // Dropdown menus
// Menu position and menu carets // Menu position and menu carets
.navbar .nav > li > .dropdown-menu { .navbar-nav > li > .dropdown-menu {
margin-top: 0; margin-top: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
// Menu position and menu caret support for dropups via extra dropup class // Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .nav > li > .dropdown-menu { .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
// Dropdown menu items and carets // Dropdown menu items and carets
.navbar .nav { .navbar-nav {
// Caret should match text color on hover // Caret should match text color on hover
li.dropdown > a:hover .caret, li.dropdown > a:hover .caret,
li.dropdown > a:focus .caret { li.dropdown > a:focus .caret {
border-top-color: @navbar-link-color-hover; border-top-color: @navbar-link-hover-color;
border-bottom-color: @navbar-link-color-hover; border-bottom-color: @navbar-link-hover-color;
} }
// Remove background color from open dropdown // Remove background color from open dropdown
li.dropdown.open > .dropdown-toggle, li.dropdown.open > .dropdown-toggle,
li.dropdown.active > .dropdown-toggle, li.dropdown.active > .dropdown-toggle,
li.dropdown.open.active > .dropdown-toggle { li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-link-bg-active; background-color: @navbar-link-active-bg;
color: @navbar-link-color-active; color: @navbar-link-active-color;
} }
li.dropdown > .dropdown-toggle .caret { li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-link-color; border-top-color: @navbar-link-color;
...@@ -169,14 +171,14 @@ ...@@ -169,14 +171,14 @@
li.dropdown.open > .dropdown-toggle .caret, li.dropdown.open > .dropdown-toggle .caret,
li.dropdown.active > .dropdown-toggle .caret, li.dropdown.active > .dropdown-toggle .caret,
li.dropdown.open.active > .dropdown-toggle .caret { li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-link-color-active; border-top-color: @navbar-link-active-color;
border-bottom-color: @navbar-link-color-active; border-bottom-color: @navbar-link-active-color;
} }
} }
// Right aligned menus need alt position // Right aligned menus need alt position
.navbar .pull-right > li > .dropdown-menu, .navbar-nav.pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right { .navbar-nav > li > .dropdown-menu.pull-right {
left: auto; left: auto;
right: 0; right: 0;
} }
...@@ -193,34 +195,36 @@ ...@@ -193,34 +195,36 @@
color: @navbar-inverse-brand-color; color: @navbar-inverse-brand-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-brand-color-hover; color: @navbar-inverse-brand-hover-color;
background-color: @navbar-inverse-brand-bg-hover; background-color: @navbar-inverse-brand-hover-bg;
} }
} }
.navbar-text { .navbar-text {
color: @navbar-inverse-text; color: @navbar-inverse-color;
} }
.nav > li > a { .navbar-nav {
> li > a {
color: @navbar-inverse-link-color; color: @navbar-inverse-link-color;
} }
.nav > li > a:hover, > li > a:hover,
.nav > li > a:focus { > li > a:focus {
color: @navbar-inverse-link-color-hover; color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-bg-hover; background-color: @navbar-inverse-link-hover-bg;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
} }
.nav > .active > a, > .disabled > a,
.nav > .active > a:hover, > .disabled > a:hover,
.nav > .active > a:focus { > .disabled > a:focus {
color: @navbar-inverse-link-color-active; color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-bg-active; background-color: @navbar-inverse-link-disabled-bg;
} }
.nav > .disabled > a,
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: @navbar-inverse-link-color-disabled;
background-color: @navbar-inverse-link-bg-disabled;
} }
// Darken the responsive nav toggle // Darken the responsive nav toggle
...@@ -235,76 +239,55 @@ ...@@ -235,76 +239,55 @@
} }
} }
// Darken dividers
.nav > .divider {
background-color: darken(@navbar-inverse-bg, 5%);
border-bottom-color: lighten(@navbar-inverse-bg, 5%);
}
// Dropdowns // Dropdowns
.nav li.dropdown.open > .dropdown-toggle, .navbar-nav {
.nav li.dropdown.active > .dropdown-toggle, li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle { li.dropdown.active > .dropdown-toggle,
background-color: @navbar-inverse-link-bg-active; li.dropdown.open.active > .dropdown-toggle {
color: @navbar-inverse-link-color-active; background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color;
} }
.nav li.dropdown > a:hover .caret { li.dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-color-hover; border-top-color: @navbar-inverse-link-hover-color;
border-bottom-color: @navbar-inverse-link-color-hover; border-bottom-color: @navbar-inverse-link-hover-color;
} }
.nav li.dropdown > .dropdown-toggle .caret { li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color; border-top-color: @navbar-inverse-link-color;
border-bottom-color: @navbar-inverse-link-color; border-bottom-color: @navbar-inverse-link-color;
} }
.nav li.dropdown.open > .dropdown-toggle .caret, li.dropdown.open > .dropdown-toggle .caret,
.nav li.dropdown.active > .dropdown-toggle .caret, li.dropdown.active > .dropdown-toggle .caret,
.nav li.dropdown.open.active > .dropdown-toggle .caret { li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color-active; border-top-color: @navbar-inverse-link-active-color;
border-bottom-color: @navbar-inverse-link-color-active; border-bottom-color: @navbar-inverse-link-active-color;
}
} }
} }
// Inverse navbar // Responsive navbar
// -------------------------------------------------- // --------------------------------------------------
@media screen and (min-width: 768px) { @media screen and (min-width: @screen-tablet) {
.navbar {
padding-top: 0;
padding-bottom: 0;
}
.navbar-brand { .navbar-brand {
float: left; float: left;
padding-top: ((@navbar-height - @line-height-base) / 2); margin-left: -5px;
padding-bottom: ((@navbar-height - @line-height-base) / 2); margin-right: 5px;
margin-left: -10px;
} }
.navbar .nav { .navbar .nav {
float: left; float: left;
margin-top: 0; // undo top margin to make nav extend full height of navbar margin-top: 0; // undo top margin to make nav extend full height of navbar
.clear_float();
&.pull-right { > li {
float: right;
}
}
.navbar .nav > li {
float: left; float: left;
} }
// Dividers go vertical &.pull-right {
// Change the height and height, disable bottom border, then add right border float: right;
.navbar .nav > .divider {
width: 1px;
height: (@navbar-height * .6);
margin: (@navbar-height * .2) 9px;
border-bottom: 0;
border-right: 1px solid lighten(@navbar-bg, 5%);
} }
// Since we override the border, we need to specify it again for inverted navbars
.navbar-inverse .nav > .divider {
border-right-color: lighten(@navbar-inverse-bg, 5%);
} }
// Required to make the collapsing navbar work on regular desktops // Required to make the collapsing navbar work on regular desktops
...@@ -321,59 +304,44 @@ ...@@ -321,59 +304,44 @@
} }
/*
// Janky solution for now to account for links outside the .nav
// ------------------------- // Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
margin-top: ((@navbar-height - @input-height-base) / 2);
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
// Default navbar variables
.navbar-link { .navbar-link {
color: @navbar-link-color; color: @navbar-link-color;
&:hover { &:hover {
color: @navbar-link-color-hover; color: @navbar-link-hover-color;
} }
} }
// Buttons in navbar // Use the inverse navbar variables
// ------------------------- .navbar-inverse .navbar-link {
.navbar .btn, color: @navbar-inverse-link-color;
.navbar .btn-group { &:hover {
.navbarVerticalAlign(30px); // Vertically center in navbar color: @navbar-inverse-link-hover-color;
}
.navbar .btn-group .btn,
.navbar .input-prepend .btn,
.navbar .input-append .btn {
margin-top: 0; // then undo the margin here so we don't accidentally double it
}
// Navbar forms
// -------------------------
.navbar-form {
margin-bottom: 0; // remove default bottom margin
.clearfix();
input,
select,
.radio,
.checkbox {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
input,
select,
.btn {
display: inline-block;
margin-bottom: 0;
}
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
margin-top: 3px;
}
.input-append,
.input-prepend {
margin-top: 5px;
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
input {
margin-top: 0; // remove the margin on top since it's on the parent
}
} }
} }
*/
less/navs.less
View file @ 3c7a43a1
...@@ -11,26 +11,54 @@ ...@@ -11,26 +11,54 @@
margin-bottom: 0; margin-bottom: 0;
padding-left: 0; // Override default ul/ol padding-left: 0; // Override default ul/ol
list-style: none; list-style: none;
.clear_float(); .clearfix();
} > li {
.nav > li {
display: block; display: block;
} > a {
.nav > li > a {
position: relative; position: relative;
display: block; display: block;
padding: 10px 15px; padding: 10px 15px;
} &:hover,
.nav > li > a:hover, &:focus {
.nav > li > a:focus {
text-decoration: none; text-decoration: none;
background-color: @grayLighter; background-color: @gray-lighter;
} }
}
// Nav states and addons
// --------------------------------------------------
// Redeclare pull classes because of specifity // Disabled state
// Todo: consider making these utilities !important to avoid this bullshit // -------------------------
.nav > .pull-right {
// Gray out text
&.disabled > a {
color: @gray-light;
}
// Nuke hover effects
&.disabled > a:hover,
&.disabled > a:focus {
color: @gray-light;
text-decoration: none;
background-color: transparent;
cursor: default;
}
// Space the headers out when they follow another list item (link)
&+ .nav-header {
margin-top: 9px;
}
}
// Redeclare pull classes because of specifity
// Todo: consider making these utilities !important to avoid this bullshit
> .pull-right {
float: right; float: right;
}
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider();
}
} }
...@@ -44,123 +72,112 @@ ...@@ -44,123 +72,112 @@
// Give the tabs something to sit on // Give the tabs something to sit on
.nav-tabs { .nav-tabs {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} > li {
.nav-tabs > li {
float: left; float: left;
// Make the list-items overlay the bottom border // Make the list-items overlay the bottom border
margin-bottom: -1px; margin-bottom: -1px;
}
// Actual tabs (as links) // Actual tabs (as links)
.nav-tabs > li > a { > a {
margin-right: 2px; margin-right: 2px;
line-height: @line-height-base; line-height: @line-height-base;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
&:hover { &:hover {
border-color: @grayLighter @grayLighter #ddd; border-color: @gray-lighter @gray-lighter #ddd;
} }
} }
// Active state, and it's :hover to override normal :hover
.nav-tabs > .active > a, // Active state, and it's :hover to override normal :hover
.nav-tabs > .active > a:hover, &.active > a,
.nav-tabs > .active > a:focus { &.active > a:hover,
&.active > a:focus {
color: @gray; color: @gray;
background-color: @body-background; background-color: @body-bg;
border: 1px solid #ddd; border: 1px solid #ddd;
border-bottom-color: transparent; border-bottom-color: transparent;
cursor: default; cursor: default;
}
}
// pulling this in mainly for less shorthand
&.nav-justified {
.nav-justified;
.nav-tabs-justified;
}
} }
// Pills // Pills
// ------------------------- // -------------------------
.nav-pills {
.nav-pills > li { > li {
float: left; float: left;
}
// Links rendered as pills // Links rendered as pills
.nav-pills > li > a { > a {
border-radius: 5px; border-radius: 5px;
} }
.nav-pills > li + li > a { + li {
> a {
margin-left: 2px; margin-left: 2px;
} }
}
// Active state // Active state
.nav-pills > .active > a, &.active > a,
.nav-pills > .active > a:hover, &.active > a:hover,
.nav-pills > .active > a:focus { &.active > a:focus {
color: #fff; color: #fff;
background-color: @link-color; background-color: @component-active-bg;
}
}
} }
// Stacked pills // Stacked pills
.nav-stacked > li { .nav-stacked {
> li {
float: none; float: none;
} + li {
.nav-stacked > li + li > a { > a {
margin-top: 2px; margin-top: 2px;
margin-left: 0; // no need for this gap between nav items margin-left: 0; // no need for this gap between nav items
}
}
}
} }
// Justified nav links // Justified nav links
// ------------------------- // -------------------------
.nav-justified { .nav-justified {
// Negative margin doesn't work, so we hack it width: 100%;
max-height: 40px; > li {
}
.nav-justified > li {
float: none; float: none;
display: table-cell; display: table-cell;
width: 1%; width: 1%;
> a {
text-align: center; text-align: center;
}
}
} }
// Lists // Move borders to anchors instead of bottom of list
// ------------------------- .nav-tabs-justified () {
border-bottom: 0;
.nav-list > li > a { > li > a {
margin-bottom: -1px; // pull up the following link for a 1px border between border-bottom: 1px solid #ddd;
border: 1px solid #e5e5e5;
}
.nav-list > li:first-child > a {
border-top-left-radius: @border-radius-base;
border-top-right-radius: @border-radius-base;
}
.nav-list > li:last-child > a {
border-bottom-left-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
z-index: 2; // Bring active item forward so border sits on top of next element
color: #fff;
background-color: @link-color;
border-color: @link-color;
}
// Override margin from .nav-tabs
margin-right: 0;
}
> .active > a {
border-bottom-color: @body-bg;
}
// Nav states and addons }
// --------------------------------------------------
// Disabled state
// -------------------------
// Gray out text
.nav > .disabled > a {
color: @grayLight;
}
// Nuke hover effects
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: @grayLight;
text-decoration: none;
background-color: transparent;
cursor: default;
}
// Nav headers (for dropdowns and lists) // Nav headers (for dropdowns and lists)
// ------------------------- // -------------------------
...@@ -168,22 +185,13 @@ ...@@ -168,22 +185,13 @@
.nav-header { .nav-header {
display: block; display: block;
padding: 3px 15px; padding: 3px 15px;
font-size: 11px; font-size: @font-size-mini;
font-weight: bold; font-weight: bold;
line-height: @line-height-base; line-height: @line-height-base;
color: @grayLight; color: @gray-light;
text-shadow: 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase; text-transform: uppercase;
} }
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// Dividers (basically an hr) within the dropdown
.nav .divider {
.nav-divider();
}
...@@ -231,8 +239,8 @@ ...@@ -231,8 +239,8 @@
margin-top: 8px; margin-top: 8px;
} }
.nav .dropdown-toggle:hover .caret { .nav .dropdown-toggle:hover .caret {
border-top-color: @link-color-hover; border-top-color: @link-hover-color;
border-bottom-color: @link-color-hover; border-bottom-color: @link-hover-color;
} }
// Active dropdown links // Active dropdown links
...@@ -258,8 +266,8 @@ ...@@ -258,8 +266,8 @@
.nav-pills .open .dropdown-toggle, .nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover { .nav > li.dropdown.open.active > a:hover {
color: #fff; color: #fff;
background-color: @grayLight; background-color: @gray-light;
border-color: @grayLight; border-color: @gray-light;
} }
.nav li.dropdown.open .caret, .nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret, .nav li.dropdown.open.active .caret,
...@@ -271,7 +279,7 @@ ...@@ -271,7 +279,7 @@
// Dropdowns in stacked tabs // Dropdowns in stacked tabs
.tabs-stacked .open > a:hover { .tabs-stacked .open > a:hover {
border-color: @grayLight; border-color: @gray-light;
} }
*/ */
less/pager.less
View file @ 3c7a43a1
...@@ -7,37 +7,48 @@ ...@@ -7,37 +7,48 @@
margin: @line-height-base 0; margin: @line-height-base 0;
list-style: none; list-style: none;
text-align: center; text-align: center;
.clear_float(); .clearfix();
} li {
.pager li {
display: inline; display: inline;
} > a,
.pager li > a, > span {
.pager li > span {
display: inline-block; display: inline-block;
padding: 5px 14px; padding: 5px 14px;
background-color: #fff; background-color: @pagination-bg;
border: 1px solid #ddd; border: 1px solid @pagination-border;
border-radius: 15px; border-radius: 15px;
} }
.pager li > a:hover,
.pager li > a:focus { > a:hover,
> a:focus {
text-decoration: none; text-decoration: none;
background-color: #f5f5f5; background-color: @pagination-active-bg;
} }
.pager .next > a, }
.pager .next > span {
.next {
> a,
> span {
float: right; float: right;
} }
.pager .previous > a, }
.pager .previous > span {
.previous {
> a,
> span {
float: left; float: left;
} }
.pager .disabled > a, }
.pager .disabled > a:hover,
.pager .disabled > a:focus, .disabled {
.pager .disabled > span { > a,
color: @grayLight; > a:hover,
background-color: #fff; > a:focus,
> span {
color: @gray-light;
background-color: @pagination-bg;
cursor: default; cursor: default;
}
}
} }
less/pagination.less
View file @ 3c7a43a1
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
padding: 4px 12px; padding: 4px 12px;
line-height: @line-height-base; line-height: @line-height-base;
text-decoration: none; text-decoration: none;
background-color: @pagination-background; background-color: @pagination-bg;
border: 1px solid @pagination-border; border: 1px solid @pagination-border;
border-left-width: 0; border-left-width: 0;
} }
...@@ -23,19 +23,19 @@ ...@@ -23,19 +23,19 @@
.pagination > li > a:focus, .pagination > li > a:focus,
.pagination > .active > a, .pagination > .active > a,
.pagination > .active > span { .pagination > .active > span {
background-color: @pagination-background-active; background-color: @pagination-active-bg;
} }
.pagination > .active > a, .pagination > .active > a,
.pagination > .active > span { .pagination > .active > span {
color: @grayLight; color: @gray-light;
cursor: default; cursor: default;
} }
.pagination > .disabled > span, .pagination > .disabled > span,
.pagination > .disabled > a, .pagination > .disabled > a,
.pagination > .disabled > a:hover, .pagination > .disabled > a:hover,
.pagination > .disabled > a:focus { .pagination > .disabled > a:focus {
color: @grayLight; color: @gray-light;
background-color: @pagination-background; background-color: @pagination-bg;
cursor: default; cursor: default;
} }
.pagination > li:first-child > a, .pagination > li:first-child > a,
......
less/panels.less 0 → 100644
View file @ 3c7a43a1
//
// Panels
// --------------------------------------------------
// Base class
.panel {
padding: 15px;
margin-bottom: 20px;
background-color: @panel-bg;
border: 1px solid @panel-border;
border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05));
}
// Optional heading
.panel-heading {
margin: -15px -15px 15px;
padding: 10px 15px;
font-size: (@font-size-base * 1.25);
font-weight: 500;
background-color: @panel-heading-bg;
border-bottom: 1px solid @panel-border;
border-top-left-radius: (@panel-border-radius - 1);
border-top-right-radius: (@panel-border-radius - 1);
}
// Contextual variations
.panel-primary {
border-color: @panel-primary-border;
.panel-heading {
color: @panel-primary-text;
background-color: @panel-primary-heading-bg;
border-color: @panel-primary-border;
}
}
.panel-success {
border-color: @panel-success-border;
.panel-heading {
color: @panel-success-text;
background-color: @panel-success-heading-bg;
border-color: @panel-success-border;
}
}
.panel-warning {
border-color: @panel-warning-border;
.panel-heading {
color: @panel-warning-text;
background-color: @panel-warning-heading-bg;
border-color: @panel-warning-border;
}
}
.panel-danger {
border-color: @panel-danger-border;
.panel-heading {
color: @panel-danger-text;
background-color: @panel-danger-heading-bg;
border-color: @panel-danger-border;
}
}
.panel-info {
border-color: @panel-info-border;
.panel-heading {
color: @panel-info-text;
background-color: @panel-info-heading-bg;
border-color: @panel-info-border;
}
}
// List groups in panels
.list-group-flush {
margin: 15px -15px -15px;
.list-group-item {
border-width: 1px 0;
// Remove border radius for top one
&:first-child {
.border-top-radius(0);
}
// But keep it for the last one
&:last-child {
border-bottom: 0;
}
}
}
less/popovers.less
View file @ 3c7a43a1
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
max-width: 276px; max-width: 276px;
padding: 1px; padding: 1px;
text-align: left; // Reset given new insertion method text-align: left; // Reset given new insertion method
background-color: @popover-background; background-color: @popover-bg;
-webkit-background-clip: padding-box; -webkit-bg-clip: padding-box;
-moz-background-clip: padding; -moz-bg-clip: padding;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #ccc; border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2); border: 1px solid rgba(0,0,0,.2);
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
.popover-title { .popover-title {
margin: 0; // reset heading margin margin: 0; // reset heading margin
padding: 8px 14px; padding: 8px 14px;
font-size: 14px; font-size: @font-size-base;
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 18px;
background-color: @popover-title-background; background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-background, 5%); border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
&:empty { &:empty {
......
less/progress-bars.less
View file @ 3c7a43a1
...@@ -56,13 +56,14 @@ ...@@ -56,13 +56,14 @@
float: left; float: left;
width: 0%; width: 0%;
height: 100%; height: 100%;
font-size: 12px; font-size: @font-size-small;
color: #fff; color: #fff;
text-align: center; text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @progress-bar-bg; background-color: @progress-bar-bg;
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.transition(width .6s ease); .transition(width .6s ease);
.backface-visibility(hidden);
} }
// Striped bars // Striped bars
......
less/responsive-utilities.less
View file @ 3c7a43a1
...@@ -5,11 +5,27 @@ ...@@ -5,11 +5,27 @@
// IE10 Metro responsive // IE10 Metro responsive
// Required for Windows 8 Metro split-screen snapping with IE10 // Required for Windows 8 Metro split-screen snapping with IE10
//
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport{ @-ms-viewport{
width: device-width; width: device-width;
} }
// IE10 on Windows Phone 8
// IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
// other words, say on a Lumia, you'll get 768px as the device width,
// meaning users will see the tablet styles and not phone styles.
//
// Alternatively you can override this with JS (see source below), but
// we won't be doing that here given our limited scope.
//
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
@media screen and (max-width: 400px) {
@-ms-viewport{
width: 320px;
}
}
// Hide from screenreaders and browsers // Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate // Credit: HTML5 Boilerplate
.hidden { .hidden {
...@@ -19,34 +35,36 @@ ...@@ -19,34 +35,36 @@
// Visibility utilities // Visibility utilities
// For desktops // For Phones
.visible-phone { display: none !important; } .visible-phone { display: inherit !important; }
.visible-tablet { display: none !important; } .visible-tablet { display: none !important; }
.hidden-phone { } .visible-desktop { display: none !important; }
.hidden-tablet { }
.hidden-desktop { display: none !important; } .hidden-phone { display: none !important; }
.visible-desktop { display: inherit !important; } .hidden-tablet { display: inherit !important; }
.hidden-desktop { display: inherit !important; }
// Tablets & small desktops only // Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
// Hide everything else .visible-phone { display: none !important; }
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important ; }
// Show
.visible-tablet { display: inherit !important; } .visible-tablet { display: inherit !important; }
// Hide .visible-desktop { display: none !important; }
.hidden-phone { display: inherit !important; }
.hidden-tablet { display: none !important; } .hidden-tablet { display: none !important; }
.hidden-desktop { display: inherit !important; }
} }
// Phones only // For desktops
@media (max-width: 767px) { @media (min-width: @screen-desktop) {
// Hide everything else .visible-phone { display: none !important; }
.hidden-desktop { display: inherit !important; } .visible-tablet { display: none !important; }
.visible-desktop { display: none !important; } .visible-desktop { display: inherit !important; }
// Show
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior .hidden-phone { display: inherit !important; }
// Hide .hidden-tablet { display: inherit !important; }
.hidden-phone { display: none !important; } .hidden-desktop { display: none !important; }
} }
// Print utilities // Print utilities
......
less/scaffolding.less
View file @ 3c7a43a1
...@@ -22,7 +22,7 @@ html { ...@@ -22,7 +22,7 @@ html {
} }
// Disable iOS/WinMobile font size changes // Disable iOS/WinMobile font size changes
@media screen and (max-device-width: 480px) { @media screen and (max-device-width: @screen-phone) {
html { html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
...@@ -31,10 +31,10 @@ html { ...@@ -31,10 +31,10 @@ html {
body { body {
font-family: @font-family-base; font-family: @font-family-base;
.font-size(); font-size: @font-size-base;
line-height: @line-height-base; line-height: @line-height-base;
color: @text-color; color: @text-color;
background-color: @body-background; background-color: @body-bg;
} }
// Reset fonts for revelant elements // Reset fonts for revelant elements
...@@ -57,7 +57,7 @@ a { ...@@ -57,7 +57,7 @@ a {
} }
a:hover, a:hover,
a:focus { a:focus {
color: @link-color-hover; color: @link-hover-color;
text-decoration: underline; text-decoration: underline;
} }
a:focus { a:focus {
...@@ -71,7 +71,6 @@ a:focus { ...@@ -71,7 +71,6 @@ a:focus {
img { img {
// Responsive images (ensure images don't scale beyond their parents) // Responsive images (ensure images don't scale beyond their parents)
max-width: 100%; // Part 1: Set a maxium relative to the parent max-width: 100%; // Part 1: Set a maxium relative to the parent
width: auto\9; // IE8 need help adjusting responsive images
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
// Match vertical alignment with other comment elements // Match vertical alignment with other comment elements
......
less/tables.less
View file @ 3c7a43a1
...@@ -5,9 +5,7 @@ ...@@ -5,9 +5,7 @@
table { table {
max-width: 100%; max-width: 100%;
background-color: @table-background; background-color: @table-bg;
border-collapse: collapse;
border-spacing: 0;
} }
th { th {
text-align: left; text-align: left;
...@@ -21,15 +19,17 @@ th { ...@@ -21,15 +19,17 @@ th {
width: 100%; width: 100%;
margin-bottom: @line-height-base; margin-bottom: @line-height-base;
// Cells // Cells
th, thead > tr > th,
td { tbody > tr > th,
thead > tr > td,
tbody > tr > td {
padding: 8px; padding: 8px;
line-height: @line-height-base; line-height: @line-height-base;
vertical-align: top; vertical-align: top;
border-top: 1px solid @table-border; border-top: 1px solid @table-border-color;
} }
// Bottom align for column headings // Bottom align for column headings
thead th { thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
} }
// Remove top border from thead by default // Remove top border from thead by default
...@@ -43,12 +43,12 @@ th { ...@@ -43,12 +43,12 @@ th {
} }
// Account for multiple tbody instances // Account for multiple tbody instances
tbody + tbody { tbody + tbody {
border-top: 2px solid @table-border; border-top: 2px solid @table-border-color;
} }
// Nesting // Nesting
.table { .table {
background-color: @body-background; background-color: @body-bg;
} }
} }
...@@ -58,8 +58,10 @@ th { ...@@ -58,8 +58,10 @@ th {
// ------------------------------- // -------------------------------
.table-condensed { .table-condensed {
th, thead > tr > th,
td { tbody > tr > th,
thead > tr > td,
tbody > tr > td {
padding: 4px 5px; padding: 4px 5px;
} }
} }
...@@ -70,74 +72,77 @@ th { ...@@ -70,74 +72,77 @@ th {
// ---------------- // ----------------
.table-bordered { .table-bordered {
border: 1px solid @table-border; border: 1px solid @table-border-color;
border-collapse: separate; // Done so we can round those corners! border-collapse: separate; // Done so we can round those corners!
border-left: 0; border-left: 0;
border-radius: @border-radius-base; border-radius: @border-radius-base;
th,
td { > thead > tr > th,
border-left: 1px solid @table-border; > tbody > tr > th,
> thead > tr > td,
> tbody > tr > td {
border-left: 1px solid @table-border-color;
} }
// Prevent a double border // Prevent a double border
caption + thead tr:first-child th, > caption + thead > tr:first-child th,
caption + tbody tr:first-child th, > caption + tbody > tr:first-child th,
caption + tbody tr:first-child td, > caption + tbody > tr:first-child td,
colgroup + thead tr:first-child th, > colgroup + thead > tr:first-child th,
colgroup + tbody tr:first-child th, > colgroup + tbody > tr:first-child th,
colgroup + tbody tr:first-child td, > colgroup + tbody > tr:first-child td,
thead:first-child tr:first-child th, > thead:first-child > tr:first-child th,
tbody:first-child tr:first-child th, > tbody:first-child > tr:first-child th,
tbody:first-child tr:first-child td { > tbody:first-child > tr:first-child td {
border-top: 0; border-top: 0;
} }
// For first th/td in the first row in the first thead or tbody // For first th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:first-child, > thead:first-child > tr:first-child > th:first-child,
tbody:first-child tr:first-child > td:first-child, > tbody:first-child > tr:first-child > td:first-child,
tbody:first-child tr:first-child > th:first-child { > tbody:first-child > tr:first-child > th:first-child {
border-top-left-radius: @border-radius-base; border-top-left-radius: @border-radius-base;
} }
// For last th/td in the first row in the first thead or tbody // For last th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:last-child, > thead:first-child > tr:first-child > th:last-child,
tbody:first-child tr:first-child > td:last-child, > tbody:first-child > tr:first-child > td:last-child,
tbody:first-child tr:first-child > th:last-child { > tbody:first-child > tr:first-child > th:last-child {
border-top-right-radius: @border-radius-base; border-top-right-radius: @border-radius-base;
} }
// For first th/td (can be either) in the last row in the last thead, tbody, and tfoot // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
thead:last-child tr:last-child > th:first-child, > thead:last-child > tr:last-child > th:first-child,
tbody:last-child tr:last-child > td:first-child, > tbody:last-child > tr:last-child > td:first-child,
tbody:last-child tr:last-child > th:first-child, > tbody:last-child > tr:last-child > th:first-child,
tfoot:last-child tr:last-child > td:first-child, > tfoot:last-child > tr:last-child > td:first-child,
tfoot:last-child tr:last-child > th:first-child { > tfoot:last-child > tr:last-child > th:first-child {
border-bottom-left-radius: @border-radius-base; border-bottom-left-radius: @border-radius-base;
} }
// For last th/td (can be either) in the last row in the last thead, tbody, and tfoot // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
thead:last-child tr:last-child > th:last-child, > thead:last-child > tr:last-child > th:last-child,
tbody:last-child tr:last-child > td:last-child, > tbody:last-child > tr:last-child > td:last-child,
tbody:last-child tr:last-child > th:last-child, > tbody:last-child > tr:last-child > th:last-child,
tfoot:last-child tr:last-child > td:last-child, > tfoot:last-child > tr:last-child > td:last-child,
tfoot:last-child tr:last-child > th:last-child { > tfoot:last-child > tr:last-child > th:last-child {
border-bottom-right-radius: @border-radius-base; border-bottom-right-radius: @border-radius-base;
} }
// Clear border-radius for first and last td in the last row in the last tbody for table with tfoot // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
tfoot + tbody:last-child tr:last-child > td:first-child { > tfoot + tbody:last-child > tr:last-child > td:first-child {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
tfoot + tbody:last-child tr:last-child > td:last-child { > tfoot + tbody:last-child > tr:last-child > td:last-child {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
// Special fixes to round the left border on the first td/th // Special fixes to round the left border on the first td/th
caption + thead tr:first-child th:first-child, > caption + thead > tr:first-child > th:first-child,
caption + tbody tr:first-child td:first-child, > caption + tbody > tr:first-child > td:first-child,
colgroup + thead tr:first-child th:first-child, > colgroup + thead > tr:first-child > th:first-child,
colgroup + tbody tr:first-child td:first-child { > colgroup + tbody > tr:first-child > td:first-child {
border-top-left-radius: @border-radius-base; border-top-left-radius: @border-radius-base;
} }
caption + thead tr:first-child th:last-child, > caption + thead > tr:first-child > th:last-child,
caption + tbody tr:first-child td:last-child, > caption + tbody > tr:first-child > td:last-child,
colgroup + thead tr:first-child th:last-child, > colgroup + thead > tr:first-child > th:last-child,
colgroup + tbody tr:first-child td:last-child { > colgroup + tbody > tr:first-child > td:last-child {
border-top-right-radius: @border-radius-base; border-top-right-radius: @border-radius-base;
} }
...@@ -153,7 +158,7 @@ th { ...@@ -153,7 +158,7 @@ th {
> tbody { > tbody {
> tr:nth-child(odd) > td, > tr:nth-child(odd) > td,
> tr:nth-child(odd) > th { > tr:nth-child(odd) > th {
background-color: @table-background-accent; background-color: @table-bg-accent;
} }
} }
} }
...@@ -168,7 +173,7 @@ th { ...@@ -168,7 +173,7 @@ th {
> tbody { > tbody {
> tr:hover > td, > tr:hover > td,
> tr:hover > th { > tr:hover > th {
background-color: @table-background-hover; background-color: @table-bg-hover;
} }
} }
} }
...@@ -197,19 +202,19 @@ table th[class*="col-span-"] { ...@@ -197,19 +202,19 @@ table th[class*="col-span-"] {
> td.success, > td.success,
> th.success, > th.success,
&.success > td { &.success > td {
background-color: @state-success-background; background-color: @state-success-bg;
border-color: @state-success-border; border-color: @state-success-border;
} }
> td.error, > td.danger,
> th.error, > th.danger,
&.error > td { &.danger > td {
background-color: @state-error-background; background-color: @state-danger-bg;
border-color: @state-error-border; border-color: @state-danger-border;
} }
> td.warning, > td.warning,
> th.warning, > th.warning,
&.warning > td { &.warning > td {
background-color: @state-warning-background; background-color: @state-warning-bg;
border-color: @state-warning-border; border-color: @state-warning-border;
} }
} }
...@@ -219,19 +224,19 @@ table th[class*="col-span-"] { ...@@ -219,19 +224,19 @@ table th[class*="col-span-"] {
> td.success:hover, > td.success:hover,
> th.success:hover, > th.success:hover,
&.success:hover > td { &.success:hover > td {
background-color: darken(@state-success-background, 5%); background-color: darken(@state-success-bg, 5%);
border-color: darken(@state-success-border, 5%); border-color: darken(@state-success-border, 5%);
} }
> td.error:hover, > td.danger:hover,
> th.error:hover, > th.danger:hover,
&.error:hover > td { &.danger:hover > td {
background-color: darken(@state-error-background, 5%); background-color: darken(@state-danger-bg, 5%);
border-color: darken(@state-error-border, 5%); border-color: darken(@state-danger-border, 5%);
} }
> td.warning:hover, > td.warning:hover,
> th.warning:hover, > th.warning:hover,
&.warning:hover > td { &.warning:hover > td {
background-color: darken(@state-warning-background, 5%); background-color: darken(@state-warning-bg, 5%);
border-color: darken(@state-warning-border, 5%); border-color: darken(@state-warning-border, 5%);
} }
} }
less/thumbnails.less
View file @ 3c7a43a1
...@@ -12,8 +12,9 @@ ...@@ -12,8 +12,9 @@
.img-thumbnail { .img-thumbnail {
padding: 4px; padding: 4px;
line-height: @line-height-base; line-height: @line-height-base;
border: 1px solid #ddd; background-color: @thumbnail-bg;
border-radius: @border-radius-base; border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out); .transition(all .2s ease-in-out);
} }
.thumbnail { .thumbnail {
...@@ -38,5 +39,5 @@ a.thumbnail:focus { ...@@ -38,5 +39,5 @@ a.thumbnail:focus {
} }
.thumbnail .caption { .thumbnail .caption {
padding: 9px; padding: 9px;
color: @gray; color: @thumbnail-caption-color;
} }
less/tooltip.less
View file @ 3c7a43a1
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
z-index: @zindex-tooltip; z-index: @zindex-tooltip;
display: block; display: block;
visibility: visible; visibility: visible;
font-size: 11px; font-size: @font-size-mini;
line-height: 1.4; line-height: 1.4;
.opacity(0); .opacity(0);
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
color: @tooltip-color; color: @tooltip-color;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
background-color: @tooltip-background; background-color: @tooltip-bg;
border-radius: @border-radius-base; border-radius: @border-radius-base;
} }
......
less/type.less
View file @ 3c7a43a1
...@@ -11,9 +11,9 @@ p { ...@@ -11,9 +11,9 @@ p {
} }
.lead { .lead {
margin-bottom: @line-height-base; margin-bottom: @line-height-base;
.font-size((@font-size-base * 1.5)); font-size: (@font-size-base * 1.5);
font-weight: 200; font-weight: 200;
line-height: 1.3; line-height: 1.4;
} }
...@@ -28,17 +28,17 @@ em { font-style: italic; } ...@@ -28,17 +28,17 @@ em { font-style: italic; }
cite { font-style: normal; } cite { font-style: normal; }
// Utility classes // Utility classes
.muted { color: @grayLight; } .text-muted { color: @gray-light; }
a.muted:hover, a.text-muted:hover,
a.muted:focus { color: darken(@grayLight, 10%); } a.text-muted:focus { color: darken(@gray-light, 10%); }
.text-warning { color: @state-warning-text; } .text-warning { color: @state-warning-text; }
a.text-warning:hover, a.text-warning:hover,
a.text-warning:focus { color: darken(@state-warning-text, 10%); } a.text-warning:focus { color: darken(@state-warning-text, 10%); }
.text-error { color: @state-error-text; } .text-danger { color: @state-danger-text; }
a.text-error:hover, a.text-danger:hover,
a.text-error:focus { color: darken(@state-error-text, 10%); } a.text-danger:focus { color: darken(@state-danger-text, 10%); }
.text-success { color: @state-success-text; } .text-success { color: @state-success-text; }
a.text-success:hover, a.text-success:hover,
...@@ -57,11 +57,10 @@ h1, h2, h3, h4, h5, h6, ...@@ -57,11 +57,10 @@ h1, h2, h3, h4, h5, h6,
font-family: @headings-font-family; font-family: @headings-font-family;
font-weight: @headings-font-weight; font-weight: @headings-font-weight;
line-height: @line-height-base; line-height: @line-height-base;
text-rendering: optimizelegibility; // Fix the character spacing for headings
small { small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: @grayLight; color: @gray-light;
} }
} }
...@@ -82,12 +81,12 @@ h6 { ...@@ -82,12 +81,12 @@ h6 {
margin-bottom: (@line-height-base / 2); margin-bottom: (@line-height-base / 2);
} }
h1, .h1 { font-size: (@font-size-base * 2.75); font-size: 4rem; } // ~38px h1, .h1 { font-size: (@font-size-base * 2.75); } // ~38px
h2, .h2 { font-size: (@font-size-base * 2.25); font-size: 3rem; } // ~32px h2, .h2 { font-size: (@font-size-base * 2.25); } // ~32px
h3, .h3 { font-size: (@font-size-base * 1.75); font-size: 2.5rem; } // ~24px h3, .h3 { font-size: (@font-size-base * 1.75); } // ~24px
h4, .h4 { font-size: (@font-size-base * 1.25); font-size: 2rem; } // ~18px h4, .h4 { font-size: (@font-size-base * 1.25); } // ~18px
h5, .h5 { font-size: @font-size-base; font-size: 1.6rem; } h5, .h5 { font-size: @font-size-base; }
h6, .h6 { font-size: (@font-size-base * 0.85); font-size: 1.2rem; } // ~12px h6, .h6 { font-size: (@font-size-base * 0.85); } // ~12px
h1 small, .h1 small { font-size: (@font-size-base * 1.75); } // ~24px h1 small, .h1 small { font-size: (@font-size-base * 1.75); } // ~24px
h2 small, .h2 small { font-size: (@font-size-base * 1.25); } // ~18px h2 small, .h2 small { font-size: (@font-size-base * 1.25); } // ~18px
...@@ -101,7 +100,7 @@ h4 small, .h4 small { font-size: @font-size-base; } ...@@ -101,7 +100,7 @@ h4 small, .h4 small { font-size: @font-size-base; }
.page-header { .page-header {
padding-bottom: ((@line-height-base / 2) - 1); padding-bottom: ((@line-height-base / 2) - 1);
margin: (@line-height-base * 2) 0 @line-height-base; margin: (@line-height-base * 2) 0 @line-height-base;
border-bottom: 1px solid @grayLighter; border-bottom: 1px solid @gray-lighter;
} }
...@@ -126,18 +125,20 @@ li { ...@@ -126,18 +125,20 @@ li {
} }
// List options // List options
// Unstyled keeps list items block level, just removes list-style // Unstyled keeps list items block level, just removes list-style
.list-unstyled, .list-unstyled {
// Inline turns list items into inline-block
.list-inline {
margin-left: 0; margin-left: 0;
list-style: none; list-style: none;
} }
// Single-line list items // Inline turns list items into inline-block
.list-inline > li { .list-inline {
.list-unstyled();
> li {
display: inline-block; display: inline-block;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
}
} }
// Description Lists // Description Lists
...@@ -156,7 +157,7 @@ dd { ...@@ -156,7 +157,7 @@ dd {
} }
// Horizontal layout (like forms) // Horizontal layout (like forms)
.dl-horizontal { .dl-horizontal {
.clear_float(); // Ensure dl clears floats if empty dd elements present .clearfix(); // Ensure dl clears floats if empty dd elements present
dt { dt {
float: left; float: left;
width: (@component-offset-horizontal - 20); width: (@component-offset-horizontal - 20);
...@@ -186,7 +187,7 @@ abbr[title], ...@@ -186,7 +187,7 @@ abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
abbr[data-original-title] { abbr[data-original-title] {
cursor: help; cursor: help;
border-bottom: 1px dotted @grayLight; border-bottom: 1px dotted @gray-light;
} }
abbr.initialism { abbr.initialism {
font-size: 90%; font-size: 90%;
...@@ -195,19 +196,21 @@ abbr.initialism { ...@@ -195,19 +196,21 @@ abbr.initialism {
// Blockquotes // Blockquotes
blockquote { blockquote {
padding: 0 0 0 15px; padding: (@line-height-base/2) @line-height-base;
margin: 0 0 @line-height-base; margin: 0 0 @line-height-base;
border-left: 5px solid @grayLighter; border-left: 5px solid @gray-lighter;
p { p {
margin-bottom: 0;
font-size: (@font-size-base * 1.25); font-size: (@font-size-base * 1.25);
font-weight: 300; font-weight: 300;
line-height: 1.25; line-height: 1.25;
} }
p:last-child {
margin-bottom: 0;
}
small { small {
display: block; display: block;
line-height: @line-height-base; line-height: @line-height-base;
color: @grayLight; color: @gray-light;
&:before { &:before {
content: '\2014 \00A0'; content: '\2014 \00A0';
} }
...@@ -218,7 +221,7 @@ blockquote { ...@@ -218,7 +221,7 @@ blockquote {
float: right; float: right;
padding-right: 15px; padding-right: 15px;
padding-left: 0; padding-left: 0;
border-right: 5px solid @grayLighter; border-right: 5px solid @gray-lighter;
border-left: 0; border-left: 0;
p, p,
small { small {
......
less/utilities.less
View file @ 3c7a43a1
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
// ------------------------- // -------------------------
.clearfix { .clearfix {
.clear_float(); .clearfix();
} }
.pull-right { .pull-right {
float: right; float: right;
......
less/variables.less
View file @ 3c7a43a1
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
// Grays // Grays
// ------------------------- // -------------------------
@grayDarker: #222; @gray-darker: lighten(#000, 13.5%); // #222
@grayDark: #333; @gray-dark: lighten(#000, 20%); // #333
@gray: #555; @gray: lighten(#000, 33.5%); // #555
@grayLight: #999; @gray-light: lighten(#000, 60%); // #999
@grayLighter: #eee; @gray-lighter: lighten(#000, 93.5%); // #eee
// Brand colors // Brand colors
// ------------------------- // -------------------------
...@@ -28,14 +28,14 @@ ...@@ -28,14 +28,14 @@
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@body-background: #fff; @body-bg: #fff;
@text-color: @grayDark; @text-color: @gray-dark;
// Links // Links
// ------------------------- // -------------------------
@link-color: #428bca; @link-color: @brand-primary;
@link-color-hover: darken(@link-color, 15%); @link-hover-color: darken(@link-color, 15%);
// Typography // Typography
// ------------------------- // -------------------------
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif; @font-family-base: @font-family-sans-serif;
@font-size-base: 14; @font-size-base: 14px;
@font-size-large: (@font-size-base * 1.25); // ~18px @font-size-large: (@font-size-base * 1.25); // ~18px
@font-size-small: (@font-size-base * 0.85); // ~12px @font-size-small: (@font-size-base * 0.85); // ~12px
@font-size-mini: (@font-size-base * 0.75); // ~11px @font-size-mini: (@font-size-base * 0.75); // ~11px
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
@headings-font-weight: 500; @headings-font-weight: 500;
// Component sizing // Components
// ------------------------- // -------------------------
// Based on 14px font-size and 1.5 line-height // Based on 14px font-size and 1.5 line-height
...@@ -68,78 +68,75 @@ ...@@ -68,78 +68,75 @@
@border-radius-large: 6px; @border-radius-large: 6px;
@border-radius-small: 3px; @border-radius-small: 3px;
@component-active-bg: @brand-primary;
// Tables // Tables
// ------------------------- // -------------------------
@table-background: transparent; // overall background-color @table-bg: transparent; // overall background-color
@table-background-accent: #f9f9f9; // for striping @table-bg-accent: #f9f9f9; // for striping
@table-background-hover: #f5f5f5; // for hover @table-bg-hover: #f5f5f5; // for hover
@table-border: #ddd; // table and cell border @table-border-color: #ddd; // table and cell border
// Buttons // Buttons
// ------------------------- // -------------------------
@btn-color: #fff; @btn-color: #fff;
@btn-background: #a7a9aa; @btn-bg: #a7a9aa;
@btn-border: @btn-background; @btn-border: @btn-bg;
@btn-background-primary: @brand-primary; @btn-primary-bg: @brand-primary;
@btn-border-primary: @btn-background-primary; @btn-primary-border: @btn-primary-bg;
@btn-background-success: @brand-success; @btn-success-bg: @brand-success;
@btn-border-success: @btn-background-success; @btn-success-border: @btn-success-bg;
@btn-background-warning: @brand-warning; @btn-warning-bg: @brand-warning;
@btn-border-warning: @btn-background-warning; @btn-warning-border: @btn-warning-bg;
@btn-background-danger: @brand-danger; @btn-danger-bg: @brand-danger;
@btn-border-danger: @btn-background-danger; @btn-danger-border: @btn-danger-bg;
@btn-background-info: @brand-info; @btn-info-bg: @brand-info;
@btn-border-info: @btn-background-info; @btn-info-border: @btn-info-bg;
// Forms // Forms
// ------------------------- // -------------------------
@input-background: #fff; @input-bg: #fff;
@input-background-disabled: @grayLighter; @input-bg-disabled: @gray-lighter;
@input-border: #ccc; @input-border: #ccc;
@input-border-radius: @border-radius-base; @input-border-radius: @border-radius-base;
@input-border-radius-search: 20px;
@input-color-placeholder: @grayLight; @input-color-placeholder: @gray-light;
@input-height-base: (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border @input-height-base: (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
@input-height-large: (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border @input-height-large: (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
@input-height-small: (@line-height-base + 6px); // base line-height + 4px vertical padding + 2px top/bottom border @input-height-small: (@line-height-base + 6px); // base line-height + 4px vertical padding + 2px top/bottom border
// adjust min-height on input sizes @form-actions-bg: #f5f5f5;
@form-actions-background: #f5f5f5;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
@dropdown-background: #fff; @dropdown-bg: #fff;
@dropdown-border: rgba(0,0,0,.15); @dropdown-border: rgba(0,0,0,.15);
@dropdown-divider-top: #e5e5e5; @dropdown-divider-top: #e5e5e5;
@dropdown-divider-bottom: #fff; @dropdown-divider-bottom: #fff;
@dropdown-link-color: @grayDark; @dropdown-link-active-color: #fff;
@dropdown-link-color-hover: #fff; @dropdown-link-active-bg: @component-active-bg;
@dropdown-link-color-active: #fff;
@dropdown-link-background-active: @link-color;
@dropdown-link-background-hover: @dropdown-link-background-active;
@dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg;
// COMPONENT VARIABLES // COMPONENT VARIABLES
...@@ -167,68 +164,63 @@ ...@@ -167,68 +164,63 @@
// Navbar // Navbar
// ------------------------- // -------------------------
// Responsive collapsing
// @navbar-collapse-width: 979px;
// @navbar-collapse-width-desktop: @navbar-collapse-width + 1;
// Basics of a navbar // Basics of a navbar
@navbar-height: 50px; @navbar-height: 50px;
@navbar-text: #777; @navbar-color: #777;
@navbar-bg: #eee; @navbar-bg: #eee;
// Navbar brand label
@navbar-brand-color: @navbar-link-color;
@navbar-brand-color-hover: darken(@navbar-link-color, 10%);
@navbar-brand-bg-hover: transparent;
// Navbar links // Navbar links
@navbar-link-color: #777; @navbar-link-color: #777;
@navbar-link-color-hover: #333; @navbar-link-hover-color: #333;
@navbar-link-bg-hover: transparent; @navbar-link-hover-bg: transparent;
@navbar-link-color-active: #555; @navbar-link-active-color: #555;
@navbar-link-bg-active: darken(@navbar-bg, 10%); @navbar-link-active-bg: darken(@navbar-bg, 10%);
@navbar-link-color-disabled: #ccc; @navbar-link-disabled-color: #ccc;
@navbar-link-bg-disabled: transparent; @navbar-link-disabled-bg: transparent;
// Navbar brand label
@navbar-brand-color: @navbar-link-color;
@navbar-brand-hover-color: darken(@navbar-link-color, 10%);
@navbar-brand-hover-bg: transparent;
// Inverted navbar // Inverted navbar
@navbar-inverse-text: @grayLight; @navbar-inverse-color: @gray-light;
@navbar-inverse-bg: #222; @navbar-inverse-bg: #222;
// Inverted navbar links
@navbar-inverse-link-color: @gray-light;
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label // Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color; @navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-color-hover: #fff; @navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-bg-hover: transparent; @navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar links
@navbar-inverse-link-color: @grayLight;
@navbar-inverse-link-color-hover: #fff;
@navbar-inverse-link-bg-hover: transparent;
@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover;
@navbar-inverse-link-bg-active: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-color-disabled: #444;
@navbar-inverse-link-bg-disabled: transparent;
// Inverted navbar search // Inverted navbar search
// Normal navbar needs no special styles or vars // Normal navbar needs no special styles or vars
@navbar-inverse-search-background: lighten(@navbar-inverse-bg, 25%); @navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-background-focus: #fff; @navbar-inverse-search-bg-focus: #fff;
@navbar-inverse-search-border: @navbar-inverse-bg; @navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc; @navbar-inverse-search-placeholder-color: #ccc;
// Pagination // Pagination
// ------------------------- // -------------------------
@pagination-background: #fff; @pagination-bg: #fff;
@pagination-background-active: #f5f5f5;
@pagination-border: #ddd; @pagination-border: #ddd;
@pagination-active-bg: #f5f5f5;
// Jumbotron // Jumbotron
// ------------------------- // -------------------------
@jumbotron-background: @grayLighter; @jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit; @jumbotron-heading-color: inherit;
@jumbotron-lead-color: inherit; @jumbotron-lead-color: inherit;
...@@ -237,33 +229,33 @@ ...@@ -237,33 +229,33 @@
// ------------------------- // -------------------------
@state-warning-text: #c09853; @state-warning-text: #c09853;
@state-warning-background: #fcf8e3; @state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-background, -10), 3%); @state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
@state-error-text: #b94a48; @state-danger-text: #b94a48;
@state-error-background: #f2dede; @state-danger-bg: #f2dede;
@state-error-border: darken(spin(@state-error-background, -10), 3%); @state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
@state-success-text: #468847; @state-success-text: #468847;
@state-success-background: #dff0d8; @state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-background, -10), 5%); @state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: #3a87ad; @state-info-text: #3a87ad;
@state-info-background: #d9edf7; @state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-background, -10), 7%); @state-info-border: darken(spin(@state-info-bg, -10), 7%);
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------
@tooltip-color: #fff; @tooltip-color: #fff;
@tooltip-background: rgba(0,0,0,.9); @tooltip-bg: rgba(0,0,0,.9);
@tooltip-arrow-width: 5px; @tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-background; @tooltip-arrow-color: @tooltip-bg;
@popover-background: #fff; @popover-bg: #fff;
@popover-arrow-width: 10px; @popover-arrow-width: 10px;
@popover-arrow-color: #fff; @popover-arrow-color: #fff;
@popover-title-background: darken(@popover-background, 3%); @popover-title-bg: darken(@popover-bg, 3%);
// Special enhancement for popovers // Special enhancement for popovers
@popover-arrow-outer-width: (@popover-arrow-width + 1); @popover-arrow-outer-width: (@popover-arrow-width + 1);
...@@ -272,17 +264,38 @@ ...@@ -272,17 +264,38 @@
// Labels // Labels
// ------------------------- // -------------------------
@label-success-background: @brand-success; @label-success-bg: @brand-success;
@label-info-background: @brand-info; @label-info-bg: @brand-info;
@label-warning-background: @brand-warning; @label-warning-bg: @brand-warning;
@label-danger-background: @brand-danger; @label-danger-bg: @brand-danger;
// Modals // Modals
// ------------------------- // -------------------------
@modal-inner-padding: 20px; @modal-inner-padding: 20px;
@modal-title-padding: 15px;
@modal-title-line-height: @line-height-base;
// Alerts
// -------------------------
@alert-bg: @state-warning-bg;
@alert-text: @state-warning-text;
@alert-border: @state-warning-border;
@alert-border-radius: @border-radius-base;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
// Progress bars // Progress bars
// ------------------------- // -------------------------
...@@ -294,23 +307,98 @@ ...@@ -294,23 +307,98 @@
@progress-bar-info-bg: @brand-info; @progress-bar-info-bg: @brand-info;
// List group
// -------------------------
@list-group-bg: #fff;
@list-group-border: #ddd;
@list-group-border-radius: @border-radius-base;
@list-group-hover-bg: #f5f5f5;
@list-group-active-text: #fff;
@list-group-active-bg: @component-active-bg;
@list-group-active-border: @list-group-active-bg;
// Panels
// -------------------------
@panel-bg: #fff;
@panel-border: #ddd;
@panel-border-radius: @border-radius-base;
@panel-heading-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;
@panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text;
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
// Thumbnails
// -------------------------
@thumbnail-caption-color: @text-color;
@thumbnail-bg: @body-bg;
@thumbnail-border: #ddd;
@thumbnail-border-radius: @border-radius-base;
// Wells
// -------------------------
@well-bg: #f5f5f5;
// Miscellaneous // Miscellaneous
// ------------------------- // -------------------------
// Hr border color // Hr border color
@hr-border: @grayLighter; @hr-border: @gray-lighter;
// Horizontal forms & lists // Horizontal forms & lists
@component-offset-horizontal: 180px; @component-offset-horizontal: 180px;
// Wells
@well-background: #f5f5f5;
// Media queries breakpoints
// --------------------------------------------------
// Tiny screen / phone
@screen-tiny: 480px;
@screen-phone: @screen-tiny;
// Small screen / tablet
@screen-small: 768px;
@screen-tablet: @screen-small;
// Medium screen / desktop
@screen-medium: 992px;
@screen-desktop: @screen-medium;
// So media queries don't overlap when required, provide a maximum
@screen-small-max: (@screen-medium - 1);
@screen-tablet-max: @screen-small-max;
// Large screen / wide desktop
@screen-large: 1200px;
@screen-large-desktop: @screen-large;
// Grid system // Grid system
// -------------------------------------------------- // --------------------------------------------------
// Number of columns in the grid system
@grid-columns: 12; @grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px; @grid-gutter-width: 30px;
@grid-float-breakpoint: 768px; // Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet;
less/wells.less
View file @ 3c7a43a1
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
min-height: 20px; min-height: 20px;
padding: 19px; padding: 19px;
margin-bottom: 20px; margin-bottom: 20px;
background-color: @well-background; background-color: @well-bg;
border: 1px solid darken(@well-background, 7%); border: 1px solid darken(@well-bg, 7%);
border-radius: @border-radius-base; border-radius: @border-radius-base;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote { blockquote {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment