bootstrapped-rails 1.1.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.DS_Store +0 -0
- data/.gitignore +4 -0
- data/Gemfile +4 -0
- data/Rakefile +1 -0
- data/bootstrapped-rails.gemspec +24 -0
- data/lib/.DS_Store +0 -0
- data/lib/bootstrapped-rails.rb +11 -0
- data/lib/bootstrapped-rails/.DS_Store +0 -0
- data/lib/bootstrapped-rails/engine.rb +6 -0
- data/lib/bootstrapped-rails/ie_hex_str.rb +16 -0
- data/lib/bootstrapped-rails/railtie.rb +6 -0
- data/lib/bootstrapped-rails/version.rb +5 -0
- data/vendor/.DS_Store +0 -0
- data/vendor/images/.DS_Store +0 -0
- data/vendor/images/glyphicons-halflings-white.png +0 -0
- data/vendor/images/glyphicons-halflings.png +0 -0
- data/vendor/javascripts/.DS_Store +0 -0
- data/vendor/javascripts/bootstrapped.js +1 -0
- data/vendor/javascripts/bootstrapped/.DS_Store +0 -0
- data/vendor/javascripts/bootstrapped/bootstrap-alert.js +91 -0
- data/vendor/javascripts/bootstrapped/bootstrap-button.js +98 -0
- data/vendor/javascripts/bootstrapped/bootstrap-carousel.js +154 -0
- data/vendor/javascripts/bootstrapped/bootstrap-collapse.js +136 -0
- data/vendor/javascripts/bootstrapped/bootstrap-dropdown.js +92 -0
- data/vendor/javascripts/bootstrapped/bootstrap-modal.js +209 -0
- data/vendor/javascripts/bootstrapped/bootstrap-popover.js +95 -0
- data/vendor/javascripts/bootstrapped/bootstrap-scrollspy.js +125 -0
- data/vendor/javascripts/bootstrapped/bootstrap-tab.js +130 -0
- data/vendor/javascripts/bootstrapped/bootstrap-tooltip.js +270 -0
- data/vendor/javascripts/bootstrapped/bootstrap-transition.js +51 -0
- data/vendor/javascripts/bootstrapped/bootstrap-typeahead.js +271 -0
- data/vendor/stylesheets/.DS_Store +0 -0
- data/vendor/stylesheets/bootstrapped-rails.css +3 -0
- data/vendor/stylesheets/bootstrapped/.DS_Store +0 -0
- data/vendor/stylesheets/bootstrapped/accordion.scss +28 -0
- data/vendor/stylesheets/bootstrapped/alerts.scss +70 -0
- data/vendor/stylesheets/bootstrapped/bootstrap.scss +62 -0
- data/vendor/stylesheets/bootstrapped/breadcrumbs.scss +22 -0
- data/vendor/stylesheets/bootstrapped/button-groups.scss +147 -0
- data/vendor/stylesheets/bootstrapped/buttons.scss +183 -0
- data/vendor/stylesheets/bootstrapped/carousel.scss +121 -0
- data/vendor/stylesheets/bootstrapped/close.scss +18 -0
- data/vendor/stylesheets/bootstrapped/code.scss +44 -0
- data/vendor/stylesheets/bootstrapped/component-animations.scss +18 -0
- data/vendor/stylesheets/bootstrapped/dropdowns.scss +131 -0
- data/vendor/stylesheets/bootstrapped/forms.scss +516 -0
- data/vendor/stylesheets/bootstrapped/grid.scss +8 -0
- data/vendor/stylesheets/bootstrapped/hero-unit.scss +20 -0
- data/vendor/stylesheets/bootstrapped/labels.scss +16 -0
- data/vendor/stylesheets/bootstrapped/layouts.scss +17 -0
- data/vendor/stylesheets/bootstrapped/mixins.scss +511 -0
- data/vendor/stylesheets/bootstrapped/modals.scss +72 -0
- data/vendor/stylesheets/bootstrapped/navbar.scss +292 -0
- data/vendor/stylesheets/bootstrapped/navs.scss +344 -0
- data/vendor/stylesheets/bootstrapped/pager.scss +30 -0
- data/vendor/stylesheets/bootstrapped/pagination.scss +55 -0
- data/vendor/stylesheets/bootstrapped/popovers.scss +49 -0
- data/vendor/stylesheets/bootstrapped/progress-bars.scss +95 -0
- data/vendor/stylesheets/bootstrapped/reset.scss +126 -0
- data/vendor/stylesheets/bootstrapped/responsive.scss +323 -0
- data/vendor/stylesheets/bootstrapped/scaffolding.scss +29 -0
- data/vendor/stylesheets/bootstrapped/sprites.scss +158 -0
- data/vendor/stylesheets/bootstrapped/tables.scss +130 -0
- data/vendor/stylesheets/bootstrapped/thumbnails.scss +35 -0
- data/vendor/stylesheets/bootstrapped/tooltip.scss +35 -0
- data/vendor/stylesheets/bootstrapped/type.scss +217 -0
- data/vendor/stylesheets/bootstrapped/utilities.scss +23 -0
- data/vendor/stylesheets/bootstrapped/variables.scss +99 -0
- data/vendor/stylesheets/bootstrapped/wells.scss +17 -0
- data/vendor/twitter/.gitignore +33 -0
- data/vendor/twitter/LICENSE +13 -0
- data/vendor/twitter/Makefile +59 -0
- data/vendor/twitter/README.md +94 -0
- data/vendor/twitter/docs/assets/bootstrap.zip +0 -0
- data/vendor/twitter/docs/assets/css/bootstrap-responsive.css +567 -0
- data/vendor/twitter/docs/assets/css/bootstrap.css +3365 -0
- data/vendor/twitter/docs/assets/css/docs.css +790 -0
- data/vendor/twitter/docs/assets/ico/bootstrap-apple-114x114.png +0 -0
- data/vendor/twitter/docs/assets/ico/bootstrap-apple-57x57.png +0 -0
- data/vendor/twitter/docs/assets/ico/bootstrap-apple-72x72.png +0 -0
- data/vendor/twitter/docs/assets/ico/favicon.ico +0 -0
- data/vendor/twitter/docs/assets/img/bird.png +0 -0
- data/vendor/twitter/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg +0 -0
- data/vendor/twitter/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg +0 -0
- data/vendor/twitter/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg +0 -0
- data/vendor/twitter/docs/assets/img/browsers.png +0 -0
- data/vendor/twitter/docs/assets/img/example-diagram-01.png +0 -0
- data/vendor/twitter/docs/assets/img/example-diagram-02.png +0 -0
- data/vendor/twitter/docs/assets/img/example-diagram-03.png +0 -0
- data/vendor/twitter/docs/assets/img/example-sites/bartop.png +0 -0
- data/vendor/twitter/docs/assets/img/example-sites/fleetio.png +0 -0
- data/vendor/twitter/docs/assets/img/example-sites/jshint.png +0 -0
- data/vendor/twitter/docs/assets/img/example-sites/kippt.png +0 -0
- data/vendor/twitter/docs/assets/img/example-sites/railwayjs.png +0 -0
- data/vendor/twitter/docs/assets/img/example-sites/totalwireframe.png +0 -0
- data/vendor/twitter/docs/assets/img/examples/bootstrap-example-fluid.jpg +0 -0
- data/vendor/twitter/docs/assets/img/examples/bootstrap-example-hero.jpg +0 -0
- data/vendor/twitter/docs/assets/img/examples/bootstrap-example-starter.jpg +0 -0
- data/vendor/twitter/docs/assets/img/github-16px.png +0 -0
- data/vendor/twitter/docs/assets/img/glyphicons-halflings-white.png +0 -0
- data/vendor/twitter/docs/assets/img/glyphicons-halflings.png +0 -0
- data/vendor/twitter/docs/assets/img/glyphicons/glyphicons_009_magic.png +0 -0
- data/vendor/twitter/docs/assets/img/glyphicons/glyphicons_042_group.png +0 -0
- data/vendor/twitter/docs/assets/img/glyphicons/glyphicons_079_podium.png +0 -0
- data/vendor/twitter/docs/assets/img/glyphicons/glyphicons_082_roundabout.png +0 -0
- data/vendor/twitter/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png +0 -0
- data/vendor/twitter/docs/assets/img/glyphicons/glyphicons_163_iphone.png +0 -0
- data/vendor/twitter/docs/assets/img/glyphicons/glyphicons_214_resize_small.png +0 -0
- data/vendor/twitter/docs/assets/img/glyphicons/glyphicons_266_book_open.png +0 -0
- data/vendor/twitter/docs/assets/img/grid-18px-masked.png +0 -0
- data/vendor/twitter/docs/assets/img/icon-css3.png +0 -0
- data/vendor/twitter/docs/assets/img/icon-github.png +0 -0
- data/vendor/twitter/docs/assets/img/icon-html5.png +0 -0
- data/vendor/twitter/docs/assets/img/icon-twitter.png +0 -0
- data/vendor/twitter/docs/assets/img/less-logo-large.png +0 -0
- data/vendor/twitter/docs/assets/img/less-small.png +0 -0
- data/vendor/twitter/docs/assets/img/responsive-illustrations.png +0 -0
- data/vendor/twitter/docs/assets/js/README.md +106 -0
- data/vendor/twitter/docs/assets/js/application.js +180 -0
- data/vendor/twitter/docs/assets/js/bootstrap-alert.js +91 -0
- data/vendor/twitter/docs/assets/js/bootstrap-button.js +98 -0
- data/vendor/twitter/docs/assets/js/bootstrap-carousel.js +154 -0
- data/vendor/twitter/docs/assets/js/bootstrap-collapse.js +136 -0
- data/vendor/twitter/docs/assets/js/bootstrap-dropdown.js +92 -0
- data/vendor/twitter/docs/assets/js/bootstrap-modal.js +209 -0
- data/vendor/twitter/docs/assets/js/bootstrap-popover.js +95 -0
- data/vendor/twitter/docs/assets/js/bootstrap-scrollspy.js +125 -0
- data/vendor/twitter/docs/assets/js/bootstrap-tab.js +130 -0
- data/vendor/twitter/docs/assets/js/bootstrap-tooltip.js +270 -0
- data/vendor/twitter/docs/assets/js/bootstrap-transition.js +51 -0
- data/vendor/twitter/docs/assets/js/bootstrap-typeahead.js +271 -0
- data/vendor/twitter/docs/assets/js/google-code-prettify/prettify.css +30 -0
- data/vendor/twitter/docs/assets/js/google-code-prettify/prettify.js +28 -0
- data/vendor/twitter/docs/assets/js/jquery.js +9252 -0
- data/vendor/twitter/docs/base-css.html +1582 -0
- data/vendor/twitter/docs/build/index.js +33 -0
- data/vendor/twitter/docs/build/node_modules/.bin/hulk +93 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/.git_ignore +1 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/.gitmodules +3 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/LICENSE +177 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/Makefile +62 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/README.md +93 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/bin/hulk +93 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/lib/compiler.js +348 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/lib/hogan.js +20 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/lib/template.js +233 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/package.json +20 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/html/list.html +8 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/index.html +13 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/index.js +848 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/mustache.js +90 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec.js +77 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/Changes +31 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/README.md +65 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/Rakefile +27 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/TESTING.md +46 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/comments.json +1 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/comments.yml +103 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/delimiters.json +1 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/delimiters.yml +158 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/interpolation.json +1 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/interpolation.yml +230 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/inverted.json +1 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/inverted.yml +193 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/partials.json +1 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/partials.yml +109 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/sections.json +1 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/sections.yml +256 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/~lambdas.json +1 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/spec/specs/~lambdas.yml +149 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/test/templates/list.mustache +8 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/tools/release.js +74 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/tools/web_templates.js +32 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/1.0.0/hogan.js +500 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/1.0.0/hogan.min.js +14 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.0/hogan.js +500 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.0/hogan.min.js +14 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.3/hogan.js +545 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.3/hogan.min.js +5 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.amd.js +576 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.common.js +576 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.js +572 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.amd.js +5 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.common.js +5 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.js +5 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.min.mustache.js +5 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/hogan-1.0.5.mustache.js +619 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/template-1.0.5.js +233 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/builds/1.0.5/template-1.0.5.min.js +5 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/favicon.ico +0 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/images/logo.png +0 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/images/noise.png +0 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/images/small-hogan-icon.png +0 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/images/stripes.png +0 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/index.html.mustache +139 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/stylesheets/layout.css +206 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/web/stylesheets/skeleton.css +236 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/wrappers/amd.js.mustache +21 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/wrappers/common.js.mustache +21 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/wrappers/js.mustache +17 -0
- data/vendor/twitter/docs/build/node_modules/hogan.js/wrappers/mustache.js.mustache +64 -0
- data/vendor/twitter/docs/build/package.json +6 -0
- data/vendor/twitter/docs/components.html +1517 -0
- data/vendor/twitter/docs/download.html +362 -0
- data/vendor/twitter/docs/examples.html +145 -0
- data/vendor/twitter/docs/examples/fluid.html +150 -0
- data/vendor/twitter/docs/examples/hero.html +107 -0
- data/vendor/twitter/docs/examples/starter-template.html +77 -0
- data/vendor/twitter/docs/index.html +249 -0
- data/vendor/twitter/docs/javascript.html +1465 -0
- data/vendor/twitter/docs/less.html +795 -0
- data/vendor/twitter/docs/scaffolding.html +438 -0
- data/vendor/twitter/docs/templates/layout.mustache +132 -0
- data/vendor/twitter/docs/templates/pages/base-css.mustache +1468 -0
- data/vendor/twitter/docs/templates/pages/components.mustache +1403 -0
- data/vendor/twitter/docs/templates/pages/download.mustache +248 -0
- data/vendor/twitter/docs/templates/pages/examples.mustache +31 -0
- data/vendor/twitter/docs/templates/pages/index.mustache +136 -0
- data/vendor/twitter/docs/templates/pages/javascript.mustache +1352 -0
- data/vendor/twitter/docs/templates/pages/less.mustache +681 -0
- data/vendor/twitter/docs/templates/pages/scaffolding.mustache +324 -0
- data/vendor/twitter/docs/templates/pages/upgrading.mustache +183 -0
- data/vendor/twitter/docs/upgrading.html +297 -0
- data/vendor/twitter/img/glyphicons-halflings-white.png +0 -0
- data/vendor/twitter/img/glyphicons-halflings.png +0 -0
- data/vendor/twitter/js/README.md +106 -0
- data/vendor/twitter/js/bootstrap-alert.js +91 -0
- data/vendor/twitter/js/bootstrap-button.js +98 -0
- data/vendor/twitter/js/bootstrap-carousel.js +154 -0
- data/vendor/twitter/js/bootstrap-collapse.js +136 -0
- data/vendor/twitter/js/bootstrap-dropdown.js +92 -0
- data/vendor/twitter/js/bootstrap-modal.js +209 -0
- data/vendor/twitter/js/bootstrap-popover.js +95 -0
- data/vendor/twitter/js/bootstrap-scrollspy.js +125 -0
- data/vendor/twitter/js/bootstrap-tab.js +130 -0
- data/vendor/twitter/js/bootstrap-tooltip.js +270 -0
- data/vendor/twitter/js/bootstrap-transition.js +51 -0
- data/vendor/twitter/js/bootstrap-typeahead.js +271 -0
- data/vendor/twitter/js/tests/index.html +49 -0
- data/vendor/twitter/js/tests/unit/bootstrap-alert.js +41 -0
- data/vendor/twitter/js/tests/unit/bootstrap-button.js +54 -0
- data/vendor/twitter/js/tests/unit/bootstrap-collapse.js +25 -0
- data/vendor/twitter/js/tests/unit/bootstrap-dropdown.js +53 -0
- data/vendor/twitter/js/tests/unit/bootstrap-modal.js +85 -0
- data/vendor/twitter/js/tests/unit/bootstrap-popover.js +93 -0
- data/vendor/twitter/js/tests/unit/bootstrap-scrollspy.js +31 -0
- data/vendor/twitter/js/tests/unit/bootstrap-tab.js +45 -0
- data/vendor/twitter/js/tests/unit/bootstrap-tooltip.js +62 -0
- data/vendor/twitter/js/tests/unit/bootstrap-transition.js +13 -0
- data/vendor/twitter/js/tests/unit/bootstrap-typeahead.js +128 -0
- data/vendor/twitter/js/tests/vendor/jquery.js +9252 -0
- data/vendor/twitter/js/tests/vendor/qunit.css +232 -0
- data/vendor/twitter/js/tests/vendor/qunit.js +1510 -0
- data/vendor/twitter/scss/accordion.scss +28 -0
- data/vendor/twitter/scss/alerts.scss +70 -0
- data/vendor/twitter/scss/bootstrap.scss +62 -0
- data/vendor/twitter/scss/breadcrumbs.scss +22 -0
- data/vendor/twitter/scss/button-groups.scss +147 -0
- data/vendor/twitter/scss/buttons.scss +168 -0
- data/vendor/twitter/scss/carousel.scss +121 -0
- data/vendor/twitter/scss/close.scss +18 -0
- data/vendor/twitter/scss/code.scss +44 -0
- data/vendor/twitter/scss/component-animations.scss +18 -0
- data/vendor/twitter/scss/dropdowns.scss +131 -0
- data/vendor/twitter/scss/forms.scss +516 -0
- data/vendor/twitter/scss/grid.scss +8 -0
- data/vendor/twitter/scss/hero-unit.scss +20 -0
- data/vendor/twitter/scss/labels.scss +16 -0
- data/vendor/twitter/scss/layouts.scss +17 -0
- data/vendor/twitter/scss/mixins.scss +500 -0
- data/vendor/twitter/scss/modals.scss +72 -0
- data/vendor/twitter/scss/navbar.scss +292 -0
- data/vendor/twitter/scss/navs.scss +344 -0
- data/vendor/twitter/scss/pager.scss +30 -0
- data/vendor/twitter/scss/pagination.scss +55 -0
- data/vendor/twitter/scss/popovers.scss +49 -0
- data/vendor/twitter/scss/progress-bars.scss +95 -0
- data/vendor/twitter/scss/reset.scss +126 -0
- data/vendor/twitter/scss/responsive.scss +323 -0
- data/vendor/twitter/scss/scaffolding.scss +29 -0
- data/vendor/twitter/scss/sprites.scss +158 -0
- data/vendor/twitter/scss/tables.scss +130 -0
- data/vendor/twitter/scss/thumbnails.scss +35 -0
- data/vendor/twitter/scss/tooltip.scss +35 -0
- data/vendor/twitter/scss/type.scss +217 -0
- data/vendor/twitter/scss/utilities.scss +23 -0
- data/vendor/twitter/scss/variables.scss +99 -0
- data/vendor/twitter/scss/wells.scss +17 -0
- metadata +368 -0
@@ -0,0 +1,795 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="en">
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<title>Bootstrap, from Twitter</title>
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
7
|
+
<meta name="description" content="">
|
8
|
+
<meta name="author" content="">
|
9
|
+
|
10
|
+
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
|
11
|
+
<!--[if lt IE 9]>
|
12
|
+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
13
|
+
<![endif]-->
|
14
|
+
|
15
|
+
<!-- Le styles -->
|
16
|
+
<link href="assets/css/bootstrap.css" rel="stylesheet">
|
17
|
+
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
|
18
|
+
<link href="assets/css/docs.css" rel="stylesheet">
|
19
|
+
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
20
|
+
|
21
|
+
<!-- Le fav and touch icons -->
|
22
|
+
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
23
|
+
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
|
24
|
+
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png">
|
25
|
+
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png">
|
26
|
+
</head>
|
27
|
+
|
28
|
+
<body data-spy="scroll" data-target=".subnav" data-offset="50">
|
29
|
+
|
30
|
+
|
31
|
+
<!-- Navbar
|
32
|
+
================================================== -->
|
33
|
+
<div class="navbar navbar-fixed-top">
|
34
|
+
<div class="navbar-inner">
|
35
|
+
<div class="container">
|
36
|
+
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
37
|
+
<span class="icon-bar"></span>
|
38
|
+
<span class="icon-bar"></span>
|
39
|
+
<span class="icon-bar"></span>
|
40
|
+
</a>
|
41
|
+
<a class="brand" href="./index.html">Bootstrap</a>
|
42
|
+
<div class="nav-collapse">
|
43
|
+
<ul class="nav">
|
44
|
+
<li class="">
|
45
|
+
<a href="./index.html">Overview</a>
|
46
|
+
</li>
|
47
|
+
<li class="">
|
48
|
+
<a href="./scaffolding.html">Scaffolding</a>
|
49
|
+
</li>
|
50
|
+
<li class="">
|
51
|
+
<a href="./base-css.html">Base CSS</a>
|
52
|
+
</li>
|
53
|
+
<li class="">
|
54
|
+
<a href="./components.html">Components</a>
|
55
|
+
</li>
|
56
|
+
<li class="">
|
57
|
+
<a href="./javascript.html">Javascript plugins</a>
|
58
|
+
</li>
|
59
|
+
<li class="active">
|
60
|
+
<a href="./less.html">Using LESS</a>
|
61
|
+
</li>
|
62
|
+
<li class="divider-vertical"></li>
|
63
|
+
<li class="">
|
64
|
+
<a href="./download.html">Customize</a>
|
65
|
+
</li>
|
66
|
+
<li class="">
|
67
|
+
<a href="./examples.html">Examples</a>
|
68
|
+
</li>
|
69
|
+
</ul>
|
70
|
+
</div>
|
71
|
+
</div>
|
72
|
+
</div>
|
73
|
+
</div>
|
74
|
+
|
75
|
+
<div class="container">
|
76
|
+
|
77
|
+
<!-- Masthead
|
78
|
+
================================================== -->
|
79
|
+
<header class="jumbotron subhead" id="overview">
|
80
|
+
<h1>Using LESS with Bootstrap</h1>
|
81
|
+
<p class="lead">Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
|
82
|
+
<div class="subnav">
|
83
|
+
<ul class="nav nav-pills">
|
84
|
+
<li><a href="#builtWith">Built with Less</a></li>
|
85
|
+
<li><a href="#variables">Variables</a></li>
|
86
|
+
<li><a href="#mixins">Mixins</a></li>
|
87
|
+
<li><a href="#compiling">Compiling Bootstrap</a></li>
|
88
|
+
</ul>
|
89
|
+
</div>
|
90
|
+
</header>
|
91
|
+
|
92
|
+
|
93
|
+
|
94
|
+
<!-- BUILT WITH LESS
|
95
|
+
================================================== -->
|
96
|
+
<section id="builtWith">
|
97
|
+
<div class="page-header">
|
98
|
+
<h1>Built with LESS</h1>
|
99
|
+
</div>
|
100
|
+
<div class="row">
|
101
|
+
<div class="span4">
|
102
|
+
<h3>Why LESS?</h3>
|
103
|
+
<p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
|
104
|
+
</div>
|
105
|
+
<div class="span4">
|
106
|
+
<h3>What's included?</h3>
|
107
|
+
<p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
|
108
|
+
</div>
|
109
|
+
<div class="span4">
|
110
|
+
<h3>Learn more</h3>
|
111
|
+
<img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
|
112
|
+
<p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
|
113
|
+
</div>
|
114
|
+
</div>
|
115
|
+
<div class="row">
|
116
|
+
<div class="span4">
|
117
|
+
<h3><a href="#variables">Variables</a></h3>
|
118
|
+
<p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.</p>
|
119
|
+
</div>
|
120
|
+
<div class="span4">
|
121
|
+
<h3><a href="#mixins">Mixins</a></h3>
|
122
|
+
<p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>
|
123
|
+
</div>
|
124
|
+
<div class="span4">
|
125
|
+
<h3>Operations</h3>
|
126
|
+
<p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.</p>
|
127
|
+
</div>
|
128
|
+
</div>
|
129
|
+
</section>
|
130
|
+
|
131
|
+
|
132
|
+
|
133
|
+
<!-- VARIABLES
|
134
|
+
================================================== -->
|
135
|
+
<section id="variables">
|
136
|
+
<div class="page-header">
|
137
|
+
<h1>Bootstrap variables <small>LESS variables, their values, and usage guidelines</small></h1>
|
138
|
+
</div>
|
139
|
+
|
140
|
+
<div class="row">
|
141
|
+
<div class="span6">
|
142
|
+
<h3>Hyperlinks</h3>
|
143
|
+
<table class="table table-bordered table-striped">
|
144
|
+
<tbody>
|
145
|
+
<tr>
|
146
|
+
<td class="span2"><code>@linkColor</code></td>
|
147
|
+
<td>#08c</td>
|
148
|
+
<td>Default link text color</td>
|
149
|
+
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
|
150
|
+
</tr>
|
151
|
+
<tr>
|
152
|
+
<td><code>@linkColorHover</code></td>
|
153
|
+
<td><code>darken(@linkColor, 15%)</code></td>
|
154
|
+
<td>Default link text hover color</td>
|
155
|
+
<td><span class="swatch" style="background-color: #005580;"></span></td>
|
156
|
+
</tr>
|
157
|
+
</tbody>
|
158
|
+
</table>
|
159
|
+
<h3>Grid system</h3>
|
160
|
+
<table class="table table-bordered table-striped">
|
161
|
+
<tbody>
|
162
|
+
<tr>
|
163
|
+
<td class="span2"><code>@gridColumns</code></td>
|
164
|
+
<td>12</td>
|
165
|
+
</tr>
|
166
|
+
<tr>
|
167
|
+
<td><code>@gridColumnWidth</code></td>
|
168
|
+
<td>60px</td>
|
169
|
+
</tr>
|
170
|
+
<tr>
|
171
|
+
<td><code>@gridGutterWidth</code></td>
|
172
|
+
<td>20px</td>
|
173
|
+
</tr>
|
174
|
+
<tr>
|
175
|
+
<td><code>@fluidGridColumnWidth</code></td>
|
176
|
+
<td>6.382978723%</td>
|
177
|
+
</tr>
|
178
|
+
<tr>
|
179
|
+
<td><code>@fluidGridGutterWidth</code></td>
|
180
|
+
<td>2.127659574%</td>
|
181
|
+
</tr>
|
182
|
+
</tbody>
|
183
|
+
</table>
|
184
|
+
<h3>Typography</h3>
|
185
|
+
<table class="table table-bordered table-striped">
|
186
|
+
<tbody>
|
187
|
+
<tr>
|
188
|
+
<td class="span2"><code>@baseFontSize</code></td>
|
189
|
+
<td>13px</td>
|
190
|
+
</tr>
|
191
|
+
<tr>
|
192
|
+
<td><code>@baseFontFamily</code></td>
|
193
|
+
<td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
|
194
|
+
</tr>
|
195
|
+
<tr>
|
196
|
+
<td><code>@baseLineHeight</code></td>
|
197
|
+
<td>18px</td>
|
198
|
+
</tr>
|
199
|
+
</tbody>
|
200
|
+
</table>
|
201
|
+
</div>
|
202
|
+
<div class="span6">
|
203
|
+
<h3>Grayscale colors</h3>
|
204
|
+
<table class="table table-bordered table-striped">
|
205
|
+
<tbody>
|
206
|
+
<tr>
|
207
|
+
<td class="span2"><code>@black</code></td>
|
208
|
+
<td>#000</td>
|
209
|
+
<td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
|
210
|
+
</tr>
|
211
|
+
<tr>
|
212
|
+
<td><code>@grayDarker</code></td>
|
213
|
+
<td>#222</td>
|
214
|
+
<td><span class="swatch" style="background-color: #222;"></span></td>
|
215
|
+
</tr>
|
216
|
+
<tr>
|
217
|
+
<td><code>@grayDark</code></td>
|
218
|
+
<td>#333</td>
|
219
|
+
<td><span class="swatch" style="background-color: #333;"></span></td>
|
220
|
+
</tr>
|
221
|
+
<tr>
|
222
|
+
<td><code>@gray</code></td>
|
223
|
+
<td>#555</td>
|
224
|
+
<td><span class="swatch" style="background-color: #555;"></span></td>
|
225
|
+
</tr>
|
226
|
+
<tr>
|
227
|
+
<td><code>@grayLight</code></td>
|
228
|
+
<td>#999</td>
|
229
|
+
<td><span class="swatch" style="background-color: #999;"></span></td>
|
230
|
+
</tr>
|
231
|
+
<tr>
|
232
|
+
<td><code>@grayLighter</code></td>
|
233
|
+
<td>#eee</td>
|
234
|
+
<td><span class="swatch" style="background-color: #eee;"></span></td>
|
235
|
+
</tr>
|
236
|
+
<tr>
|
237
|
+
<td><code>@white</code></td>
|
238
|
+
<td>#fff</td>
|
239
|
+
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
|
240
|
+
</tr>
|
241
|
+
</tbody>
|
242
|
+
</table>
|
243
|
+
<h3>Accent colors</h3>
|
244
|
+
<table class="table table-bordered table-striped">
|
245
|
+
<tbody>
|
246
|
+
<tr>
|
247
|
+
<td class="span2"><code>@blue</code></td>
|
248
|
+
<td>#049cdb</td>
|
249
|
+
<td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
|
250
|
+
</tr>
|
251
|
+
<tr>
|
252
|
+
<td><code>@green</code></td>
|
253
|
+
<td>#46a546</td>
|
254
|
+
<td><span class="swatch" style="background-color: #46a546;"></span></td>
|
255
|
+
</tr>
|
256
|
+
<tr>
|
257
|
+
<td><code>@red</code></td>
|
258
|
+
<td>#9d261d</td>
|
259
|
+
<td><span class="swatch" style="background-color: #9d261d;"></span></td>
|
260
|
+
</tr>
|
261
|
+
<tr>
|
262
|
+
<td><code>@yellow</code></td>
|
263
|
+
<td>#ffc40d</td>
|
264
|
+
<td><span class="swatch" style="background-color: #ffc40d;"></span></td>
|
265
|
+
</tr>
|
266
|
+
<tr>
|
267
|
+
<td><code>@orange</code></td>
|
268
|
+
<td>#f89406</td>
|
269
|
+
<td><span class="swatch" style="background-color: #f89406;"></span></td>
|
270
|
+
</tr>
|
271
|
+
<tr>
|
272
|
+
<td><code>@pink</code></td>
|
273
|
+
<td>#c3325f</td>
|
274
|
+
<td><span class="swatch" style="background-color: #c3325f;"></span></td>
|
275
|
+
</tr>
|
276
|
+
<tr>
|
277
|
+
<td><code>@purple</code></td>
|
278
|
+
<td>#7a43b6</td>
|
279
|
+
<td><span class="swatch" style="background-color: #7a43b6;"></span></td>
|
280
|
+
</tr>
|
281
|
+
</tbody>
|
282
|
+
</table>
|
283
|
+
</div>
|
284
|
+
</div> <!-- /row -->
|
285
|
+
|
286
|
+
<h3>Components</h3>
|
287
|
+
<div class="row">
|
288
|
+
<div class="span6">
|
289
|
+
<h4>Buttons</h4>
|
290
|
+
<table class="table table-bordered table-striped">
|
291
|
+
<tbody>
|
292
|
+
<tr>
|
293
|
+
<td class="span3"><code>@primaryButtonBackground</code></td>
|
294
|
+
<td><code>@linkColor</code></td>
|
295
|
+
<td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
|
296
|
+
</tr>
|
297
|
+
</tbody>
|
298
|
+
</table>
|
299
|
+
<h4>Forms</h4>
|
300
|
+
<table class="table table-bordered table-striped">
|
301
|
+
<tbody>
|
302
|
+
<tr>
|
303
|
+
<td class="span3"><code>@placeholderText</code></td>
|
304
|
+
<td><code>@grayLight</code></td>
|
305
|
+
<td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
|
306
|
+
</tr>
|
307
|
+
</tbody>
|
308
|
+
</table>
|
309
|
+
<h4>Navbar</h4>
|
310
|
+
<table class="table table-bordered table-striped">
|
311
|
+
<tbody>
|
312
|
+
<tr>
|
313
|
+
<td class="span3"><code>@navbarHeight</code></td>
|
314
|
+
<td>40px</td>
|
315
|
+
<td class="swatch-col"></td>
|
316
|
+
</tr>
|
317
|
+
<tr>
|
318
|
+
<td><code>@navbarBackground</code></td>
|
319
|
+
<td><code>@grayDarker</code></td>
|
320
|
+
<td><span class="swatch" style="background-color: #222;"></span></td>
|
321
|
+
</tr>
|
322
|
+
<tr>
|
323
|
+
<td><code>@navbarBackgroundHighlight</code></td>
|
324
|
+
<td><code>@grayDark</code></td>
|
325
|
+
<td><span class="swatch" style="background-color: #333;"></span></td>
|
326
|
+
</tr>
|
327
|
+
<tr>
|
328
|
+
<td><code>@navbarText</code></td>
|
329
|
+
<td><code>@grayLight</code></td>
|
330
|
+
<td><span class="swatch" style="background-color: #999;"></span></td>
|
331
|
+
</tr>
|
332
|
+
<tr>
|
333
|
+
<td><code>@navbarLinkColor</code></td>
|
334
|
+
<td><code>@grayLight</code></td>
|
335
|
+
<td><span class="swatch" style="background-color: #999;"></span></td>
|
336
|
+
</tr>
|
337
|
+
<tr>
|
338
|
+
<td><code>@navbarLinkColorHover</code></td>
|
339
|
+
<td><code>@white</code></td>
|
340
|
+
<td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
|
341
|
+
</tr>
|
342
|
+
</tbody>
|
343
|
+
</table>
|
344
|
+
</div>
|
345
|
+
<div class="span6">
|
346
|
+
<h4>Form states and alerts</h4>
|
347
|
+
<table class="table table-bordered table-striped">
|
348
|
+
<tbody>
|
349
|
+
<tr>
|
350
|
+
<td class="span3"><code>@warningText</code></td>
|
351
|
+
<td>#f3edd2</td>
|
352
|
+
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
|
353
|
+
</tr>
|
354
|
+
<tr>
|
355
|
+
<td><code>@warningBackground</code></td>
|
356
|
+
<td>#c09853</td>
|
357
|
+
<td><span class="swatch" style="background-color: #c09853;"></span></td>
|
358
|
+
</tr>
|
359
|
+
<tr>
|
360
|
+
<td><code>@errorText</code></td>
|
361
|
+
<td>#b94a48</td>
|
362
|
+
<td><span class="swatch" style="background-color: #b94a48;"></span></td>
|
363
|
+
</tr>
|
364
|
+
<tr>
|
365
|
+
<td><code>@errorBackground</code></td>
|
366
|
+
<td>#f2dede</td>
|
367
|
+
<td><span class="swatch" style="background-color: #f2dede;"></span></td>
|
368
|
+
</tr>
|
369
|
+
<tr>
|
370
|
+
<td><code>@successText</code></td>
|
371
|
+
<td>#468847</td>
|
372
|
+
<td><span class="swatch" style="background-color: #468847;"></span></td>
|
373
|
+
</tr>
|
374
|
+
<tr>
|
375
|
+
<td><code>@successBackground</code></td>
|
376
|
+
<td>#dff0d8</td>
|
377
|
+
<td><span class="swatch" style="background-color: #dff0d8;"></span></td>
|
378
|
+
</tr>
|
379
|
+
<tr>
|
380
|
+
<td><code>@infoText</code></td>
|
381
|
+
<td>#3a87ad</td>
|
382
|
+
<td><span class="swatch" style="background-color: #3a87ad;"></span></td>
|
383
|
+
</tr>
|
384
|
+
<tr>
|
385
|
+
<td><code>@infoBackground</code></td>
|
386
|
+
<td>#d9edf7</td>
|
387
|
+
<td><span class="swatch" style="background-color: #d9edf7;"></span></td>
|
388
|
+
</tr>
|
389
|
+
</tbody>
|
390
|
+
</table>
|
391
|
+
</div>
|
392
|
+
</div><!-- /row -->
|
393
|
+
|
394
|
+
</section>
|
395
|
+
|
396
|
+
|
397
|
+
|
398
|
+
<!-- MIXINS
|
399
|
+
================================================== -->
|
400
|
+
<section id="mixins">
|
401
|
+
<div class="page-header">
|
402
|
+
<h1>Bootstrap mixins <small></small></h1>
|
403
|
+
</div>
|
404
|
+
<h2>About mixins</h2>
|
405
|
+
<div class="row">
|
406
|
+
<div class="span4">
|
407
|
+
<h3>Basic mixins</h3>
|
408
|
+
<p>A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.</p>
|
409
|
+
<pre class="prettyprint linenums">
|
410
|
+
.element {
|
411
|
+
.clearfix();
|
412
|
+
}
|
413
|
+
</pre>
|
414
|
+
</div><!-- /span4 -->
|
415
|
+
<div class="span4">
|
416
|
+
<h3>Parametric mixins</h3>
|
417
|
+
<p>A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.</p>
|
418
|
+
<pre class="prettyprint linenums">
|
419
|
+
.element {
|
420
|
+
.border-radius(4px);
|
421
|
+
}
|
422
|
+
</pre>
|
423
|
+
</div><!-- /span4 -->
|
424
|
+
<div class="span4">
|
425
|
+
<h3>Easily add your own</h3>
|
426
|
+
<p>Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.</p>
|
427
|
+
<p>So, go ahead and use the existing ones or feel free to add your own as you need.</p>
|
428
|
+
</div><!-- /span4 -->
|
429
|
+
</div><!-- /row -->
|
430
|
+
<h2>Included mixins</h2>
|
431
|
+
<h3>Utilities</h3>
|
432
|
+
<table class="table table-bordered table-striped">
|
433
|
+
<thead>
|
434
|
+
<tr>
|
435
|
+
<th class="span4">Mixin</th>
|
436
|
+
<th>Parameters</th>
|
437
|
+
<th>Usage</th>
|
438
|
+
</tr>
|
439
|
+
</thead>
|
440
|
+
<tbody>
|
441
|
+
<tr>
|
442
|
+
<td><code>.clearfix()</code></td>
|
443
|
+
<td><em class="muted">none</em></td>
|
444
|
+
<td>Add to any parent to clear floats within</td>
|
445
|
+
</tr>
|
446
|
+
<tr>
|
447
|
+
<td><code>.tab-focus()</code></td>
|
448
|
+
<td><em class="muted">none</em></td>
|
449
|
+
<td>Apply the Webkit focus style and round Firefox outline</td>
|
450
|
+
</tr>
|
451
|
+
<tr>
|
452
|
+
<td><code>.center-block()</code></td>
|
453
|
+
<td><em class="muted">none</em></td>
|
454
|
+
<td>Auto center a block-level element using <code>margin: auto</code></td>
|
455
|
+
</tr>
|
456
|
+
<tr>
|
457
|
+
<td><code>.ie7-inline-block()</code></td>
|
458
|
+
<td><em class="muted">none</em></td>
|
459
|
+
<td>Use in addition to regular <code>display: inline-block</code> to get IE7 support</td>
|
460
|
+
</tr>
|
461
|
+
<tr>
|
462
|
+
<td><code>.size()</code></td>
|
463
|
+
<td><code>@height: 5px, @width: 5px</code></td>
|
464
|
+
<td>Quickly set the height and width on one line</td>
|
465
|
+
</tr>
|
466
|
+
<tr>
|
467
|
+
<td><code>.square()</code></td>
|
468
|
+
<td><code>@size: 5px</code></td>
|
469
|
+
<td>Builds on <code>.size()</code> to set the width and height as same value</td>
|
470
|
+
</tr>
|
471
|
+
<tr>
|
472
|
+
<td><code>.opacity()</code></td>
|
473
|
+
<td><code>@opacity: 100</code></td>
|
474
|
+
<td>Set, in whole numbers, the opacity percentage (e.g., "50" or "75")</td>
|
475
|
+
</tr>
|
476
|
+
</tbody>
|
477
|
+
</table>
|
478
|
+
<h3>Forms</h3>
|
479
|
+
<table class="table table-bordered table-striped">
|
480
|
+
<thead>
|
481
|
+
<tr>
|
482
|
+
<th class="span4">Mixin</th>
|
483
|
+
<th>Parameters</th>
|
484
|
+
<th>Usage</th>
|
485
|
+
</tr>
|
486
|
+
</thead>
|
487
|
+
<tbody>
|
488
|
+
<tr>
|
489
|
+
<td><code>.placeholder()</code></td>
|
490
|
+
<td><code>@color: @placeholderText</code></td>
|
491
|
+
<td>Set the <code>placeholder</code> text color for inputs</td>
|
492
|
+
</tr>
|
493
|
+
</tbody>
|
494
|
+
</table>
|
495
|
+
<h3>Typography</h3>
|
496
|
+
<table class="table table-bordered table-striped">
|
497
|
+
<thead>
|
498
|
+
<tr>
|
499
|
+
<th class="span4">Mixin</th>
|
500
|
+
<th>Parameters</th>
|
501
|
+
<th>Usage</th>
|
502
|
+
</tr>
|
503
|
+
</thead>
|
504
|
+
<tbody>
|
505
|
+
<tr>
|
506
|
+
<td><code>#font > #family > .serif()</code></td>
|
507
|
+
<td><em class="muted">none</em></td>
|
508
|
+
<td>Make an element use a serif font stack</td>
|
509
|
+
</tr>
|
510
|
+
<tr>
|
511
|
+
<td><code>#font > #family > .sans-serif()</code></td>
|
512
|
+
<td><em class="muted">none</em></td>
|
513
|
+
<td>Make an element use a sans-serif font stack</td>
|
514
|
+
</tr>
|
515
|
+
<tr>
|
516
|
+
<td><code>#font > #family > .monospace()</code></td>
|
517
|
+
<td><em class="muted">none</em></td>
|
518
|
+
<td>Make an element use a monospace font stack</td>
|
519
|
+
</tr>
|
520
|
+
<tr>
|
521
|
+
<td><code>#font > .shorthand()</code></td>
|
522
|
+
<td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
|
523
|
+
<td>Easily set font size, weight, and leading</td>
|
524
|
+
</tr>
|
525
|
+
<tr>
|
526
|
+
<td><code>#font > .serif()</code></td>
|
527
|
+
<td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
|
528
|
+
<td>Set font family to serif, and control size, weight, and leading</td>
|
529
|
+
</tr>
|
530
|
+
<tr>
|
531
|
+
<td><code>#font > .sans-serif()</code></td>
|
532
|
+
<td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
|
533
|
+
<td>Set font family to sans-serif, and control size, weight, and leading</td>
|
534
|
+
</tr>
|
535
|
+
<tr>
|
536
|
+
<td><code>#font > .monospace()</code></td>
|
537
|
+
<td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
|
538
|
+
<td>Set font family to monospace, and control size, weight, and leading</td>
|
539
|
+
</tr>
|
540
|
+
</tbody>
|
541
|
+
</table>
|
542
|
+
<h3>Grid system</h3>
|
543
|
+
<table class="table table-bordered table-striped">
|
544
|
+
<thead>
|
545
|
+
<tr>
|
546
|
+
<th class="span4">Mixin</th>
|
547
|
+
<th>Parameters</th>
|
548
|
+
<th>Usage</th>
|
549
|
+
</tr>
|
550
|
+
</thead>
|
551
|
+
<tbody>
|
552
|
+
<tr>
|
553
|
+
<td><code>.container-fixed()</code></td>
|
554
|
+
<td><em class="muted">none</em></td>
|
555
|
+
<td>Provide a fixed-width (set with <code>@siteWidth</code>) container for holding your content</td>
|
556
|
+
</tr>
|
557
|
+
<tr>
|
558
|
+
<td><code>.columns()</code></td>
|
559
|
+
<td><code>@columns: 1</code></td>
|
560
|
+
<td>Build a grid column that spans any number of columns (defaults to 1 column)</td>
|
561
|
+
</tr>
|
562
|
+
<tr>
|
563
|
+
<td><code>.offset()</code></td>
|
564
|
+
<td><code>@columns: 1</code></td>
|
565
|
+
<td>Offset a grid column with left margin that spans any number of columns</td>
|
566
|
+
</tr>
|
567
|
+
<tr>
|
568
|
+
<td><code>.gridColumn()</code></td>
|
569
|
+
<td><em class="muted">none</em></td>
|
570
|
+
<td>Make an element float like a grid column</td>
|
571
|
+
</tr>
|
572
|
+
</tbody>
|
573
|
+
</table>
|
574
|
+
<h3>CSS3 properties</h3>
|
575
|
+
<table class="table table-bordered table-striped">
|
576
|
+
<thead>
|
577
|
+
<tr>
|
578
|
+
<th class="span3">Mixin</th>
|
579
|
+
<th>Parameters</th>
|
580
|
+
<th>Usage</th>
|
581
|
+
</tr>
|
582
|
+
</thead>
|
583
|
+
<tbody>
|
584
|
+
<tr>
|
585
|
+
<td><code>.border-radius()</code></td>
|
586
|
+
<td><code>@radius: 5px</code></td>
|
587
|
+
<td>Round the corners of an element. Can be a single value or four space-separated values</td>
|
588
|
+
</tr>
|
589
|
+
<tr>
|
590
|
+
<td><code>.box-shadow()</code></td>
|
591
|
+
<td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td>
|
592
|
+
<td>Add a drop shadow to an element</td>
|
593
|
+
</tr>
|
594
|
+
<tr>
|
595
|
+
<td><code>.transition()</code></td>
|
596
|
+
<td><code>@transition</code></td>
|
597
|
+
<td>Add CSS3 transition effect (e.g., <code>all .2s linear</code>)</td>
|
598
|
+
</tr>
|
599
|
+
<tr>
|
600
|
+
<td><code>.rotate()</code></td>
|
601
|
+
<td><code>@degrees</code></td>
|
602
|
+
<td>Rotate an element <em>n</em> degrees</td>
|
603
|
+
</tr>
|
604
|
+
<tr>
|
605
|
+
<td><code>.scale()</code></td>
|
606
|
+
<td><code>@ratio</code></td>
|
607
|
+
<td>Scale an element to <em>n</em> times it's original size</td>
|
608
|
+
</tr>
|
609
|
+
<tr>
|
610
|
+
<td><code>.translate()</code></td>
|
611
|
+
<td><code>@x: 0, @y: 0</code></td>
|
612
|
+
<td>Move an element on the x and y planes</td>
|
613
|
+
</tr>
|
614
|
+
<tr>
|
615
|
+
<td><code>.background-clip()</code></td>
|
616
|
+
<td><code>@clip</code></td>
|
617
|
+
<td>Crop the backgroud of an element (useful for <code>border-radius</code>)</td>
|
618
|
+
</tr>
|
619
|
+
<tr>
|
620
|
+
<td><code>.background-size()</code></td>
|
621
|
+
<td><code>@size</code></td>
|
622
|
+
<td>Control the size of background images via CSS3</td>
|
623
|
+
</tr>
|
624
|
+
<tr>
|
625
|
+
<td><code>.box-sizing()</code></td>
|
626
|
+
<td><code>@boxmodel</code></td>
|
627
|
+
<td>Change the box model for an element (e.g., <code>border-box</code> for a full-width <code>input</code>)</td>
|
628
|
+
</tr>
|
629
|
+
<tr>
|
630
|
+
<td><code>.user-select()</code></td>
|
631
|
+
<td><code>@select</code></td>
|
632
|
+
<td>Control cursor selection of text on a page</td>
|
633
|
+
</tr>
|
634
|
+
<tr>
|
635
|
+
<td><code>.resizable()</code></td>
|
636
|
+
<td><code>@direction: both</code></td>
|
637
|
+
<td>Make any element resizable on the right and bottom</td>
|
638
|
+
</tr>
|
639
|
+
<tr>
|
640
|
+
<td><code>.content-columns()</code></td>
|
641
|
+
<td><code>@columnCount, @columnGap: @gridColumnGutter</code></td>
|
642
|
+
<td>Make the content of any element use CSS3 columns</td>
|
643
|
+
</tr>
|
644
|
+
</tbody>
|
645
|
+
</table>
|
646
|
+
<h3>Backgrounds and gradients</h3>
|
647
|
+
<table class="table table-bordered table-striped">
|
648
|
+
<thead>
|
649
|
+
<tr>
|
650
|
+
<th class="span4">Mixin</th>
|
651
|
+
<th>Parameters</th>
|
652
|
+
<th>Usage</th>
|
653
|
+
</tr>
|
654
|
+
</thead>
|
655
|
+
<tbody>
|
656
|
+
<tr>
|
657
|
+
<td><code>.#translucent > .background()</code></td>
|
658
|
+
<td><code>@color: @white, @alpha: 1</code></td>
|
659
|
+
<td>Give an element a translucent background color</td>
|
660
|
+
</tr>
|
661
|
+
<tr>
|
662
|
+
<td><code>.#translucent > .border()</code></td>
|
663
|
+
<td><code>@color: @white, @alpha: 1</code></td>
|
664
|
+
<td>Give an element a translucent border color</td>
|
665
|
+
</tr>
|
666
|
+
<tr>
|
667
|
+
<td><code>.#gradient > .vertical()</code></td>
|
668
|
+
<td><code>@startColor, @endColor</code></td>
|
669
|
+
<td>Create a cross-browser vertical background gradient</td>
|
670
|
+
</tr>
|
671
|
+
<tr>
|
672
|
+
<td><code>.#gradient > .horizontal()</code></td>
|
673
|
+
<td><code>@startColor, @endColor</code></td>
|
674
|
+
<td>Create a cross-browser horizontal background gradient</td>
|
675
|
+
</tr>
|
676
|
+
<tr>
|
677
|
+
<td><code>.#gradient > .directional()</code></td>
|
678
|
+
<td><code>@startColor, @endColor, @deg</code></td>
|
679
|
+
<td>Create a cross-browser directional background gradient</td>
|
680
|
+
</tr>
|
681
|
+
<tr>
|
682
|
+
<td><code>.#gradient > .vertical-three-colors()</code></td>
|
683
|
+
<td><code>@startColor, @midColor, @colorStop, @endColor</code></td>
|
684
|
+
<td>Create a cross-browser three-color background gradient</td>
|
685
|
+
</tr>
|
686
|
+
<tr>
|
687
|
+
<td><code>.#gradient > .radial()</code></td>
|
688
|
+
<td><code>@innerColor, @outerColor</code></td>
|
689
|
+
<td>Create a cross-browser radial background gradient</td>
|
690
|
+
</tr>
|
691
|
+
<tr>
|
692
|
+
<td><code>.#gradient > .striped()</code></td>
|
693
|
+
<td><code>@color, @angle</code></td>
|
694
|
+
<td>Create a cross-browser striped background gradient</td>
|
695
|
+
</tr>
|
696
|
+
<tr>
|
697
|
+
<td><code>.#gradientBar()</code></td>
|
698
|
+
<td><code>@primaryColor, @secondaryColor</code></td>
|
699
|
+
<td>Used for buttons to assign a gradient and slightly darker border</td>
|
700
|
+
</tr>
|
701
|
+
</tbody>
|
702
|
+
</table>
|
703
|
+
</section>
|
704
|
+
|
705
|
+
|
706
|
+
|
707
|
+
<!-- COMPILING LESS AND BOOTSTRAP
|
708
|
+
================================================== -->
|
709
|
+
<section id="compiling">
|
710
|
+
<div class="page-header">
|
711
|
+
<h1>Compiling Bootstrap with LESS</h1>
|
712
|
+
</div>
|
713
|
+
<div class="alert alert-info">
|
714
|
+
<strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
|
715
|
+
</div>
|
716
|
+
<h2>Tools for compiling</h2>
|
717
|
+
<div class="row">
|
718
|
+
<div class="span4">
|
719
|
+
<h3>Node with makefile</h3>
|
720
|
+
<p>Install the LESS command line compiler with npm by running the following command:</p>
|
721
|
+
<pre>$ npm install less</pre>
|
722
|
+
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
|
723
|
+
<p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
|
724
|
+
</div><!-- /span4 -->
|
725
|
+
<div class="span4">
|
726
|
+
<h3>Command line</h3>
|
727
|
+
<p>Install the LESS command line tool via Node and run the following command:</p>
|
728
|
+
<pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
|
729
|
+
<p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
|
730
|
+
</div><!-- /span4 -->
|
731
|
+
<div class="span4">
|
732
|
+
<h3>Javascript</h3>
|
733
|
+
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.</p>
|
734
|
+
<pre class="prettyprint">
|
735
|
+
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
|
736
|
+
<script src="/path/to/less.js"></script>
|
737
|
+
</pre>
|
738
|
+
<p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
|
739
|
+
</div><!-- /span4 -->
|
740
|
+
</div><!-- /row -->
|
741
|
+
<div class="row">
|
742
|
+
<div class="span4">
|
743
|
+
<h3>Unofficial Mac app</h3>
|
744
|
+
<p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
|
745
|
+
<p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
|
746
|
+
</div><!-- /span4 -->
|
747
|
+
<div class="span4">
|
748
|
+
<h3>More Mac apps</h3>
|
749
|
+
<h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
|
750
|
+
<p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
|
751
|
+
<h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
|
752
|
+
<p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
|
753
|
+
<h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
|
754
|
+
<p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
|
755
|
+
</div><!-- /span4 -->
|
756
|
+
</div><!-- /row -->
|
757
|
+
</section>
|
758
|
+
|
759
|
+
|
760
|
+
<!-- Footer
|
761
|
+
================================================== -->
|
762
|
+
<footer class="footer">
|
763
|
+
<p class="pull-right"><a href="#">Back to top</a></p>
|
764
|
+
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
|
765
|
+
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
766
|
+
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
767
|
+
</footer>
|
768
|
+
|
769
|
+
</div><!-- /container -->
|
770
|
+
|
771
|
+
|
772
|
+
|
773
|
+
<!-- Le javascript
|
774
|
+
================================================== -->
|
775
|
+
<!-- Placed at the end of the document so the pages load faster -->
|
776
|
+
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
777
|
+
<script src="assets/js/jquery.js"></script>
|
778
|
+
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
779
|
+
<script src="assets/js/bootstrap-transition.js"></script>
|
780
|
+
<script src="assets/js/bootstrap-alert.js"></script>
|
781
|
+
<script src="assets/js/bootstrap-modal.js"></script>
|
782
|
+
<script src="assets/js/bootstrap-dropdown.js"></script>
|
783
|
+
<script src="assets/js/bootstrap-scrollspy.js"></script>
|
784
|
+
<script src="assets/js/bootstrap-tab.js"></script>
|
785
|
+
<script src="assets/js/bootstrap-tooltip.js"></script>
|
786
|
+
<script src="assets/js/bootstrap-popover.js"></script>
|
787
|
+
<script src="assets/js/bootstrap-button.js"></script>
|
788
|
+
<script src="assets/js/bootstrap-collapse.js"></script>
|
789
|
+
<script src="assets/js/bootstrap-carousel.js"></script>
|
790
|
+
<script src="assets/js/bootstrap-typeahead.js"></script>
|
791
|
+
<script src="assets/js/application.js"></script>
|
792
|
+
|
793
|
+
|
794
|
+
</body>
|
795
|
+
</html>
|