mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

revisit how we do these heading examples because the jekyll-toc plugin renders them awkwardly

Browse Source
This commit is contained in:
Mark Otto
2017-05-27 22:40:00 -07:00
parent 968c0c6971
commit 5a3a356651
2 changed files with 105 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/content/reboot.md
+46 -21
View File
@@ -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. 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"> <table>
{% markdown %} <thead>
# h1 heading <tr>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <th>Heading</th>
<th>Example</th>
## h2 heading </tr>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </thead>
<tbody>
### h3 heading <tr>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <td>
{% markdown %}`<h1></h1>`{% endmarkdown %}
#### h4 heading </td>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <td><span class="h1">h1. Bootstrap heading</span></td>
</tr>
##### h5 heading <tr>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <td>
{% markdown %}`<h2></h2>`{% endmarkdown %}
###### h6 heading </td>
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <td><span class="h2">h2. Bootstrap heading</span></td>
{% endmarkdown %} </tr>
</div> <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 ## Lists
docs/content/typography.md
+59 -36
View File
@@ -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. All HTML headings, `<h1>` through `<h6>`, are available.
<div class="bd-example bd-example-type"> <table>
<table class="table"> <thead>
<tbody> <tr>
<tr> <th>Heading</th>
<td><h1>h1. Bootstrap heading</h1></td> <th>Example</th>
<td class="type-info">Semibold 2.5rem (40px)</td> </tr>
</tr> </thead>
<tr> <tbody>
<td><h2>h2. Bootstrap heading</h2></td> <tr>
<td class="type-info">Semibold 2rem (32px)</td> <td>
</tr> {% markdown %}`<h1></h1>`{% endmarkdown %}
<tr> </td>
<td><h3>h3. Bootstrap heading</h3></td> <td><span class="h1">h1. Bootstrap heading</span></td>
<td class="type-info">Semibold 1.75rem (28px)</td> </tr>
</tr> <tr>
<tr> <td>
<td><h4>h4. Bootstrap heading</h4></td> {% markdown %}`<h2></h2>`{% endmarkdown %}
<td class="type-info">Semibold 1.5rem (24px)</td> </td>
</tr> <td><span class="h2">h2. Bootstrap heading</span></td>
<tr> </tr>
<td><h5>h5. Bootstrap heading</h5></td> <tr>
<td class="type-info">Semibold 1.25rem (20px)</td> <td>
</tr> {% markdown %}`<h3></h3>`{% endmarkdown %}
<tr> </td>
<td><h6>h6. Bootstrap heading</h6></td> <td><span class="h3">h3. Bootstrap heading</span></td>
<td class="type-info">Semibold 1rem (16px)</td> </tr>
</tr> <tr>
</tbody> <td>
</table> {% markdown %}`<h4></h4>`{% endmarkdown %}
</div> </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 %} {% highlight html %}
<h1>h1. Bootstrap heading</h1> <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. 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> <h3>
Fancy display heading Fancy display heading
<small class="text-muted">With faded secondary text</small> <small class="text-muted">With faded secondary text</small>
</h3> </h3>
{% endexample %} {% endhighlight %}
## Display headings ## Display headings
@@ -92,16 +115,16 @@ Traditional heading elements are designed to work best in the meat of your page
<table class="table"> <table class="table">
<tbody> <tbody>
<tr> <tr>
<td><h1 class="display-1">Display 1</h1></td> <td><span class="display-1">Display 1</span></td>
</tr> </tr>
<tr> <tr>
<td><h1 class="display-2">Display 2</h1></td> <td><span class="display-2">Display 2</span></td>
</tr> </tr>
<tr> <tr>
<td><h1 class="display-3">Display 3</h1></td> <td><span class="display-3">Display 3</span></td>
</tr> </tr>
<tr> <tr>
<td><h1 class="display-4">Display 4</h1></td> <td><span class="display-4">Display 4</span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>