diff options
| author | Mark Otto <[email protected]> | 2017-05-27 22:40:00 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-27 22:40:00 -0700 |
| commit | 5a3a356651f9ed0302ec4e4b629f1974caf26bc0 (patch) | |
| tree | b3628a239e188fedd50451b67f32f83ff438388d /docs | |
| parent | 968c0c69719f6835e4952fafcdb0a618babee3e1 (diff) | |
| download | bootstrap-5a3a356651f9ed0302ec4e4b629f1974caf26bc0.tar.xz bootstrap-5a3a356651f9ed0302ec4e4b629f1974caf26bc0.zip | |
revisit how we do these heading examples because the jekyll-toc plugin renders them awkwardly
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/content/reboot.md | 67 | ||||
| -rw-r--r-- | docs/content/typography.md | 95 |
2 files changed, 105 insertions, 57 deletions
diff --git a/docs/content/reboot.md b/docs/content/reboot.md index e896d5026..a9dd6a6d0 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -53,27 +53,52 @@ This `font-family` is applied to the `<body>` and automatically inherited global All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing. -<div class="bd-example"> -{% markdown %} -# h1 heading -Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. - -## h2 heading -Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. - -### h3 heading -Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. - -#### h4 heading -Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. - -##### h5 heading -Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. - -###### h6 heading -Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. -{% endmarkdown %} -</div> +<table> + <thead> + <tr> + <th>Heading</th> + <th>Example</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {% markdown %}`<h1></h1>`{% endmarkdown %} + </td> + <td><span class="h1">h1. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {% markdown %}`<h2></h2>`{% endmarkdown %} + </td> + <td><span class="h2">h2. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {% markdown %}`<h3></h3>`{% endmarkdown %} + </td> + <td><span class="h3">h3. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {% markdown %}`<h4></h4>`{% endmarkdown %} + </td> + <td><span class="h4">h4. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {% markdown %}`<h5></h5>`{% endmarkdown %} + </td> + <td><span class="h5">h5. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {% markdown %}`<h6></h6>`{% endmarkdown %} + </td> + <td><span class="h6">h6. Bootstrap heading</span></td> + </tr> + </tbody> +</table> ## Lists diff --git a/docs/content/typography.md b/docs/content/typography.md index 249e1392e..754b0ac1b 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -22,36 +22,52 @@ These styles can be found within `_reboot.scss`, and the global variables are de All HTML headings, `<h1>` through `<h6>`, are available. -<div class="bd-example bd-example-type"> - <table class="table"> - <tbody> - <tr> - <td><h1>h1. Bootstrap heading</h1></td> - <td class="type-info">Semibold 2.5rem (40px)</td> - </tr> - <tr> - <td><h2>h2. Bootstrap heading</h2></td> - <td class="type-info">Semibold 2rem (32px)</td> - </tr> - <tr> - <td><h3>h3. Bootstrap heading</h3></td> - <td class="type-info">Semibold 1.75rem (28px)</td> - </tr> - <tr> - <td><h4>h4. Bootstrap heading</h4></td> - <td class="type-info">Semibold 1.5rem (24px)</td> - </tr> - <tr> - <td><h5>h5. Bootstrap heading</h5></td> - <td class="type-info">Semibold 1.25rem (20px)</td> - </tr> - <tr> - <td><h6>h6. Bootstrap heading</h6></td> - <td class="type-info">Semibold 1rem (16px)</td> - </tr> - </tbody> - </table> -</div> +<table> + <thead> + <tr> + <th>Heading</th> + <th>Example</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {% markdown %}`<h1></h1>`{% endmarkdown %} + </td> + <td><span class="h1">h1. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {% markdown %}`<h2></h2>`{% endmarkdown %} + </td> + <td><span class="h2">h2. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {% markdown %}`<h3></h3>`{% endmarkdown %} + </td> + <td><span class="h3">h3. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {% markdown %}`<h4></h4>`{% endmarkdown %} + </td> + <td><span class="h4">h4. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {% markdown %}`<h5></h5>`{% endmarkdown %} + </td> + <td><span class="h5">h5. Bootstrap heading</span></td> + </tr> + <tr> + <td> + {% markdown %}`<h6></h6>`{% endmarkdown %} + </td> + <td><span class="h6">h6. Bootstrap heading</span></td> + </tr> + </tbody> +</table> {% highlight html %} <h1>h1. Bootstrap heading</h1> @@ -77,12 +93,19 @@ All HTML headings, `<h1>` through `<h6>`, are available. Use the included utility classes to recreate the small secondary heading text from Bootstrap 3. -{% example html %} +<div class="bd-example"> + <span class="h3"> + Fancy display heading + <small class="text-muted">With faded secondary text</small> + </span> +</div> + +{% highlight html %} <h3> Fancy display heading <small class="text-muted">With faded secondary text</small> </h3> -{% endexample %} +{% endhighlight %} ## Display headings @@ -92,16 +115,16 @@ Traditional heading elements are designed to work best in the meat of your page <table class="table"> <tbody> <tr> - <td><h1 class="display-1">Display 1</h1></td> + <td><span class="display-1">Display 1</span></td> </tr> <tr> - <td><h1 class="display-2">Display 2</h1></td> + <td><span class="display-2">Display 2</span></td> </tr> <tr> - <td><h1 class="display-3">Display 3</h1></td> + <td><span class="display-3">Display 3</span></td> </tr> <tr> - <td><h1 class="display-4">Display 4</h1></td> + <td><span class="display-4">Display 4</span></td> </tr> </tbody> </table> |