mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 17:14:04 +02:00
Code Issues Releases Wiki Activity

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

Browse Source 
Conflicts:
	js/tests/unit/bootstrap-collapse.js
This commit is contained in:
Ivan Khalopik
2013-05-07 15:16:45 +03:00
parent 41c7825677 b352f98f32
commit 3c7a43a1f3
128 changed files with 9524 additions and 8257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.editorconfig Normal file
View File

@@ -0,0 +1,14 @@
# 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

1
.gitignore vendored
View File

@@ -13,6 +13,7 @@ _gh_pages
*.vi
*~
*.sass-cache
*.ruby-version
# OS or Editor folders
.DS_Store

2
CONTRIBUTING.md
View File

@@ -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.
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.
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.

2
Makefile
View File

@@ -88,8 +88,6 @@ bootstrap/css/*.css: less/*.less
mkdir -p bootstrap/css
recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.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

21
README.md
View File

@@ -1,7 +1,3 @@
<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 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:
* [Download the latest release](https://github.com/twitter/bootstrap/zipball/master).
* 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.
@@ -55,14 +51,17 @@ $ npm install
When completed, you'll be able to run the various make commands provided:
#### build - `make` or `make bootstrap`
`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.**
#### Build - `make`
`make` runs the Recess compiler to rebuild the `/less` files and compile the docs. **Requires recess and uglify-js.**
#### test - `make test`
#### Compile CSS, JS, and fonts - `make bootstrap`
`make bootstrap` creates the `/bootstrap` directory with compiled files. **Requires recess and uglify-js.**
#### Tests - `make test`
Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). **Requires phantomjs.**
#### watch - `make watch`
This is a convenience method for watching just Less files and automatically building them whenever you save. **Requires the Watchr gem.**
#### Watch - `make watch`
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`.
@@ -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).
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

2
docs/_includes/colophon.html
View File

@@ -1,7 +1,7 @@
<!-- Footer
================================================== -->
<footer class="bs-docs-footer">
<div class="container">
<div class="bs-docs-container">
<div class="bs-docs-social">
<ul class="bs-docs-social-buttons">

226
docs/_includes/docs-nav.html Normal file
View File

@@ -0,0 +1,226 @@
<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>

2
docs/_includes/header.html
View File

@@ -14,7 +14,7 @@
<!-- Bootstrap core CSS -->
<link href="/assets/css/bootstrap.css" rel="stylesheet">
{% if page.layout == "default" %}
{% if page.layout != "example" %}
<!-- Documentation extras -->
<link href="/assets/css/docs.css" rel="stylesheet">
<link href="/assets/css/pygments-manni.css" rel="stylesheet">

20
docs/_includes/navbar.html
View File

@@ -1,32 +1,32 @@
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top bs-docs-navbar">
<div class="navbar navbar-inverse navbar-fixed-left bs-docs-navbar">
<div class="container">
<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>
</button>
<a class="navbar-brand" href="/">Bootstrap</a>
<a class="navbar-brand" href="/">B</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li {% if page.title == "Bootstrap" %}class="active"{% endif %}>
<a href="/">Home</a>
<!-- <li {% if page.title == "Bootstrap" %}class="active"{% endif %}>
<a href="/"><span class="glyphicon glyphicon-home"></span></a>
</li>
<li {% if page.title == "Getting started" %}class="active"{% endif %}>
<a href="/getting-started">Getting started</a>
--> <li {% if page.title == "Getting started" %}class="active"{% endif %}>
<a href="/getting-started" data-toggle="tooltip" data-placement="right" title="Getting started"><span class="glyphicon glyphicon-list"></span></a>
</li>
<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 {% 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 {% 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 {% 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>
</ul>
</div>

6
docs/_layouts/default.html
View File

@@ -5,10 +5,10 @@
{% include header.html %}
<!-- Place anything custom after this. -->
</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. -->
{% include navbar.html %}
<!-- Docs nav -->
{% include docs-nav.html %}
<!-- Page content of course! -->
{{ content }}

17
docs/_layouts/home.html Normal file
View File

@@ -0,0 +1,17 @@
<!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>

1105
docs/assets/css/bootstrap.css vendored
View File

File diff suppressed because it is too large Load Diff

361
docs/assets/css/docs.css
View File

@@ -9,24 +9,58 @@
-------------------------------------------------- */
body {
padding-top: 54px;
position: relative; /* For scrollyspy */
/* We add the padding to the body for >768px only */
}
/* */
.bs-docs-footer {
hr {
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-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
-------------------------------------------------- */
/* Padding for in-page bookmarks */
section {
section,
.bs-docs-section {
padding-top: 30px;
}
@@ -41,69 +75,42 @@ section > ul li {
/* Navbar
-------------------------------------------------- */
.bs-docs-navbar {
background-color: #fff;
border-bottom: 1px solid #ccc; /* IE8 */
border-bottom: 1px solid rgba(0,0,0,.1);
}
.bs-docs-navbar .nav > .active > a,
.bs-docs-navbar .nav > .active > a:hover {
font-weight: 500;
background-color: transparent;
}
/* Jumbotrons
-------------------------------------------------- */
.bs-docs-section-header {
padding-top: 60px;
color: #b94a48;
border-bottom: 5px solid #b94a48;
}
/* Base class */
.bs-docs-jumbotron {
position: relative;
margin-bottom: 20px;
padding: 30px 15px;
color: #fff;
text-align: center;
background-color: #b94a48;
}
.bs-docs-jumbotron h1 {
font-size: 50px;
}
/* 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;
line-height: 1;
}
/* Download button */
.bs-docs-jumbotron .btn {
margin-top: 5px;
margin-bottom: 5px;
padding: 18px 24px;
font-size: 21px;
color: #b94a48; /* redeclare to override the `.jumbotron a` */
background-color: #fff;
border-color: #e5e5e5;
}
.bs-docs-jumbotron .btn,
.bs-docs-jumbotron .btn:hover,
.bs-docs-jumbotron .btn:active {
color: #b94a48; /* redeclare to override the `.jumbotron a` */
background-color: #fff;
border-color: #fff;
}
/* Masthead (docs home)
------------------------- */
.masthead h1 {
line-height: 1;
color: #fff; /* redeclare to override the `.jumbotron a` */
background-color: #b94a48;
border-color: #b94a48;
}
/* Textual links in masthead */
@@ -113,42 +120,10 @@ section > ul li {
}
.masthead-links li {
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;
}
.marketing-img {
display: block;
margin: 30px auto 10px;
max-height: 145px;
.masthead-links li + li {
margin-left: 20px;
}
@@ -159,13 +134,13 @@ section > ul li {
.show-grid {
margin-bottom: 15px;
}
.show-grid [class*="col-span-"] {
.show-grid .col {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
.show-grid [class*="col-span-"]:hover {
.show-grid .col:hover {
background-color: #ddd;
}
@@ -174,33 +149,84 @@ section > ul li {
/* Sidenav
-------------------------------------------------- */
/* Base styles are not affixable given mobile-first */
.bs-docs-sidenav {
margin: 20px 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bs-docs-sidenav.affix {
position: static;
.bs-docs-sidebar {
display: none;
position: fixed;
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 */
.bs-docs-sidenav .glyphicon-chevron-right {
float: right;
margin-top: 1px;
margin-right: -6px;
opacity: .25;
color: #000;
/* Nav: first level */
.bs-docs-sidebar > .nav {
margin: 0 0 25px 0;
}
.bs-docs-sidenav a:hover .glyphicon-chevron-right {
opacity: .5;
.bs-docs-sidebar .nav > li > a {
display: block;
color: #666;
padding: 4px 25px;
}
.bs-docs-sidenav .active .glyphicon-chevron-right,
.bs-docs-sidenav .active a:hover .glyphicon-chevron-right {
color: #fff;
opacity: 1;
.bs-docs-sidebar .nav > li > a:hover,
.bs-docs-sidebar .nav > li > a:focus {
text-decoration: none;
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 {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.prettyprint .linenums {
/*margin-left: 0;*/
}
/* Tweak content of examples for optimum awesome */
.bs-docs-example > p:last-child,
@@ -254,7 +277,10 @@ section > ul li {
.bs-docs-example > textarea:last-child,
.bs-docs-example > .table: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;
}
@@ -282,20 +308,31 @@ section > ul li {
margin: 0;
}
/* List groups */
.bs-docs-example > .list-group {
max-width: 400px;
}
/* Navbar examples */
.bs-navbar-top-example,
.bs-navbar-bottom-example {
z-index: 1;
padding: 0;
height: 90px;
min-height: 110px;
overflow: hidden; /* cut the drop shadows off */
}
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {
position: relative;
margin-left: 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 {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
@@ -345,7 +382,7 @@ section > ul li {
margin-bottom: 5px;
}
.bs-docs-example-submenu {
min-height: 180px;
min-height: 230px;
}
.bs-docs-example-submenu > .pull-left + .pull-left {
margin-left: 20px;
@@ -356,6 +393,30 @@ section > ul li {
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
-------------------------------------------------- */
@@ -485,8 +546,8 @@ section > ul li {
-------------------------------------------------- */
.bs-docs-footer {
text-align: center;
padding: 30px 0;
padding-top: 30px;
padding-bottom: 30px;
margin-top: 100px;
border-top: 1px solid #e5e5e5;
}
@@ -507,22 +568,22 @@ section > ul li {
/* Social proof buttons from GitHub & Twitter */
.bs-docs-social {
margin-top: 10px;
margin-top: 80px;
margin-bottom: 20px;
text-align: center;
}
/* Quick links on Home */
.bs-docs-social-buttons {
display: inline-block;
margin: 0;
padding: 0 10px;
list-style: none;
}
.bs-docs-social-buttons li {
display: inline-block;
padding: 5px 8px;
line-height: 1;
}
.bs-docs-social-buttons li + li {
margin-left: 15px;
}
.bs-docs-social-buttons .twitter-follow-button {
width: 225px !important;
}
@@ -564,6 +625,7 @@ input.focused {
margin-bottom: 0;
background-color: transparent;
border: 0;
white-space: nowrap;
}
.highlight pre code {
font-size: inherit;
@@ -605,9 +667,46 @@ input.focused {
/* Tablets and up */
@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) */
body {
padding-top: 50px; /* Default height of navbar */
.bs-docs-docs {
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 */
@@ -619,9 +718,9 @@ input.focused {
font-size: 100px;
}
.masthead p {
margin-left: 15%;
margin-right: 15%;
font-size: 30px;
margin-left: 10%;
margin-right: 10%;
}
.subhead {
padding-top: 60px;
@@ -629,37 +728,31 @@ input.focused {
text-align: left;
}
/* From here, start to affix the nav because we keep columns here */
.bs-docs-sidenav.affix {
position: fixed;
top: 54px;
}
.bs-docs-sidenav {
width: 170px;
}
.bs-docs-sidenav.affix-bottom {
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {
position: absolute;
top: auto;
bottom: 270px;
}
}
/* Tablets/desktops and up */
@media screen and (min-width: 992px) {
.bs-docs-docs {
padding-left: 280px;
}
/* Icons */
.the-icons li {
width: 12.5%;
}
.bs-docs-sidenav {
width: 220px;
}
}
/* Large desktops and up */
@media screen and (min-width: 1200px) {
.bs-docs-sidenav {
width: 260px;
.bs-docs-docs {
padding-left: 300px;
}
}

BIN
docs/assets/img/bootstrap-docs-readme.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
docs/assets/img/bs-docs-bootstrap-features.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/assets/img/bs-docs-masthead-pattern.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.3 KiB

BIN
docs/assets/img/bs-docs-responsive-illustrations.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/assets/img/bs-docs-twitter-github.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
docs/assets/img/examples/bootstrap-example-fluid.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 204 KiB

BIN
docs/assets/img/examples/bootstrap-example-grid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
docs/assets/img/examples/bootstrap-example-signin.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/assets/img/examples/browser-icon-chrome.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
docs/assets/img/examples/browser-icon-firefox.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 172 KiB

BIN
docs/assets/img/examples/browser-icon-safari.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 205 KiB

BIN
docs/assets/img/examples/slide-01.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 81 KiB

BIN
docs/assets/img/examples/slide-02.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 134 KiB

BIN
docs/assets/img/examples/slide-03.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 134 KiB

BIN
docs/assets/img/grid-baseline-20px.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 84 B

23
docs/assets/js/application.js
View File

@@ -13,14 +13,18 @@
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 () {
$('.bs-docs-sidenav').affix({
offset: {
top: function () { return $window.width() <= 980 ? 290 : 210 }
, bottom: 270
}
})
$('.bs-docs-top').affix()
}, 100)
// make code pretty
@@ -49,6 +53,11 @@
$('.tooltip-test').tooltip()
$('.popover-test').popover()
$('.bs-docs-navbar').tooltip({
selector: "a[data-toggle=tooltip]",
container: ".bs-docs-navbar .nav"
})
// popover demo
$("a[data-toggle=popover]")
.popover()

4
docs/assets/js/bootstrap-scrollspy.js vendored
View File

@@ -97,7 +97,7 @@
this.activeTarget = target
$(this.selector)
.parent('.active')
.parents('.active')
.removeClass('active')
selector = this.selector
@@ -105,7 +105,7 @@
+ this.selector + '[href="' + target + '"]'
active = $(selector)
.parent('li')
.parents('li')
.addClass('active')
if (active.parent('.dropdown-menu').length) {

25
docs/assets/js/bootstrap.js vendored
View File

@@ -57,7 +57,8 @@
})
}(window.jQuery);/* ==========================================================
}(window.jQuery);
/* ==========================================================
* bootstrap-alert.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
@@ -155,7 +156,8 @@
$(document).on('click.alert.data-api', dismiss, Alert.prototype.close)
}(window.jQuery);/* ============================================================
}(window.jQuery);
/* ============================================================
* bootstrap-button.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================
@@ -259,7 +261,8 @@
$btn.button('toggle')
})
}(window.jQuery);/* ==========================================================
}(window.jQuery);
/* ==========================================================
* bootstrap-carousel.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#carousel
* ==========================================================
@@ -465,7 +468,8 @@
e.preventDefault()
})
}(window.jQuery);/* =============================================================
}(window.jQuery);
/* =============================================================
* bootstrap-collapse.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#collapse
* =============================================================
@@ -631,7 +635,8 @@
$(target).collapse(option)
})
}(window.jQuery);/* ============================================================
}(window.jQuery);
/* ============================================================
* bootstrap-dropdown.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
@@ -1621,7 +1626,7 @@
this.activeTarget = target
$(this.selector)
.parent('.active')
.parents('.active')
.removeClass('active')
selector = this.selector
@@ -1629,7 +1634,7 @@
+ this.selector + '[href="' + target + '"]'
active = $(selector)
.parent('li')
.parents('li')
.addClass('active')
if (active.parent('.dropdown-menu').length) {
@@ -1683,7 +1688,8 @@
})
})
}(window.jQuery);/* ========================================================
}(window.jQuery);
/* ========================================================
* bootstrap-tab.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
@@ -1826,7 +1832,8 @@
$(this).tab('show')
})
}(window.jQuery);/* =============================================================
}(window.jQuery);
/* =============================================================
* bootstrap-typeahead.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#typeahead
* =============================================================

2
docs/assets/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

1977
docs/components.html
View File

File diff suppressed because it is too large Load Diff

2428
docs/css.html
View File

File diff suppressed because it is too large Load Diff

203
docs/customize.html
View File

@@ -3,32 +3,17 @@ layout: default
title: Customize and download
---
<!-- Masthead
================================================== -->
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, 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="#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>
<div class="bs-docs-sidebar">
<h5 class="bs-docs-sidenav-heading">Customize and download</h5>
<ul class="nav bs-docs-sidenav">
<li><a href="#components">1. Choose components</a></li>
<li><a href="#plugins">2. Select jQuery plugins</a></li>
<li><a href="#variables">3. Customize variables</a></li>
<li><a href="#download">4. Download</a></li>
</ul>
</div>
<div class="col-span-9">
<div class="container bs-docs-container">
<!-- Customize form
================================================== -->
@@ -41,7 +26,7 @@ title: Customize and download
</h1>
</div>
<div class="row download-builder">
<div class="span3">
<div class="col-span-3">
<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="print.less"> Print</label>
@@ -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="sprites.less"> Icons</label>
</div><!-- /span -->
<div class="span3">
<div class="col-span-3">
<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="navs.less"> Navs, tabs, and pills</label>
@@ -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="carousel.less"> Carousel</label>
</div><!-- /span -->
<div class="span3">
<div class="col-span-3">
<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="close.less"> Close icon</label>
@@ -102,7 +87,7 @@ title: Customize and download
</h1>
</div>
<div class="row download-builder">
<div class="span3">
<div class="col-span-3">
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-transition.js">
Transitions <small>(required for any animation)</small>
@@ -132,7 +117,7 @@ title: Customize and download
Popovers <small>(requires Tooltips)</small>
</label>
</div><!-- /span -->
<div class="span3">
<div class="col-span-3">
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-affix.js">
Affix
@@ -158,7 +143,7 @@ title: Customize and download
Typeahead
</label>
</div><!-- /span -->
<div class="span3">
<div class="col-span-3">
<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>
</div><!-- /span -->
@@ -174,183 +159,183 @@ title: Customize and download
</h1>
</div>
<div class="row download-builder">
<div class="span3">
<div class="col-span-3">
<h3>Scaffolding</h3>
<label>@body-background</label>
<input type="text" class="span3" placeholder="#fff">
<input type="text" placeholder="#fff">
<label>@text-color</label>
<input type="text" class="span3" placeholder="@grayDark">
<input type="text" placeholder="@grayDark">
<h3>Links</h3>
<label>@link-color</label>
<input type="text" class="span3" placeholder="#08c">
<input type="text" placeholder="#08c">
<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>
<label>@grid-columns</label>
<input type="text" class="span3" placeholder="12">
<input type="text" placeholder="12">
<label>@grid-column-width</label>
<input type="text" class="span3" placeholder="60px">
<input type="text" placeholder="60px">
<label>@grid-gutter-width</label>
<input type="text" class="span3" placeholder="20px">
<input type="text" placeholder="20px">
<label>@grid-column-width-1200</label>
<input type="text" class="span3" placeholder="70px">
<input type="text" placeholder="70px">
<label>@grid-gutter-width-1200</label>
<input type="text" class="span3" placeholder="30px">
<input type="text" placeholder="30px">
<label>@grid-column-width-768</label>
<input type="text" class="span3" placeholder="42px">
<input type="text" placeholder="42px">
<label>@grid-gutter-width-768</label>
<input type="text" class="span3" placeholder="20px">
<input type="text" placeholder="20px">
</div><!-- /span -->
<div class="span3">
<div class="col-span-3">
<h3>Typography</h3>
<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>
<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>
<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>
<input type="text" class="span3" placeholder="14px">
<input type="text" placeholder="14px">
<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>
<input type="text" class="span3" placeholder="20px">
<input type="text" placeholder="20px">
<label>@headings-font-family</label>
<input type="text" class="span3" placeholder="inherit">
<input type="text" placeholder="inherit">
<label>@headings-font-weight</label>
<input type="text" class="span3" placeholder="bold">
<input type="text" placeholder="bold">
<label>@headingsColor</label>
<input type="text" class="span3" placeholder="inherit">
<input type="text" placeholder="inherit">
<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>
<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>
<input type="text" class="span3" placeholder="@font-size-base * 0.75">
<input type="text" placeholder="@font-size-base * 0.75">
<label>@padding-large</label>
<input type="text" class="span3" placeholder="11px 19px">
<input type="text" placeholder="11px 19px">
<label>@padding-small</label>
<input type="text" class="span3" placeholder="2px 10px">
<input type="text" placeholder="2px 10px">
<label>@padding-mini</label>
<input type="text" class="span3" placeholder="1px 6px">
<input type="text" placeholder="1px 6px">
<label>@border-radius-base</label>
<input type="text" class="span3" placeholder="4px">
<input type="text" placeholder="4px">
<label>@border-radius-large</label>
<input type="text" class="span3" placeholder="6px">
<input type="text" placeholder="6px">
<label>@border-radius-small</label>
<input type="text" class="span3" placeholder="3px">
<input type="text" placeholder="3px">
<label>@hero-background</label>
<input type="text" class="span3" placeholder="@grayLighter">
<input type="text" placeholder="@grayLighter">
<label>@hero-heading-color</label>
<input type="text" class="span3" placeholder="inherit">
<input type="text" placeholder="inherit">
<label>@hero-lead-color</label>
<input type="text" class="span3" placeholder="inherit">
<input type="text" placeholder="inherit">
<h3>Tables</h3>
<label>@table-background</label>
<input type="text" class="span3" placeholder="transparent">
<input type="text" placeholder="transparent">
<label>@table-background-accent</label>
<input type="text" class="span3" placeholder="#f9f9f9">
<input type="text" placeholder="#f9f9f9">
<label>@table-background-hover</label>
<input type="text" class="span3" placeholder="#f5f5f5">
<label>@table-border</label>
<input type="text" class="span3" placeholder="#ddd">
<input type="text" placeholder="#f5f5f5">
<label>@table-border-color</label>
<input type="text" placeholder="#ddd">
<h3>Forms</h3>
<label>@input-color-placeholder</label>
<input type="text" class="span3" placeholder="@grayLight">
<input type="text" placeholder="@grayLight">
<label>@input-background</label>
<input type="text" class="span3" placeholder="#fff">
<input type="text" placeholder="#fff">
<label>@input-border</label>
<input type="text" class="span3" placeholder="#ccc">
<input type="text" placeholder="#ccc">
<label>@input-border-radius</label>
<input type="text" class="span3" placeholder="3px">
<input type="text" placeholder="3px">
<label>@input-background-disabled</label>
<input type="text" class="span3" placeholder="@grayLighter">
<input type="text" placeholder="@grayLighter">
<label>@form-actions-background</label>
<input type="text" class="span3" placeholder="#f5f5f5">
<input type="text" placeholder="#f5f5f5">
<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>
<input type="text" class="span3" placeholder="darken(#fff, 10%)">
<input type="text" placeholder="darken(#fff, 10%)">
</div><!-- /span -->
<div class="span3">
<div class="col-span-3">
<h3>Form states &amp; alerts</h3>
<label>@state-warning-text</label>
<input type="text" class="span3" placeholder="#c09853">
<input type="text" placeholder="#c09853">
<label>@state-warning-background</label>
<input type="text" class="span3" placeholder="#fcf8e3">
<input type="text" placeholder="#fcf8e3">
<label>@state-error-text</label>
<input type="text" class="span3" placeholder="#b94a48">
<input type="text" placeholder="#b94a48">
<label>@state-error-background</label>
<input type="text" class="span3" placeholder="#f2dede">
<input type="text" placeholder="#f2dede">
<label>@state-success-text</label>
<input type="text" class="span3" placeholder="#468847">
<input type="text" placeholder="#468847">
<label>@state-success-background</label>
<input type="text" class="span3" placeholder="#dff0d8">
<input type="text" placeholder="#dff0d8">
<label>@state-info-text</label>
<input type="text" class="span3" placeholder="#3a87ad">
<input type="text" placeholder="#3a87ad">
<label>@state-info-background</label>
<input type="text" class="span3" placeholder="#d9edf7">
<input type="text" placeholder="#d9edf7">
<h3>Navbar</h3>
<label>@navbar-height</label>
<input type="text" class="span3" placeholder="40px">
<input type="text" placeholder="40px">
<label>@navbar-background</label>
<input type="text" class="span3" placeholder="@grayDarker">
<input type="text" placeholder="@grayDarker">
<label>@navbar-background-highlight</label>
<input type="text" class="span3" placeholder="@grayDark">
<label>@navbar-text</label>
<input type="text" class="span3" placeholder="@grayLight">
<input type="text" placeholder="@grayDark">
<label>@navbar-color</label>
<input type="text" placeholder="@grayLight">
<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>
<input type="text" class="span3" placeholder="@grayLight">
<input type="text" placeholder="@grayLight">
<label>@navbar-link-color-hover</label>
<input type="text" class="span3" placeholder="#fff">
<input type="text" placeholder="#fff">
<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>
<input type="text" class="span3" placeholder="transparent">
<input type="text" placeholder="transparent">
<label>@navbar-link-background-active</label>
<input type="text" class="span3" placeholder="@navbar-background">
<input type="text" placeholder="@navbar-background">
<label>@navbarSearchBackground</label>
<input type="text" class="span3" placeholder="lighten(@navbar-background, 25%)">
<input type="text" placeholder="lighten(@navbar-background, 25%)">
<label>@navbarSearchBackgroundFocus</label>
<input type="text" class="span3" placeholder="#fff">
<input type="text" placeholder="#fff">
<label>@navbarSearchBorder</label>
<input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)">
<input type="text" placeholder="darken(@navbarSearchBackground, 30%)">
<label>@navbarSearchPlaceholderColor</label>
<input type="text" class="span3" placeholder="#ccc">
<input type="text" placeholder="#ccc">
<label>@navbar-collapse-width</label>
<input type="text" class="span3" placeholder="979px">
<input type="text" placeholder="979px">
<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>
<label>@dropdown-background</label>
<input type="text" class="span3" placeholder="#fff">
<input type="text" placeholder="#fff">
<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>
<input type="text" class="span3" placeholder="@grayDark">
<input type="text" placeholder="@grayDark">
<label>@dropdown-link-color-hover</label>
<input type="text" class="span3" placeholder="#fff">
<input type="text" placeholder="#fff">
<label>@dropdown-link-background-hover</label>
<input type="text" class="span3" placeholder="@link-color">
<input type="text" placeholder="@link-color">
</div><!-- /span -->
</div><!-- /row -->
</section>
@@ -370,8 +355,4 @@ title: Customize and download
</form>
</div><!-- /span9 -->
</div><!-- row -->
</div><!-- /.container -->

6777
docs/docs.html Normal file
View File

File diff suppressed because it is too large Load Diff

207
docs/examples/carousel.html
View File

@@ -27,37 +27,6 @@ body {
left: 0;
right: 0;
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 {
.carousel {
margin-bottom: 60px;
}
.carousel .container {
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;
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
}
@@ -96,37 +55,26 @@ body {
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
-------------------------------------------------- */
/* 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 */
.marketing .col-span-4 {
.marketing .col-lg-4 {
text-align: center;
margin-bottom: 20px;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-span-4 p {
.marketing .col-lg-4 p {
margin-left: 10px;
margin-right: 10px;
}
@@ -167,16 +115,40 @@ body {
/* 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 {
margin-bottom: 0;
width: auto;
}
.navbar-inner {
border-radius: 0;
margin: -20px 0;
}
.carousel .item {
height: 500px;
@@ -202,10 +174,6 @@ body {
@media (max-width: 767px) {
.navbar-inner {
margin: -20px;
}
.carousel {
margin-left: -20px;
margin-right: -20px;
@@ -244,7 +212,19 @@ body {
line-height: 1.5;
}
.navbar-wrapper {
margin-top: 0;
}
.navbar {
border-radius: 0;
}
#myCarousel {
margin-top: 54px;
}
}*/
</style>
@@ -252,25 +232,21 @@ body {
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a 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>
</button>
</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">
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
@@ -284,52 +260,57 @@ body {
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
</div>
</div>
</div>
</div>
</div>
<!-- Carousel
================================================== -->
<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="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="carousel-caption">
<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>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
<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 class="btn btn-large btn-primary" href="#">Sign up today</a></p>
</div>
</div>
</div>
<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="carousel-caption">
<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>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
<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 class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<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="carousel-caption">
<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>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
<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 class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</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"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
@@ -342,24 +323,24 @@ body {
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-span-4">
<div class="col col-lg-4">
<img class="img-circle" data-src="holder.js/140x140">
<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>
</div><!-- /.col-span-4 -->
<div class="col-span-4">
</div><!-- /.col-lg-4 -->
<div class="col col-lg-4">
<img class="img-circle" data-src="holder.js/140x140">
<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>
</div><!-- /.col-span-4 -->
<div class="col-span-4">
</div><!-- /.col-lg-4 -->
<div class="col col-lg-4">
<img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div><!-- /.col-span-4 -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
@@ -368,24 +349,24 @@ body {
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-chrome.png">
<h2 class="featurette-heading">First featurette headling. <span class="muted">It'll blow your mind.</span></h2>
<img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image pull-left" src="../assets/img/examples/browser-icon-firefox.png">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="muted">See for yourself.</span></h2>
<img class="featurette-image img-circle pull-left" data-src="holder.js/512x512">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-safari.png">
<h2 class="featurette-heading">And lastly, this one. <span class="muted">Checkmate.</span></h2>
<img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>

56
docs/examples/grid.html Normal file
View File

@@ -0,0 +1,56 @@
---
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 -->

6
docs/examples/jumbotron-narrow.html
View File

@@ -94,7 +94,7 @@ title: Narrow page template
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h3 class="muted">Project name</h3>
<h3 class="text-muted">Project name</h3>
</div>
<div class="jumbotron">
@@ -104,7 +104,7 @@ title: Narrow page template
</div>
<div class="row marketing">
<div class="col-span-6">
<div class="col col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
@@ -115,7 +115,7 @@ title: Narrow page template
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="col-span-6">
<div class="col col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

8
docs/examples/jumbotron.html
View File

@@ -46,7 +46,7 @@ title: Jumbotron template
</a>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
@@ -85,17 +85,17 @@ title: Jumbotron template
<!-- Example row of columns -->
<div class="row">
<div class="col-span-4">
<div class="col col-lg-4">
<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><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<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><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details &raquo;</a></p>

19
docs/examples/justified-nav.html
View File

@@ -42,7 +42,7 @@ title: Justified nav template
border-radius: 5px;
border: 1px solid #ccc;
}
.nav-justified li a {
.nav-justified > li > a {
padding-top: 15px;
padding-bottom: 15px;
color: #777;
@@ -60,17 +60,17 @@ title: Justified nav template
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
}
.nav-justified .active a {
.nav-justified > .active > a {
background-color: #ddd;
background-image: none;
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-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.nav-justified li:last-child a {
.nav-justified > li:last-child > a {
border-right: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
@@ -86,7 +86,6 @@ title: Justified nav template
padding-left: 0;
padding-right: 0;
}
/* Make the nav on the same line */
}
</style>
@@ -96,8 +95,8 @@ title: Justified nav template
<div class="container">
<div class="masthead">
<h3 class="muted">Project name</h3>
<ul class="nav nav-justified">
<h3 class="text-muted">Project name</h3>
<ul class="nav navbar-nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
@@ -119,17 +118,17 @@ title: Justified nav template
<!-- Example row of columns -->
<div class="row">
<div class="col-span-4">
<div class="col col-lg-4">
<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><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<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><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="col-span-4">
<div class="col col-lg-4">
<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><a class="btn" href="#">View details &raquo;</a></p>

6
docs/examples/navbar-fixed-top.html
View File

@@ -27,7 +27,7 @@ title: Fixed navbar template
</a>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
@@ -44,7 +44,7 @@ title: Fixed navbar template
</ul>
</li>
</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-static-top/">Static top</a></li>
<li class="active"><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
@@ -60,7 +60,7 @@ title: Fixed navbar template
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
<a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs &raquo;</a>
</p>
</div>

6
docs/examples/navbar-static-top.html
View File

@@ -23,7 +23,7 @@ title: Static navbar template
</a>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
@@ -40,7 +40,7 @@ title: Static navbar template
</ul>
</li>
</ul>
<ul class="nav pull-right">
<ul class="nav navbar-nav pull-right">
<li><a href="/examples/navbar/">Default</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>
@@ -57,7 +57,7 @@ title: Static navbar template
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
<a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs &raquo;</a>
</p>
</div>

6
docs/examples/navbar.html
View File

@@ -29,7 +29,7 @@ title: Navbar template
</a>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
@@ -46,7 +46,7 @@ title: Navbar template
</ul>
</li>
</ul>
<ul class="nav pull-right">
<ul class="nav navbar-nav pull-right">
<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-fixed-top/">Fixed top</a></li>
@@ -60,7 +60,7 @@ title: Navbar template
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
<a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs &raquo;</a>
</p>
</div>

4
docs/examples/signin.html
View File

@@ -13,8 +13,8 @@ title: Sign in form template
}
.form-signin {
max-width: 300px;
padding: 30px;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,

2
docs/examples/starter-template.html
View File

@@ -24,7 +24,7 @@ title: Starter template
</button>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>

15
docs/examples/sticky-footer-navbar.html
View File

@@ -22,14 +22,13 @@ title: Sticky footer with navbar template
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
@@ -50,7 +49,7 @@ title: Sticky footer with navbar template
/* Not required for template or sticky footer method. */
#wrap > .container {
padding-top: 60px;
padding: 60px 15px 0;
}
.container .credit {
margin: 20px 0;
@@ -77,7 +76,7 @@ title: Sticky footer with navbar template
</button>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
@@ -104,14 +103,12 @@ title: Sticky footer with navbar template
<h1>Sticky footer with fixed navbar</h1>
</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>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 id="push"></div>
</div>
<div id="footer">
<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>

12
docs/examples/sticky-footer.html
View File

@@ -22,14 +22,13 @@ title: Sticky footer template
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
@@ -50,6 +49,7 @@ title: Sticky footer template
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
@@ -68,14 +68,12 @@ title: Sticky footer template
<h1>Sticky footer</h1>
</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>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 id="push"></div>
</div>
<div id="footer">
<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>

291
docs/getting-started.html
View File

@@ -1,291 +0,0 @@
---
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 -->

83
docs/index.html
View File

@@ -1,77 +1,50 @@
---
layout: default
layout: home
title: Bootstrap
---
<div class="bs-docs-jumbotron masthead">
<div class="container">
<h1>Bootstrap</h1>
<p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</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="./docs/" class="btn btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Docs', 'View docs']);">View docs</a>
</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">
<li>
<a href="./customize/" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Customize']);">Customize</a>
</li>
<li>
<a href="http://github.com/twitter/bootstrap" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
</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>Version 3.0.0</li>
</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>

1864
docs/javascript.html
View File

File diff suppressed because it is too large Load Diff

4
js/bootstrap-scrollspy.js vendored
View File

@@ -97,7 +97,7 @@
this.activeTarget = target
$(this.selector)
.parent('.active')
.parents('.active')
.removeClass('active')
selector = this.selector
@@ -105,7 +105,7 @@
+ this.selector + '[href="' + target + '"]'
active = $(selector)
.parent('li')
.parents('li')
.addClass('active')
if (active.parent('.dropdown-menu').length) {

48
less/alerts.less
View File

@@ -9,10 +9,10 @@
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: @line-height-base;
color: @state-warning-text;
background-color: @state-warning-background;
border: 1px solid @state-warning-border;
border-radius: @border-radius-base;
color: @alert-text;
background-color: @alert-bg;
border: 1px solid @alert-border;
border-radius: @alert-border-radius;
// Headings for larger alerts
h4 {
@@ -22,14 +22,13 @@
}
// Match the hr to the border of the alert
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
> a,
> p > a {
font-weight: 500;
color: darken(@state-warning-text, 10%);
}
color: darken(@alert-text, 10%);
}
// Adjust close link position
@@ -37,48 +36,47 @@
position: relative;
top: -2px;
right: -21px;
line-height: @line-height-base;
color: inherit;
}
}
// Alternate styles
// -------------------------
.alert-success {
background-color: @state-success-background;
border-color: @state-success-border;
color: @state-success-text;
background-color: @alert-success-bg;
border-color: @alert-success-border;
color: @alert-success-text;
hr {
border-top-color: darken(@state-success-border, 5%);
border-top-color: darken(@alert-success-border, 5%);
}
> a,
> p > a {
color: darken(@state-success-text, 10%);
color: darken(@alert-success-text, 10%);
}
}
.alert-danger,
.alert-error {
background-color: @state-error-background;
border-color: @state-error-border;
color: @state-error-text;
.alert-danger {
background-color: @alert-danger-bg;
border-color: @alert-danger-border;
color: @alert-danger-text;
hr {
border-top-color: darken(@state-error-border, 5%);
border-top-color: darken(@alert-danger-border, 5%);
}
> a,
> p > a {
color: darken(@state-error-text, 10%);
color: darken(@alert-danger-text, 10%);
}
}
.alert-info {
background-color: @state-info-background;
border-color: @state-info-border;
color: @state-info-text;
background-color: @alert-info-bg;
border-color: @alert-info-border;
color: @alert-info-text;
hr {
border-top-color: darken(@state-info-border, 5%);
border-top-color: darken(@alert-info-border, 5%);
}
> a,
> p > a {
color: darken(@state-info-text, 10%);
color: darken(@alert-info-text, 10%);
}
}

6
less/badges.less
View File

@@ -8,14 +8,14 @@
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-size: @font-size-small;
font-weight: bold;
color: #fff;
line-height: 1;
vertical-align: middle;
white-space: nowrap;
text-align: center;
background-color: @grayLight;
background-color: @gray-light;
border-radius: 10px;
// Empty labels/badges collapse
@@ -48,7 +48,7 @@ a.badge {
}
// Account for counters in navs
.nav-list > .active > a > .badge,
a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
color: @link-color;
background-color: #fff;

2
less/bootstrap.less vendored
View File

@@ -30,6 +30,8 @@
@import "component-animations.less";
@import "glyphicons.less";
@import "dropdowns.less";
@import "list-group.less";
@import "panels.less";
@import "wells.less";
@import "close.less";

5
less/breadcrumbs.less
View File

@@ -18,8 +18,11 @@
padding: 0 5px;
color: #ccc;
}
&:last-child:after {
display: none; // No divider after last element
}
}
> .active {
color: @grayLight;
color: @gray-light;
}
}

17
less/button-groups.less
View File

@@ -32,7 +32,7 @@
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
.clear_float();
.clearfix();
.btn-group {
float: left;
@@ -73,6 +73,21 @@
.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
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {

16
less/buttons.less
View File

@@ -110,26 +110,26 @@ input[type="button"] {
.btn {
color: @btn-color;
.btn-pseudo-states(@btn-background, @btn-border);
.btn-pseudo-states(@btn-bg, @btn-border);
}
.btn-primary {
.btn-pseudo-states(@btn-background-primary, @btn-border-primary);
.btn-pseudo-states(@btn-primary-bg, @btn-primary-border);
}
// Warning appears as orange
.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
.btn-danger {
.btn-pseudo-states(@btn-background-danger, @btn-border-danger);
.btn-pseudo-states(@btn-danger-bg, @btn-danger-border);
}
// Success appears as green
.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
.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 {
}
.btn-link:hover,
.btn-link:focus {
color: @link-color-hover;
color: @link-hover-color;
text-decoration: underline;
background-color: transparent;
}
@@ -168,7 +168,7 @@ fieldset[disabled] .btn-link {
fieldset[disabled] & {
&:hover,
&:focus {
color: @grayDark;
color: @gray-dark;
text-decoration: none;
}
}

25
less/carousel.less
View File

@@ -155,19 +155,23 @@
// Hidden by default for smaller viewports
.carousel-caption {
position: absolute;
left: 20%;
right: 20%;
left: 15%;
right: 15%;
bottom: 20px;
display: none;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
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
@media screen and (min-width: 768px) {
// Scale up controls for tablets and up
@media screen and (min-width: @screen-tablet) {
// Scale up the controls a smidge
.carousel-control .glyphicon {
@@ -180,13 +184,8 @@
// Show and left align the captions
.carousel-caption {
left: 0;
right: 0;
z-index: 10;
display: block;
max-width: 60%;
padding: 30px;
margin-left: 0;
margin-right: 0;
left: 20%;
right: 20%;
padding-bottom: 30px;
}
}

5
less/close.less
View File

@@ -5,12 +5,13 @@
.close {
float: right;
font-size: 20px;
font-size: (@font-size-base * 1.5);
font-weight: bold;
line-height: @line-height-base;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(.2);
&:hover,
&:focus {
color: #000;

2
less/code.less
View File

@@ -9,7 +9,7 @@ pre {
padding: 0 3px 2px;
font-family: @font-family-monospace;
font-size: (@font-size-base - 2);
color: @grayDark;
color: @gray-dark;
border-radius: 4px;
}

18
less/dropdowns.less
View File

@@ -45,7 +45,7 @@
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
background-color: @dropdown-background;
background-color: @dropdown-bg;
border: 1px solid #ccc; // IE8 fallback
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
@@ -71,7 +71,7 @@
font-weight: normal;
line-height: @line-height-base;
color: @dropdown-link-color;
white-space: nowrap;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
@@ -82,8 +82,8 @@
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
color: @dropdown-link-color-hover;
#gradient > .vertical(@dropdown-link-background-hover, darken(@dropdown-link-background-hover, 5%));
color: @dropdown-link-hover-color;
#gradient > .vertical(@dropdown-link-hover-bg, darken(@dropdown-link-hover-bg, 5%));
}
// Active state
@@ -91,10 +91,10 @@
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: @dropdown-link-color-active;
color: @dropdown-link-active-color;
text-decoration: none;
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
@@ -103,7 +103,7 @@
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: @grayLight;
color: @gray-light;
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover,
@@ -186,12 +186,12 @@
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: darken(@dropdown-background, 20%);
border-left-color: darken(@dropdown-bg, 20%);
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: @dropdown-link-color-hover;
border-left-color: @dropdown-link-hover-color;
}
// Left aligned submenus

40
less/forms.less
View File

@@ -23,7 +23,7 @@ legend {
margin-bottom: @line-height-base;
font-size: (@font-size-base * 1.5);
line-height: (@line-height-base * 2);
color: @grayDark;
color: @gray-dark;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
@@ -62,11 +62,11 @@ input[type="color"] {
line-height: @line-height-base;
color: @gray;
vertical-align: middle;
background-color: @input-background;
background-color: @input-bg;
border: 1px solid @input-border;
border-radius: @input-border-radius;
.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
@@ -88,6 +88,11 @@ input[type="checkbox"] {
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
textarea {
height: auto;
@@ -173,6 +178,7 @@ textarea {
display: inline;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
}
@@ -188,21 +194,24 @@ textarea {
margin-top: ((@line-height-base / 4) * -1);
}
/*
// Move the options list down to align with labels
.controls > .radio:first-child,
.controls > .checkbox:first-child {
padding-top: 5px; // has to be padding because margin collaspes
}
*/
// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-top: 5px;
// padding-top: 5px;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
@@ -286,7 +295,7 @@ textarea {
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-background-disabled;
background-color: @input-bg-disabled;
}
}
// Explicitly reset the colors here
@@ -307,15 +316,15 @@ input[type="checkbox"] {
// Warning
.has-warning {
.formFieldState(@state-warning-text, @state-warning-text, @state-warning-background);
.formFieldState(@state-warning-text, @state-warning-text, @state-warning-bg);
}
// Error
.has-error {
.formFieldState(@state-error-text, @state-error-text, @state-error-background);
.formFieldState(@state-danger-text, @state-danger-text, @state-danger-bg);
}
// 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
@@ -341,9 +350,9 @@ select:focus:invalid {
padding: (@line-height-base - 1) 20px @line-height-base;
margin-top: @line-height-base;
margin-bottom: @line-height-base;
background-color: @form-actions-background;
background-color: @form-actions-bg;
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 {
line-height: @line-height-base;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: @grayLighter;
background-color: @gray-lighter;
border: 1px solid #ccc;
&.input-small {
@@ -509,7 +518,7 @@ select:focus:invalid {
// Horizontal forms
// --------------------------------------------------
@media screen and (min-width: 768px) {
@media screen and (min-width: @screen-tablet) {
.form-horizontal {
@@ -517,7 +526,7 @@ select:focus:invalid {
.control-group {
position: relative;
margin-bottom: @line-height-base;
.clear_float();
.clearfix();
input,
select,
@@ -539,5 +548,10 @@ select:focus:invalid {
margin-left: @component-offset-horizontal;
}
// Make sure form actions buttons are aligned with controls
.form-actions {
padding-left: @component-offset-horizontal;
}
}
}

3
less/glyphicons.less
View File

@@ -26,14 +26,13 @@
url('@{glyphicons-font-path}/glyphiconshalflings-regular.woff') format('woff'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.ttf') format('truetype'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
font-style: normal;
font-weight: normal;
}
// Catchall baseclass
.glyphicon:before {
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
}

36
less/grid.less
View File

@@ -12,38 +12,56 @@
.row {
.make-row();
}
[class*="col-span-"] {
// Common styles for small and large grid columns
.col {
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;
// Inner gutter via padding
padding-left: (@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
@media screen and (min-width: 768px) {
@media screen and (min-width: @screen-tablet) {
.container {
max-width: 728px;
}
// Generate the grid columns and offsets
[class*="col-span-"] { float: left; }
.generate-grid-columns(@grid-columns);
.row {
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
}
}
// Responsive: Desktops and up
@media screen and (min-width: 992px) {
@media screen and (min-width: @screen-desktop) {
.container {
max-width: 940px;
}
}
// Responsive: Large desktops and up
@media screen and (min-width: 1200px) {
@media screen and (min-width: @screen-large-desktop) {
.container {
max-width: 1170px;
}
}
// Reset utility classes due to specificity
[class*="col-span-"].pull-right {
/*[class*="col-span-"].pull-right {
float: right;
}
}*/

10
less/jumbotron.less
View File

@@ -6,11 +6,11 @@
.jumbotron {
padding: 30px;
margin-bottom: 30px;
font-size: 21px;
font-size: (@font-size-base * 1.5);
font-weight: 200;
line-height: (@line-height-base * 1.5);
color: @jumbotron-lead-color;
background-color: @jumbotron-background;
background-color: @jumbotron-bg;
h1 {
line-height: 1;
color: @jumbotron-heading-color;
@@ -20,13 +20,13 @@
}
}
@media screen and (min-width: 768px) {
@media screen and (min-width: @screen-tablet) {
.jumbotron {
padding: 50px 60px;
border-radius: 6px; // Only round corners at higher resolutions
border-radius: @border-radius-large; // Only round corners at higher resolutions
h1 {
font-size: 60px;
font-size: (@font-size-base * 4.5);
}
}
}

70
less/labels.less
View File

@@ -2,45 +2,69 @@
// Labels
// --------------------------------------------------
// Base classes
.label {
display: inline;
padding: .25em .6em;
font-size: 75%;
font-weight: 500;
color: #fff;
line-height: 1;
vertical-align: middle;
white-space: nowrap;
color: #fff;
text-align: center;
background-color: @grayLight;
white-space: nowrap;
vertical-align: middle;
background-color: @gray-light;
border-radius: .25em;
}
// Hover state, but only for links
a.label {
// Add hover effects, but only for links
&[href] {
&:hover,
&:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
background-color: darken(@gray-light, 10%);
}
}
}
// Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
.label {
// Danger (red)
&-danger { background-color: @label-danger-background; }
&-danger[href] { background-color: darken(@label-danger-background, 10%); }
// Warnings (orange)
&-warning { background-color: @label-warning-background; }
&-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%); }
// Contextual variations (linked labels get darker on :hover)
.label-danger {
background-color: @label-danger-bg;
&[href] {
&:hover,
&:focus {
background-color: darken(@label-danger-bg, 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%);
}
}
}

96
less/list-group.less Normal file
View File

@@ -0,0 +1,96 @@
//
// 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;
}

88
less/mixins.less
View File

@@ -16,7 +16,7 @@
// that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
// `:before` to contain the top-margins of child elements.
.clear_float() {
.clearfix() {
&:before,
&:after {
content: " "; /* 1 */
@@ -155,7 +155,6 @@
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
}
.translate3d(@x, @y, @z) {
-webkit-transform: translate3d(@x, @y, @z);
@@ -249,20 +248,18 @@
#gradient {
.horizontal(@startColor: #555, @endColor: #333) {
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-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-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
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-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-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
@@ -270,9 +267,8 @@
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
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: -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
}
.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
@@ -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-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-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) {
@@ -291,7 +286,6 @@
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: -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-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
@@ -301,7 +295,7 @@
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: -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;
}
.striped(@color: #555, @angle: 45deg) {
@@ -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-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);
}
}
@@ -346,7 +339,7 @@
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@top: #e5e5e5, @bottom: #fff) {
height: 1px;
height: 2px; // 1px for background, one for border
margin: ((@line-height-base / 2) - 1) 0;
overflow: hidden;
background-color: @top;
@@ -400,31 +393,38 @@
.container-fixed() {
margin-right: auto;
margin-left: auto;
.clear_float();
.clearfix();
}
// Make a grid
// Creates a wrapper for a series of columns
.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-right: (@grid-gutter-width / -2);
// Then clear the floated columns
.clear_float();
}
}
// Generate the 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;
// Calculate width based on number of columns available
width: percentage(@columns / @grid-columns);
}
width: 100%;
// Prevent columns from collapsing when empty
min-height: 1px;
// Set inner padding as gutters instead of margin
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
width: percentage((@columns / @grid-columns));
}
}
// Generate the column offsets
.make-column-offset(@columns) {
@@ -445,15 +445,41 @@
// The Grid
// Small grid columns
.generate-grid-columns(@grid-columns) {
// Default columns
.col-span-X (@index) when (@index > 0) {
.col-span-@{index} { .col-span-(@index); }
.col-span-X((@index - 1));
.col-sm-X (@index) when (@index > 0) {
.col-sm-@{index} { .col-sm-(@index); }
.col-sm-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)
.col-offset-X (@index) when (@index > 0) {
@@ -477,9 +503,6 @@
.col-pull-X (0) {}
// Apply the styles
.col-span-(@columns) {
width: percentage((@columns / @grid-columns));
}
.col-offset-(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
@@ -491,7 +514,6 @@
}
// Generate .spanX and .offsetX
.col-span-X(@grid-columns);
.col-offset-X(@grid-columns);
.col-push-X(@grid-columns);
.col-pull-X(@grid-columns);

9
less/modals.less
View File

@@ -74,18 +74,19 @@
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
padding: 9px 15px;
padding: @modal-title-padding;
border-bottom: 1px solid #e5e5e5;
min-height: (@modal-title-padding + @modal-title-line-height);
}
// Close icon
.modal-header .close {
margin-top: 2px;
margin-top: -2px;
}
// Title text within header
.modal-title {
margin: 0;
line-height: 30px; // effectively set a min-height for the header
line-height: @modal-title-line-height;
}
// Modal body
@@ -119,7 +120,7 @@
}
// Scale up the modal
@media screen and (min-width: 768px) {
@media screen and (min-width: @screen-tablet) {
.modal-dialog {
left: 50%;

280
less/navbar.less
View File

@@ -5,43 +5,45 @@
// Wrapper and base class
.navbar {
position: relative;
padding: 10px 15px;
margin-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
background-color: @navbar-bg;
border-radius: @border-radius-base;
// Prevent floats from breaking the navbar
.clear_float();
.clearfix();
}
// Navbar nav links
// -------------------------
.navbar {
.nav {
// space out from .navbar .brand and .btn-navbar
margin-top: 15px;
}
.nav > li > a {
.navbar-nav {
// Space out from .navbar .brand and .btn-navbar when stacked in mobile views
margin-top: 5px;
> li > a {
padding-top: ((@navbar-height - @line-height-base) / 2);
padding-bottom: ((@navbar-height - @line-height-base) / 2);
color: @navbar-link-color;
line-height: 20px;
}
.nav > li > a:hover,
.nav > li > a:focus {
color: @navbar-link-color-hover;
background-color: @navbar-link-bg-hover;
> li > a:hover,
> li > a:focus {
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
color: @navbar-link-color-active;
background-color: @navbar-link-bg-active;
> .active > a,
> .active > a:hover,
> .active > a:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
.nav > .disabled > a,
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: @navbar-link-color-disabled;
background-color: @navbar-link-bg-disabled;
> .disabled > a,
> .disabled > a:hover,
> .disabled > a:focus {
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
}
@@ -65,8 +67,13 @@
z-index: @zindex-navbar-fixed;
border-radius: 0;
}
.navbar-fixed-top { top: 0; }
.navbar-fixed-bottom { bottom: 0; }
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
}
@@ -80,17 +87,17 @@
max-width: 200px;
margin-left: auto;
margin-right: auto;
padding: 7px 15px;
font-size: 18px;
padding: 15px;
font-size: @font-size-large;
font-weight: 500;
line-height: @line-height-base;
color: @navbar-brand-color;
text-align: center;
&:hover,
&:focus {
color: @navbar-brand-color-hover;
color: @navbar-brand-hover-color;
text-decoration: none;
background-color: @navbar-brand-bg-hover;
background-color: @navbar-brand-hover-bg;
}
}
@@ -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-vertical-align(34px); // Vertically center in navbar
@@ -135,32 +137,32 @@
// Dropdown menus
// Menu position and menu carets
.navbar .nav > li > .dropdown-menu {
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
// 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-right-radius: 0;
}
// Dropdown menu items and carets
.navbar .nav {
.navbar-nav {
// Caret should match text color on hover
li.dropdown > a:hover .caret,
li.dropdown > a:focus .caret {
border-top-color: @navbar-link-color-hover;
border-bottom-color: @navbar-link-color-hover;
border-top-color: @navbar-link-hover-color;
border-bottom-color: @navbar-link-hover-color;
}
// Remove background color from open dropdown
li.dropdown.open > .dropdown-toggle,
li.dropdown.active > .dropdown-toggle,
li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-link-bg-active;
color: @navbar-link-color-active;
background-color: @navbar-link-active-bg;
color: @navbar-link-active-color;
}
li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-link-color;
@@ -169,14 +171,14 @@
li.dropdown.open > .dropdown-toggle .caret,
li.dropdown.active > .dropdown-toggle .caret,
li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-link-color-active;
border-bottom-color: @navbar-link-color-active;
border-top-color: @navbar-link-active-color;
border-bottom-color: @navbar-link-active-color;
}
}
// Right aligned menus need alt position
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
.navbar-nav.pull-right > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu.pull-right {
left: auto;
right: 0;
}
@@ -193,34 +195,36 @@
color: @navbar-inverse-brand-color;
&:hover,
&:focus {
color: @navbar-inverse-brand-color-hover;
background-color: @navbar-inverse-brand-bg-hover;
color: @navbar-inverse-brand-hover-color;
background-color: @navbar-inverse-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-inverse-text;
color: @navbar-inverse-color;
}
.nav > li > a {
.navbar-nav {
> li > a {
color: @navbar-inverse-link-color;
}
.nav > li > a:hover,
.nav > li > a:focus {
color: @navbar-inverse-link-color-hover;
background-color: @navbar-inverse-link-bg-hover;
> li > a:hover,
> li > a:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
color: @navbar-inverse-link-color-active;
background-color: @navbar-inverse-link-bg-active;
> .active > a,
> .active > a:hover,
> .active > a:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
> .disabled > a,
> .disabled > a:hover,
> .disabled > a:focus {
color: @navbar-inverse-link-disabled-color;
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
@@ -235,77 +239,56 @@
}
}
// Darken dividers
.nav > .divider {
background-color: darken(@navbar-inverse-bg, 5%);
border-bottom-color: lighten(@navbar-inverse-bg, 5%);
}
// Dropdowns
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-inverse-link-bg-active;
color: @navbar-inverse-link-color-active;
.navbar-nav {
li.dropdown.open > .dropdown-toggle,
li.dropdown.active > .dropdown-toggle,
li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color;
}
.nav li.dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-color-hover;
border-bottom-color: @navbar-inverse-link-color-hover;
li.dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-hover-color;
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-bottom-color: @navbar-inverse-link-color;
}
.nav li.dropdown.open > .dropdown-toggle .caret,
.nav li.dropdown.active > .dropdown-toggle .caret,
.nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color-active;
border-bottom-color: @navbar-inverse-link-color-active;
li.dropdown.open > .dropdown-toggle .caret,
li.dropdown.active > .dropdown-toggle .caret,
li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-active-color;
border-bottom-color: @navbar-inverse-link-active-color;
}
}
}
// Inverse navbar
// Responsive navbar
// --------------------------------------------------
@media screen and (min-width: 768px) {
.navbar {
padding-top: 0;
padding-bottom: 0;
}
@media screen and (min-width: @screen-tablet) {
.navbar-brand {
float: left;
padding-top: ((@navbar-height - @line-height-base) / 2);
padding-bottom: ((@navbar-height - @line-height-base) / 2);
margin-left: -10px;
margin-left: -5px;
margin-right: 5px;
}
.navbar .nav {
float: left;
margin-top: 0; // undo top margin to make nav extend full height of navbar
.clear_float();
> li {
float: left;
}
&.pull-right {
float: right;
}
}
.navbar .nav > li {
float: left;
}
// Dividers go vertical
// Change the height and height, disable bottom border, then add right border
.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
.navbar-toggle {
@@ -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 {
color: @navbar-link-color;
&:hover {
color: @navbar-link-color-hover;
color: @navbar-link-hover-color;
}
}
// Buttons in navbar
// -------------------------
.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-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
// Use the inverse navbar variables
.navbar-inverse .navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}
}
*/

186
less/navs.less
View File

@@ -11,28 +11,56 @@
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
.clear_float();
}
.nav > li {
.clearfix();
> li {
display: block;
}
.nav > li > a {
> a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
&:hover,
&:focus {
text-decoration: none;
background-color: @grayLighter;
background-color: @gray-lighter;
}
}
// Nav states and addons
// --------------------------------------------------
// Disabled state
// -------------------------
// 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
.nav > .pull-right {
> .pull-right {
float: right;
}
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider();
}
}
// Nav variations
@@ -44,146 +72,126 @@
// Give the tabs something to sit on
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
> li {
float: left;
// Make the list-items overlay the bottom border
margin-bottom: -1px;
}
// Actual tabs (as links)
.nav-tabs > li > a {
> a {
margin-right: 2px;
line-height: @line-height-base;
border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0;
&: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,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
&.active > a,
&.active > a:hover,
&.active > a:focus {
color: @gray;
background-color: @body-background;
background-color: @body-bg;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
}
// pulling this in mainly for less shorthand
&.nav-justified {
.nav-justified;
.nav-tabs-justified;
}
}
// Pills
// -------------------------
.nav-pills > li {
.nav-pills {
> li {
float: left;
}
// Links rendered as pills
.nav-pills > li > a {
> a {
border-radius: 5px;
}
.nav-pills > li + li > a {
+ li {
> a {
margin-left: 2px;
}
}
// Active state
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
&.active > a,
&.active > a:hover,
&.active > a:focus {
color: #fff;
background-color: @link-color;
background-color: @component-active-bg;
}
}
}
// Stacked pills
.nav-stacked > li {
.nav-stacked {
> li {
float: none;
}
.nav-stacked > li + li > a {
+ li {
> a {
margin-top: 2px;
margin-left: 0; // no need for this gap between nav items
}
}
}
}
// Justified nav links
// -------------------------
.nav-justified {
// Negative margin doesn't work, so we hack it
max-height: 40px;
}
.nav-justified > li {
width: 100%;
> li {
float: none;
display: table-cell;
width: 1%;
> a {
text-align: center;
}
}
}
// Lists
// -------------------------
// Move borders to anchors instead of bottom of list
.nav-tabs-justified () {
border-bottom: 0;
> li > a {
border-bottom: 1px solid #ddd;
.nav-list > li > a {
margin-bottom: -1px; // pull up the following link for a 1px border between
border: 1px solid #e5e5e5;
// Override margin from .nav-tabs
margin-right: 0;
}
.nav-list > li:first-child > a {
border-top-left-radius: @border-radius-base;
border-top-right-radius: @border-radius-base;
> .active > a {
border-bottom-color: @body-bg;
}
.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;
}
// 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-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-size: @font-size-mini;
font-weight: bold;
line-height: @line-height-base;
color: @grayLight;
color: @gray-light;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
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 @@
margin-top: 8px;
}
.nav .dropdown-toggle:hover .caret {
border-top-color: @link-color-hover;
border-bottom-color: @link-color-hover;
border-top-color: @link-hover-color;
border-bottom-color: @link-hover-color;
}
// Active dropdown links
@@ -258,8 +266,8 @@
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover {
color: #fff;
background-color: @grayLight;
border-color: @grayLight;
background-color: @gray-light;
border-color: @gray-light;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
@@ -271,7 +279,7 @@
// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover {
border-color: @grayLight;
border-color: @gray-light;
}
*/

53
less/pager.less
View File

@@ -7,37 +7,48 @@
margin: @line-height-base 0;
list-style: none;
text-align: center;
.clear_float();
}
.pager li {
.clearfix();
li {
display: inline;
}
.pager li > a,
.pager li > span {
> a,
> span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
border-radius: 15px;
}
.pager li > a:hover,
.pager li > a:focus {
> a:hover,
> a:focus {
text-decoration: none;
background-color: #f5f5f5;
background-color: @pagination-active-bg;
}
.pager .next > a,
.pager .next > span {
}
.next {
> a,
> span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
}
.previous {
> a,
> span {
float: left;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
color: @grayLight;
background-color: #fff;
}
.disabled {
> a,
> a:hover,
> a:focus,
> span {
color: @gray-light;
background-color: @pagination-bg;
cursor: default;
}
}
}

10
less/pagination.less
View File

@@ -15,7 +15,7 @@
padding: 4px 12px;
line-height: @line-height-base;
text-decoration: none;
background-color: @pagination-background;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
border-left-width: 0;
}
@@ -23,19 +23,19 @@
.pagination > li > a:focus,
.pagination > .active > a,
.pagination > .active > span {
background-color: @pagination-background-active;
background-color: @pagination-active-bg;
}
.pagination > .active > a,
.pagination > .active > span {
color: @grayLight;
color: @gray-light;
cursor: default;
}
.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: @grayLight;
background-color: @pagination-background;
color: @gray-light;
background-color: @pagination-bg;
cursor: default;
}
.pagination > li:first-child > a,

86
less/panels.less Normal file
View File

@@ -0,0 +1,86 @@
//
// 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;
}
}
}

12
less/popovers.less
View File

@@ -12,9 +12,9 @@
max-width: 276px;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: @popover-background;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-color: @popover-bg;
-webkit-bg-clip: padding-box;
-moz-bg-clip: padding;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
@@ -34,11 +34,11 @@
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: 14px;
font-size: @font-size-base;
font-weight: normal;
line-height: 18px;
background-color: @popover-title-background;
border-bottom: 1px solid darken(@popover-title-background, 5%);
background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: 5px 5px 0 0;
&:empty {

3
less/progress-bars.less
View File

@@ -56,13 +56,14 @@
float: left;
width: 0%;
height: 100%;
font-size: 12px;
font-size: @font-size-small;
color: #fff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @progress-bar-bg;
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.transition(width .6s ease);
.backface-visibility(hidden);
}
// Striped bars

60
less/responsive-utilities.less
View File

@@ -5,11 +5,27 @@
// IE10 Metro responsive
// Required for Windows 8 Metro split-screen snapping with IE10
//
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport{
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
// Credit: HTML5 Boilerplate
.hidden {
@@ -19,34 +35,36 @@
// Visibility utilities
// For desktops
.visible-phone { display: none !important; }
// For Phones
.visible-phone { display: inherit !important; }
.visible-tablet { display: none !important; }
.hidden-phone { }
.hidden-tablet { }
.hidden-desktop { display: none !important; }
.visible-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
.hidden-phone { display: none !important; }
.hidden-tablet { display: inherit !important; }
.hidden-desktop { display: inherit !important; }
// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important ; }
// Show
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.visible-phone { display: none !important; }
.visible-tablet { display: inherit !important; }
// Hide
.visible-desktop { display: none !important; }
.hidden-phone { display: inherit !important; }
.hidden-tablet { display: none !important; }
.hidden-desktop { display: inherit !important; }
}
// Phones only
@media (max-width: 767px) {
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
// Show
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
// Hide
.hidden-phone { display: none !important; }
// For desktops
@media (min-width: @screen-desktop) {
.visible-phone { display: none !important; }
.visible-tablet { display: none !important; }
.visible-desktop { display: inherit !important; }
.hidden-phone { display: inherit !important; }
.hidden-tablet { display: inherit !important; }
.hidden-desktop { display: none !important; }
}
// Print utilities

9
less/scaffolding.less
View File

@@ -22,7 +22,7 @@ html {
}
// Disable iOS/WinMobile font size changes
@media screen and (max-device-width: 480px) {
@media screen and (max-device-width: @screen-phone) {
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
@@ -31,10 +31,10 @@ html {
body {
font-family: @font-family-base;
.font-size();
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
background-color: @body-background;
background-color: @body-bg;
}
// Reset fonts for revelant elements
@@ -57,7 +57,7 @@ a {
}
a:hover,
a:focus {
color: @link-color-hover;
color: @link-hover-color;
text-decoration: underline;
}
a:focus {
@@ -71,7 +71,6 @@ a:focus {
img {
// Responsive images (ensure images don't scale beyond their parents)
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
// Match vertical alignment with other comment elements

137
less/tables.less
View File

@@ -5,9 +5,7 @@
table {
max-width: 100%;
background-color: @table-background;
border-collapse: collapse;
border-spacing: 0;
background-color: @table-bg;
}
th {
text-align: left;
@@ -21,15 +19,17 @@ th {
width: 100%;
margin-bottom: @line-height-base;
// Cells
th,
td {
thead > tr > th,
tbody > tr > th,
thead > tr > td,
tbody > tr > td {
padding: 8px;
line-height: @line-height-base;
vertical-align: top;
border-top: 1px solid @table-border;
border-top: 1px solid @table-border-color;
}
// Bottom align for column headings
thead th {
thead > tr > th {
vertical-align: bottom;
}
// Remove top border from thead by default
@@ -43,12 +43,12 @@ th {
}
// Account for multiple tbody instances
tbody + tbody {
border-top: 2px solid @table-border;
border-top: 2px solid @table-border-color;
}
// Nesting
.table {
background-color: @body-background;
background-color: @body-bg;
}
}
@@ -58,8 +58,10 @@ th {
// -------------------------------
.table-condensed {
th,
td {
thead > tr > th,
tbody > tr > th,
thead > tr > td,
tbody > tr > td {
padding: 4px 5px;
}
}
@@ -70,74 +72,77 @@ th {
// ----------------
.table-bordered {
border: 1px solid @table-border;
border: 1px solid @table-border-color;
border-collapse: separate; // Done so we can round those corners!
border-left: 0;
border-radius: @border-radius-base;
th,
td {
border-left: 1px solid @table-border;
> thead > tr > th,
> tbody > tr > th,
> thead > tr > td,
> tbody > tr > td {
border-left: 1px solid @table-border-color;
}
// Prevent a double border
caption + thead tr:first-child th,
caption + tbody tr:first-child th,
caption + tbody tr:first-child td,
colgroup + thead tr:first-child th,
colgroup + tbody tr:first-child th,
colgroup + tbody tr:first-child td,
thead:first-child tr:first-child th,
tbody:first-child tr:first-child th,
tbody:first-child tr:first-child td {
> caption + thead > tr:first-child th,
> caption + tbody > tr:first-child th,
> caption + tbody > tr:first-child td,
> colgroup + thead > tr:first-child th,
> colgroup + tbody > tr:first-child th,
> colgroup + tbody > tr:first-child td,
> thead:first-child > tr:first-child th,
> tbody:first-child > tr:first-child th,
> tbody:first-child > tr:first-child td {
border-top: 0;
}
// For first th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:first-child,
tbody:first-child tr:first-child > td:first-child,
tbody: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 > th:first-child {
border-top-left-radius: @border-radius-base;
}
// For last th/td in the first row in the first thead or tbody
thead:first-child tr:first-child > th:last-child,
tbody:first-child tr:first-child > td:last-child,
tbody: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 > th:last-child {
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
thead:last-child tr:last-child > th:first-child,
tbody:last-child tr:last-child > td: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 > 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 > th:first-child,
> tfoot:last-child > tr:last-child > td:first-child,
> tfoot:last-child > tr:last-child > th:first-child {
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
thead:last-child tr:last-child > th:last-child,
tbody:last-child tr:last-child > td: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 > 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 > th:last-child,
> tfoot:last-child > tr:last-child > td:last-child,
> tfoot:last-child > tr:last-child > th:last-child {
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
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;
}
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;
}
// Special fixes to round the left border on the first td/th
caption + thead tr:first-child th:first-child,
caption + tbody tr:first-child td:first-child,
colgroup + thead tr:first-child th:first-child,
colgroup + tbody tr:first-child td:first-child {
> caption + thead > tr:first-child > th:first-child,
> caption + tbody > tr:first-child > td:first-child,
> colgroup + thead > tr:first-child > th:first-child,
> colgroup + tbody > tr:first-child > td:first-child {
border-top-left-radius: @border-radius-base;
}
caption + thead tr:first-child th:last-child,
caption + tbody tr:first-child td:last-child,
colgroup + thead tr:first-child th:last-child,
colgroup + tbody tr:first-child td:last-child {
> caption + thead > tr:first-child > th:last-child,
> caption + tbody > tr:first-child > td:last-child,
> colgroup + thead > tr:first-child > th:last-child,
> colgroup + tbody > tr:first-child > td:last-child {
border-top-right-radius: @border-radius-base;
}
@@ -153,7 +158,7 @@ th {
> tbody {
> tr:nth-child(odd) > td,
> tr:nth-child(odd) > th {
background-color: @table-background-accent;
background-color: @table-bg-accent;
}
}
}
@@ -168,7 +173,7 @@ th {
> tbody {
> tr:hover > td,
> tr:hover > th {
background-color: @table-background-hover;
background-color: @table-bg-hover;
}
}
}
@@ -197,19 +202,19 @@ table th[class*="col-span-"] {
> td.success,
> th.success,
&.success > td {
background-color: @state-success-background;
background-color: @state-success-bg;
border-color: @state-success-border;
}
> td.error,
> th.error,
&.error > td {
background-color: @state-error-background;
border-color: @state-error-border;
> td.danger,
> th.danger,
&.danger > td {
background-color: @state-danger-bg;
border-color: @state-danger-border;
}
> td.warning,
> th.warning,
&.warning > td {
background-color: @state-warning-background;
background-color: @state-warning-bg;
border-color: @state-warning-border;
}
}
@@ -219,19 +224,19 @@ table th[class*="col-span-"] {
> td.success:hover,
> th.success:hover,
&.success:hover > td {
background-color: darken(@state-success-background, 5%);
background-color: darken(@state-success-bg, 5%);
border-color: darken(@state-success-border, 5%);
}
> td.error:hover,
> th.error:hover,
&.error:hover > td {
background-color: darken(@state-error-background, 5%);
border-color: darken(@state-error-border, 5%);
> td.danger:hover,
> th.danger:hover,
&.danger:hover > td {
background-color: darken(@state-danger-bg, 5%);
border-color: darken(@state-danger-border, 5%);
}
> td.warning:hover,
> th.warning:hover,
&.warning:hover > td {
background-color: darken(@state-warning-background, 5%);
background-color: darken(@state-warning-bg, 5%);
border-color: darken(@state-warning-border, 5%);
}
}

7
less/thumbnails.less
View File

@@ -12,8 +12,9 @@
.img-thumbnail {
padding: 4px;
line-height: @line-height-base;
border: 1px solid #ddd;
border-radius: @border-radius-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
}
.thumbnail {
@@ -38,5 +39,5 @@ a.thumbnail:focus {
}
.thumbnail .caption {
padding: 9px;
color: @gray;
color: @thumbnail-caption-color;
}

4
less/tooltip.less
View File

@@ -9,7 +9,7 @@
z-index: @zindex-tooltip;
display: block;
visibility: visible;
font-size: 11px;
font-size: @font-size-mini;
line-height: 1.4;
.opacity(0);
@@ -27,7 +27,7 @@
color: @tooltip-color;
text-align: center;
text-decoration: none;
background-color: @tooltip-background;
background-color: @tooltip-bg;
border-radius: @border-radius-base;
}

61
less/type.less
View File

@@ -11,9 +11,9 @@ p {
}
.lead {
margin-bottom: @line-height-base;
.font-size((@font-size-base * 1.5));
font-size: (@font-size-base * 1.5);
font-weight: 200;
line-height: 1.3;
line-height: 1.4;
}
@@ -28,17 +28,17 @@ em { font-style: italic; }
cite { font-style: normal; }
// Utility classes
.muted { color: @grayLight; }
a.muted:hover,
a.muted:focus { color: darken(@grayLight, 10%); }
.text-muted { color: @gray-light; }
a.text-muted:hover,
a.text-muted:focus { color: darken(@gray-light, 10%); }
.text-warning { color: @state-warning-text; }
a.text-warning:hover,
a.text-warning:focus { color: darken(@state-warning-text, 10%); }
.text-error { color: @state-error-text; }
a.text-error:hover,
a.text-error:focus { color: darken(@state-error-text, 10%); }
.text-danger { color: @state-danger-text; }
a.text-danger:hover,
a.text-danger:focus { color: darken(@state-danger-text, 10%); }
.text-success { color: @state-success-text; }
a.text-success:hover,
@@ -57,11 +57,10 @@ h1, h2, h3, h4, h5, h6,
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @line-height-base;
text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
font-weight: normal;
line-height: 1;
color: @grayLight;
color: @gray-light;
}
}
@@ -82,12 +81,12 @@ h6 {
margin-bottom: (@line-height-base / 2);
}
h1, .h1 { font-size: (@font-size-base * 2.75); font-size: 4rem; } // ~38px
h2, .h2 { font-size: (@font-size-base * 2.25); font-size: 3rem; } // ~32px
h3, .h3 { font-size: (@font-size-base * 1.75); font-size: 2.5rem; } // ~24px
h4, .h4 { font-size: (@font-size-base * 1.25); font-size: 2rem; } // ~18px
h5, .h5 { font-size: @font-size-base; font-size: 1.6rem; }
h6, .h6 { font-size: (@font-size-base * 0.85); font-size: 1.2rem; } // ~12px
h1, .h1 { font-size: (@font-size-base * 2.75); } // ~38px
h2, .h2 { font-size: (@font-size-base * 2.25); } // ~32px
h3, .h3 { font-size: (@font-size-base * 1.75); } // ~24px
h4, .h4 { font-size: (@font-size-base * 1.25); } // ~18px
h5, .h5 { font-size: @font-size-base; }
h6, .h6 { font-size: (@font-size-base * 0.85); } // ~12px
h1 small, .h1 small { font-size: (@font-size-base * 1.75); } // ~24px
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; }
.page-header {
padding-bottom: ((@line-height-base / 2) - 1);
margin: (@line-height-base * 2) 0 @line-height-base;
border-bottom: 1px solid @grayLighter;
border-bottom: 1px solid @gray-lighter;
}
@@ -126,19 +125,21 @@ li {
}
// List options
// Unstyled keeps list items block level, just removes list-style
.list-unstyled,
// Inline turns list items into inline-block
.list-inline {
.list-unstyled {
margin-left: 0;
list-style: none;
}
// Single-line list items
.list-inline > li {
// Inline turns list items into inline-block
.list-inline {
.list-unstyled();
> li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
}
// Description Lists
dl {
@@ -156,7 +157,7 @@ dd {
}
// Horizontal layout (like forms)
.dl-horizontal {
.clear_float(); // Ensure dl clears floats if empty dd elements present
.clearfix(); // Ensure dl clears floats if empty dd elements present
dt {
float: left;
width: (@component-offset-horizontal - 20);
@@ -186,7 +187,7 @@ abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted @grayLight;
border-bottom: 1px dotted @gray-light;
}
abbr.initialism {
font-size: 90%;
@@ -195,19 +196,21 @@ abbr.initialism {
// Blockquotes
blockquote {
padding: 0 0 0 15px;
padding: (@line-height-base/2) @line-height-base;
margin: 0 0 @line-height-base;
border-left: 5px solid @grayLighter;
border-left: 5px solid @gray-lighter;
p {
margin-bottom: 0;
font-size: (@font-size-base * 1.25);
font-weight: 300;
line-height: 1.25;
}
p:last-child {
margin-bottom: 0;
}
small {
display: block;
line-height: @line-height-base;
color: @grayLight;
color: @gray-light;
&:before {
content: '\2014 \00A0';
}
@@ -218,7 +221,7 @@ blockquote {
float: right;
padding-right: 15px;
padding-left: 0;
border-right: 5px solid @grayLighter;
border-right: 5px solid @gray-lighter;
border-left: 0;
p,
small {

2
less/utilities.less
View File

@@ -7,7 +7,7 @@
// -------------------------
.clearfix {
.clear_float();
.clearfix();
}
.pull-right {
float: right;

284
less/variables.less
View File

@@ -10,11 +10,11 @@
// Grays
// -------------------------
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #eee;
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee
// Brand colors
// -------------------------
@@ -28,14 +28,14 @@
// Scaffolding
// -------------------------
@body-background: #fff;
@text-color: @grayDark;
@body-bg: #fff;
@text-color: @gray-dark;
// Links
// -------------------------
@link-color: #428bca;
@link-color-hover: darken(@link-color, 15%);
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Typography
// -------------------------
@@ -45,7 +45,7 @@
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@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-small: (@font-size-base * 0.85); // ~12px
@font-size-mini: (@font-size-base * 0.75); // ~11px
@@ -56,7 +56,7 @@
@headings-font-weight: 500;
// Component sizing
// Components
// -------------------------
// Based on 14px font-size and 1.5 line-height
@@ -68,78 +68,75 @@
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-bg: @brand-primary;
// Tables
// -------------------------
@table-background: transparent; // overall background-color
@table-background-accent: #f9f9f9; // for striping
@table-background-hover: #f5f5f5; // for hover
@table-bg: transparent; // overall background-color
@table-bg-accent: #f9f9f9; // for striping
@table-bg-hover: #f5f5f5; // for hover
@table-border: #ddd; // table and cell border
@table-border-color: #ddd; // table and cell border
// Buttons
// -------------------------
@btn-color: #fff;
@btn-background: #a7a9aa;
@btn-border: @btn-background;
@btn-bg: #a7a9aa;
@btn-border: @btn-bg;
@btn-background-primary: @brand-primary;
@btn-border-primary: @btn-background-primary;
@btn-primary-bg: @brand-primary;
@btn-primary-border: @btn-primary-bg;
@btn-background-success: @brand-success;
@btn-border-success: @btn-background-success;
@btn-success-bg: @brand-success;
@btn-success-border: @btn-success-bg;
@btn-background-warning: @brand-warning;
@btn-border-warning: @btn-background-warning;
@btn-warning-bg: @brand-warning;
@btn-warning-border: @btn-warning-bg;
@btn-background-danger: @brand-danger;
@btn-border-danger: @btn-background-danger;
@btn-danger-bg: @brand-danger;
@btn-danger-border: @btn-danger-bg;
@btn-background-info: @brand-info;
@btn-border-info: @btn-background-info;
@btn-info-bg: @brand-info;
@btn-info-border: @btn-info-bg;
// Forms
// -------------------------
@input-background: #fff;
@input-background-disabled: @grayLighter;
@input-bg: #fff;
@input-bg-disabled: @gray-lighter;
@input-border: #ccc;
@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-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
// adjust min-height on input sizes
@form-actions-background: #f5f5f5;
@form-actions-bg: #f5f5f5;
// Dropdowns
// -------------------------
@dropdown-background: #fff;
@dropdown-bg: #fff;
@dropdown-border: rgba(0,0,0,.15);
@dropdown-divider-top: #e5e5e5;
@dropdown-divider-bottom: #fff;
@dropdown-link-color: @grayDark;
@dropdown-link-color-hover: #fff;
@dropdown-link-color-active: #fff;
@dropdown-link-background-active: @link-color;
@dropdown-link-background-hover: @dropdown-link-background-active;
@dropdown-link-active-color: #fff;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg;
// COMPONENT VARIABLES
@@ -167,68 +164,63 @@
// Navbar
// -------------------------
// Responsive collapsing
// @navbar-collapse-width: 979px;
// @navbar-collapse-width-desktop: @navbar-collapse-width + 1;
// Basics of a navbar
@navbar-height: 50px;
@navbar-text: #777;
@navbar-color: #777;
@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-link-color: #777;
@navbar-link-color-hover: #333;
@navbar-link-bg-hover: transparent;
@navbar-link-color-active: #555;
@navbar-link-bg-active: darken(@navbar-bg, 10%);
@navbar-link-color-disabled: #ccc;
@navbar-link-bg-disabled: transparent;
@navbar-link-hover-color: #333;
@navbar-link-hover-bg: transparent;
@navbar-link-active-color: #555;
@navbar-link-active-bg: darken(@navbar-bg, 10%);
@navbar-link-disabled-color: #ccc;
@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
@navbar-inverse-text: @grayLight;
@navbar-inverse-color: @gray-light;
@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
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-color-hover: #fff;
@navbar-inverse-brand-bg-hover: 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;
@navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar search
// Normal navbar needs no special styles or vars
@navbar-inverse-search-background: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-background-focus: #fff;
@navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-bg-focus: #fff;
@navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc;
// Pagination
// -------------------------
@pagination-background: #fff;
@pagination-background-active: #f5f5f5;
@pagination-bg: #fff;
@pagination-border: #ddd;
@pagination-active-bg: #f5f5f5;
// Jumbotron
// -------------------------
@jumbotron-background: @grayLighter;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-lead-color: inherit;
@@ -237,33 +229,33 @@
// -------------------------
@state-warning-text: #c09853;
@state-warning-background: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-background, -10), 3%);
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
@state-error-text: #b94a48;
@state-error-background: #f2dede;
@state-error-border: darken(spin(@state-error-background, -10), 3%);
@state-danger-text: #b94a48;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
@state-success-text: #468847;
@state-success-background: #dff0d8;
@state-success-border: darken(spin(@state-success-background, -10), 5%);
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: #3a87ad;
@state-info-background: #d9edf7;
@state-info-border: darken(spin(@state-info-background, -10), 7%);
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
// Tooltips and popovers
// -------------------------
@tooltip-color: #fff;
@tooltip-background: rgba(0,0,0,.9);
@tooltip-bg: rgba(0,0,0,.9);
@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-color: #fff;
@popover-title-background: darken(@popover-background, 3%);
@popover-title-bg: darken(@popover-bg, 3%);
// Special enhancement for popovers
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@@ -272,17 +264,38 @@
// Labels
// -------------------------
@label-success-background: @brand-success;
@label-info-background: @brand-info;
@label-warning-background: @brand-warning;
@label-danger-background: @brand-danger;
@label-success-bg: @brand-success;
@label-info-bg: @brand-info;
@label-warning-bg: @brand-warning;
@label-danger-bg: @brand-danger;
// Modals
// -------------------------
@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
// -------------------------
@@ -294,23 +307,98 @@
@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
// -------------------------
// Hr border color
@hr-border: @grayLighter;
@hr-border: @gray-lighter;
// Horizontal forms & lists
@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
// --------------------------------------------------
// Number of columns in the grid system
@grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet;

4
less/wells.less
View File

@@ -8,8 +8,8 @@
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: @well-background;
border: 1px solid darken(@well-background, 7%);
background-color: @well-bg;
border: 1px solid darken(@well-bg, 7%);
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {