diff options
Diffstat (limited to 'docs/components/type.md')
| -rw-r--r-- | docs/components/type.md | 47 |
1 files changed, 4 insertions, 43 deletions
diff --git a/docs/components/type.md b/docs/components/type.md index a16b96b81..2fb40e38d 100644 --- a/docs/components/type.md +++ b/docs/components/type.md @@ -1,13 +1,10 @@ -<a id="type"></a> - -# Typography +--- +layout: page +title: Typography +--- Bootstrap includes simple and easily customized typography across the project. In addition to the standard headings, body text, and lists, utility classes are also included. - - -<a id="type-headings"></a> - ## Headings All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline. @@ -88,10 +85,6 @@ Create lighter, secondary text in any heading with a generic `<small>` tag or th <h6>h6. Bootstrap heading <small>Secondary text</small></h6> {% endhighlight %} - - -<a id="type-body-copy"></a> - ## Body copy Bootstrap's base text is sized with global `font-size: 16px;` and `line-height: 1.5;`. This is applied to the `<body>` and all paragraphs. @@ -102,10 +95,6 @@ Bootstrap's base text is sized with global `font-size: 16px;` and `line-height: <p>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> {% endexample %} - - -<a id="type-lead"></a> - ## Lead Make a paragraph stand out by adding `.lead`. @@ -116,10 +105,6 @@ Make a paragraph stand out by adding `.lead`. </p> {% endexample %} - - -<a id="type-inline-text"></a> - ## Inline text elements Styling for all the common inline HTML5 elements. @@ -141,10 +126,6 @@ Styling for all the common inline HTML5 elements. <p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p> </div> - - -<a id="type-alignment"></a> - ## Alignment classes Easily realign text to components with text alignment classes. @@ -157,10 +138,6 @@ Easily realign text to components with text alignment classes. <p class="text-nowrap">No wrap text.</p> {% endexample %} - - -<a id="type-transformation"></a> - ## Transformation classes Transform text in components with text capitalization classes. @@ -171,10 +148,6 @@ Transform text in components with text capitalization classes. <p class="text-capitalize">Capitalized text.</p> {% endexample %} - - -<a id="type-abbreviations"></a> - ## Abbreviations Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a `title` attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover. @@ -195,10 +168,6 @@ Add `.initialism` to an abbreviation for a slightly smaller font-size. <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> {% endexample %} - - -<a id="type-address"></a> - ## Address Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with `<br>`. @@ -217,10 +186,6 @@ Present contact information for the nearest ancestor or the entire body of work. </address> {% endexample %} - - -<a id="type-blockquotes"></a> - ## Blockquotes For quoting blocks of content from another source within your document. @@ -261,10 +226,6 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content. </blockquote> {% endexample %} - - -<a id="type-lists"></a> - ## Lists ### Unordered |