History: Bootstrap Components Typography

Source of version: 1 (current)

 {HTML()} <!-- Typography ================================================== --> <div class="bs-docs-section"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1 id="type">Typography</h1> </div> </div> </div> <!-- Headings --> <div class="row"> <div class="col-lg-4"> <div class="bs-example bs-example-type"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </div> <div class="bs-example"> <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> </div> </div> <div class="col-lg-4"> <div class="bs-example"> <h2>Example body text</h2> <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p>The following snippet of text is <strong>rendered as bold text</strong>.</p> <p>The following snippet of text is <em>rendered as italicized text</em>.</p> <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> </div> </div> <div class="col-lg-4"> <h2>Emphasis classes</h2> <div class="bs-example"> <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> </div> </div> {HTML} {CODE()} <!-- Typography ================================================== --> <div class="bs-docs-section"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1 id="type">Typography</h1> </div> </div> </div> <!-- Headings --> <div class="row"> <div class="col-lg-4"> <div class="bs-example bs-example-type"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </div> <div class="bs-example"> <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> </div> </div> <div class="col-lg-4"> <div class="bs-example"> <h2>Example body text</h2> <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p>The following snippet of text is <strong>rendered as bold text</strong>.</p> <p>The following snippet of text is <em>rendered as italicized text</em>.</p> <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> </div> </div> <div class="col-lg-4"> <h2>Emphasis classes</h2> <div class="bs-example"> <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> </div> </div> {CODE} !!Tasks *What are we going to do with the SPLIT plugin? Rewrite it to use bootstrap columns to be able to specify grid width? !!Issues *Just thinking about the remarks box, or in general other situations, maybe to use "text-muted" "text-primary" "text-warning" "text-danger" "text-success""text-info"?