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,1403 @@
|
|
1
|
+
<!-- Masthead
|
2
|
+
================================================== -->
|
3
|
+
<header class="jumbotron subhead" id="overview">
|
4
|
+
<h1>{{_i}}Components{{/i}}</h1>
|
5
|
+
<p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
|
6
|
+
<div class="subnav">
|
7
|
+
<ul class="nav nav-pills">
|
8
|
+
<li class="dropdown">
|
9
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Buttons{{/i}} <b class="caret"></b></a>
|
10
|
+
<ul class="dropdown-menu">
|
11
|
+
<li><a href="#buttonGroups">Button groups</a></li>
|
12
|
+
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
|
13
|
+
</ul>
|
14
|
+
</li>
|
15
|
+
<li class="dropdown">
|
16
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Navigation{{/i}} <b class="caret"></b></a>
|
17
|
+
<ul class="dropdown-menu">
|
18
|
+
<li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li>
|
19
|
+
<li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li>
|
20
|
+
<li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li>
|
21
|
+
<li><a href="#pagination">{{_i}}Pagination{{/i}}</a></li>
|
22
|
+
</ul>
|
23
|
+
</li>
|
24
|
+
<li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
|
25
|
+
<li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
|
26
|
+
<li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
|
27
|
+
<li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
|
28
|
+
<li><a href="#misc">{{_i}}Miscellaneous{{/i}}</a></li>
|
29
|
+
</ul>
|
30
|
+
</div>
|
31
|
+
</header>
|
32
|
+
|
33
|
+
|
34
|
+
|
35
|
+
<!-- Button Groups
|
36
|
+
================================================== -->
|
37
|
+
<section id="buttonGroups">
|
38
|
+
<div class="page-header">
|
39
|
+
<h1>{{_i}}Button groups{{/i}} <small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
|
40
|
+
</div>
|
41
|
+
<div class="row">
|
42
|
+
<div class="span4">
|
43
|
+
<h3>{{_i}}Button groups{{/i}}</h3>
|
44
|
+
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.{{/i}}</p>
|
45
|
+
<p>{{_i}}You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.{{/i}}</p>
|
46
|
+
<div class="btn-toolbar" style="margin-top: 18px;">
|
47
|
+
<div class="btn-group">
|
48
|
+
<a class="btn" href="#">{{_i}}Left{{/i}}</a>
|
49
|
+
<a class="btn" href="#">{{_i}}Middle{{/i}}</a>
|
50
|
+
<a class="btn" href="#">{{_i}}Right{{/i}}</a>
|
51
|
+
</div>
|
52
|
+
</div>
|
53
|
+
<div class="btn-toolbar">
|
54
|
+
<div class="btn-group">
|
55
|
+
<a class="btn" href="#">1</a>
|
56
|
+
<a class="btn" href="#">2</a>
|
57
|
+
<a class="btn" href="#">3</a>
|
58
|
+
<a class="btn" href="#">4</a>
|
59
|
+
</div>
|
60
|
+
<div class="btn-group">
|
61
|
+
<a class="btn" href="#">5</a>
|
62
|
+
<a class="btn" href="#">6</a>
|
63
|
+
<a class="btn" href="#">7</a>
|
64
|
+
</div>
|
65
|
+
<div class="btn-group">
|
66
|
+
<a class="btn" href="#">8</a>
|
67
|
+
</div>
|
68
|
+
</div>
|
69
|
+
</div>
|
70
|
+
<div class="span4">
|
71
|
+
<h3>{{_i}}Example markup{{/i}}</h3>
|
72
|
+
<p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
|
73
|
+
<pre class="prettyprint linenums">
|
74
|
+
<div class="btn-group">
|
75
|
+
<a class="btn" href="#">1</a>
|
76
|
+
<a class="btn" href="#">2</a>
|
77
|
+
<a class="btn" href="#">3</a>
|
78
|
+
</div>
|
79
|
+
</pre>
|
80
|
+
<p>{{_i}}And with a toolbar for multiple groups:{{/i}}</p>
|
81
|
+
<pre class="prettyprint linenums">
|
82
|
+
<div class="btn-toolbar">
|
83
|
+
<div class="btn-group">
|
84
|
+
...
|
85
|
+
</div>
|
86
|
+
</div>
|
87
|
+
</pre>
|
88
|
+
</div>
|
89
|
+
<div class="span4">
|
90
|
+
<h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
|
91
|
+
<p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
|
92
|
+
<p><a class="btn js-btn" href="./javascript.html#buttons">{{_i}}Get the javascript »{{/i}}</a></p>
|
93
|
+
<hr>
|
94
|
+
<h4 class="muted">{{_i}}Heads up{{/i}}</h4>
|
95
|
+
<p class="muted">{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}</p>
|
96
|
+
</div>
|
97
|
+
</div>
|
98
|
+
</section>
|
99
|
+
|
100
|
+
|
101
|
+
|
102
|
+
<!-- Split button dropdowns
|
103
|
+
================================================== -->
|
104
|
+
<section id="buttonDropdowns">
|
105
|
+
<div class="page-header">
|
106
|
+
<h1>{{_i}}Buttons dropdowns{{/i}} <small>{{_i}}Contextual dropdown menus built on button groups{{/i}}</small></h1>
|
107
|
+
</div>
|
108
|
+
|
109
|
+
<div class="row">
|
110
|
+
<div class="span4">
|
111
|
+
<h3>{{_i}}Button dropdowns{{/i}}</h3>
|
112
|
+
<p>{{_i}}Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.{{/i}}</p>
|
113
|
+
<div class="btn-toolbar" style="margin-top: 18px;">
|
114
|
+
<div class="btn-group">
|
115
|
+
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Action{{/i}} <span class="caret"></span></a>
|
116
|
+
<ul class="dropdown-menu">
|
117
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
118
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
119
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
120
|
+
<li class="divider"></li>
|
121
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
122
|
+
</ul>
|
123
|
+
</div><!-- /btn-group -->
|
124
|
+
<div class="btn-group">
|
125
|
+
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Action{{/i}} <span class="caret"></span></a>
|
126
|
+
<ul class="dropdown-menu">
|
127
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
128
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
129
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
130
|
+
<li class="divider"></li>
|
131
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
132
|
+
</ul>
|
133
|
+
</div><!-- /btn-group -->
|
134
|
+
<div class="btn-group">
|
135
|
+
<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Danger{{/i}} <span class="caret"></span></a>
|
136
|
+
<ul class="dropdown-menu">
|
137
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
138
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
139
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
140
|
+
<li class="divider"></li>
|
141
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
142
|
+
</ul>
|
143
|
+
</div><!-- /btn-group -->
|
144
|
+
</div>
|
145
|
+
<div class="btn-toolbar">
|
146
|
+
<div class="btn-group">
|
147
|
+
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Success{{/i}} <span class="caret"></span></a>
|
148
|
+
<ul class="dropdown-menu">
|
149
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
150
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
151
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
152
|
+
<li class="divider"></li>
|
153
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
154
|
+
</ul>
|
155
|
+
</div><!-- /btn-group -->
|
156
|
+
<div class="btn-group">
|
157
|
+
<a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Info{{/i}} <span class="caret"></span></a>
|
158
|
+
<ul class="dropdown-menu">
|
159
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
160
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
161
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
162
|
+
<li class="divider"></li>
|
163
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
164
|
+
</ul>
|
165
|
+
</div><!-- /btn-group -->
|
166
|
+
</div>
|
167
|
+
</div>
|
168
|
+
<div class="span8">
|
169
|
+
<h3>{{_i}}Example markup{{/i}}</h3>
|
170
|
+
<p>{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}</p>
|
171
|
+
<pre class="prettyprint linenums">
|
172
|
+
<div class="btn-group">
|
173
|
+
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
|
174
|
+
{{_i}}Action{{/i}}
|
175
|
+
<span class="caret"></span>
|
176
|
+
</a>
|
177
|
+
<ul class="dropdown-menu">
|
178
|
+
<!-- {{_i}}dropdown menu links{{/i}} -->
|
179
|
+
</ul>
|
180
|
+
</div>
|
181
|
+
</pre>
|
182
|
+
</div>
|
183
|
+
</div>
|
184
|
+
|
185
|
+
<div class="row">
|
186
|
+
<div class="span4">
|
187
|
+
<h3>{{_i}}Split button dropdowns{{/i}}</h3>
|
188
|
+
<p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
|
189
|
+
<div class="btn-toolbar" style="margin-top: 18px;">
|
190
|
+
<div class="btn-group">
|
191
|
+
<a class="btn" href="#">{{_i}}Action{{/i}}</a>
|
192
|
+
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
193
|
+
<ul class="dropdown-menu">
|
194
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
195
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
196
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
197
|
+
<li class="divider"></li>
|
198
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
199
|
+
</ul>
|
200
|
+
</div><!-- /btn-group -->
|
201
|
+
<div class="btn-group">
|
202
|
+
<a class="btn btn-primary" href="#">{{_i}}Action{{/i}}</a>
|
203
|
+
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
204
|
+
<ul class="dropdown-menu">
|
205
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
206
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
207
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
208
|
+
<li class="divider"></li>
|
209
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
210
|
+
</ul>
|
211
|
+
</div><!-- /btn-group -->
|
212
|
+
<div class="btn-group">
|
213
|
+
<a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a>
|
214
|
+
<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
215
|
+
<ul class="dropdown-menu">
|
216
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
217
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
218
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
219
|
+
<li class="divider"></li>
|
220
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
221
|
+
</ul>
|
222
|
+
</div><!-- /btn-group -->
|
223
|
+
</div>
|
224
|
+
<div class="btn-toolbar">
|
225
|
+
<div class="btn-group">
|
226
|
+
<a class="btn btn-success" href="#">{{_i}}Success{{/i}}</a>
|
227
|
+
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
228
|
+
<ul class="dropdown-menu">
|
229
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
230
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
231
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
232
|
+
<li class="divider"></li>
|
233
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
234
|
+
</ul>
|
235
|
+
</div><!-- /btn-group -->
|
236
|
+
<div class="btn-group">
|
237
|
+
<a class="btn btn-info" href="#">{{_i}}Info{{/i}}</a>
|
238
|
+
<a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
239
|
+
<ul class="dropdown-menu">
|
240
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
241
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
242
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
243
|
+
<li class="divider"></li>
|
244
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
245
|
+
</ul>
|
246
|
+
</div><!-- /btn-group -->
|
247
|
+
</div>
|
248
|
+
</div>
|
249
|
+
<div class="span8">
|
250
|
+
<h3>{{_i}}Example markup{{/i}}</h3>
|
251
|
+
<p>{{_i}}We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.{{/i}}</p>
|
252
|
+
<pre class="prettyprint linenums">
|
253
|
+
<div class="btn-group">
|
254
|
+
<a class="btn" href="#">{{_i}}Action{{/i}}</a>
|
255
|
+
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
|
256
|
+
<span class="caret"></span>
|
257
|
+
</a>
|
258
|
+
<ul class="dropdown-menu">
|
259
|
+
<!-- {{_i}}dropdown menu links{{/i}} -->
|
260
|
+
</ul>
|
261
|
+
</div>
|
262
|
+
</pre>
|
263
|
+
</div>
|
264
|
+
</div>
|
265
|
+
</section>
|
266
|
+
|
267
|
+
|
268
|
+
|
269
|
+
<!-- Nav, Tabs, & Pills
|
270
|
+
================================================== -->
|
271
|
+
<section id="navs">
|
272
|
+
<div class="page-header">
|
273
|
+
<h1>{{_i}}Nav, tabs, and pills{{/i}} <small>{{_i}}Highly customizable list-style navigation{{/i}}</small></h1>
|
274
|
+
</div>
|
275
|
+
|
276
|
+
<h2>{{_i}}Lightweight defaults{{/i}} <small>{{_i}}Same markup, different classes{{/i}}</small></h2>
|
277
|
+
<div class="row">
|
278
|
+
<div class="span4">
|
279
|
+
<h3>{{_i}}Powerful base class{{/i}}</h3>
|
280
|
+
<p>{{_i}}All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.{{/i}}</p>
|
281
|
+
<h3>{{_i}}Why tabs and pills{{/i}}</h3>
|
282
|
+
<p>{{_i}}Tabs and pills in Bootstrap are built on a <code><ul></code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.{{/i}}</p>
|
283
|
+
<p>{{_i}}Both options are great for sub-sections of content or navigating between pages of related content.{{/i}}</p>
|
284
|
+
</div>
|
285
|
+
<div class="span4">
|
286
|
+
<h3>{{_i}}Basic tabs{{/i}}</h3>
|
287
|
+
<p>{{_i}}Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:{{/i}}</p>
|
288
|
+
<ul class="nav nav-tabs">
|
289
|
+
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
290
|
+
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
|
291
|
+
<li><a href="#">{{_i}}Messages{{/i}}</a></li>
|
292
|
+
</ul>
|
293
|
+
<pre class="prettyprint linenums">
|
294
|
+
<ul class="nav nav-tabs">
|
295
|
+
<li class="active">
|
296
|
+
<a href="#">{{_i}}Home{{/i}}</a>
|
297
|
+
</li>
|
298
|
+
<li><a href="#">...</a></li>
|
299
|
+
<li><a href="#">...</a></li>
|
300
|
+
</ul>
|
301
|
+
</pre>
|
302
|
+
</div>
|
303
|
+
<div class="span4">
|
304
|
+
<h3>{{_i}}Basic pills{{/i}}</h3>
|
305
|
+
<p>{{_i}}Take that same HTML, but use <code>.nav-pills</code> instead:{{/i}}</p>
|
306
|
+
<ul class="nav nav-pills">
|
307
|
+
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
308
|
+
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
|
309
|
+
<li><a href="#">{{_i}}Messages{{/i}}</a></li>
|
310
|
+
</ul>
|
311
|
+
<pre class="prettyprint linenums">
|
312
|
+
<ul class="nav nav-pills">
|
313
|
+
<li class="active">
|
314
|
+
<a href="#">{{_i}}Home{{/i}}</a>
|
315
|
+
</li>
|
316
|
+
<li><a href="#">...</a></li>
|
317
|
+
<li><a href="#">...</a></li>
|
318
|
+
</ul>
|
319
|
+
</pre>
|
320
|
+
</div>
|
321
|
+
</div>
|
322
|
+
|
323
|
+
<h2>{{_i}}Stackable{{/i}} <small>{{_i}}Make tabs or pills vertical{{/i}}</small></h2>
|
324
|
+
<div class="row">
|
325
|
+
<div class="span4">
|
326
|
+
<h3>{{_i}}How to stack 'em{{/i}}</h3>
|
327
|
+
<p>{{_i}}As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.{{/i}}</p>
|
328
|
+
</div>
|
329
|
+
<div class="span4">
|
330
|
+
<h3>{{_i}}Stacked tabs{{/i}}</h3>
|
331
|
+
<ul class="nav nav-tabs nav-stacked">
|
332
|
+
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
333
|
+
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
|
334
|
+
<li><a href="#">{{_i}}Messages{{/i}}</a></li>
|
335
|
+
</ul>
|
336
|
+
<pre class="prettyprint linenums">
|
337
|
+
<ul class="nav nav-tabs nav-stacked">
|
338
|
+
...
|
339
|
+
</ul>
|
340
|
+
</pre>
|
341
|
+
</div>
|
342
|
+
<div class="span4">
|
343
|
+
<h3>{{_i}}Stacked pills{{/i}}</h3>
|
344
|
+
<ul class="nav nav-pills nav-stacked">
|
345
|
+
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
346
|
+
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
|
347
|
+
<li><a href="#">{{_i}}Messages{{/i}}</a></li>
|
348
|
+
</ul>
|
349
|
+
<pre class="prettyprint linenums">
|
350
|
+
<ul class="nav nav-pills nav-stacked">
|
351
|
+
...
|
352
|
+
</ul>
|
353
|
+
</pre>
|
354
|
+
</div>
|
355
|
+
</div>
|
356
|
+
|
357
|
+
<h2>{{_i}}Dropdowns{{/i}} <small>{{_i}}For advanced nav components{{/i}}</small></h2>
|
358
|
+
<div class="row">
|
359
|
+
<div class="span4">
|
360
|
+
<h3>{{_i}}Rich menus made easy{{/i}}</h3>
|
361
|
+
<p>{{_i}}Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.{{/i}}</p>
|
362
|
+
<p>{{_i}}Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.{{/i}}</p>
|
363
|
+
</div>
|
364
|
+
<div class="span4">
|
365
|
+
<h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
|
366
|
+
<ul class="nav nav-tabs">
|
367
|
+
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
368
|
+
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
|
369
|
+
<li class="dropdown">
|
370
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
371
|
+
<ul class="dropdown-menu">
|
372
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
373
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
374
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
375
|
+
<li class="divider"></li>
|
376
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
377
|
+
</ul>
|
378
|
+
</li>
|
379
|
+
</ul>
|
380
|
+
<pre class="prettyprint linenums">
|
381
|
+
<ul class="nav nav-tabs">
|
382
|
+
<li class="dropdown">
|
383
|
+
<a class="dropdown-toggle"
|
384
|
+
data-toggle="dropdown"
|
385
|
+
href="#">
|
386
|
+
{{_i}}Dropdown{{/i}}
|
387
|
+
<b class="caret"></b>
|
388
|
+
</a>
|
389
|
+
<ul class="dropdown-menu">
|
390
|
+
<!-- {{_i}}links{{/i}} -->
|
391
|
+
</ul>
|
392
|
+
</li>
|
393
|
+
</ul>
|
394
|
+
</pre>
|
395
|
+
</div>
|
396
|
+
<div class="span4">
|
397
|
+
<h3>{{_i}}Pills with dropdowns{{/i}}</h3>
|
398
|
+
<ul class="nav nav-pills">
|
399
|
+
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
400
|
+
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
|
401
|
+
<li class="dropdown">
|
402
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
403
|
+
<ul class="dropdown-menu">
|
404
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
405
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
406
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
407
|
+
<li class="divider"></li>
|
408
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
409
|
+
</ul>
|
410
|
+
</li>
|
411
|
+
</ul>
|
412
|
+
<pre class="prettyprint linenums">
|
413
|
+
<ul class="nav nav-pills">
|
414
|
+
<li class="dropdown">
|
415
|
+
<a class="dropdown-toggle"
|
416
|
+
data-toggle="dropdown"
|
417
|
+
href="#">
|
418
|
+
{{_i}}Dropdown{{/i}}
|
419
|
+
<b class="caret"></b>
|
420
|
+
</a>
|
421
|
+
<ul class="dropdown-menu">
|
422
|
+
<!-- {{_i}}links{{/i}} -->
|
423
|
+
</ul>
|
424
|
+
</li>
|
425
|
+
</ul>
|
426
|
+
</pre>
|
427
|
+
</div>
|
428
|
+
</div>
|
429
|
+
|
430
|
+
<h2>{{_i}}Nav lists{{/i}} <small>{{_i}}Build simple stacked navs, great for sidebars{{/i}}</small></h2>
|
431
|
+
<div class="row">
|
432
|
+
<div class="span4">
|
433
|
+
<h3>{{_i}}Application-style navigation{{/i}}</h3>
|
434
|
+
<p>{{_i}}Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.{{/i}}</p>
|
435
|
+
<p>{{_i}}Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.{{/i}}</p>
|
436
|
+
<h4>{{_i}}With icons{{/i}}</h4>
|
437
|
+
<p>{{_i}}Nav lists are also easy to equip with icons. Add the proper <code><i></code> tag with class and you're set.{{/i}}</p>
|
438
|
+
</div>
|
439
|
+
<div class="span4">
|
440
|
+
<h3>{{_i}}Example nav list{{/i}}</h3>
|
441
|
+
<p>{{_i}}Take a list of links and add <code>class="nav nav-list"</code>:{{/i}}</p>
|
442
|
+
<div class="well" style="padding: 8px 0;">
|
443
|
+
<ul class="nav nav-list">
|
444
|
+
<li class="nav-header">{{_i}}List header{{/i}}</li>
|
445
|
+
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
446
|
+
<li><a href="#">{{_i}}Library{{/i}}</a></li>
|
447
|
+
<li><a href="#">{{_i}}Applications{{/i}}</a></li>
|
448
|
+
<li class="nav-header">{{_i}}Another list header{{/i}}</li>
|
449
|
+
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
|
450
|
+
<li><a href="#">{{_i}}Settings{{/i}}</a></li>
|
451
|
+
<li><a href="#">{{_i}}Help{{/i}}</a></li>
|
452
|
+
</ul>
|
453
|
+
</div> <!-- /well -->
|
454
|
+
<pre class="prettyprint linenums">
|
455
|
+
<ul class="nav nav-list">
|
456
|
+
<li class="nav-header">
|
457
|
+
{{_i}}List header{{/i}}
|
458
|
+
</li>
|
459
|
+
<li class="active">
|
460
|
+
<a href="#">{{_i}}Home{{/i}}</a>
|
461
|
+
</li>
|
462
|
+
<li>
|
463
|
+
<a href="#">{{_i}}Library{{/i}}</a>
|
464
|
+
</li>
|
465
|
+
...
|
466
|
+
</ul>
|
467
|
+
</pre>
|
468
|
+
</div>
|
469
|
+
<div class="span4">
|
470
|
+
<h3>{{_i}}Example with icons{{/i}}</h3>
|
471
|
+
<p>{{_i}}Same example, but with <code><i></code> tags for icons.{{/i}}</p>
|
472
|
+
<div class="well" style="padding: 8px 0;">
|
473
|
+
<ul class="nav nav-list">
|
474
|
+
<li class="nav-header">{{_i}}List header{{/i}}</li>
|
475
|
+
<li class="active"><a href="#"><i class="icon-white icon-home"></i> {{_i}}Home{{/i}}</a></li>
|
476
|
+
<li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li>
|
477
|
+
<li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li>
|
478
|
+
<li class="nav-header">{{_i}}Another list header{{/i}}</li>
|
479
|
+
<li><a href="#"><i class="icon-user"></i> {{_i}}Profile{{/i}}</a></li>
|
480
|
+
<li><a href="#"><i class="icon-cog"></i> {{_i}}Settings{{/i}}</a></li>
|
481
|
+
<li><a href="#"><i class="icon-flag"></i> {{_i}}Help{{/i}}</a></li>
|
482
|
+
</ul>
|
483
|
+
</div> <!-- /well -->
|
484
|
+
<pre class="prettyprint linenums">
|
485
|
+
<ul class="nav nav-list">
|
486
|
+
...
|
487
|
+
<li>
|
488
|
+
<a href="#">
|
489
|
+
<i class="icon-book"></i>
|
490
|
+
{{_i}}Library{{/i}}
|
491
|
+
</a>
|
492
|
+
</li>
|
493
|
+
...
|
494
|
+
</ul>
|
495
|
+
</pre>
|
496
|
+
</div>
|
497
|
+
</div>
|
498
|
+
|
499
|
+
|
500
|
+
<h2>{{_i}}Tabbable nav{{/i}} <small>{{_i}}Bring tabs to life via javascript{{/i}}</small></h2>
|
501
|
+
<div class="row">
|
502
|
+
<div class="span4">
|
503
|
+
<h3>{{_i}}What's included{{/i}}</h3>
|
504
|
+
<p>{{_i}}Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.{{/i}}</p>
|
505
|
+
<p>{{_i}}Changing between them is easy and only requires changing very little markup.{{/i}}</p>
|
506
|
+
</div>
|
507
|
+
<div class="span4">
|
508
|
+
<h3>{{_i}}Tabbable example{{/i}}</h3>
|
509
|
+
<p>{{_i}}To make tabs tabbable, wrap the <code>.nav-tabs</code> in another div with class <code>.tabbable</code>.{{/i}}</p>
|
510
|
+
<div class="tabbable" style="margin-bottom: 9px;">
|
511
|
+
<ul class="nav nav-tabs">
|
512
|
+
<li class="active"><a href="#1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
|
513
|
+
<li><a href="#2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
|
514
|
+
<li><a href="#3" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
|
515
|
+
</ul>
|
516
|
+
<div class="tab-content">
|
517
|
+
<div class="tab-pane active" id="1">
|
518
|
+
<p>{{_i}}I'm in Section 1.{{/i}}</p>
|
519
|
+
</div>
|
520
|
+
<div class="tab-pane" id="2">
|
521
|
+
<p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
|
522
|
+
</div>
|
523
|
+
<div class="tab-pane" id="3">
|
524
|
+
<p>{{_i}}What up girl, this is Section 3.{{/i}}</p>
|
525
|
+
</div>
|
526
|
+
</div>
|
527
|
+
</div> <!-- /tabbable -->
|
528
|
+
</div>
|
529
|
+
<div class="span4">
|
530
|
+
<h3>{{_i}}Custom jQuery plugin{{/i}}</h3>
|
531
|
+
<p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.{{/i}}</p>
|
532
|
+
<p><a class="btn" href="./javascript.html#tabs">{{_i}}Get the javascript →{{/i}}</a></p>
|
533
|
+
</div>
|
534
|
+
</div>
|
535
|
+
|
536
|
+
<h3>{{_i}}Straightforward markup{{/i}}</h3>
|
537
|
+
<p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p>
|
538
|
+
<pre class="prettyprint linenums">
|
539
|
+
<div class="tabbable">
|
540
|
+
<ul class="nav nav-tabs">
|
541
|
+
<li class="active"><a href="#1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
|
542
|
+
<li><a href="#2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
|
543
|
+
</ul>
|
544
|
+
<div class="tab-content">
|
545
|
+
<div class="tab-pane active" id="1">
|
546
|
+
<p>{{_i}}I'm in Section 1.{{/i}}</p>
|
547
|
+
</div>
|
548
|
+
<div class="tab-pane" id="2">
|
549
|
+
<p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
|
550
|
+
</div>
|
551
|
+
</div>
|
552
|
+
</div>
|
553
|
+
</pre>
|
554
|
+
|
555
|
+
<h3>{{_i}}Tabbable in any direction{{/i}}</h3>
|
556
|
+
<div class="row">
|
557
|
+
<div class="span4">
|
558
|
+
<h4>{{_i}}Tabs on the bottom{{/i}}</h4>
|
559
|
+
<p>{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}</p>
|
560
|
+
<div class="tabbable tabs-below">
|
561
|
+
<div class="tab-content">
|
562
|
+
<div class="tab-pane active" id="A">
|
563
|
+
<p>{{_i}}I'm in Section A.{{/i}}</p>
|
564
|
+
</div>
|
565
|
+
<div class="tab-pane" id="B">
|
566
|
+
<p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
|
567
|
+
</div>
|
568
|
+
<div class="tab-pane" id="C">
|
569
|
+
<p>{{_i}}What up girl, this is Section C.{{/i}}</p>
|
570
|
+
</div>
|
571
|
+
</div>
|
572
|
+
<ul class="nav nav-tabs">
|
573
|
+
<li class="active"><a href="#A" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
|
574
|
+
<li><a href="#B" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
|
575
|
+
<li><a href="#C" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
|
576
|
+
</ul>
|
577
|
+
</div> <!-- /tabbable -->
|
578
|
+
<pre class="prettyprint linenums" style="margin-top: 11px;">
|
579
|
+
<div class="tabbable tabs-below">
|
580
|
+
<div class="tab-content">
|
581
|
+
...
|
582
|
+
</div>
|
583
|
+
<ul class="nav nav-tabs">
|
584
|
+
...
|
585
|
+
</ul>
|
586
|
+
</div>
|
587
|
+
</pre>
|
588
|
+
</div>
|
589
|
+
<div class="span4">
|
590
|
+
<h4>{{_i}}Tabs on the left{{/i}}</h4>
|
591
|
+
<p>{{_i}}Swap the class to put tabs on the left.{{/i}}</p>
|
592
|
+
<div class="tabbable tabs-left">
|
593
|
+
<ul class="nav nav-tabs">
|
594
|
+
<li class="active"><a href="#lA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
|
595
|
+
<li><a href="#lB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
|
596
|
+
<li><a href="#lC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
|
597
|
+
</ul>
|
598
|
+
<div class="tab-content">
|
599
|
+
<div class="tab-pane active" id="lA">
|
600
|
+
<p>{{_i}}I'm in Section A.{{/i}}</p>
|
601
|
+
</div>
|
602
|
+
<div class="tab-pane" id="lB">
|
603
|
+
<p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
|
604
|
+
</div>
|
605
|
+
<div class="tab-pane" id="lC">
|
606
|
+
<p>{{_i}}What up girl, this is Section C.{{/i}}</p>
|
607
|
+
</div>
|
608
|
+
</div>
|
609
|
+
</div> <!-- /tabbable -->
|
610
|
+
<pre class="prettyprint linenums">
|
611
|
+
<div class="tabbable tabs-left">
|
612
|
+
<ul class="nav nav-tabs">
|
613
|
+
...
|
614
|
+
</ul>
|
615
|
+
<div class="tab-content">
|
616
|
+
...
|
617
|
+
</div>
|
618
|
+
</div>
|
619
|
+
</pre>
|
620
|
+
</div>
|
621
|
+
<div class="span4">
|
622
|
+
<h4>{{_i}}Tabs on the right{{/i}}</h4>
|
623
|
+
<p>{{_i}}Swap the class to put tabs on the right.{{/i}}</p>
|
624
|
+
<div class="tabbable tabs-right">
|
625
|
+
<ul class="nav nav-tabs">
|
626
|
+
<li class="active"><a href="#rA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
|
627
|
+
<li><a href="#rB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
|
628
|
+
<li><a href="#rC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
|
629
|
+
</ul>
|
630
|
+
<div class="tab-content">
|
631
|
+
<div class="tab-pane active" id="rA">
|
632
|
+
<p>{{_i}}I'm in Section A.{{/i}}</p>
|
633
|
+
</div>
|
634
|
+
<div class="tab-pane" id="rB">
|
635
|
+
<p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
|
636
|
+
</div>
|
637
|
+
<div class="tab-pane" id="rC">
|
638
|
+
<p>{{_i}}What up girl, this is Section C.{{/i}}</p>
|
639
|
+
</div>
|
640
|
+
</div>
|
641
|
+
</div> <!-- /tabbable -->
|
642
|
+
<pre class="prettyprint linenums">
|
643
|
+
<div class="tabbable tabs-right">
|
644
|
+
<ul class="nav nav-tabs">
|
645
|
+
...
|
646
|
+
</ul>
|
647
|
+
<div class="tab-content">
|
648
|
+
...
|
649
|
+
</div>
|
650
|
+
</div>
|
651
|
+
</pre>
|
652
|
+
</div>
|
653
|
+
</div>
|
654
|
+
|
655
|
+
</section>
|
656
|
+
|
657
|
+
|
658
|
+
|
659
|
+
<!-- Navbar
|
660
|
+
================================================== -->
|
661
|
+
<section id="navbar">
|
662
|
+
<div class="page-header">
|
663
|
+
<h1>{{_i}}Navbar{{/i}}</h1>
|
664
|
+
</div>
|
665
|
+
<h2>{{_i}}Static navbar example{{/i}}</h2>
|
666
|
+
<p>{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}</p>
|
667
|
+
<div class="navbar">
|
668
|
+
<div class="navbar-inner">
|
669
|
+
<div class="container" style="width: auto;">
|
670
|
+
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
671
|
+
<span class="icon-bar"></span>
|
672
|
+
<span class="icon-bar"></span>
|
673
|
+
<span class="icon-bar"></span>
|
674
|
+
</a>
|
675
|
+
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
|
676
|
+
<div class="nav-collapse">
|
677
|
+
<ul class="nav">
|
678
|
+
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
679
|
+
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
680
|
+
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
681
|
+
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
682
|
+
<li class="dropdown">
|
683
|
+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
684
|
+
<ul class="dropdown-menu">
|
685
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
686
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
687
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
688
|
+
<li class="divider"></li>
|
689
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
690
|
+
</ul>
|
691
|
+
</li>
|
692
|
+
</ul>
|
693
|
+
<form class="navbar-search pull-left" action="">
|
694
|
+
<input type="text" class="search-query span2" placeholder="Search">
|
695
|
+
</form>
|
696
|
+
<ul class="nav pull-right">
|
697
|
+
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
698
|
+
<li class="divider-vertical"></li>
|
699
|
+
<li class="dropdown">
|
700
|
+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
701
|
+
<ul class="dropdown-menu">
|
702
|
+
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
703
|
+
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
704
|
+
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
705
|
+
<li class="divider"></li>
|
706
|
+
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
707
|
+
</ul>
|
708
|
+
</li>
|
709
|
+
</ul>
|
710
|
+
</div><!-- /.nav-collapse -->
|
711
|
+
</div>
|
712
|
+
</div><!-- /navbar-inner -->
|
713
|
+
</div><!-- /navbar -->
|
714
|
+
|
715
|
+
<div class="row">
|
716
|
+
<div class="span8">
|
717
|
+
<h3>{{_i}}Navbar scaffolding{{/i}}</h3>
|
718
|
+
<p>{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}</p>
|
719
|
+
<pre class="prettyprint linenums">
|
720
|
+
<div class="navbar">
|
721
|
+
<div class="navbar-inner">
|
722
|
+
<div class="container">
|
723
|
+
...
|
724
|
+
</div>
|
725
|
+
</div>
|
726
|
+
</div>
|
727
|
+
</pre>
|
728
|
+
<p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.{{/i}}</p>
|
729
|
+
<pre class="prettyprint linenums">
|
730
|
+
<div class="navbar navbar-fixed-top">
|
731
|
+
...
|
732
|
+
</div>
|
733
|
+
</pre>
|
734
|
+
<h3>{{_i}}Brand name{{/i}}</h3>
|
735
|
+
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
|
736
|
+
<pre class="prettyprint linenums">
|
737
|
+
<a class="brand" href="#">
|
738
|
+
{{_i}}Project name{{/i}}
|
739
|
+
</a>
|
740
|
+
</pre>
|
741
|
+
<h3>{{_i}}Search form{{/i}}</h3>
|
742
|
+
<p>{{_i}}Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.{{/i}}</p>
|
743
|
+
<pre class="prettyprint linenums">
|
744
|
+
<form class="navbar-search pull-left">
|
745
|
+
<input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}">
|
746
|
+
</form>
|
747
|
+
</pre>
|
748
|
+
<h3>{{_i}}Optional responsive variation{{/i}}</h3>
|
749
|
+
<p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
|
750
|
+
<pre class="prettyprint linenums">
|
751
|
+
<div class="navbar">
|
752
|
+
<div class="navbar-inner">
|
753
|
+
<div class="container">
|
754
|
+
|
755
|
+
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
|
756
|
+
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
757
|
+
<span class="icon-bar"></span>
|
758
|
+
<span class="icon-bar"></span>
|
759
|
+
<span class="icon-bar"></span>
|
760
|
+
</a>
|
761
|
+
|
762
|
+
<!-- Be sure to leave the brand out there if you want it shown -->
|
763
|
+
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
|
764
|
+
|
765
|
+
<!-- Everything you want hidden at 940px or less, place within here -->
|
766
|
+
<div class="nav-collapse">
|
767
|
+
<!-- .nav, .navbar-search, .navbar-form, etc -->
|
768
|
+
</div>
|
769
|
+
|
770
|
+
</div>
|
771
|
+
</div>
|
772
|
+
</div>
|
773
|
+
</pre>
|
774
|
+
<div class="alert alert-info">
|
775
|
+
<strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a>.
|
776
|
+
</div>
|
777
|
+
|
778
|
+
</div><!-- /.span -->
|
779
|
+
<div class="span4">
|
780
|
+
<h3>{{_i}}Nav links{{/i}}</h3>
|
781
|
+
<p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
|
782
|
+
<pre class="prettyprint linenums">
|
783
|
+
<ul class="nav">
|
784
|
+
<li class="active">
|
785
|
+
<a href="#">{{_i}}Home{{/i}}</a>
|
786
|
+
</li>
|
787
|
+
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
788
|
+
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
789
|
+
</ul>
|
790
|
+
</pre>
|
791
|
+
<h3>{{_i}}Adding dropdowns{{/i}}</h3>
|
792
|
+
<p>{{_i}}Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdown">our javascript plugin</a>.{{/i}}</p>
|
793
|
+
<pre class="prettyprint linenums">
|
794
|
+
<ul class="nav">
|
795
|
+
<li class="dropdown">
|
796
|
+
<a href="#"
|
797
|
+
class="dropdown-toggle"
|
798
|
+
data-toggle="dropdown">
|
799
|
+
{{_i}}Account{{/i}}
|
800
|
+
<b class="caret"></b>
|
801
|
+
</a>
|
802
|
+
<ul class="dropdown-menu">
|
803
|
+
...
|
804
|
+
</ul>
|
805
|
+
</li>
|
806
|
+
</ul>
|
807
|
+
</pre>
|
808
|
+
<p><a class="btn" href="./javascript.html#dropdown">{{_i}}Get the javascript →{{/i}}</a></p>
|
809
|
+
</div><!-- /.span -->
|
810
|
+
</div><!-- /.row -->
|
811
|
+
|
812
|
+
</section>
|
813
|
+
|
814
|
+
|
815
|
+
|
816
|
+
<!-- Breadcrumbs
|
817
|
+
================================================== -->
|
818
|
+
<section id="breadcrumbs">
|
819
|
+
<div class="page-header">
|
820
|
+
<h1>{{_i}}Breadcrumbs{{/i}} <small></small></h1>
|
821
|
+
</div>
|
822
|
+
|
823
|
+
<div class="row">
|
824
|
+
<div class="span6">
|
825
|
+
<h3>{{_i}}Why use them{{/i}}</h3>
|
826
|
+
<p>{{_i}}Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.{{/i}}</p>
|
827
|
+
|
828
|
+
<h3>{{_i}}Examples{{/i}}</h3>
|
829
|
+
<p>{{_i}}A single example shown as it might be displayed across multiple pages.{{/i}}</p>
|
830
|
+
<ul class="breadcrumb">
|
831
|
+
<li class="active">{{_i}}Home{{/i}}</li>
|
832
|
+
</ul>
|
833
|
+
<ul class="breadcrumb">
|
834
|
+
<li><a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span></li>
|
835
|
+
<li class="active">{{_i}}Library{{/i}}</li>
|
836
|
+
</ul>
|
837
|
+
<ul class="breadcrumb">
|
838
|
+
<li><a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span></li>
|
839
|
+
<li><a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span></li>
|
840
|
+
<li class="active">{{_i}}Data{{/i}}</li>
|
841
|
+
</ul>
|
842
|
+
</div>
|
843
|
+
<div class="span6">
|
844
|
+
<h3>{{_i}}Markup{{/i}}</h3>
|
845
|
+
<p>{{_i}}HTML is your standard unordered list with links.{{/i}}</p>
|
846
|
+
<pre class="prettyprint linenums">
|
847
|
+
<ul class="breadcrumb">
|
848
|
+
<li>
|
849
|
+
<a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span>
|
850
|
+
</li>
|
851
|
+
<li>
|
852
|
+
<a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span>
|
853
|
+
</li>
|
854
|
+
<li class="active">
|
855
|
+
<a href="#">{{_i}}Data{{/i}}</a>
|
856
|
+
</li>
|
857
|
+
</ul>
|
858
|
+
</pre>
|
859
|
+
</div>
|
860
|
+
</div>
|
861
|
+
|
862
|
+
</section>
|
863
|
+
|
864
|
+
|
865
|
+
|
866
|
+
<!-- Pagination
|
867
|
+
================================================== -->
|
868
|
+
<section id="pagination">
|
869
|
+
<div class="page-header">
|
870
|
+
<h1>{{_i}}Pagination{{/i}} <small>{{_i}}Two options for paging through content{{/i}}</small></h1>
|
871
|
+
</div>
|
872
|
+
|
873
|
+
<h2>{{_i}}Multicon-page pagination{{/i}}</h2>
|
874
|
+
<div class="row">
|
875
|
+
<div class="span4">
|
876
|
+
<h3>{{_i}}When to use{{/i}}</h3>
|
877
|
+
<p>{{_i}}Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}</p>
|
878
|
+
<h3>{{_i}}Stateful page links{{/i}}</h3>
|
879
|
+
<p>{{_i}}Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.{{/i}}</p>
|
880
|
+
<h3>{{_i}}Flexible alignment{{/i}}</h3>
|
881
|
+
<p>{{_i}}Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.{{/i}}</p>
|
882
|
+
</div>
|
883
|
+
<div class="span4">
|
884
|
+
<h3>{{_i}}Examples{{/i}}</h3>
|
885
|
+
<p>{{_i}}The default pagination component is flexible and works in a number of variations.{{/i}}</p>
|
886
|
+
<div class="pagination">
|
887
|
+
<ul>
|
888
|
+
<li class="disabled"><a href="#">«</a></li>
|
889
|
+
<li class="active"><a href="#">1</a></li>
|
890
|
+
<li><a href="#">2</a></li>
|
891
|
+
<li><a href="#">3</a></li>
|
892
|
+
<li><a href="#">4</a></li>
|
893
|
+
<li><a href="#">»</a></li>
|
894
|
+
</ul>
|
895
|
+
</div>
|
896
|
+
<div class="pagination">
|
897
|
+
<ul>
|
898
|
+
<li><a href="#">«</a></li>
|
899
|
+
<li><a href="#">10</a></li>
|
900
|
+
<li class="active"><a href="#">11</a></li>
|
901
|
+
<li><a href="#">12</a></li>
|
902
|
+
<li><a href="#">»</a></li>
|
903
|
+
</ul>
|
904
|
+
</div>
|
905
|
+
<div class="pagination">
|
906
|
+
<ul>
|
907
|
+
<li><a href="#">←</a></li>
|
908
|
+
<li class="active"><a href="#">10</a></li>
|
909
|
+
<li class="disabled"><a href="#">...</a></li>
|
910
|
+
<li><a href="#">20</a></li>
|
911
|
+
<li><a href="#">→</a></li>
|
912
|
+
</ul>
|
913
|
+
</div>
|
914
|
+
<div class="pagination pagination-centered">
|
915
|
+
<ul>
|
916
|
+
<li class="active"><a href="#">1</a></li>
|
917
|
+
<li><a href="#">2</a></li>
|
918
|
+
<li><a href="#">3</a></li>
|
919
|
+
<li><a href="#">4</a></li>
|
920
|
+
<li><a href="#">5</a></li>
|
921
|
+
</ul>
|
922
|
+
</div>
|
923
|
+
</div>
|
924
|
+
<div class="span4">
|
925
|
+
<h3>{{_i}}Markup{{/i}}</h3>
|
926
|
+
<p>{{_i}}Wrapped in a <code><div></code>, pagination is just a <code><ul></code>.{{/i}}</p>
|
927
|
+
<pre class="prettyprint linenums">
|
928
|
+
<div class="pagination">
|
929
|
+
<ul>
|
930
|
+
<li><a href="#">Prev</a></li>
|
931
|
+
<li class="active">
|
932
|
+
<a href="#">1</a>
|
933
|
+
</li>
|
934
|
+
<li><a href="#">2</a></li>
|
935
|
+
<li><a href="#">3</a></li>
|
936
|
+
<li><a href="#">4</a></li>
|
937
|
+
<li><a href="#">Next</a></li>
|
938
|
+
</ul>
|
939
|
+
</div>
|
940
|
+
</pre>
|
941
|
+
</div>
|
942
|
+
</div><!-- /row -->
|
943
|
+
|
944
|
+
<h2>{{_i}}Pager{{/i}} <small>{{_i}}For quick previous and next links{{/i}}</small></h2>
|
945
|
+
<div class="row">
|
946
|
+
<div class="span4">
|
947
|
+
<h3>{{_i}}About pager{{/i}}</h3>
|
948
|
+
<p>{{_i}}The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
|
949
|
+
</div>
|
950
|
+
<div class="span4">
|
951
|
+
<h3>{{_i}}Default example{{/i}}</h3>
|
952
|
+
<p>{{_i}}By default, the pager centers links.{{/i}}</p>
|
953
|
+
<ul class="pager">
|
954
|
+
<li><a href="#">{{_i}}Previous{{/i}}</a></li>
|
955
|
+
<li><a href="#">{{_i}}Next{{/i}}</a></li>
|
956
|
+
</ul>
|
957
|
+
<pre class="prettyprint linenums">
|
958
|
+
<ul class="pager">
|
959
|
+
<li>
|
960
|
+
<a href="#">{{_i}}Previous{{/i}}</a>
|
961
|
+
</li>
|
962
|
+
<li>
|
963
|
+
<a href="#">{{_i}}Next{{/i}}</a>
|
964
|
+
</li>
|
965
|
+
</ul>
|
966
|
+
</pre>
|
967
|
+
</div>
|
968
|
+
<div class="span4">
|
969
|
+
<h3>{{_i}}Aligned links{{/i}}</h3>
|
970
|
+
<p>{{_i}}Alternatively, you can align each link to the sides:{{/i}}</p>
|
971
|
+
<ul class="pager">
|
972
|
+
<li class="previous"><a href="#">{{_i}}← Older{{/i}}</a></li>
|
973
|
+
<li class="next"><a href="#">{{_i}}Newer →{{/i}}</a></li>
|
974
|
+
</ul>
|
975
|
+
<pre class="prettyprint linenums">
|
976
|
+
<ul class="pager">
|
977
|
+
<li class="previous">
|
978
|
+
<a href="#">{{_i}}&larr; Older{{/i}}</a>
|
979
|
+
</li>
|
980
|
+
<li class="next">
|
981
|
+
<a href="#">{{_i}}Newer &rarr;{{/i}}</a>
|
982
|
+
</li>
|
983
|
+
</ul>
|
984
|
+
</pre>
|
985
|
+
</div>
|
986
|
+
</div><!-- /row -->
|
987
|
+
</section>
|
988
|
+
|
989
|
+
|
990
|
+
|
991
|
+
<!-- Labels
|
992
|
+
================================================== -->
|
993
|
+
<section id="labels">
|
994
|
+
<div class="page-header">
|
995
|
+
<h1>{{_i}}Inline labels{{/i}} <small>{{_i}}Label and annotate text{{/i}}</small></h1>
|
996
|
+
</div>
|
997
|
+
<table class="table table-bordered table-striped">
|
998
|
+
<thead>
|
999
|
+
<tr>
|
1000
|
+
<th>{{_i}}Labels{{/i}}</th>
|
1001
|
+
<th>{{_i}}Markup{{/i}}</th>
|
1002
|
+
</tr>
|
1003
|
+
</thead>
|
1004
|
+
<tbody>
|
1005
|
+
<tr>
|
1006
|
+
<td>
|
1007
|
+
<span class="label">{{_i}}Default{{/i}}</span>
|
1008
|
+
</td>
|
1009
|
+
<td>
|
1010
|
+
<code><span class="label">{{_i}}Default{{/i}}</span></code>
|
1011
|
+
</td>
|
1012
|
+
</tr>
|
1013
|
+
<tr>
|
1014
|
+
<td>
|
1015
|
+
<span class="label label-success">{{_i}}Success{{/i}}</span>
|
1016
|
+
</td>
|
1017
|
+
<td>
|
1018
|
+
<code><span class="label label-success">{{/_i}}New{{/i}}</span></code>
|
1019
|
+
</td>
|
1020
|
+
</tr>
|
1021
|
+
<tr>
|
1022
|
+
<td>
|
1023
|
+
<span class="label label-warning">{{_i}}Warning{{/i}}</span>
|
1024
|
+
</td>
|
1025
|
+
<td>
|
1026
|
+
<code><span class="label label-warning">{{_i}}Warning{{/i}}</span></code>
|
1027
|
+
</td>
|
1028
|
+
</tr>
|
1029
|
+
<tr>
|
1030
|
+
<td>
|
1031
|
+
<span class="label label-important">{{_i}}Important{{/i}}</span>
|
1032
|
+
</td>
|
1033
|
+
<td>
|
1034
|
+
<code><span class="label label-important">{{_i}}Important{{/i}}</span></code>
|
1035
|
+
</td>
|
1036
|
+
</tr>
|
1037
|
+
<tr>
|
1038
|
+
<td>
|
1039
|
+
<span class="label label-info">{{_i}}Info{{/i}}</span>
|
1040
|
+
</td>
|
1041
|
+
<td>
|
1042
|
+
<code><span class="label label-info">{{_i}}Info{{/i}}</span></code>
|
1043
|
+
</td>
|
1044
|
+
</tr>
|
1045
|
+
</tbody>
|
1046
|
+
</table>
|
1047
|
+
</section>
|
1048
|
+
|
1049
|
+
|
1050
|
+
|
1051
|
+
<!-- Thumbnails
|
1052
|
+
================================================== -->
|
1053
|
+
<section id="thumbnails">
|
1054
|
+
<div class="page-header">
|
1055
|
+
<h1>{{_i}}Thumbnails{{/i}} <small>{{_i}}Grids of images, videos, text, and more{{/i}}</small></h1>
|
1056
|
+
</div>
|
1057
|
+
|
1058
|
+
<div class="row">
|
1059
|
+
<div class="span6">
|
1060
|
+
<h2>{{_i}}Default thumbnails{{/i}}</h2>
|
1061
|
+
<p>{{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}</p>
|
1062
|
+
<ul class="thumbnails">
|
1063
|
+
<li class="span3">
|
1064
|
+
<a href="#" class="thumbnail">
|
1065
|
+
<img src="http://placehold.it/260x180" alt="">
|
1066
|
+
</a>
|
1067
|
+
</li>
|
1068
|
+
<li class="span3">
|
1069
|
+
<a href="#" class="thumbnail">
|
1070
|
+
<img src="http://placehold.it/260x180" alt="">
|
1071
|
+
</a>
|
1072
|
+
</li>
|
1073
|
+
<li class="span3">
|
1074
|
+
<a href="#" class="thumbnail">
|
1075
|
+
<img src="http://placehold.it/260x180" alt="">
|
1076
|
+
</a>
|
1077
|
+
</li>
|
1078
|
+
<li class="span3">
|
1079
|
+
<a href="#" class="thumbnail">
|
1080
|
+
<img src="http://placehold.it/260x180" alt="">
|
1081
|
+
</a>
|
1082
|
+
</li>
|
1083
|
+
</ul>
|
1084
|
+
</div>
|
1085
|
+
<div class="span6">
|
1086
|
+
<h2>{{_i}}Highly customizable{{/i}}</h2>
|
1087
|
+
<p>{{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}</p>
|
1088
|
+
<ul class="thumbnails">
|
1089
|
+
<li class="span3">
|
1090
|
+
<div class="thumbnail">
|
1091
|
+
<img src="http://placehold.it/260x180" alt="">
|
1092
|
+
<div class="caption">
|
1093
|
+
<h5>{{_i}}Thumbnail label{{/i}}</h5>
|
1094
|
+
<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>
|
1095
|
+
<p><a href="#" class="btn primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
|
1096
|
+
</div>
|
1097
|
+
</div>
|
1098
|
+
</li>
|
1099
|
+
<li class="span3">
|
1100
|
+
<div class="thumbnail">
|
1101
|
+
<img src="http://placehold.it/260x180" alt="">
|
1102
|
+
<div class="caption">
|
1103
|
+
<h5>{{_i}}Thumbnail label{{/i}}</h5>
|
1104
|
+
<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>
|
1105
|
+
<p><a href="#" class="btn primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
|
1106
|
+
</div>
|
1107
|
+
</div>
|
1108
|
+
</li>
|
1109
|
+
</ul>
|
1110
|
+
</div>
|
1111
|
+
</div>
|
1112
|
+
|
1113
|
+
<div class="row">
|
1114
|
+
<div class="span4">
|
1115
|
+
<h3>{{_i}}Why use thumbnails{{/i}}</h3>
|
1116
|
+
<p>{{_i}}Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}</p>
|
1117
|
+
</div>
|
1118
|
+
<div class="span4">
|
1119
|
+
<h3>{{_i}}Simple, flexible markup{{/i}}</h3>
|
1120
|
+
<p>{{_i}}Thumbnail markup is simple—a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}</p>
|
1121
|
+
</div>
|
1122
|
+
<div class="span4">
|
1123
|
+
<h3>{{_i}}Uses grid column sizes{{/i}}</h3>
|
1124
|
+
<p>{{_i}}Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.{{/i}}</p>
|
1125
|
+
</div>
|
1126
|
+
</div>
|
1127
|
+
|
1128
|
+
<div class="row">
|
1129
|
+
<div class="span6">
|
1130
|
+
<h2>{{_i}}The markup{{/i}}</h2>
|
1131
|
+
<p>{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:{{/i}}</p>
|
1132
|
+
<pre class="prettyprint linenums">
|
1133
|
+
<ul class="thumbnails">
|
1134
|
+
<li class="span3">
|
1135
|
+
<a href="#" class="thumbnail">
|
1136
|
+
<img src="http://placehold.it/260x180" alt="">
|
1137
|
+
</a>
|
1138
|
+
</li>
|
1139
|
+
...
|
1140
|
+
</ul>
|
1141
|
+
</pre>
|
1142
|
+
<p>{{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code><a></code> for a <code><div></code> like so:{{/i}}</p>
|
1143
|
+
<pre class="prettyprint linenums">
|
1144
|
+
<ul class="thumbnails">
|
1145
|
+
<li class="span3">
|
1146
|
+
<div class="thumbnail">
|
1147
|
+
<img src="http://placehold.it/260x180" alt="">
|
1148
|
+
<h5>{{_i}}Thumbnail label{{/i}}</h5>
|
1149
|
+
<p>{{_i}}Thumbnail caption right here...{{/i}}</p>
|
1150
|
+
</div>
|
1151
|
+
</li>
|
1152
|
+
...
|
1153
|
+
</ul>
|
1154
|
+
</pre>
|
1155
|
+
</div>
|
1156
|
+
<div class="span6">
|
1157
|
+
<h2>{{_i}}More examples{{/i}}</h2>
|
1158
|
+
<p>{{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}</p>
|
1159
|
+
<ul class="thumbnails">
|
1160
|
+
<li class="span4">
|
1161
|
+
<a href="#" class="thumbnail">
|
1162
|
+
<img src="http://placehold.it/360x268" alt="">
|
1163
|
+
</a>
|
1164
|
+
</li>
|
1165
|
+
<li class="span2">
|
1166
|
+
<a href="#" class="thumbnail">
|
1167
|
+
<img src="http://placehold.it/160x120" alt="">
|
1168
|
+
</a>
|
1169
|
+
</li>
|
1170
|
+
<li class="span2">
|
1171
|
+
<a href="#" class="thumbnail">
|
1172
|
+
<img src="http://placehold.it/160x120" alt="">
|
1173
|
+
</a>
|
1174
|
+
</li>
|
1175
|
+
<li class="span2">
|
1176
|
+
<a href="#" class="thumbnail">
|
1177
|
+
<img src="http://placehold.it/160x120" alt="">
|
1178
|
+
</a>
|
1179
|
+
</li>
|
1180
|
+
<li class="span2">
|
1181
|
+
<a href="#" class="thumbnail">
|
1182
|
+
<img src="http://placehold.it/160x120" alt="">
|
1183
|
+
</a>
|
1184
|
+
</li>
|
1185
|
+
<li class="span2">
|
1186
|
+
<a href="#" class="thumbnail">
|
1187
|
+
<img src="http://placehold.it/160x120" alt="">
|
1188
|
+
</a>
|
1189
|
+
</li>
|
1190
|
+
</ul>
|
1191
|
+
</div>
|
1192
|
+
</div>
|
1193
|
+
|
1194
|
+
</section>
|
1195
|
+
|
1196
|
+
|
1197
|
+
|
1198
|
+
<!-- Alerts & Messages
|
1199
|
+
================================================== -->
|
1200
|
+
<section id="alerts">
|
1201
|
+
<div class="page-header">
|
1202
|
+
<h1>{{_i}}Alerts{{/i}} <small>{{_i}}Styles for success, warning, and error messages{{/i}}</small></h1>
|
1203
|
+
</div>
|
1204
|
+
|
1205
|
+
<h2>{{_i}}Lightweight defaults{{/i}}</h2>
|
1206
|
+
<div class="row">
|
1207
|
+
<div class="span4">
|
1208
|
+
<h3>{{_i}}Rewritten base class{{/i}}</h3>
|
1209
|
+
<p>{{_i}}With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outter <code><div></code>.{{/i}}</p>
|
1210
|
+
<h3>{{_i}}Single alert message{{/i}}</h3>
|
1211
|
+
<p>{{_i}}For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.{{/i}}</p>
|
1212
|
+
<hr>
|
1213
|
+
<h3>{{_i}}Goes great with javascript{{/i}}</h3>
|
1214
|
+
<p>{{_i}}Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.{{/i}}</p>
|
1215
|
+
<p><a class="btn js-btn" href="./javascript.html#alerts">{{_i}}Get the plugin »</a>{{/i}}</p>
|
1216
|
+
</div>
|
1217
|
+
<div class="span8">
|
1218
|
+
<h3>{{_i}}Example alerts{{/i}}</h3>
|
1219
|
+
<p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
|
1220
|
+
<div class="alert">
|
1221
|
+
<a class="close">×</a>
|
1222
|
+
<strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
|
1223
|
+
</div>
|
1224
|
+
<pre class="prettyprint linenums">
|
1225
|
+
<div class="alert">
|
1226
|
+
<a class="close">×</a>
|
1227
|
+
<strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
|
1228
|
+
</div>
|
1229
|
+
</pre>
|
1230
|
+
<p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
|
1231
|
+
<div class="alert alert-block">
|
1232
|
+
<a class="close">×</a>
|
1233
|
+
<h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
|
1234
|
+
<p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
|
1235
|
+
</div>
|
1236
|
+
<pre class="prettyprint linenums">
|
1237
|
+
<div class="alert alert-block">
|
1238
|
+
<a class="close">×</a>
|
1239
|
+
<h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
|
1240
|
+
{{_i}}Best check yo self, you're not...{{/i}}
|
1241
|
+
</div>
|
1242
|
+
</pre>
|
1243
|
+
</div>
|
1244
|
+
</div>
|
1245
|
+
|
1246
|
+
<h2>{{_i}}Contextual alternatives{{/i}} <small>{{_i}}Add optional classes to change an alert's connotation{{/i}}</small></h2>
|
1247
|
+
<div class="row">
|
1248
|
+
<div class="span4">
|
1249
|
+
<h3>{{_i}}Error or danger{{/i}}</h3>
|
1250
|
+
<div class="alert alert-error">
|
1251
|
+
<a class="close">×</a>
|
1252
|
+
<strong>{{_i}}Oh snap!{{/i}}</strong> {{_i}}Change a few things up and try submitting again.{{/i}}
|
1253
|
+
</div>
|
1254
|
+
<pre class="prettyprint linenums">
|
1255
|
+
<div class="alert alert-error">
|
1256
|
+
...
|
1257
|
+
</div>
|
1258
|
+
</pre>
|
1259
|
+
</div>
|
1260
|
+
<div class="span4">
|
1261
|
+
<h3>{{_i}}Success{{/i}}</h3>
|
1262
|
+
<div class="alert alert-success">
|
1263
|
+
<a class="close">×</a>
|
1264
|
+
<strong>{{_i}}Well done!{{/i}}</strong> {{_i}}You successfully read this important alert message.{{/i}}
|
1265
|
+
</div>
|
1266
|
+
<pre class="prettyprint linenums">
|
1267
|
+
<div class="alert alert-success">
|
1268
|
+
...
|
1269
|
+
</div>
|
1270
|
+
</pre>
|
1271
|
+
</div>
|
1272
|
+
<div class="span4">
|
1273
|
+
<h3>{{_i}}Information{{/i}}</h3>
|
1274
|
+
<div class="alert alert-info">
|
1275
|
+
<a class="close">×</a>
|
1276
|
+
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}This alert needs your attention, but it's not super important.{{/i}}
|
1277
|
+
</div>
|
1278
|
+
<pre class="prettyprint linenums">
|
1279
|
+
<div class="alert alert-info">
|
1280
|
+
...
|
1281
|
+
</div>
|
1282
|
+
</pre>
|
1283
|
+
</div>
|
1284
|
+
</div>
|
1285
|
+
|
1286
|
+
</section>
|
1287
|
+
|
1288
|
+
|
1289
|
+
|
1290
|
+
<!-- Progress bars
|
1291
|
+
================================================== -->
|
1292
|
+
<section id="progress">
|
1293
|
+
<div class="page-header">
|
1294
|
+
<h1>{{_i}}Progress bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1>
|
1295
|
+
</div>
|
1296
|
+
|
1297
|
+
<h2>{{_i}}Examples and markup{{/i}}</h2>
|
1298
|
+
<div class="row">
|
1299
|
+
<div class="span4">
|
1300
|
+
<h3>{{_i}}Basic{{/i}}</h3>
|
1301
|
+
<p>{{_i}}Default progress bar with a vertical gradient.{{/i}}</p>
|
1302
|
+
<div class="progress">
|
1303
|
+
<div class="bar" style="width: 60%;"></div>
|
1304
|
+
</div>
|
1305
|
+
<pre class="prettyprint linenums">
|
1306
|
+
<div class="progress">
|
1307
|
+
<div class="bar"
|
1308
|
+
style="width: 60%;"></div>
|
1309
|
+
</div>
|
1310
|
+
</pre>
|
1311
|
+
</div>
|
1312
|
+
<div class="span4">
|
1313
|
+
<h3>{{_i}}Striped{{/i}}</h3>
|
1314
|
+
<p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
|
1315
|
+
<div class="progress progress-info progress-striped">
|
1316
|
+
<div class="bar" style="width: 20%;"></div>
|
1317
|
+
</div>
|
1318
|
+
<pre class="prettyprint linenums">
|
1319
|
+
<div class="progress progress-info
|
1320
|
+
progress-striped">
|
1321
|
+
<div class="bar"
|
1322
|
+
style="width: 20%;"></div>
|
1323
|
+
</div>
|
1324
|
+
</pre>
|
1325
|
+
</div>
|
1326
|
+
<div class="span4">
|
1327
|
+
<h3>{{_i}}Animated{{/i}}</h3>
|
1328
|
+
<p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
|
1329
|
+
<div class="progress progress-danger progress-striped active">
|
1330
|
+
<div class="bar" style="width: 45%"></div>
|
1331
|
+
</div>
|
1332
|
+
<pre class="prettyprint linenums">
|
1333
|
+
<div class="progress progress-danger
|
1334
|
+
progress-striped active">
|
1335
|
+
<div class="bar"
|
1336
|
+
style="width: 40%;"></div>
|
1337
|
+
</div>
|
1338
|
+
</pre>
|
1339
|
+
</div>
|
1340
|
+
</div>
|
1341
|
+
|
1342
|
+
<h2>{{_i}}Options and browser support{{/i}}</h2>
|
1343
|
+
<div class="row">
|
1344
|
+
<div class="span4">
|
1345
|
+
<h3>{{_i}}Additional colors{{/i}}</h3>
|
1346
|
+
<p>{{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}</p>
|
1347
|
+
<ul>
|
1348
|
+
<li><code>.progress-info</code></li>
|
1349
|
+
<li><code>.progress-success</code></li>
|
1350
|
+
<li><code>.progress-danger</code></li>
|
1351
|
+
</ul>
|
1352
|
+
<p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p>
|
1353
|
+
</div>
|
1354
|
+
<div class="span4">
|
1355
|
+
<h3>{{_i}}Behavior{{/i}}</h3>
|
1356
|
+
<p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
|
1357
|
+
<p>{{_i}}If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
|
1358
|
+
</div>
|
1359
|
+
<div class="span4">
|
1360
|
+
<h3>{{_i}}Browser support{{/i}}</h3>
|
1361
|
+
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}</p>
|
1362
|
+
<p>{{_i}}Opera does not support animations at this time.{{/i}}</p>
|
1363
|
+
</div>
|
1364
|
+
</div>
|
1365
|
+
|
1366
|
+
</section>
|
1367
|
+
|
1368
|
+
|
1369
|
+
|
1370
|
+
|
1371
|
+
|
1372
|
+
<!-- Miscellaneous
|
1373
|
+
================================================== -->
|
1374
|
+
<section id="misc">
|
1375
|
+
<div class="page-header">
|
1376
|
+
<h1>{{_i}}Miscellaneous{{/i}} <small>{{_i}}Wells, badges, and close icon{{/i}}</small></h1>
|
1377
|
+
</div>
|
1378
|
+
<div class="row">
|
1379
|
+
<div class="span4">
|
1380
|
+
<h2>{{_i}}Wells{{/i}}</h2>
|
1381
|
+
<p>{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}</p>
|
1382
|
+
<div class="well">
|
1383
|
+
{{_i}}Look, I'm in a well!{{/i}}
|
1384
|
+
</div>
|
1385
|
+
<pre class="prettyprint linenums">
|
1386
|
+
<div class="well">
|
1387
|
+
...
|
1388
|
+
</div>
|
1389
|
+
</pre>
|
1390
|
+
</div><!--/span-->
|
1391
|
+
<div class="span4" style="display: none;">
|
1392
|
+
<h2>{{_i}}Badges{{/i}}</h2>
|
1393
|
+
<p>{{_i}}Use a badge on an element for an unread count or as a simple indicator.{{/i}}</p>
|
1394
|
+
<pre class="prettyprint linenums"><span class="badge">3</div></pre>
|
1395
|
+
</div><!--/span-->
|
1396
|
+
<div class="span4">
|
1397
|
+
<h2>{{_i}}Close icon{{/i}}</h2>
|
1398
|
+
<p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
|
1399
|
+
<p><a class="close" style="float: none;">×</a></p>
|
1400
|
+
<pre class="prettyprint linenums"><a class="close">&times;</a></pre>
|
1401
|
+
</div><!--/span-->
|
1402
|
+
</div><!--/row-->
|
1403
|
+
</section>
|