diff --git a/docs/base-css.html b/docs/base-css.html index 2897453978..d01d5350c9 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -123,12 +123,14 @@

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.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+ 
<p>...</p>

Lead body copy

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

+ 
<p class="lead">...</p>

Built with Less

The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

@@ -145,18 +147,14 @@

The following snippet of text is rendered as bold text.

-
-<strong>rendered as bold text</strong>
-
+ 
<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.

-
-<em>rendered as italicized text</em>
-
+ 
<em>rendered as italicized text</em>

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.

@@ -172,18 +170,14 @@

An abbreviation of the word attribute is attr.

-
-<abbr title="attribute">attr</abbr>
-
+ 
<abbr title="attribute">attr</abbr>

<abbr class="initialism">

Add .initialism to an abbreviation for a slightly smaller font-size.

HTML is the best thing since sliced bread.

-
-<abbr title="attribute" class="initialism">attr</abbr>
-
+ 
<abbr title="attribute" class="initialism">attr</abbr>
diff --git a/docs/extend.html b/docs/extend.html index 1e1c753ea5..8e9b79b6b0 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -177,8 +177,59 @@

Use as static assets

-

Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

-

...

+

Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

+ +

Setup file structure

+

Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

+
+  app/
+  ├── layouts/
+  └── templates/
+  public/
+  ├── css/
+  │   ├── bootstrap.min.css
+  ├── js/
+  │   ├── bootstrap.min.js
+  └── img/
+      ├── glyphicons-halflings.png
+      └── glyphicons-halflings-white.png
+
+ +

Utilize starter template

+

Copy the following base HTML to get started.

+
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="public/css/bootstrap.min.css" rel="stylesheet">
+    <script src="public/js/bootstrap.min.js"></script>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+
+ +

Layer on custom code

+

Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

+
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="public/css/bootstrap.min.css" rel="stylesheet">
+    <script src="public/js/bootstrap.min.js"></script>
+    <!-- Project -->
+    <link href="public/css/application.css" rel="stylesheet">
+    <script src="public/js/application.js"></script>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+
+ diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 456ea059bc..7e7106fb6e 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -54,6 +54,7 @@

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.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+ 
<p>...</p>
{{! Body copy .lead }}

{{_i}}Lead body copy{{/i}}

@@ -61,6 +62,7 @@

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

+ 
<p class="lead">...</p>
{{! Using LESS }}

{{_i}}Built with Less{{/i}}

@@ -79,18 +81,14 @@

The following snippet of text is rendered as bold text.

-
-<strong>rendered as bold text</strong>
-
+ 
<strong>rendered as bold text</strong>

<em>

{{_i}}For emphasizing a snippet of text with stress{{/i}}

The following snippet of text is rendered as italicized text.

-
-<em>rendered as italicized text</em>
-
+ 
<em>rendered as italicized text</em>

{{_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}}

@@ -107,18 +105,14 @@

{{_i}}An abbreviation of the word attribute is attr.{{/i}}

-
-<abbr title="attribute">attr</abbr>
-
+ 
<abbr title="attribute">attr</abbr>

<abbr class="initialism">

{{_i}}Add .initialism to an abbreviation for a slightly smaller font-size.{{/i}}

{{_i}}HTML is the best thing since sliced bread.{{/i}}

-
-<abbr title="attribute" class="initialism">attr</abbr>
-
+ 
<abbr title="attribute" class="initialism">attr</abbr>
diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index 56b114b446..d7384d58ad 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -106,8 +106,59 @@

{{_i}}Use as static assets{{/i}}

-

Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

-

...

+

{{_i}}Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.{{/i}}

+ +

{{_i}}Setup file structure{{/i}}

+

{{_i}}Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:{{/i}}

+
+  app/
+  ├── layouts/
+  └── templates/
+  public/
+  ├── css/
+  │   ├── bootstrap.min.css
+  ├── js/
+  │   ├── bootstrap.min.js
+  └── img/
+      ├── glyphicons-halflings.png
+      └── glyphicons-halflings-white.png
+
+ +

{{_i}}Utilize starter template{{/i}}

+

{{_i}}Copy the following base HTML to get started.{{/i}}

+
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="public/css/bootstrap.min.css" rel="stylesheet">
+    <script src="public/js/bootstrap.min.js"></script>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+
+ +

{{_i}}Layer on custom code{{/i}}

+

{{_i}}Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.{{/i}}

+
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <!-- Bootstrap -->
+    <link href="public/css/bootstrap.min.css" rel="stylesheet">
+    <script src="public/js/bootstrap.min.js"></script>
+    <!-- Project -->
+    <link href="public/css/application.css" rel="stylesheet">
+    <script src="public/js/application.js"></script>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
+
+