caleb
/
pelican-plugins


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
							Typography
===============================================================================

Headings
--------

All HTML headings, :code:`<h1>` through :code:`<h6>`, are available. :code:`.h1`
through :code:`.h6` classes are also available, for when you want to match the font
styling of a heading but still want your text to be displayed inline.

.. container:: bs-example

   .. list-table::
      :widths: 75 25
      :class: table

      * - :h1:`h1. Bootstrap heading`
        - **Semibold 36 px**
      * - :h2:`h2. Bootstrap heading`
        - **Semibold 30 px**
      * - :h3:`h3. Bootstrap heading`
        - **Semibold 24 px**
      * - :h4:`h4. Bootstrap heading`
        - **Semibold 18 px**
      * - :h5:`h5. Bootstrap heading`
        - **Semibold 14 px**
      * - :h6:`h6. Bootstrap heading`
        - **Semibold 12 px**

.. code::
   :class: highlight

   h1. Bootstrap heading
   =====================

   h2. Bootstrap heading
   ---------------------

   h3. Bootstrap heading
   +++++++++++++++++++++

   h4. Bootstrap heading
   ~~~~~~~~~~~~~~~~~~~~~

   h5. Bootstrap heading
   *********************

   h6. Bootstrap heading
   ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

Create lighter, secondary text in any heading with a generic :code:`small` tag.


.. container:: bs-example

   .. list-table::
      :widths: 100
      :class: table

      * - :h1:`h1. Bootstrap heading <small>Secondary text</small>`
      * - :h2:`h2. Bootstrap heading <small>Secondary text</small>`
      * - :h3:`h3. Bootstrap heading <small>Secondary text</small>`
      * - :h4:`h4. Bootstrap heading <small>Secondary text</small>`
      * - :h5:`h5. Bootstrap heading <small>Secondary text</small>`
      * - :h6:`h6. Bootstrap heading <small>Secondary text</small>`

.. code::
   :class: highlight

   h1. Bootstrap heading :small:`Secondary text`
   =============================================

   h2. Bootstrap heading :small:`Secondary text`
   ---------------------------------------------

   h3. Bootstrap heading :small:`Secondary text`
   +++++++++++++++++++++++++++++++++++++++++++++

   h4. Bootstrap heading :small:`Secondary text`
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

   h5. Bootstrap heading :small:`Secondary text`
   *********************************************

   h6. Bootstrap heading :small:`Secondary text`
   ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨


Body copy
---------

Bootstrap's global default `font-size` is **14px**, with a line-height of
**1.428**. This is applied to the `<body>` and all paragraphs. In addition,
`<p>` (paragraphs) receive a bottom margin of half their computed line-height
(10px by default).


.. container:: bs-example

   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.

   Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
   ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis
   mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia
   odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

   Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id
   elit non mi porta gravida at eget metus. Duis mollis, est non commodo
   luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

.. code::
   :class: highlight

   ...


Lead body copy
++++++++++++++

Make a paragraph stand out by adding lead.


.. container:: bs-example

   .. lead:: Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
             auctor. Duis mollis, est non commodo luctus.


.. code::
   :class: highlight


   .. lead:: Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
             auctor. Duis mollis, est non commodo luctus.


Built with Less
+++++++++++++++

The typographic scale is based on two Less variables in **variables.less**:
`@font-size-base` and `@line-height-base`. 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.


Emphasis
--------
Make use of HTML's default emphasis tags with lightweight styles.


Small text
++++++++++

For de-emphasizing inline or blocks of text, use the `small` tag to set text at
85% the size of the parent. Heading elements receive their own font-size for
nested `small` elements.

.. container:: bs-example

   :small:`This line of text is meant to be treated as fine print.`


.. code::
   :class: highlight

   :small:`This line of text is meant to be treated as fine print.`


Bold
++++

For emphasizing a snippet of text with a heavier font-weight.

.. container:: bs-example

   The following snippet of text is **rendered as bold text**.

.. code::
   :class: highlight

   The following snippet of text is **rendered as bold text**.


Italics
+++++++

For emphasizing a snippet of text with italics.

.. container:: bs-example

   The following snippet of text is *rendered as italicized text*.

.. code::
   :class: highlight

   The following snippet of text is *rendered as italicized text*.


.. admonition:: :h4:`Alternate elements`
   :class: bs-callout bs-callout-info

   Feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or
   phrases without conveying additional importance while `<i>` is mostly for
   voice, technical terms, etc.


Alignment classes
+++++++++++++++++

