Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).
Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
@@ -164,14 +164,14 @@ </p> -<strong>For emphasizing a snippet of text with important
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>-
<em>For emphasizing a snippet of text with stress
The following snippet of text is rendered as italicized text.
@@ -180,6 +180,23 @@Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
Convey meaning through color with a handful of emphasis utility classes.
+Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
+Etiam porta sem malesuada magna mollis euismod.
+Donec ullamcorper nulla non metus auctor fringilla.
+Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
+Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
++<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> +<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> +<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> +<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> +<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> ++
HTML is the best thing since sliced bread.
<abbr title="attribute" class="initialism">attr</abbr>+
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
For quoting blocks of content from another source within your document.
-Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
@@ -696,6 +713,12 @@ For example, <code><section></code> should be wrapped as inlinIndicates a dangerous or potentially negative action. ++ + +.warning+Indicates a warning that might need attention. +- .info@@ -727,12 +750,18 @@ For example, <code><section></code> should be wrapped as inlin02/04/2012 Declined + + 3 TB - Monthly 03/04/2012 Pending + 4 +TB - Monthly +04/04/2012 +Call in to confirm +
Form control which supports multiple lines of text. Change row attribute as necessary.
Form control which supports multiple lines of text. Change rows attribute as necessary.
Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.
Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.
Heads up!
- We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.
+ We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.
+Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.
-<div class="pagination ">
+<div class="pagination">
<ul>
<li class="disabled"><a href="#">Prev</a></li>
<li class="active"><a href="#">1</a></li>
...
</ul>
</div>
+
+ You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.
++<div class="pagination"> + <ul> + <li class="disabled"><span>Prev</span></li> + <li class="active"><span>1</span></li> + ... + </ul> +</div>
<div class="page-header"> - <h1>Example page header</h1> + <h1>Example page header <small>Subtext for header</small></h1> </div>@@ -1951,7 +1961,7 @@
Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.
<a href="#" class="close" data-dismiss="alert">×</button>+
<a href="#" class="close" data-dismiss="alert">×</a>
Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.
<button type="button" class="close" data-dismiss="alert">×</button>diff --git a/getting-started.html b/getting-started.html index af5ceee5..1e743509 100644 --- a/getting-started.html +++ b/getting-started.html @@ -84,7 +84,7 @@
Overview of the project, it's contents, and how to get started with a simple template.
+Overview of the project, its contents, and how to get started with a simple template.
Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.
+Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.
Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.
+Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.
This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.
Please note that all JavaScript plugins require jQuery to be included.
@@ -211,17 +212,20 @@With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.
Now, here's a look at a typical HTML file:
+<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
</head>
<body>
<h1>Hello, world!</h1>
+ <script src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
To make this a Bootstrapped template, just include the appropriate CSS and JS files:
+<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
@@ -230,6 +234,7 @@
</head>
<body>
<h1>Hello, world!</h1>
+ <script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
diff --git a/index.html b/index.html
index f8830597..0f6e0ac8 100644
--- a/index.html
+++ b/index.html
@@ -83,11 +83,11 @@
Bootstrap
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
-
+
- GitHub project
- Extend
- - Version 2.1.0
+ - Version 2.1.1
diff --git a/javascript.html b/javascript.html
index cea44ecf..612238f9 100644
--- a/javascript.html
+++ b/javascript.html
@@ -386,7 +386,7 @@ $('#myModal').on('hidden', function () {
-
@@ -489,7 +489,7 @@ $('#myModal').on('hidden', function () {
Add data-toggle="dropdown" to a link or button to toggle a dropdown.
<div class="dropdown">
- <a class="dropdown-toggle" href="#">Dropdown trigger</a>
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
@@ -1045,7 +1045,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
Example alerts
- Add dismiss functionality to all alerge messages with this plugin.
+ Add dismiss functionality to all alert messages with this plugin.
@@ -1271,6 +1271,36 @@ $('#my-alert').bind('closed', function () {
+<div class="accordion" id="accordion2">
+ <div class="accordion-group">
+ <div class="accordion-heading">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+ Collapsible Group Item #1
+ </a>
+ </div>
+ <div id="collapseOne" class="accordion-body collapse in">
+ <div class="accordion-inner">
+ Anim pariatur cliche...
+ </div>
+ </div>
+ </div>
+ <div class="accordion-group">
+ <div class="accordion-heading">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+ Collapsible Group Item #2
+ </a>
+ </div>
+ <div id="collapseTwo" class="accordion-body collapse">
+ <div class="accordion-inner">
+ Anim pariatur cliche...
+ </div>
+ </div>
+ </div>
+</div>
+...
+
+ You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.
+
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
@@ -1616,11 +1646,11 @@ $('.carousel').carousel({
Via data attributes
To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.
- <div data-spy="affix" data-offset-top="200">...</body>
+ <div data-spy="affix" data-offset-top="200">...</div>
Heads up!
- It's up to you to manage the position of a pinned element. This is done by styling affix, affix-top, and affix-bottom.
+ You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.
Via JavaScript
diff --git a/scaffolding.html b/scaffolding.html
index 6def588a..ea72f6a9 100644
--- a/scaffolding.html
+++ b/scaffolding.html
@@ -127,7 +127,7 @@
- Remove
margin on the body
- Set
background-color: white; on the body
- - Use the
@baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base
+ - Use the
@baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographic base
- Set the global link color via
@linkColor and apply link underlines only on :hover
These styles can be found within scaffolding.less.
@@ -148,7 +148,7 @@
Live grid example
- The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
+ The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
1
@@ -186,7 +186,7 @@
Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.
Offsetting columns
- Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.
+ Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.
4
@@ -209,8 +209,6 @@
Nesting columns
To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.
- Example
- Here two nested .span4 columns are placed within a .span8.
Level 1 of column
@@ -425,20 +423,10 @@
- Phones
- 480px and below
- Fluid columns, no fixed widths
-
-
- Phones to tablets
- 767px and below
- Fluid columns, no fixed widths
-
-
- Portrait tablets
- 768px and above
- 42px
- 20px
+ Large display
+ 1200px and up
+ 70px
+ 30px
Default
@@ -447,25 +435,35 @@
20px
- Large display
- 1200px and up
- 70px
- 30px
+ Portrait tablets
+ 768px and above
+ 42px
+ 20px
+
+
+ Phones to tablets
+ 767px and below
+ Fluid columns, no fixed widths
+
+
+ Phones
+ 480px and below
+ Fluid columns, no fixed widths
-/* Landscape phones and down */
-@media (max-width: 480px) { ... }
-
-/* Landscape phone to portrait tablet */
-@media (max-width: 767px) { ... }
+/* Large desktop */
+@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
-/* Large desktop */
-@media (min-width: 1200px) { ... }
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) { ... }
+
+/* Landscape phones and down */
+@media (max-width: 480px) { ... }
diff --git a/templates/pages/base-css.mustache b/templates/pages/base-css.mustache
index 46b15523..cc83e0d7 100644
--- a/templates/pages/base-css.mustache
+++ b/templates/pages/base-css.mustache
@@ -49,7 +49,7 @@
{{! Body copy }}
{{_i}}Body copy{{/i}}
- {{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}
+ {{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).{{/i}}
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
@@ -88,14 +88,14 @@
</p>
- <strong>
+ {{_i}}Bold{{/i}}
{{_i}}For emphasizing a snippet of text with important{{/i}}
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
- <em>
+ {{_i}}Italics{{/i}}
{{_i}}For emphasizing a snippet of text with stress{{/i}}
The following snippet of text is rendered as italicized text.
@@ -104,6 +104,23 @@
{{_i}}Heads up!{{/i}} {{_i}}Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.{{/i}}
+ {{_i}}Emphasis classes{{/i}}
+ {{_i}}Convey meaning through color with a handful of emphasis utility classes.{{/i}}
+
+ Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
+ Etiam porta sem malesuada magna mollis euismod.
+ Donec ullamcorper nulla non metus auctor fringilla.
+ Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+
+
+<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
+<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
+<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+
+
@@ -124,7 +141,7 @@
{{_i}}HTML is the best thing since sliced bread.{{/i}}
- <abbr title="attribute" class="initialism">attr</abbr>
+ <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
@@ -170,7 +187,7 @@
{{_i}}Blockquotes{{/i}}
{{_i}}For quoting blocks of content from another source within your document.{{/i}}
- {{_i}}Default blockqoute{{/i}}
+ {{_i}}Default blockquote{{/i}}
{{_i}}Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.{{/i}}
@@ -623,6 +640,12 @@
{{_i}}Indicates a dangerous or potentially negative action.{{/i}}
+
+
+ .warning
+
+ {{_i}}Indicates a warning that might need attention.{{/i}}
+
.info
@@ -654,12 +677,18 @@
02/04/2012
Declined
-
+
3
TB - Monthly
03/04/2012
Pending
+
+ 4
+ TB - Monthly
+ 04/04/2012
+ Call in to confirm
+
{{! /example }}
@@ -920,7 +949,7 @@
{{_i}}Textarea{{/i}}
- {{_i}}Form control which supports multiple lines of text. Change row attribute as necessary.{{/i}}
+ {{_i}}Form control which supports multiple lines of text. Change rows attribute as necessary.{{/i}}
@@ -1292,7 +1321,7 @@
{{_i}}Validation states{{/i}}
- {{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}
+ {{_i}}Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}
+
+
+
+
+ {{_i}}Username is taken{{/i}}
+
+
@@ -1476,7 +1512,7 @@
{{_i}}Heads up!{{/i}}
- {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.{{/i}}
+ {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.{{/i}}
Button element
@@ -1693,7 +1729,7 @@
Glyphicons attribution
- {{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}
+ {{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}
@@ -1818,7 +1854,9 @@
<label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
<div class="controls">
<div class="input-prepend">
- <span class="add-on"><i class="icon-envelope"><i><span><input class="span2" id="inputIcon" type="text">
+ <span class="add-on"><i class="icon-envelope"></i></span>
+ <input class="span2" id="inputIcon" type="text">
+ </div>
</div>
</div>
diff --git a/templates/pages/components.mustache b/templates/pages/components.mustache
index 8187ce08..53936e5d 100644
--- a/templates/pages/components.mustache
+++ b/templates/pages/components.mustache
@@ -1402,13 +1402,23 @@
-<div class="pagination ">
+<div class="pagination">
<ul>
<li class="disabled"><a href="#">Prev</a></li>
<li class="active"><a href="#">1</a></li>
...
</ul>
</div>
+
+ {{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}
+
+<div class="pagination">
+ <ul>
+ <li class="disabled"><span>Prev</span></li>
+ <li class="active"><span>1</span></li>
+ ...
+ </ul>
+</div>
{{_i}}Alignment{{/i}}
@@ -1698,7 +1708,7 @@
<div class="page-header">
- <h1>{{_i}}Example page header{{/i}}</h1>
+ <h1>{{_i}}Example page header{{/i}} <small>{{_i}}Subtext for header{{/i}}</small></h1>
</div>
@@ -1870,7 +1880,7 @@
{{_i}}Dismiss buttons{{/i}}
{{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.{{/i}}
- <a href="#" class="close" data-dismiss="alert">×</button>
+ <a href="#" class="close" data-dismiss="alert">×</a>
{{_i}}Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}
<button type="button" class="close" data-dismiss="alert">×</button>
diff --git a/templates/pages/getting-started.mustache b/templates/pages/getting-started.mustache
index 8b58e62b..513124c2 100644
--- a/templates/pages/getting-started.mustache
+++ b/templates/pages/getting-started.mustache
@@ -3,7 +3,7 @@
{{_i}}Getting started{{/i}}
- {{_i}}Overview of the project, it's contents, and how to get started with a simple template.{{/i}}
+ {{_i}}Overview of the project, its contents, and how to get started with a simple template.{{/i}}
@@ -33,18 +33,18 @@
{{_i}}1. Download{{/i}}
- {{_i}}Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with our the compiled Bootstrap files.{{/i}}
+ {{_i}}Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.{{/i}}
- Download compiled
- Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.
-
+ {{_i}}Download compiled{{/i}}
+ {{_i}}Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.{{/i}}
+
Download source
- Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.
-
+ Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.
+
@@ -73,6 +73,7 @@
└── README.md
{{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.{{/i}}
+ {{_i}}Please note that all JavaScript plugins require jQuery to be included.{{/i}}
@@ -130,17 +131,20 @@
{{_i}}With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.{{/i}}
{{_i}}Now, here's a look at a typical HTML file:{{/i}}
+<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
</head>
<body>
<h1>Hello, world!</h1>
+ <script src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
{{_i}}To make this a Bootstrapped template, just include the appropriate CSS and JS files:{{/i}}
+<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
@@ -149,6 +153,7 @@
</head>
<body>
<h1>Hello, world!</h1>
+ <script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
@@ -199,9 +204,9 @@
{{_i}}What next?{{/i}}
- Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.
- Visit the Bootstrap docs
- Customize Bootstrap
+ {{_i}}Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.{{/i}}
+ {{_i}}Visit the Bootstrap docs{{/i}}
+ {{_i}}Customize Bootstrap{{/i}}
diff --git a/templates/pages/index.mustache b/templates/pages/index.mustache
index 654a9884..f02b8d50 100644
--- a/templates/pages/index.mustache
+++ b/templates/pages/index.mustache
@@ -2,11 +2,11 @@
Bootstrap
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
- {{_i}}Download Bootstrap{{/i}}
+ {{_i}}Download Bootstrap{{/i}}
- GitHub project
- Extend
- - Version 2.1.0
+ - Version 2.1.1
diff --git a/templates/pages/javascript.mustache b/templates/pages/javascript.mustache
index c9e1b612..5f8883bd 100644
--- a/templates/pages/javascript.mustache
+++ b/templates/pages/javascript.mustache
@@ -306,7 +306,7 @@ $('#myModal').on('hidden', function () {
-
@@ -409,7 +409,7 @@ $('#myModal').on('hidden', function () {
{{_i}}Add data-toggle="dropdown" to a link or button to toggle a dropdown.{{/i}}
<div class="dropdown">
- <a class="dropdown-toggle" href="#">Dropdown trigger</a>
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
@@ -965,7 +965,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
{{_i}}Example alerts{{/i}}
- {{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}
+ {{_i}}Add dismiss functionality to all alert messages with this plugin.{{/i}}
@@ -1191,6 +1191,36 @@ $('#my-alert').bind('closed', function () {
{{! /example }}
+<div class="accordion" id="accordion2">
+ <div class="accordion-group">
+ <div class="accordion-heading">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+ {{_i}}Collapsible Group Item #1{{/i}}
+ </a>
+ </div>
+ <div id="collapseOne" class="accordion-body collapse in">
+ <div class="accordion-inner">
+ Anim pariatur cliche...
+ </div>
+ </div>
+ </div>
+ <div class="accordion-group">
+ <div class="accordion-heading">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+ {{_i}}Collapsible Group Item #2{{/i}}
+ </a>
+ </div>
+ <div id="collapseTwo" class="accordion-body collapse">
+ <div class="accordion-inner">
+ Anim pariatur cliche...
+ </div>
+ </div>
+ </div>
+</div>
+...
+
+ {{_i}}You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.{{/i}}
+
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
{{_i}}simple collapsible{{/i}}
</button>
@@ -1536,11 +1566,11 @@ $('.carousel').carousel({
{{_i}}Via data attributes{{/i}}
{{_i}}To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.{{/i}}
- <div data-spy="affix" data-offset-top="200">...</body>
+ <div data-spy="affix" data-offset-top="200">...</div>
{{_i}}Heads up!{{/i}}
- {{_i}}It's up to you to manage the position of a pinned element. This is done by styling affix, affix-top, and affix-bottom.{{/i}}
+ {{_i}}You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.{{/i}}
{{_i}}Via JavaScript{{/i}}
diff --git a/templates/pages/scaffolding.mustache b/templates/pages/scaffolding.mustache
index 724ab5e5..0d9c191e 100644
--- a/templates/pages/scaffolding.mustache
+++ b/templates/pages/scaffolding.mustache
@@ -46,7 +46,7 @@
- {{_i}}Remove
margin on the body{{/i}}
- {{_i}}Set
background-color: white; on the body{{/i}}
- - {{_i}}Use the
@baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographyic base{{/i}}
+ - {{_i}}Use the
@baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographic base{{/i}}
- {{_i}}Set the global link color via
@linkColor and apply link underlines only on :hover{{/i}}
{{_i}}These styles can be found within scaffolding.less.{{/i}}
@@ -67,7 +67,7 @@
{{_i}}Live grid example{{/i}}
- {{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}
+ {{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}
1
@@ -105,7 +105,7 @@
{{_i}}Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.{{/i}}
{{_i}}Offsetting columns{{/i}}
- {{_i}}Move columns to the left using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.{{/i}}
+ {{_i}}Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.{{/i}}
4
@@ -128,8 +128,6 @@
{{_i}}Nesting columns{{/i}}
{{_i}}To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}
- {{_i}}Example{{/i}}
- {{_i}}Here two nested .span4 columns are placed within a .span8.{{/i}}
{{_i}}Level 1 of column{{/i}}
@@ -347,20 +345,10 @@
- {{_i}}Phones{{/i}}
- 480px and below
- {{_i}}Fluid columns, no fixed widths{{/i}}
-
-
- {{_i}}Phones to tablets{{/i}}
- 767px and below
- {{_i}}Fluid columns, no fixed widths{{/i}}
-
-
- {{_i}}Portrait tablets{{/i}}
- 768px and above
- 42px
- 20px
+ {{_i}}Large display{{/i}}
+ 1200px and up
+ 70px
+ 30px
{{_i}}Default{{/i}}
@@ -369,25 +357,35 @@
20px
- {{_i}}Large display{{/i}}
- 1200px and up
- 70px
- 30px
+ {{_i}}Portrait tablets{{/i}}
+ 768px and above
+ 42px
+ 20px
+
+
+ {{_i}}Phones to tablets{{/i}}
+ 767px and below
+ {{_i}}Fluid columns, no fixed widths{{/i}}
+
+
+ {{_i}}Phones{{/i}}
+ 480px and below
+ {{_i}}Fluid columns, no fixed widths{{/i}}
-/* {{_i}}Landscape phones and down{{/i}} */
-@media (max-width: 480px) { ... }
-
-/* {{_i}}Landscape phone to portrait tablet{{/i}} */
-@media (max-width: 767px) { ... }
+/* {{_i}}Large desktop{{/i}} */
+@media (min-width: 1200px) { ... }
/* {{_i}}Portrait tablet to landscape and desktop{{/i}} */
@media (min-width: 768px) and (max-width: 979px) { ... }
-/* {{_i}}Large desktop{{/i}} */
-@media (min-width: 1200px) { ... }
+/* {{_i}}Landscape phone to portrait tablet{{/i}} */
+@media (max-width: 767px) { ... }
+
+/* {{_i}}Landscape phones and down{{/i}} */
+@media (max-width: 480px) { ... }