From f2e35bf7027e8274e28e46b41efb93f4c03184eb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 18 Aug 2013 01:23:45 -0700 Subject: docs layout and alignment refinement --- components.html | 477 ++++++++++++++++++++++++-------------------------------- 1 file changed, 208 insertions(+), 269 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index 32b0e2a6e..4d84bed33 100644 --- a/components.html +++ b/components.html @@ -7,293 +7,232 @@ base_url: "../" --- + + + -
+

Glyphicons

-

Available icon glyphs

-

180 icons in font format, provided by Glyphicons.

-
    -
  • glyphicon glyphicon-glass
    • -
  • glyphicon glyphicon-music
    • -
  • glyphicon glyphicon-search
    • -
  • glyphicon glyphicon-envelope
    • -
  • glyphicon glyphicon-heart
    • -
  • glyphicon glyphicon-star
    • -
  • glyphicon glyphicon-star-empty
    • -
  • glyphicon glyphicon-user
    • -
  • glyphicon glyphicon-film
    • -
  • glyphicon glyphicon-th-large
    • -
  • glyphicon glyphicon-th
    • -
  • glyphicon glyphicon-th-list
    • -
  • glyphicon glyphicon-ok
    • -
  • glyphicon glyphicon-remove
    • -
  • glyphicon glyphicon-zoom-in
    • -
  • glyphicon glyphicon-zoom-out
    • -
  • glyphicon glyphicon-off
    • -
  • glyphicon glyphicon-signal
    • -
  • glyphicon glyphicon-cog
    • -
  • glyphicon glyphicon-trash
    • -
  • glyphicon glyphicon-home
    • -
  • glyphicon glyphicon-file
    • -
  • glyphicon glyphicon-time
    • -
  • glyphicon glyphicon-road
    • -
  • glyphicon glyphicon-download-alt
    • -
  • glyphicon glyphicon-download
    • -
  • glyphicon glyphicon-upload
    • -
  • glyphicon glyphicon-inbox
    • - -
  • glyphicon glyphicon-play-circle
    • -
  • glyphicon glyphicon-repeat
    • -
  • glyphicon glyphicon-refresh
    • -
  • glyphicon glyphicon-list-alt
    • -
  • glyphicon glyphicon-lock
    • -
  • glyphicon glyphicon-flag
    • -
  • glyphicon glyphicon-headphones
    • -
  • glyphicon glyphicon-volume-off
    • -
  • glyphicon glyphicon-volume-down
    • -
  • glyphicon glyphicon-volume-up
    • -
  • glyphicon glyphicon-qrcode
    • -
  • glyphicon glyphicon-barcode
    • -
  • glyphicon glyphicon-tag
    • -
  • glyphicon glyphicon-tags
    • -
  • glyphicon glyphicon-book
    • -
  • glyphicon glyphicon-bookmark
    • -
  • glyphicon glyphicon-print
    • -
  • glyphicon glyphicon-camera
    • -
  • glyphicon glyphicon-font
    • -
  • glyphicon glyphicon-bold
    • -
  • glyphicon glyphicon-italic
    • -
  • glyphicon glyphicon-text-height
    • -
  • glyphicon glyphicon-text-width
    • -
  • glyphicon glyphicon-align-left
    • -
  • glyphicon glyphicon-align-center
    • -
  • glyphicon glyphicon-align-right
    • -
  • glyphicon glyphicon-align-justify
    • -
  • glyphicon glyphicon-list
    • - -
  • glyphicon glyphicon-indent-left
    • -
  • glyphicon glyphicon-indent-right
    • -
  • glyphicon glyphicon-facetime-video
    • -
  • glyphicon glyphicon-picture
    • -
  • glyphicon glyphicon-pencil
    • -
  • glyphicon glyphicon-map-marker
    • -
  • glyphicon glyphicon-adjust
    • -
  • glyphicon glyphicon-tint
    • -
  • glyphicon glyphicon-edit
    • -
  • glyphicon glyphicon-share
    • -
  • glyphicon glyphicon-check
    • -
  • glyphicon glyphicon-move
    • -
  • glyphicon glyphicon-step-backward
    • -
  • glyphicon glyphicon-fast-backward
    • -
  • glyphicon glyphicon-backward
    • -
  • glyphicon glyphicon-play
    • -
  • glyphicon glyphicon-pause
    • -
  • glyphicon glyphicon-stop
    • -
  • glyphicon glyphicon-forward
    • -
  • glyphicon glyphicon-fast-forward
    • -
  • glyphicon glyphicon-step-forward
    • -
  • glyphicon glyphicon-eject
    • -
  • glyphicon glyphicon-chevron-left
    • -
  • glyphicon glyphicon-chevron-right
    • -
  • glyphicon glyphicon-plus-sign
    • -
  • glyphicon glyphicon-minus-sign
    • -
  • glyphicon glyphicon-remove-sign
    • -
  • glyphicon glyphicon-ok-sign
    • - -
  • glyphicon glyphicon-question-sign
    • -
  • glyphicon glyphicon-info-sign
    • -
  • glyphicon glyphicon-screenshot
    • -
  • glyphicon glyphicon-remove-circle
    • -
  • glyphicon glyphicon-ok-circle
    • -
  • glyphicon glyphicon-ban-circle
    • -
  • glyphicon glyphicon-arrow-left
    • -
  • glyphicon glyphicon-arrow-right
    • -
  • glyphicon glyphicon-arrow-up
    • -
  • glyphicon glyphicon-arrow-down
    • -
  • glyphicon glyphicon-share-alt
    • -
  • glyphicon glyphicon-resize-full
    • -
  • glyphicon glyphicon-resize-small
    • -
  • glyphicon glyphicon-plus
    • -
  • glyphicon glyphicon-minus
    • -
  • glyphicon glyphicon-asterisk
    • -
  • glyphicon glyphicon-exclamation-sign
    • -
  • glyphicon glyphicon-gift
    • -
  • glyphicon glyphicon-leaf
    • -
  • glyphicon glyphicon-fire
    • -
  • glyphicon glyphicon-eye-open
    • -
  • glyphicon glyphicon-eye-close
    • -
  • glyphicon glyphicon-warning-sign
    • -
  • glyphicon glyphicon-plane
    • -
  • glyphicon glyphicon-calendar
    • -
  • glyphicon glyphicon-random
    • -
  • glyphicon glyphicon-comment
    • -
  • glyphicon glyphicon-magnet
    • - -
  • glyphicon glyphicon-chevron-up
    • -
  • glyphicon glyphicon-chevron-down
    • -
  • glyphicon glyphicon-retweet
    • -
  • glyphicon glyphicon-shopping-cart
    • -
  • glyphicon glyphicon-folder-close
    • -
  • glyphicon glyphicon-folder-open
    • -
  • glyphicon glyphicon-resize-vertical
    • -
  • glyphicon glyphicon-resize-horizontal
    • -
  • glyphicon glyphicon-hdd
    • -
  • glyphicon glyphicon-bullhorn
    • -
  • glyphicon glyphicon-bell
    • -
  • glyphicon glyphicon-certificate
    • -
  • glyphicon glyphicon-thumbs-up
    • -
  • glyphicon glyphicon-thumbs-down
    • -
  • glyphicon glyphicon-hand-right
    • -
  • glyphicon glyphicon-hand-left
    • -
  • glyphicon glyphicon-hand-up
    • -
  • glyphicon glyphicon-hand-down
    • -
  • glyphicon glyphicon-circle-arrow-right
    • -
  • glyphicon glyphicon-circle-arrow-left
    • -
  • glyphicon glyphicon-circle-arrow-up
    • -
  • glyphicon glyphicon-circle-arrow-down
    • -
  • glyphicon glyphicon-globe
    • -
  • glyphicon glyphicon-wrench
    • -
  • glyphicon glyphicon-tasks
    • -
  • glyphicon glyphicon-filter
    • -
  • glyphicon glyphicon-briefcase
    • -
  • glyphicon glyphicon-fullscreen
    • +

    Available glyphs

    +

    Includes 180 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to Glyphicons whenever possible.

    +
      +
    • .glyphicon .glyphicon-glass
      • +
    • .glyphicon .glyphicon-music
      • +
    • .glyphicon .glyphicon-search
      • +
    • .glyphicon .glyphicon-envelope
      • +
    • .glyphicon .glyphicon-heart
      • +
    • .glyphicon .glyphicon-star
      • +
    • .glyphicon .glyphicon-star-empty
      • +
    • .glyphicon .glyphicon-user
      • +
    • .glyphicon .glyphicon-film
      • +
    • .glyphicon .glyphicon-th-large
      • +
    • .glyphicon .glyphicon-th
      • +
    • .glyphicon .glyphicon-th-list
      • +
    • .glyphicon .glyphicon-ok
      • +
    • .glyphicon .glyphicon-remove
      • +
    • .glyphicon .glyphicon-zoom-in
      • +
    • .glyphicon .glyphicon-zoom-out
      • +
    • .glyphicon .glyphicon-off
      • +
    • .glyphicon .glyphicon-signal
      • +
    • .glyphicon .glyphicon-cog
      • +
    • .glyphicon .glyphicon-trash
      • +
    • .glyphicon .glyphicon-home
      • +
    • .glyphicon .glyphicon-file
      • +
    • .glyphicon .glyphicon-time
      • +
    • .glyphicon .glyphicon-road
      • +
    • .glyphicon .glyphicon-download-alt
      • +
    • .glyphicon .glyphicon-download
      • +
    • .glyphicon .glyphicon-upload
      • +
    • .glyphicon .glyphicon-inbox
      • + +
    • .glyphicon .glyphicon-play-circle
      • +
    • .glyphicon .glyphicon-repeat
      • +
    • .glyphicon .glyphicon-refresh
      • +
    • .glyphicon .glyphicon-list-alt
      • +
    • .glyphicon .glyphicon-lock
      • +
    • .glyphicon .glyphicon-flag
      • +
    • .glyphicon .glyphicon-headphones
      • +
    • .glyphicon .glyphicon-volume-off
      • +
    • .glyphicon .glyphicon-volume-down
      • +
    • .glyphicon .glyphicon-volume-up
      • +
    • .glyphicon .glyphicon-qrcode
      • +
    • .glyphicon .glyphicon-barcode
      • +
    • .glyphicon .glyphicon-tag
      • +
    • .glyphicon .glyphicon-tags
      • +
    • .glyphicon .glyphicon-book
      • +
    • .glyphicon .glyphicon-bookmark
      • +
    • .glyphicon .glyphicon-print
      • +
    • .glyphicon .glyphicon-camera
      • +
    • .glyphicon .glyphicon-font
      • +
    • .glyphicon .glyphicon-bold
      • +
    • .glyphicon .glyphicon-italic
      • +
    • .glyphicon .glyphicon-text-height
      • +
    • .glyphicon .glyphicon-text-width
      • +
    • .glyphicon .glyphicon-align-left
      • +
    • .glyphicon .glyphicon-align-center
      • +
    • .glyphicon .glyphicon-align-right
      • +
    • .glyphicon .glyphicon-align-justify
      • +
    • .glyphicon .glyphicon-list
      • + +
    • .glyphicon .glyphicon-indent-left
      • +
    • .glyphicon .glyphicon-indent-right
      • +
    • .glyphicon .glyphicon-facetime-video
      • +
    • .glyphicon .glyphicon-picture
      • +
    • .glyphicon .glyphicon-pencil
      • +
    • .glyphicon .glyphicon-map-marker
      • +
    • .glyphicon .glyphicon-adjust
      • +
    • .glyphicon .glyphicon-tint
      • +
    • .glyphicon .glyphicon-edit
      • +
    • .glyphicon .glyphicon-share
      • +
    • .glyphicon .glyphicon-check
      • +
    • .glyphicon .glyphicon-move
      • +
    • .glyphicon .glyphicon-step-backward
      • +
    • .glyphicon .glyphicon-fast-backward
      • +
    • .glyphicon .glyphicon-backward
      • +
    • .glyphicon .glyphicon-play
      • +
    • .glyphicon .glyphicon-pause
      • +
    • .glyphicon .glyphicon-stop
      • +
    • .glyphicon .glyphicon-forward
      • +
    • .glyphicon .glyphicon-fast-forward
      • +
    • .glyphicon .glyphicon-step-forward
      • +
    • .glyphicon .glyphicon-eject
      • +
    • .glyphicon .glyphicon-chevron-left
      • +
    • .glyphicon .glyphicon-chevron-right
      • +
    • .glyphicon .glyphicon-plus-sign
      • +
    • .glyphicon .glyphicon-minus-sign
      • +
    • .glyphicon .glyphicon-remove-sign
      • +
    • .glyphicon .glyphicon-ok-sign
      • + +
    • .glyphicon .glyphicon-question-sign
      • +
    • .glyphicon .glyphicon-info-sign
      • +
    • .glyphicon .glyphicon-screenshot
      • +
    • .glyphicon .glyphicon-remove-circle
      • +
    • .glyphicon .glyphicon-ok-circle
      • +
    • .glyphicon .glyphicon-ban-circle
      • +
    • .glyphicon .glyphicon-arrow-left
      • +
    • .glyphicon .glyphicon-arrow-right
      • +
    • .glyphicon .glyphicon-arrow-up
      • +
    • .glyphicon .glyphicon-arrow-down
      • +
    • .glyphicon .glyphicon-share-alt
      • +
    • .glyphicon .glyphicon-resize-full
      • +
    • .glyphicon .glyphicon-resize-small
      • +
    • .glyphicon .glyphicon-plus
      • +
    • .glyphicon .glyphicon-minus
      • +
    • .glyphicon .glyphicon-asterisk
      • +
    • .glyphicon .glyphicon-exclamation-sign
      • +
    • .glyphicon .glyphicon-gift
      • +
    • .glyphicon .glyphicon-leaf
      • +
    • .glyphicon .glyphicon-fire
      • +
    • .glyphicon .glyphicon-eye-open
      • +
    • .glyphicon .glyphicon-eye-close
      • +
    • .glyphicon .glyphicon-warning-sign
      • +
    • .glyphicon .glyphicon-plane
      • +
    • .glyphicon .glyphicon-calendar
      • +
    • .glyphicon .glyphicon-random
      • +
    • .glyphicon .glyphicon-comment
      • +
    • .glyphicon .glyphicon-magnet
      • + +
    • .glyphicon .glyphicon-chevron-up
      • +
    • .glyphicon .glyphicon-chevron-down
      • +
    • .glyphicon .glyphicon-retweet
      • +
    • .glyphicon .glyphicon-shopping-cart
      • +
    • .glyphicon .glyphicon-folder-close
      • +
    • .glyphicon .glyphicon-folder-open
      • +
    • .glyphicon .glyphicon-resize-vertical
      • +
    • .glyphicon .glyphicon-resize-horizontal
      • +
    • .glyphicon .glyphicon-hdd
      • +
    • .glyphicon .glyphicon-bullhorn
      • +
    • .glyphicon .glyphicon-bell
      • +
    • .glyphicon .glyphicon-certificate
      • +
    • .glyphicon .glyphicon-thumbs-up
      • +
    • .glyphicon .glyphicon-thumbs-down
      • +
    • .glyphicon .glyphicon-hand-right
      • +
    • .glyphicon .glyphicon-hand-left
      • +
    • .glyphicon .glyphicon-hand-up
      • +
    • .glyphicon .glyphicon-hand-down
      • +
    • .glyphicon .glyphicon-circle-arrow-right
      • +
    • .glyphicon .glyphicon-circle-arrow-left
      • +
    • .glyphicon .glyphicon-circle-arrow-up
      • +
    • .glyphicon .glyphicon-circle-arrow-down
      • +
    • .glyphicon .glyphicon-globe
      • +
    • .glyphicon .glyphicon-wrench
      • +
    • .glyphicon .glyphicon-tasks
      • +
    • .glyphicon .glyphicon-filter
      • +
    • .glyphicon .glyphicon-briefcase
      • +
    • .glyphicon .glyphicon-fullscreen
    -

    Glyphicons attribution

    -

    Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

    - -
    - - -

    How to use

    -

    All icons require an <i> tag with a unique class, prefixed with glyphicon glyphicon-. To use, place the following code just about anywhere:

    -
    -<i class="glyphicon glyphicon-search"></i>
