{"id":105,"date":"2014-03-12T15:46:05","date_gmt":"2014-03-12T15:46:05","guid":{"rendered":""},"modified":"2020-04-12T12:32:15","modified_gmt":"2020-04-12T10:32:15","slug":"typography","status":"publish","type":"post","link":"https:\/\/orthodoxalbania.org\/2020\/en\/2014\/03\/12\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"
<\/div>\n

<\/p>\n

\n
\n
\n
\n

<\/span>Headings<\/span><\/h2>\n

All HTML headings, <h1><\/code> through <h6><\/code> are available.<\/p>\n

\n

<\/span>h1. Heading 1<\/span><\/h1>\n

<\/span>h2. Heading 2<\/span><\/h2>\n

<\/span>h3. Heading 3<\/span><\/h3>\n

<\/span>h4. Heading 4<\/span><\/h4>\n
<\/span>h5. Heading 5<\/span><\/h5>\n
<\/span>h6. Heading 6<\/span><\/h6>\n<\/p><\/div>\n

<\/span>Built with Less<\/span><\/h3>\n

The typographic scale is based on two LESS variables in variables.less<\/strong>: @baseFontSize<\/code> and @baseLineHeight<\/code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.<\/p>\n<\/div>\n<\/div>\n

\n
\n

<\/span>Body copy<\/span><\/h2>\n

Bootstrap’s global default font-size<\/code> is 14px<\/strong>, with a line-height<\/code> of 1.7em<\/strong>. This is applied to the <body><\/code> and all paragraphs. In addition, <p><\/code> (paragraphs) receive a bottom margin of half their line-height (9px by default).<\/p>\n

\n

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.<\/p>\n<\/p><\/div>\n

<p>...<\/p><\/pre>\n
<\/span>Lead body copy<\/span><\/h3>\n
Make a paragraph stand out by adding .lead<\/code>.<\/p>\n
\n
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.<\/p>\n<\/p><\/div>\n
<p class="lead">...<\/p><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
<\/p>\n
<\/span>Emphasis<\/span><\/h2>\n
Make use of HTML’s default emphasis tags with lightweight styles.<\/p>\n
\n
\n
\n
<\/span><em><\/code><\/span><\/h4>\n
For emphasizing a snippet of text with stress<\/em><\/p>\n
\n
The following snippet of text is rendered as italicized text<\/em>.<\/p>\n<\/p><\/div>\n
<em>rendered as italicized text<\/em><\/pre>\n
<\/span><strong><\/code><\/span><\/h4>\n
For emphasizing a snippet of text with important<\/strong><\/p>\n
\n
The following snippet of text is rendered as bold text<\/strong>.<\/p>\n<\/p><\/div>\n
<strong>rendered as bold text<\/strong><\/pre>\n<\/div>\n<\/div>\n
\n
\n
<\/span><small><\/code><\/span><\/h4>\n
For de-emphasizing inline or blocks of text, use the small tag.<\/small><\/p>\n
\n
This line of text is meant to be treated as fine print.<\/small><\/p>\n<\/p><\/div>\n
<p>\r\n  <small>This line of text is meant to be treated as fine print.<\/small>\r\n<\/p><\/pre>\n
<\/p>\n
Note:<\/strong> Feel free to use <b><\/code> and <i><\/code> in HTML5. <b><\/code> is meant to highlight words or phrases without conveying additional importance while <i><\/code> is mostly for voice, technical terms, etc.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
<\/span>Notice Styles<\/span><\/h3>\n
Use the <p><\/code> tag with .success<\/code>, .warning<\/code>, .info<\/code> or .error<\/code> classes.<\/p>\n
\n
\n
\n
\n
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\n<\/div>\n
<p class="success">...<\/p><\/pre>\n
\n
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\n<\/div>\n
<p class="info">...<\/p><\/pre>\n<\/div>\n<\/div>\n
\n
\n
\n
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\n<\/div>\n
<p class="warning">...<\/p><\/pre>\n
\n
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\n<\/div>\n
<p class="error">...<\/p><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
<\/p>\n
\n
\n
\n
<\/span>Abbreviations<\/span><\/h2>\n
Stylized implementation of HTML’s <abbr><\/code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title<\/code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.<\/p>\n
<\/span><abbr><\/code><\/span><\/h4>\n
For expanded text on long hover of an abbreviation, include the title<\/code> attribute.<\/p>\n
\n
An abbreviation of the word attribute is attr<\/abbr>.<\/p>\n<\/p><\/div>\n
<abbr title="attribute">attr<\/abbr><\/pre>\n
<\/span><abbr class=\"initialism\"><\/code><\/span><\/h4>\n
Add .initialism<\/code> to an abbreviation for a slightly smaller font-size.<\/p>\n
\n
HTML<\/abbr> is the best thing since sliced bread.<\/p>\n<\/p><\/div>\n
<abbr title="attribute" class="initialism">attr<\/abbr><\/pre>\n<\/div>\n<\/div>\n
\n
\n
<\/span>Addresses<\/span><\/h2>\n
Stylized implementation of HTML’s element to present contact information for the nearest ancestor or the entire body of work.<\/p>\n
<\/span><address><\/code><\/span><\/h4>\n
Preserve formatting by ending all lines with <br><\/code>.<\/p>\n
\n
\n      Twitter, Inc.<\/strong>
\n      795 Folsom Ave, Suite 600
\n      San Francisco, CA 94107
\n      P:<\/abbr> (123) 456-7890
\n    <\/address>\n
\n      Full Name<\/strong>
\n      first.last@gmail.com<\/a>
\n    <\/address>\n<\/p><\/div>\n
\r\n<address>\r\n  <strong>Twitter, Inc.<\/strong><br>\r\n  795 Folsom Ave, Suite 600<br>\r\n  San Francisco, CA 94107<br>\r\n  <abbr title="Phone">P:<\/abbr> (123) 456-7890\r\n<\/address>\r\n<address>\r\n  <strong>Full Name<\/strong><br>\r\n  <a href="mailto:#">first.last@gmail.com<\/a>\r\n<\/address>\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
<\/p>\n
<\/span>Blockquotes<\/span><\/h2>\n
For quoting blocks of content from another source within your document.<\/p>\n
<\/span>Default blockquote<\/span><\/h3>\n
Wrap <blockquote><\/code> around any HTML<\/abbr> as the quote. For straight quotes we recommend a <p><\/code>.<\/p>\n
\n
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\n<\/blockquote><\/div>\n
<blockquote>\r\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\r\n<\/blockquote><\/pre>\n
<\/span>Blockquote options<\/span><\/h3>\n
  Style and content changes for simple variations on a standard blockquote.<\/span><\/p>\n
\n
\n
\n
<\/span>Naming a source<\/span><\/h4>\n
Add <small><\/code> tag for identifying the source. Wrap the name of the source work in <cite><\/code>.<\/p>\n
\n
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\n
      Someone famous in Source Title<\/cite><\/small>\n    <\/p><\/blockquote><\/div>\n
<blockquote>\r\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\r\n  <small>Someone famous <cite title="Source Title">Source Title<\/cite><\/small>\r\n<\/blockquote><\/pre>\n<\/div>\n<\/div>\n
\n
\n
<\/span>Alternate displays<\/span><\/h4>\n
Use .pull-right<\/code> for a floated, right-aligned blockquote.<\/p>\n
\n
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\n
      Someone famous in Source Title<\/cite><\/small>\n    <\/p><\/blockquote><\/div>\n
<blockquote class="pull-right">\r\n  ...\r\n<\/blockquote><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
<\/p>\n
  <\/p>\n
<\/span>Lists<\/span><\/h2>\n
<\/div>\n
\n
\n
\n
<\/span>Unordered<\/span><\/h3>\n
This will display a list of items in which the order does not<\/em> explicitly matter.<\/p>\n
\n
    \n
  • Lorem ipsum dolor sit amet<\/li>\n
  • Nulla volutpat aliquam velit\n
      \n
    • Phasellus iaculis neque<\/li>\n
    • Purus sodales ultricies<\/li>\n
    • Vestibulum laoreet porttitor sem<\/li>\n
    • Ac tristique libero volutpat at<\/li>\n<\/ul>\n<\/li>\n
    • Faucibus porta lacus fringilla vel<\/li>\n
    • Eget porttitor lorem<\/li>\n<\/ul><\/div>\n
      <ul>\r\n  <li>...<\/li>\r\n<\/ul><\/pre>\n<\/div>\n<\/div>\n
      \n
      \n
      <\/span>Ordered<\/span><\/h3>\n
      This will display a list of items in which the order does<\/em> explicitly matter (numbered list).<\/p>\n
      \n
        \n
      1. Lorem ipsum dolor sit amet<\/li>\n
      2. Consectetur adipiscing elit<\/li>\n
      3. Integer molestie lorem at massa<\/li>\n
      4. Facilisis in pretium nisl aliquet<\/li>\n
      5. Nulla volutpat aliquam velit<\/li>\n
      6. Faucibus porta lacus fringilla vel<\/li>\n
      7. Aenean sit amet erat nunc<\/li>\n
      8. Eget porttitor lorem<\/li>\n<\/ol><\/div>\n
        <ol>\r\n  <li>...<\/li>\r\n<\/ol><\/pre>\n<\/div>\n<\/div>\n
        \n
        \n
        <\/span>Unstyled<\/span><\/h3>\n
        This will display a list of items with no list-style<\/code> or additional left padding.<\/p>\n
        \n
          \n
        • Lorem ipsum dolor sit amet<\/li>\n
        • Nulla volutpat aliquam velit\n
            \n
          • Phasellus iaculis neque<\/li>\n
          • Purus sodales ultricies<\/li>\n
          • Vestibulum laoreet porttitor sem<\/li>\n
          • Ac tristique libero volutpat at<\/li>\n<\/ul>\n<\/li>\n
          • Faucibus porta lacus fringilla vel<\/li>\n
          • Eget porttitor lorem<\/li>\n<\/ul>\n<\/div>\n
            <ul class="unstyled">\r\n  <li>...<\/li>\r\n<\/ul><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
            <\/div>\n
            \n
            \n
            \n
            <\/span>Description<\/span><\/h3>\n
            A list of terms with their associated descriptions.<\/p>\n
            \n
            \n
            Description lists<\/dt>\n
            A description list is perfect for defining terms.<\/dd>\n
            Euismod<\/dt>\n
            Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.<\/dd>\n
            Donec id elit non mi porta gravida at eget metus.<\/dd>\n
            Malesuada porta<\/dt>\n
            Etiam porta sem malesuada magna mollis euismod.<\/dd>\n<\/dl>\n<\/div>\n
            <dl>\r\n  <dt>...<\/dt>\r\n  <dd>...<\/dd>\r\n<\/dl><\/pre>\n
            <\/p>\n
            \n  Note:<\/strong>
            \n  Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow<\/code>. In narrower viewports, they will change to the default stacked layout.\n<\/p>\n<\/div>\n<\/div>\n
            \n
            \n
            <\/span>Horizontal description<\/span><\/h3>\n
            Make terms and descriptions in <dl><\/code> line up side-by-side.<\/p>\n
            \n
            \n
            Description lists<\/dt>\n
            A description list is perfect for defining terms.<\/dd>\n
            Euismod<\/dt>\n
            Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.<\/dd>\n
            Donec id elit non mi porta gravida at eget metus.<\/dd>\n
            Malesuada porta<\/dt>\n
            Etiam porta sem malesuada magna mollis euismod.<\/dd>\n
            Felis euismod semper eget lacinia<\/dt>\n
            Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<\/dd>\n<\/dl>\n<\/div>\n
            <dl class="dl-horizontal">\r\n  <dt>...<\/dt>\r\n  <dd>...<\/dd>\r\n<\/dl><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
            <\/div>\n<\/section>\n
            <\/p>\n
            \n
            \n
            <\/span>Code<\/span><\/h1>\n<\/p><\/div>\n
            \n
            \n
            \n
            <\/span>Inline<\/span><\/h2>\n
            Wrap inline snippets of code with <code><\/code>.<\/p>\n
            \nFor example, <section><\/code> should be wrapped as inline.\n<\/div>\n
            For example, <code><section><\/code> should be wrapped as inline.<\/pre>\n
            Note:<\/strong> Be sure to keep code within <pre><\/code> tags as close to the left as possible; it will render all tabs.<\/p>\n
            You may optionally add the .pre-scrollable<\/code> class which will set a max-height of 350px and provide a y-axis scrollbar.<\/p>\n<\/div>\n<\/div>\n
            \n
            \n
            <\/span>Basic block<\/span><\/h2>\n
            Use <pre><\/code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.<\/p>\n
            \n
            <p>Sample text here...<\/p><\/pre>\n<\/div>\n
            <pre>\r\n  &lt;p&gt;Sample text here...&lt;\/p&gt;\r\n<\/pre><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
            <\/div>\n
            <\/span>Prettify<\/span><\/h2>\n
            To add colored syntax highlight to the <pre><\/code> tag, then use the .prettyprint<\/code> class or the .prettyprint linenums<\/code> class.<\/p>\n
            \n
            <?php \/** Begin Debug **\/ if ($gantry->countModules('debug')) : ?>\r\n    <div id="rt-debug">\r\n    <div class="rt-container">\r\n      <?php echo $gantry->displayModules('debug','standard','standard'); ?>\r\n      <div class="clear"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <?php \/** End Debug **\/ endif; ?><\/pre>\n<\/div>\n
            <pre class="prettyprint linenums"><?php \/** Begin Debug **\/ if ($gantry->countModules('debug')) : ?>\r\n  <div id="rt-debug">\r\n    <div class="rt-container">\r\n      <?php echo $gantry->displayModules('debug','standard','standard'); ?>\r\n      <div class="clear"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <?php \/** End Debug **\/ endif; ?><\/pre><\/pre>\n<\/section>\n
            <\/p>\n
            \n
            \n
            <\/span>Tables<\/span><\/h1>\n<\/p><\/div>\n
            <\/span>Default styles<\/span><\/h2>\n
            For basic styling\u2014light padding and only horizontal dividers\u2014add the base class .table<\/code> to any <table><\/code>.<\/p>\n
            \n\n\n\n\n\n\n\n
            #<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
            2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
            3<\/td>\nLarry<\/td>\nthe Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
            <table class="table">\r\n  …\r\n<\/table><\/pre>\n
            <\/p>\n
            <\/span>Optional classes<\/span><\/h2>\n
            Add any of the follow classes to the .table<\/code> base class.<\/p>\n
            \n
            \n
            \n
            <\/span>.table-striped<\/code><\/span><\/h4>\n
            Adds zebra-striping to any table row within the <tbody><\/code> via the :nth-child<\/code> CSS selector (not available in IE7-IE8).<\/p>\n
            \n\n\n\n\n\n\n\n
            #<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
            2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
            3<\/td>\nLarry<\/td>\nthe Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
            <table class="table table-striped">\r\n  …\r\n<\/table><\/pre>\n
            <\/span>.table-hover<\/code><\/span><\/h4>\n
            Enable a hover state on table rows within a <tbody><\/code>.<\/p>\n
            \n\n\n\n\n\n\n\n
            #<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
            2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
            3<\/td>\nLarry the Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
            <table class="table table-hover">\r\n  …\r\n<\/table><\/pre>\n<\/div>\n<\/div>\n
            \n
            \n
            <\/span>.table-bordered<\/code><\/span><\/h4>\n
            Add borders and rounded corners to the table.<\/p>\n
            \n\n\n\n\n\n\n\n\n
            #<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
            Mark<\/td>\nOtto<\/td>\n@TwBootstrap<\/td>\n<\/tr>\n
            2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
            3<\/td>\nLarry the Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
            <table class="table table-bordered">\r\n  …\r\n<\/table><\/pre>\n
            <\/span>.table-condensed<\/code><\/span><\/h4>\n
            Makes tables more compact by cutting cell padding in half.<\/p>\n
            \n\n\n\n\n\n\n\n
            #<\/th>\nFirst Name<\/th>\nLast Name<\/th>\nUsername<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\nMark<\/td>\nOtto<\/td>\n@mdo<\/td>\n<\/tr>\n
            2<\/td>\nJacob<\/td>\nThornton<\/td>\n@fat<\/td>\n<\/tr>\n
            3<\/td>\nLarry the Bird<\/td>\n@twitter<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
            <table class="table table-condensed">\r\n  …\r\n<\/table><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
            <\/div>\n
            <\/p>\n
            <\/span>Optional row classes<\/span><\/h2>\n
            Use contextual classes to color table rows.<\/p>\n\n\n\n\n        <\/colgroup>\n\n\n\n\n\n\n\n
            Class<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
            \n              .success<\/code>\n            <\/td>\nIndicates a successful or positive action.<\/td>\n<\/tr>\n
            \n              .error<\/code>\n            <\/td>\nIndicates a dangerous or potentially negative action.<\/td>\n<\/tr>\n
            \n              .warning<\/code>\n            <\/td>\nIndicates a warning that might need attention.<\/td>\n<\/tr>\n
            \n              .info<\/code>\n            <\/td>\nUsed as an alternative to the default styles.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            \n\n\n\n\n\n\n\n\n
            #<\/th>\nProduct<\/th>\nPayment Taken<\/th>\nStatus<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\nTB – Monthly<\/td>\n01\/04\/2012<\/td>\nApproved<\/td>\n<\/tr>\n
            2<\/td>\nTB – Monthly<\/td>\n02\/04\/2012<\/td>\nDeclined<\/td>\n<\/tr>\n
            3<\/td>\nTB – Monthly<\/td>\n03\/04\/2012<\/td>\nPending<\/td>\n<\/tr>\n
            4<\/td>\nTB – Monthly<\/td>\n04\/04\/2012<\/td>\nCall in to confirm<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
            ...\r\n  <tr class="success">\r\n    <td>1<\/td>\r\n    <td>TB - Monthly<\/td>\r\n    <td>01\/04\/2012<\/td>\r\n    <td>Approved<\/td>\r\n  <\/tr>\r\n...<\/pre>\n
            <\/span>Supported table markup<\/span><\/h2>\n
            List of supported table HTML elements and how they should be used.<\/p>\n\n\n\n\n    <\/colgroup>\n\n\n\n\n\n\n\n\n\n\n
            Tag<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
            \n          <table><\/code>\n        <\/td>\n\n          Wrapping element for displaying data in a tabular format\n        <\/td>\n<\/tr>\n
            \n          <thead><\/code>\n        <\/td>\n\n          Container element for table header rows (<tr><\/code>) to label table columns\n        <\/td>\n<\/tr>\n
            \n          <tbody><\/code>\n        <\/td>\n\n          Container element for table rows (<tr><\/code>) in the body of the table\n        <\/td>\n<\/tr>\n
            \n          <tr><\/code>\n        <\/td>\n\n          Container element for a set of table cells (<td><\/code> or <th><\/code>) that appears on a single row\n        <\/td>\n<\/tr>\n
            \n          <td><\/code>\n        <\/td>\n\n          Default table cell\n        <\/td>\n<\/tr>\n
            \n          <th><\/code>\n        <\/td>\n\n          Special table cell for column (or row, depending on scope and placement) labels
            \n          Must be used within a <thead><\/code>\n        <\/td>\n<\/tr>\n
            \n          <caption><\/code>\n        <\/td>\n\n          Description or summary of what the table holds, especially useful for screen readers\n        <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            <table>\r\n  <caption>...<\/caption>\r\n  <thead>\r\n    <tr>\r\n      <th>...<\/th>\r\n      <th>...<\/th>\r\n    <\/tr>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>...<\/td>\r\n      <td>...<\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table><\/pre>\n<\/section>\n
            <\/p>\n
            \n
            \n
            <\/span>Forms<\/span><\/h1>\n<\/p><\/div>\n
            \n
            \n
            \n
            <\/span>Default styles<\/span><\/h2>\n
            Individual form controls receive styling, but without any required base class on the <form><\/code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.<\/p>\n
            \n
            \nLegend<\/legend>\n