From 22918f8f92d29a12a42db4e357f3d439e41bad0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Jun 2012 17:16:17 -0700 Subject: more tweaks to layouts and some docs styles --- docs/base-css.html | 164 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 104 insertions(+), 60 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 75bfced93..95b4f1f97 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -74,14 +74,14 @@ -
+

Base CSS

On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.

-
+
+
+
+

Contents

+
    +
  1. Typography
    2. +
  2. Code
    3. +
  3. Tables
    4. +
  4. Forms
    5. +
  5. Buttons
    6. +
  6. Icons by Glyphicons
    7. +
+
+
+
@@ -288,7 +302,7 @@

Lists

Unordered

-

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

+

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

  • Lorem ipsum dolor sit amet
    • @@ -314,64 +328,94 @@ </ul> -

    Unstyled

    -

    <ul class="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
      • -
    -

    Ordered

    -

    <ol>

    -
      -
    1. Lorem ipsum dolor sit amet
      2. -
    2. Consectetur adipiscing elit
      3. -
    3. Integer molestie lorem at massa
      4. -
    4. Facilisis in pretium nisl aliquet
      5. -
    5. Nulla volutpat aliquam velit
      6. -
    6. Faucibus porta lacus fringilla vel
      7. -
    7. Aenean sit amet erat nunc
      8. -
    8. Eget porttitor lorem
      9. -
    +

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

    +
    +
      +
    1. Lorem ipsum dolor sit amet
      2. +
    2. Consectetur adipiscing elit
      3. +
    3. Integer molestie lorem at massa
      4. +
    4. Facilisis in pretium nisl aliquet
      5. +
    5. Nulla volutpat aliquam velit
      6. +
    6. Faucibus porta lacus fringilla vel
      7. +
    7. Aenean sit amet erat nunc
      8. +
    8. Eget porttitor lorem
      9. +
    +
    +
    +<ol>
+  <li>...</li>
+</ol>
+
    + +

    Unstyled

    +

    A list of items with no list-style or additional left padding.

    +
    +
      +
    • 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
      • +
    +
    +
    +<ul class="unstyled">
+  <li>...</li>
+</ul>
+

    Description

    -

    <dl>

    -
    -
    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

    -

    <dl 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.
    -
    Felis euismod semper eget lacinia
    -
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    -
    +

    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.
    +
    +
    +
    +<dl>
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+
    + +

    Horizontal description

    +

    Make terms and descriptions in <dl> line up side-by-side.

    +
    +
    +
    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.
    +
    Felis euismod semper eget lacinia
    +
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    +
    +
    +
    +<dl class="dl-horizontal">
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+

    Heads up! @@ -1592,10 +1636,10 @@ For example, <code>section</code> should be wrapped as inline.

-- cgit v1.2.3