-
    -

    There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

    -
    -<i class="glyphicon glyphicon-search glyphicon glyphicon-white"></i>
-
    -

    - Heads up! - When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing. -

    +

    How to use

    +

    For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

    +{% highlight html %} + +{% endhighlight %} -

    Icon examples

    +

    Examples

    Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

    - -

    Buttons

    - -
    Button group in a button toolbar
    -
    +
    - - - - +
    -
    -
    -<div class="btn-toolbar">
-  <div class="btn-group">
-    <a class="btn" href="#"><i class="glyphicon glyphicon-align-left"></i></a>
-    <a class="btn" href="#"><i class="glyphicon glyphicon-align-center"></i></a>
-    <a class="btn" href="#"><i class="glyphicon glyphicon-align-right"></i></a>
-    <a class="btn" href="#"><i class="glyphicon glyphicon-align-justify"></i></a>
-  </div>
-</div>
-
    - -
    Dropdown in a button group
    -
    -
    - User - - -
    -
    -
    -<div class="btn-group">
-  <a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user glyphicon glyphicon-white"></i> User</a>
-  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-  <ul class="dropdown-menu">
-    <li><a href="#"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
-    <li><a href="#"><i class="glyphicon glyphicon-trash"></i> Delete</a></li>
-    <li><a href="#"><i class="glyphicon glyphicon-ban-circle"></i> Ban</a></li>
-    <li class="divider"></li>
-    <li><a href="#"><i class="i"></i> Make admin</a></li>
-  </ul>
-</div>
-
    - -
    Button sizes
    -
    - Star - Star - Star -
    -
    -<a class="btn btn-large" href="#"><i class="glyphicon glyphicon-star"></i> Star</a>
-<a class="btn btn-small" href="#"><i class="glyphicon glyphicon-star"></i> Star</a>
-<a class="btn btn-mini" href="#"><i class="glyphicon glyphicon-star"></i> Star</a>
-
    - -

    Navigation

    -
    -
    - +
    +
    -
    -<ul class="nav nav-list">
-  <li class="active"><a href="#"><i class="glyphicon glyphicon-home glyphicon glyphicon-white"></i> Home</a></li>
-  <li><a href="#"><i class="glyphicon glyphicon-book"></i> Library</a></li>
-  <li><a href="#"><i class="glyphicon glyphicon-pencil"></i> Applications</a></li>
-  <li><a href="#"><i class="i"></i> Misc</a></li>
-</ul>
-
    - -

    Form fields

    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -<div class="control-group">
-  <label class="control-label" for="inputIcon">Email address</label>
-  <div class="controls">
-    <div class="input-prepend">
-      <span class="add-on"><i class="glyphicon glyphicon-envelope"></i></span>
-      <input class="span2" id="inputIcon" type="text">
-    </div>
-  </div>
-</div>
-
    +{% highlight html %} +
    -- cgit v1.2.3