0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00

add typography pattern .page-header to components per #1701

This commit is contained in:
Mark Otto 2012-02-12 20:07:25 -08:00
parent 81d101a6a7
commit 4d1f1f0fc7
3 changed files with 38 additions and 12 deletions

Binary file not shown.

View File

@ -98,7 +98,7 @@
</ul>
</li>
<li><a href="#labels">Labels</a></li>
<li><a href="#hero">Hero</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#thumbnails">Thumbnails</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li>
@ -1142,15 +1142,15 @@
<!-- Hero unit
<!-- Typographic components
================================================== -->
<section id="hero">
<section id="typography">
<div class="page-header">
<h1>Hero unit <small>Jumbotron for your site's tagline</small></h1>
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
</div>
<h2>Hero unit</h2>
<div class="row">
<div class="span4">
<h2>About</h2>
<p>Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
<h3>Markup</h3>
<p>Wrap your content in a <code>div</code> like so:</p>
@ -1173,7 +1173,20 @@
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</div>
</div>
</div><!-- /row -->
<h2>Page header</h2>
<div class="row">
<div class="span4">
<p>A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
</div>
<div class="span8">
<pre class="prettyprint linenums">
&lt;div class="page-haeder"&gt;
&lt;h1&gt;Example page header&lt;/h1&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
</section>

View File

@ -22,7 +22,7 @@
</ul>
</li>
<li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
<li><a href="#hero">{{_i}}Hero{{/i}}</a></li>
<li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
<li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
<li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
<li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
@ -1066,15 +1066,15 @@
<!-- Hero unit
<!-- Typographic components
================================================== -->
<section id="hero">
<section id="typography">
<div class="page-header">
<h1>{{_i}}Hero unit{{/i}} <small>{{_i}}Jumbotron for your site's tagline{{/i}}</small></h1>
<h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
</div>
<h2>{{_i}}Hero unit{{/i}}</h2>
<div class="row">
<div class="span4">
<h2>{{_i}}About{{/i}}</h2>
<p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
@ -1097,7 +1097,20 @@
<p><a class="btn btn-primary btn-large">{{_i}}Learn more{{/i}}</a></p>
</div>
</div>
</div>
</div><!-- /row -->
<h2>{{_i}}Page header{{/i}}</h2>
<div class="row">
<div class="span4">
<p>{{_i}}A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
</div>
<div class="span8">
<pre class="prettyprint linenums">
&lt;div class="page-haeder"&gt;
&lt;h1&gt;{{_i}}Example page header{{/i}}&lt;/h1&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
</section>