Easily realign text to components with text alignment classes.

.. container:: bs-example

   .. class:: text-left

      Left aligned text.

   .. class:: text-center

      Center aligned text.

   .. class:: text-right

      Right aligned text.

   .. class:: text-justify

      Justified text.


.. code::
   :class: highlight

   .. class:: text-left

      Left aligned text.

   .. class:: text-center

      Center aligned text.

   .. class:: text-right

      Right aligned text.

   .. class:: text-justify

      Justified text.


Lists
-----

Unordered
+++++++++

A list of items in which the order does *not* explicitly matter.

.. container:: bs-example

   * Lorem ipsum dolor sit amet
   * Consectetur adipiscing elit
   * Integer molestie lorem at massa
   * Facilisis in pretium nisl aliquet
   * Nulla volutpat aliquam velit

     * Phasellus iaculis neque
     * Purus sodales ultricies
     * Vestibulum laoreet porttitor sem
     * Ac tristique libero volutpat at

   * Faucibus porta lacus fringilla vel
   * Aenean sit amet erat nunc
   * Eget porttitor lorem

.. code::
   :class: highlight

   * Lorem ipsum dolor sit amet
   * Consectetur adipiscing elit
     ...


Ordered
+++++++

A list of items in which the order *does* matter.

.. container:: bs-example

   1. Lorem ipsum dolor sit amet
   #. Consectetur adipiscing elit
   #. Integer molestie lorem at massa
   #. Facilisis in pretium nisl aliquet
   #. Nulla volutpat aliquam velit
   #. Faucibus porta lacus fringilla vel
   #. Aenean sit amet erat nunc
   #. Eget porttitor lorem

.. code::
   :class: highlight

   1. Lorem ipsum dolor sit amet
   #. Consectetur adipiscing elit
      ...

Unstyled
++++++++

Remove the default `list-style` and left margin on list items (immediate children
only). **This only applies to immediate children list items**, meaning you will
need to add the class for any nested lists as well.

.. container:: bs-example

   .. class:: list-unstyled

      * Lorem ipsum dolor sit amet
      * Consectetur adipiscing elit
      * Integer molestie lorem at massa
      * Facilisis in pretium nisl aliquet
      * Nulla volutpat aliquam velit

        * Phasellus iaculis neque
        * Purus sodales ultricies
        * Vestibulum laoreet porttitor sem
        * Ac tristique libero volutpat at

      * Faucibus porta lacus fringilla vel
      * Aenean sit amet erat nunc
      * Eget porttitor lorem

.. code::
   :class: highlight

   .. class:: list-unstyled

      * Lorem ipsum dolor sit amet
      * Consectetur adipiscing elit
        ...


Inline
++++++

.. container:: bs-example

   .. class:: list-inline

      * Lorem ipsum
      * Phasellus iaculis
      * Nulla volutpat

.. code::
   :class: highlight

   .. class:: list-inline

      * Lorem ipsum
      * Phasellus iaculis
      * Nulla volutpat


Description
+++++++++++

.. container:: bs-example

   A list of terms with their associated descriptions.

   Description lists
    A description list is perfect for defining terms.

   Euismod
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    Donec id elit non mi porta gravida at eget metus.

   Malesuada porta
    Etiam porta sem malesuada magna mollis euismod.


.. code::
   :class: highlight

   Description lists
    A description list is perfect for defining terms.

   Euismod
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    Donec id elit non mi porta gravida at eget metus.

   Malesuada porta
    Etiam porta sem malesuada magna mollis euismod.


Horizontal description
~~~~~~~~~~~~~~~~~~~~~~

Make terms and descriptions in <dl> line up side-by-side. Starts off stacked
like default <dl>s, but when the navbar expands, so do these.

.. container:: bs-example

   .. class:: dl-horizontal

      Description lists
       A description list is perfect for defining terms.

      Euismod
       Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
       Donec id elit non mi porta gravida at eget metus.

      Malesuada porta
       Etiam porta sem malesuada magna mollis euismod.

.. code::
   :class: highlight

   .. class:: dl-horizontal

      Description lists
       A description list is perfect for defining terms.

      Euismod
       Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
       Donec id elit non mi porta gravida at eget metus.

      Malesuada porta
       Etiam porta sem malesuada magna mollis euismod.


.. admonition:: :h4:`Auto-truncating`
   :class: bs-callout bs-callout-info

   Horizontal description lists will truncate terms that are too long to fit in
   the left column with `text-overflow`. In narrower viewports, they will change
   to the default stacked layout.