diff options
Diffstat (limited to 'components.html')
| -rw-r--r-- | components.html | 1234 |
1 files changed, 958 insertions, 276 deletions
diff --git a/components.html b/components.html index 26756f481..a335c06c9 100644 --- a/components.html +++ b/components.html @@ -16,212 +16,818 @@ base_url: "../" <h2 id="glyphicons-glyphs">Available glyphs</h2> <p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> 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 <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p> - <ul class="bs-glyphicons"> - <li><span class="glyphicon glyphicon-adjust"></span> .glyphicon .glyphicon-adjust</li> - <li><span class="glyphicon glyphicon-align-center"></span> .glyphicon .glyphicon-align-center</li> - <li><span class="glyphicon glyphicon-align-justify"></span> .glyphicon .glyphicon-align-justify</li> - <li><span class="glyphicon glyphicon-align-left"></span> .glyphicon .glyphicon-align-left</li> - <li><span class="glyphicon glyphicon-align-right"></span> .glyphicon .glyphicon-align-right</li> - <li><span class="glyphicon glyphicon-arrow-down"></span> .glyphicon .glyphicon-arrow-down</li> - <li><span class="glyphicon glyphicon-arrow-left"></span> .glyphicon .glyphicon-arrow-left</li> - <li><span class="glyphicon glyphicon-arrow-right"></span> .glyphicon .glyphicon-arrow-right</li> - <li><span class="glyphicon glyphicon-arrow-up"></span> .glyphicon .glyphicon-arrow-up</li> - <li><span class="glyphicon glyphicon-asterisk"></span> .glyphicon .glyphicon-asterisk</li> - <li><span class="glyphicon glyphicon-backward"></span> .glyphicon .glyphicon-backward</li> - <li><span class="glyphicon glyphicon-ban-circle"></span> .glyphicon .glyphicon-ban-circle</li> - <li><span class="glyphicon glyphicon-barcode"></span> .glyphicon .glyphicon-barcode</li> - <li><span class="glyphicon glyphicon-bell"></span> .glyphicon .glyphicon-bell</li> - <li><span class="glyphicon glyphicon-bold"></span> .glyphicon .glyphicon-bold</li> - <li><span class="glyphicon glyphicon-book"></span> .glyphicon .glyphicon-book</li> - <li><span class="glyphicon glyphicon-bookmark"></span> .glyphicon .glyphicon-bookmark</li> - <li><span class="glyphicon glyphicon-briefcase"></span> .glyphicon .glyphicon-briefcase</li> - <li><span class="glyphicon glyphicon-bullhorn"></span> .glyphicon .glyphicon-bullhorn</li> - <li><span class="glyphicon glyphicon-calendar"></span> .glyphicon .glyphicon-calendar</li> - <li><span class="glyphicon glyphicon-camera"></span> .glyphicon .glyphicon-camera</li> - <li><span class="glyphicon glyphicon-certificate"></span> .glyphicon .glyphicon-certificate</li> - <li><span class="glyphicon glyphicon-check"></span> .glyphicon .glyphicon-check</li> - <li><span class="glyphicon glyphicon-chevron-down"></span> .glyphicon .glyphicon-chevron-down</li> - <li><span class="glyphicon glyphicon-chevron-left"></span> .glyphicon .glyphicon-chevron-left</li> - <li><span class="glyphicon glyphicon-chevron-right"></span> .glyphicon .glyphicon-chevron-right</li> - <li><span class="glyphicon glyphicon-chevron-up"></span> .glyphicon .glyphicon-chevron-up</li> - <li><span class="glyphicon glyphicon-circle-arrow-down"></span> .glyphicon .glyphicon-circle-arrow-down</li> - <li><span class="glyphicon glyphicon-circle-arrow-left"></span> .glyphicon .glyphicon-circle-arrow-left</li> - <li><span class="glyphicon glyphicon-circle-arrow-right"></span> .glyphicon .glyphicon-circle-arrow-right</li> - <li><span class="glyphicon glyphicon-circle-arrow-up"></span> .glyphicon .glyphicon-circle-arrow-up</li> - <li><span class="glyphicon glyphicon-cloud"></span> .glyphicon .glyphicon-cloud</li> - <li><span class="glyphicon glyphicon-cloud-download"></span> .glyphicon .glyphicon-cloud-download</li> - <li><span class="glyphicon glyphicon-cloud-upload"></span> .glyphicon .glyphicon-cloud-upload</li> - <li><span class="glyphicon glyphicon-cog"></span> .glyphicon .glyphicon-cog</li> - <li><span class="glyphicon glyphicon-collapse-down"></span> .glyphicon .glyphicon-collapse-down</li> - <li><span class="glyphicon glyphicon-collapse-up"></span> .glyphicon .glyphicon-collapse-up</li> - <li><span class="glyphicon glyphicon-comment"></span> .glyphicon .glyphicon-comment</li> - <li><span class="glyphicon glyphicon-compressed"></span> .glyphicon .glyphicon-compressed</li> - <li><span class="glyphicon glyphicon-copyright-mark"></span> .glyphicon .glyphicon-copyright-mark</li> - <li><span class="glyphicon glyphicon-credit-card"></span> .glyphicon .glyphicon-credit-card</li> - <li><span class="glyphicon glyphicon-cutlery"></span> .glyphicon .glyphicon-cutlery</li> - <li><span class="glyphicon glyphicon-dashboard"></span> .glyphicon .glyphicon-dashboard</li> - <li><span class="glyphicon glyphicon-download"></span> .glyphicon .glyphicon-download</li> - <li><span class="glyphicon glyphicon-download-alt"></span> .glyphicon .glyphicon-download-alt</li> - <li><span class="glyphicon glyphicon-earphone"></span> .glyphicon .glyphicon-earphone</li> - <li><span class="glyphicon glyphicon-edit"></span> .glyphicon .glyphicon-edit</li> - <li><span class="glyphicon glyphicon-eject"></span> .glyphicon .glyphicon-eject</li> - <li><span class="glyphicon glyphicon-envelope"></span> .glyphicon .glyphicon-envelope</li> - <li><span class="glyphicon glyphicon-euro"></span> .glyphicon .glyphicon-euro</li> - <li><span class="glyphicon glyphicon-exclamation-sign"></span> .glyphicon .glyphicon-exclamation-sign</li> - <li><span class="glyphicon glyphicon-expand"></span> .glyphicon .glyphicon-expand</li> - <li><span class="glyphicon glyphicon-export"></span> .glyphicon .glyphicon-export</li> - <li><span class="glyphicon glyphicon-eye-close"></span> .glyphicon .glyphicon-eye-close</li> - <li><span class="glyphicon glyphicon-eye-open"></span> .glyphicon .glyphicon-eye-open</li> - <li><span class="glyphicon glyphicon-facetime-video"></span> .glyphicon .glyphicon-facetime-video</li> - <li><span class="glyphicon glyphicon-fast-backward"></span> .glyphicon .glyphicon-fast-backward</li> - <li><span class="glyphicon glyphicon-fast-forward"></span> .glyphicon .glyphicon-fast-forward</li> - <li><span class="glyphicon glyphicon-file"></span> .glyphicon .glyphicon-file</li> - <li><span class="glyphicon glyphicon-film"></span> .glyphicon .glyphicon-film</li> - <li><span class="glyphicon glyphicon-filter"></span> .glyphicon .glyphicon-filter</li> - <li><span class="glyphicon glyphicon-fire"></span> .glyphicon .glyphicon-fire</li> - <li><span class="glyphicon glyphicon-flag"></span> .glyphicon .glyphicon-flag</li> - <li><span class="glyphicon glyphicon-flash"></span> .glyphicon .glyphicon-flash</li> - <li><span class="glyphicon glyphicon-floppy-disk"></span> .glyphicon .glyphicon-floppy-disk</li> - <li><span class="glyphicon glyphicon-floppy-open"></span> .glyphicon .glyphicon-floppy-open</li> - <li><span class="glyphicon glyphicon-floppy-remove"></span> .glyphicon .glyphicon-floppy-remove</li> - <li><span class="glyphicon glyphicon-floppy-save"></span> .glyphicon .glyphicon-floppy-save</li> - <li><span class="glyphicon glyphicon-floppy-saved"></span> .glyphicon .glyphicon-floppy-saved</li> - <li><span class="glyphicon glyphicon-folder-close"></span> .glyphicon .glyphicon-folder-close</li> - <li><span class="glyphicon glyphicon-folder-open"></span> .glyphicon .glyphicon-folder-open</li> - <li><span class="glyphicon glyphicon-font"></span> .glyphicon .glyphicon-font</li> - <li><span class="glyphicon glyphicon-forward"></span> .glyphicon .glyphicon-forward</li> - <li><span class="glyphicon glyphicon-fullscreen"></span> .glyphicon .glyphicon-fullscreen</li> - <li><span class="glyphicon glyphicon-gbp"></span> .glyphicon .glyphicon-gbp</li> - <li><span class="glyphicon glyphicon-gift"></span> .glyphicon .glyphicon-gift</li> - <li><span class="glyphicon glyphicon-glass"></span> .glyphicon .glyphicon-glass</li> - <li><span class="glyphicon glyphicon-globe"></span> .glyphicon .glyphicon-globe</li> - <li><span class="glyphicon glyphicon-hand-down"></span> .glyphicon .glyphicon-hand-down</li> - <li><span class="glyphicon glyphicon-hand-left"></span> .glyphicon .glyphicon-hand-left</li> - <li><span class="glyphicon glyphicon-hand-right"></span> .glyphicon .glyphicon-hand-right</li> - <li><span class="glyphicon glyphicon-hand-up"></span> .glyphicon .glyphicon-hand-up</li> - <li><span class="glyphicon glyphicon-hd-video"></span> .glyphicon .glyphicon-hd-video</li> - <li><span class="glyphicon glyphicon-hdd"></span> .glyphicon .glyphicon-hdd</li> - <li><span class="glyphicon glyphicon-header"></span> .glyphicon .glyphicon-header</li> - <li><span class="glyphicon glyphicon-headphones"></span> .glyphicon .glyphicon-headphones</li> - <li><span class="glyphicon glyphicon-heart"></span> .glyphicon .glyphicon-heart</li> - <li><span class="glyphicon glyphicon-heart-empty"></span> .glyphicon .glyphicon-heart-empty</li> - <li><span class="glyphicon glyphicon-home"></span> .glyphicon .glyphicon-home</li> - <li><span class="glyphicon glyphicon-import"></span> .glyphicon .glyphicon-import</li> - <li><span class="glyphicon glyphicon-inbox"></span> .glyphicon .glyphicon-inbox</li> - <li><span class="glyphicon glyphicon-indent-left"></span> .glyphicon .glyphicon-indent-left</li> - <li><span class="glyphicon glyphicon-indent-right"></span> .glyphicon .glyphicon-indent-right</li> - <li><span class="glyphicon glyphicon-info-sign"></span> .glyphicon .glyphicon-info-sign</li> - <li><span class="glyphicon glyphicon-italic"></span> .glyphicon .glyphicon-italic</li> - <li><span class="glyphicon glyphicon-leaf"></span> .glyphicon .glyphicon-leaf</li> - <li><span class="glyphicon glyphicon-link"></span> .glyphicon .glyphicon-link</li> - <li><span class="glyphicon glyphicon-list"></span> .glyphicon .glyphicon-list</li> - <li><span class="glyphicon glyphicon-list-alt"></span> .glyphicon .glyphicon-list-alt</li> - <li><span class="glyphicon glyphicon-lock"></span> .glyphicon .glyphicon-lock</li> - <li><span class="glyphicon glyphicon-log-in"></span> .glyphicon .glyphicon-log-in</li> - <li><span class="glyphicon glyphicon-log-out"></span> .glyphicon .glyphicon-log-out</li> - <li><span class="glyphicon glyphicon-magnet"></span> .glyphicon .glyphicon-magnet</li> - <li><span class="glyphicon glyphicon-map-marker"></span> .glyphicon .glyphicon-map-marker</li> - <li><span class="glyphicon glyphicon-minus"></span> .glyphicon .glyphicon-minus</li> - <li><span class="glyphicon glyphicon-minus-sign"></span> .glyphicon .glyphicon-minus-sign</li> - <li><span class="glyphicon glyphicon-move"></span> .glyphicon .glyphicon-move</li> - <li><span class="glyphicon glyphicon-music"></span> .glyphicon .glyphicon-music</li> - <li><span class="glyphicon glyphicon-new-window"></span> .glyphicon .glyphicon-new-window</li> - <li><span class="glyphicon glyphicon-off"></span> .glyphicon .glyphicon-off</li> - <li><span class="glyphicon glyphicon-ok"></span> .glyphicon .glyphicon-ok</li> - <li><span class="glyphicon glyphicon-ok-circle"></span> .glyphicon .glyphicon-ok-circle</li> - <li><span class="glyphicon glyphicon-ok-sign"></span> .glyphicon .glyphicon-ok-sign</li> - <li><span class="glyphicon glyphicon-open"></span> .glyphicon .glyphicon-open</li> - <li><span class="glyphicon glyphicon-paperclip"></span> .glyphicon .glyphicon-paperclip</li> - <li><span class="glyphicon glyphicon-pause"></span> .glyphicon .glyphicon-pause</li> - <li><span class="glyphicon glyphicon-pencil"></span> .glyphicon .glyphicon-pencil</li> - <li><span class="glyphicon glyphicon-phone"></span> .glyphicon .glyphicon-phone</li> - <li><span class="glyphicon glyphicon-phone-alt"></span> .glyphicon .glyphicon-phone-alt</li> - <li><span class="glyphicon glyphicon-picture"></span> .glyphicon .glyphicon-picture</li> - <li><span class="glyphicon glyphicon-plane"></span> .glyphicon .glyphicon-plane</li> - <li><span class="glyphicon glyphicon-play"></span> .glyphicon .glyphicon-play</li> - <li><span class="glyphicon glyphicon-play-circle"></span> .glyphicon .glyphicon-play-circle</li> - <li><span class="glyphicon glyphicon-plus"></span> .glyphicon .glyphicon-plus</li> - <li><span class="glyphicon glyphicon-plus-sign"></span> .glyphicon .glyphicon-plus-sign</li> - <li><span class="glyphicon glyphicon-print"></span> .glyphicon .glyphicon-print</li> - <li><span class="glyphicon glyphicon-pushpin"></span> .glyphicon .glyphicon-pushpin</li> - <li><span class="glyphicon glyphicon-qrcode"></span> .glyphicon .glyphicon-qrcode</li> - <li><span class="glyphicon glyphicon-question-sign"></span> .glyphicon .glyphicon-question-sign</li> - <li><span class="glyphicon glyphicon-random"></span> .glyphicon .glyphicon-random</li> - <li><span class="glyphicon glyphicon-record"></span> .glyphicon .glyphicon-record</li> - <li><span class="glyphicon glyphicon-refresh"></span> .glyphicon .glyphicon-refresh</li> - <li><span class="glyphicon glyphicon-registration-mark"></span> .glyphicon .glyphicon-registration-mark</li> - <li><span class="glyphicon glyphicon-remove"></span> .glyphicon .glyphicon-remove</li> - <li><span class="glyphicon glyphicon-remove-circle"></span> .glyphicon .glyphicon-remove-circle</li> - <li><span class="glyphicon glyphicon-remove-sign"></span> .glyphicon .glyphicon-remove-sign</li> - <li><span class="glyphicon glyphicon-repeat"></span> .glyphicon .glyphicon-repeat</li> - <li><span class="glyphicon glyphicon-resize-full"></span> .glyphicon .glyphicon-resize-full</li> - <li><span class="glyphicon glyphicon-resize-horizontal"></span> .glyphicon .glyphicon-resize-horizontal</li> - <li><span class="glyphicon glyphicon-resize-small"></span> .glyphicon .glyphicon-resize-small</li> - <li><span class="glyphicon glyphicon-resize-vertical"></span> .glyphicon .glyphicon-resize-vertical</li> - <li><span class="glyphicon glyphicon-retweet"></span> .glyphicon .glyphicon-retweet</li> - <li><span class="glyphicon glyphicon-road"></span> .glyphicon .glyphicon-road</li> - <li><span class="glyphicon glyphicon-save"></span> .glyphicon .glyphicon-save</li> - <li><span class="glyphicon glyphicon-saved"></span> .glyphicon .glyphicon-saved</li> - <li><span class="glyphicon glyphicon-screenshot"></span> .glyphicon .glyphicon-screenshot</li> - <li><span class="glyphicon glyphicon-sd-video"></span> .glyphicon .glyphicon-sd-video</li> - <li><span class="glyphicon glyphicon-search"></span> .glyphicon .glyphicon-search</li> - <li><span class="glyphicon glyphicon-send"></span> .glyphicon .glyphicon-send</li> - <li><span class="glyphicon glyphicon-share"></span> .glyphicon .glyphicon-share</li> - <li><span class="glyphicon glyphicon-share-alt"></span> .glyphicon .glyphicon-share-alt</li> - <li><span class="glyphicon glyphicon-shopping-cart"></span> .glyphicon .glyphicon-shopping-cart</li> - <li><span class="glyphicon glyphicon-signal"></span> .glyphicon .glyphicon-signal</li> - <li><span class="glyphicon glyphicon-sort"></span> .glyphicon .glyphicon-sort</li> - <li><span class="glyphicon glyphicon-sort-by-alphabet"></span> .glyphicon .glyphicon-sort-by-alphabet</li> - <li><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span> .glyphicon .glyphicon-sort-by-alphabet-alt</li> - <li><span class="glyphicon glyphicon-sort-by-attributes"></span> .glyphicon .glyphicon-sort-by-attributes</li> - <li><span class="glyphicon glyphicon-sort-by-attributes-alt"></span> .glyphicon .glyphicon-sort-by-attributes-alt</li> - <li><span class="glyphicon glyphicon-sort-by-order"></span> .glyphicon .glyphicon-sort-by-order</li> - <li><span class="glyphicon glyphicon-sort-by-order-alt"></span> .glyphicon .glyphicon-sort-by-order-alt</li> - <li><span class="glyphicon glyphicon-sound-5-1"></span> .glyphicon .glyphicon-sound-5-1</li> - <li><span class="glyphicon glyphicon-sound-6-1"></span> .glyphicon .glyphicon-sound-6-1</li> - <li><span class="glyphicon glyphicon-sound-7-1"></span> .glyphicon .glyphicon-sound-7-1</li> - <li><span class="glyphicon glyphicon-sound-dolby"></span> .glyphicon .glyphicon-sound-dolby</li> - <li><span class="glyphicon glyphicon-sound-stereo"></span> .glyphicon .glyphicon-sound-stereo</li> - <li><span class="glyphicon glyphicon-star"></span> .glyphicon .glyphicon-star</li> - <li><span class="glyphicon glyphicon-star-empty"></span> .glyphicon .glyphicon-star-empty</li> - <li><span class="glyphicon glyphicon-stats"></span> .glyphicon .glyphicon-stats</li> - <li><span class="glyphicon glyphicon-step-backward"></span> .glyphicon .glyphicon-step-backward</li> - <li><span class="glyphicon glyphicon-step-forward"></span> .glyphicon .glyphicon-step-forward</li> - <li><span class="glyphicon glyphicon-stop"></span> .glyphicon .glyphicon-stop</li> - <li><span class="glyphicon glyphicon-subtitles"></span> .glyphicon .glyphicon-subtitles</li> - <li><span class="glyphicon glyphicon-tag"></span> .glyphicon .glyphicon-tag</li> - <li><span class="glyphicon glyphicon-tags"></span> .glyphicon .glyphicon-tags</li> - <li><span class="glyphicon glyphicon-tasks"></span> .glyphicon .glyphicon-tasks</li> - <li><span class="glyphicon glyphicon-text-height"></span> .glyphicon .glyphicon-text-height</li> - <li><span class="glyphicon glyphicon-text-width"></span> .glyphicon .glyphicon-text-width</li> - <li><span class="glyphicon glyphicon-th"></span> .glyphicon .glyphicon-th</li> - <li><span class="glyphicon glyphicon-th-large"></span> .glyphicon .glyphicon-th-large</li> - <li><span class="glyphicon glyphicon-th-list"></span> .glyphicon .glyphicon-th-list</li> - <li><span class="glyphicon glyphicon-thumbs-down"></span> .glyphicon .glyphicon-thumbs-down</li> - <li><span class="glyphicon glyphicon-thumbs-up"></span> .glyphicon .glyphicon-thumbs-up</li> - <li><span class="glyphicon glyphicon-time"></span> .glyphicon .glyphicon-time</li> - <li><span class="glyphicon glyphicon-tint"></span> .glyphicon .glyphicon-tint</li> - <li><span class="glyphicon glyphicon-tower"></span> .glyphicon .glyphicon-tower</li> - <li><span class="glyphicon glyphicon-transfer"></span> .glyphicon .glyphicon-transfer</li> - <li><span class="glyphicon glyphicon-trash"></span> .glyphicon .glyphicon-trash</li> - <li><span class="glyphicon glyphicon-tree-conifer"></span> .glyphicon .glyphicon-tree-conifer</li> - <li><span class="glyphicon glyphicon-tree-deciduous"></span> .glyphicon .glyphicon-tree-deciduous</li> - <li><span class="glyphicon glyphicon-unchecked"></span> .glyphicon .glyphicon-unchecked</li> - <li><span class="glyphicon glyphicon-upload"></span> .glyphicon .glyphicon-upload</li> - <li><span class="glyphicon glyphicon-usd"></span> .glyphicon .glyphicon-usd</li> - <li><span class="glyphicon glyphicon-user"></span> .glyphicon .glyphicon-user</li> - <li><span class="glyphicon glyphicon-volume-down"></span> .glyphicon .glyphicon-volume-down</li> - <li><span class="glyphicon glyphicon-volume-off"></span> .glyphicon .glyphicon-volume-off</li> - <li><span class="glyphicon glyphicon-volume-up"></span> .glyphicon .glyphicon-volume-up</li> - <li><span class="glyphicon glyphicon-warning-sign"></span> .glyphicon .glyphicon-warning-sign</li> - <li><span class="glyphicon glyphicon-wrench"></span> .glyphicon .glyphicon-wrench</li> - <li><span class="glyphicon glyphicon-zoom-in"></span> .glyphicon .glyphicon-zoom-in</li> - <li><span class="glyphicon glyphicon-zoom-out"></span> .glyphicon .glyphicon-zoom-out</li> - </ul> + <div class="bs-glyphicons"> + <ul class="bs-glyphicons-list"> + <li> + <span class="glyphicon glyphicon-adjust"></span> + <span class="glyphicon-class">glyphicon glyphicon-adjust</span> + </li> + <li> + <span class="glyphicon glyphicon-align-center"></span> + <span class="glyphicon-class">glyphicon glyphicon-align-center</span> + </li> + <li> + <span class="glyphicon glyphicon-align-justify"></span> + <span class="glyphicon-class">glyphicon glyphicon-align-justify</span> + </li> + <li> + <span class="glyphicon glyphicon-align-left"></span> + <span class="glyphicon-class">glyphicon glyphicon-align-left</span> + </li> + <li> + <span class="glyphicon glyphicon-align-right"></span> + <span class="glyphicon-class">glyphicon glyphicon-align-right</span> + </li> + <li> + <span class="glyphicon glyphicon-arrow-down"></span> + <span class="glyphicon-class">glyphicon glyphicon-arrow-down</span> + </li> + <li> + <span class="glyphicon glyphicon-arrow-left"></span> + <span class="glyphicon-class">glyphicon glyphicon-arrow-left</span> + </li> + <li> + <span class="glyphicon glyphicon-arrow-right"></span> + <span class="glyphicon-class">glyphicon glyphicon-arrow-right</span> + </li> + <li> + <span class="glyphicon glyphicon-arrow-up"></span> + <span class="glyphicon-class">glyphicon glyphicon-arrow-up</span> + </li> + <li> + <span class="glyphicon glyphicon-asterisk"></span> + <span class="glyphicon-class">glyphicon glyphicon-asterisk</span> + </li> + <li> + <span class="glyphicon glyphicon-backward"></span> + <span class="glyphicon-class">glyphicon glyphicon-backward</span> + </li> + <li> + <span class="glyphicon glyphicon-ban-circle"></span> + <span class="glyphicon-class">glyphicon glyphicon-ban-circle</span> + </li> + <li> + <span class="glyphicon glyphicon-barcode"></span> + <span class="glyphicon-class">glyphicon glyphicon-barcode</span> + </li> + <li> + <span class="glyphicon glyphicon-bell"></span> + <span class="glyphicon-class">glyphicon glyphicon-bell</span> + </li> + <li> + <span class="glyphicon glyphicon-bold"></span> + <span class="glyphicon-class">glyphicon glyphicon-bold</span> + </li> + <li> + <span class="glyphicon glyphicon-book"></span> + <span class="glyphicon-class">glyphicon glyphicon-book</span> + </li> + <li> + <span class="glyphicon glyphicon-bookmark"></span> + <span class="glyphicon-class">glyphicon glyphicon-bookmark</span> + </li> + <li> + <span class="glyphicon glyphicon-briefcase"></span> + <span class="glyphicon-class">glyphicon glyphicon-briefcase</span> + </li> + <li> + <span class="glyphicon glyphicon-bullhorn"></span> + <span class="glyphicon-class">glyphicon glyphicon-bullhorn</span> + </li> + <li> + <span class="glyphicon glyphicon-calendar"></span> + <span class="glyphicon-class">glyphicon glyphicon-calendar</span> + </li> + <li> + <span class="glyphicon glyphicon-camera"></span> + <span class="glyphicon-class">glyphicon glyphicon-camera</span> + </li> + <li> + <span class="glyphicon glyphicon-certificate"></span> + <span class="glyphicon-class">glyphicon glyphicon-certificate</span> + </li> + <li> + <span class="glyphicon glyphicon-check"></span> + <span class="glyphicon-class">glyphicon glyphicon-check</span> + </li> + <li> + <span class="glyphicon glyphicon-chevron-down"></span> + <span class="glyphicon-class">glyphicon glyphicon-chevron-down</span> + </li> + <li> + <span class="glyphicon glyphicon-chevron-left"></span> + <span class="glyphicon-class">glyphicon glyphicon-chevron-left</span> + </li> + <li> + <span class="glyphicon glyphicon-chevron-right"></span> + <span class="glyphicon-class">glyphicon glyphicon-chevron-right</span> + </li> + <li> + <span class="glyphicon glyphicon-chevron-up"></span> + <span class="glyphicon-class">glyphicon glyphicon-chevron-up</span> + </li> + <li> + <span class="glyphicon glyphicon-circle-arrow-down"></span> + <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-down</span> + </li> + <li> + <span class="glyphicon glyphicon-circle-arrow-left"></span> + <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-left</span> + </li> + <li> + <span class="glyphicon glyphicon-circle-arrow-right"></span> + <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-right</span> + </li> + <li> + <span class="glyphicon glyphicon-circle-arrow-up"></span> + <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-up</span> + </li> + <li> + <span class="glyphicon glyphicon-cloud"></span> + <span class="glyphicon-class">glyphicon glyphicon-cloud</span> + </li> + <li> + <span class="glyphicon glyphicon-cloud-download"></span> + <span class="glyphicon-class">glyphicon glyphicon-cloud-download</span> + </li> + <li> + <span class="glyphicon glyphicon-cloud-upload"></span> + <span class="glyphicon-class">glyphicon glyphicon-cloud-upload</span> + </li> + <li> + <span class="glyphicon glyphicon-cog"></span> + <span class="glyphicon-class">glyphicon glyphicon-cog</span> + </li> + <li> + <span class="glyphicon glyphicon-collapse-down"></span> + <span class="glyphicon-class">glyphicon glyphicon-collapse-down</span> + </li> + <li> + <span class="glyphicon glyphicon-collapse-up"></span> + <span class="glyphicon-class">glyphicon glyphicon-collapse-up</span> + </li> + <li> + <span class="glyphicon glyphicon-comment"></span> + <span class="glyphicon-class">glyphicon glyphicon-comment</span> + </li> + <li> + <span class="glyphicon glyphicon-compressed"></span> + <span class="glyphicon-class">glyphicon glyphicon-compressed</span> + </li> + <li> + <span class="glyphicon glyphicon-copyright-mark"></span> + <span class="glyphicon-class">glyphicon glyphicon-copyright-mark</span> + </li> + <li> + <span class="glyphicon glyphicon-credit-card"></span> + <span class="glyphicon-class">glyphicon glyphicon-credit-card</span> + </li> + <li> + <span class="glyphicon glyphicon-cutlery"></span> + <span class="glyphicon-class">glyphicon glyphicon-cutlery</span> + </li> + <li> + <span class="glyphicon glyphicon-dashboard"></span> + <span class="glyphicon-class">glyphicon glyphicon-dashboard</span> + </li> + <li> + <span class="glyphicon glyphicon-download"></span> + <span class="glyphicon-class">glyphicon glyphicon-download</span> + </li> + <li> + <span class="glyphicon glyphicon-download-alt"></span> + <span class="glyphicon-class">glyphicon glyphicon-download-alt</span> + </li> + <li> + <span class="glyphicon glyphicon-earphone"></span> + <span class="glyphicon-class">glyphicon glyphicon-earphone</span> + </li> + <li> + <span class="glyphicon glyphicon-edit"></span> + <span class="glyphicon-class">glyphicon glyphicon-edit</span> + </li> + <li> + <span class="glyphicon glyphicon-eject"></span> + <span class="glyphicon-class">glyphicon glyphicon-eject</span> + </li> + <li> + <span class="glyphicon glyphicon-envelope"></span> + <span class="glyphicon-class">glyphicon glyphicon-envelope</span> + </li> + <li> + <span class="glyphicon glyphicon-euro"></span> + <span class="glyphicon-class">glyphicon glyphicon-euro</span> + </li> + <li> + <span class="glyphicon glyphicon-exclamation-sign"></span> + <span class="glyphicon-class">glyphicon glyphicon-exclamation-sign</span> + </li> + <li> + <span class="glyphicon glyphicon-expand"></span> + <span class="glyphicon-class">glyphicon glyphicon-expand</span> + </li> + <li> + <span class="glyphicon glyphicon-export"></span> + <span class="glyphicon-class">glyphicon glyphicon-export</span> + </li> + <li> + <span class="glyphicon glyphicon-eye-close"></span> + <span class="glyphicon-class">glyphicon glyphicon-eye-close</span> + </li> + <li> + <span class="glyphicon glyphicon-eye-open"></span> + <span class="glyphicon-class">glyphicon glyphicon-eye-open</span> + </li> + <li> + <span class="glyphicon glyphicon-facetime-video"></span> + <span class="glyphicon-class">glyphicon glyphicon-facetime-video</span> + </li> + <li> + <span class="glyphicon glyphicon-fast-backward"></span> + <span class="glyphicon-class">glyphicon glyphicon-fast-backward</span> + </li> + <li> + <span class="glyphicon glyphicon-fast-forward"></span> + <span class="glyphicon-class">glyphicon glyphicon-fast-forward</span> + </li> + <li> + <span class="glyphicon glyphicon-file"></span> + <span class="glyphicon-class">glyphicon glyphicon-file</span> + </li> + <li> + <span class="glyphicon glyphicon-film"></span> + <span class="glyphicon-class">glyphicon glyphicon-film</span> + </li> + <li> + <span class="glyphicon glyphicon-filter"></span> + <span class="glyphicon-class">glyphicon glyphicon-filter</span> + </li> + <li> + <span class="glyphicon glyphicon-fire"></span> + <span class="glyphicon-class">glyphicon glyphicon-fire</span> + </li> + <li> + <span class="glyphicon glyphicon-flag"></span> + <span class="glyphicon-class">glyphicon glyphicon-flag</span> + </li> + <li> + <span class="glyphicon glyphicon-flash"></span> + <span class="glyphicon-class">glyphicon glyphicon-flash</span> + </li> + <li> + <span class="glyphicon glyphicon-floppy-disk"></span> + <span class="glyphicon-class">glyphicon glyphicon-floppy-disk</span> + </li> + <li> + <span class="glyphicon glyphicon-floppy-open"></span> + <span class="glyphicon-class">glyphicon glyphicon-floppy-open</span> + </li> + <li> + <span class="glyphicon glyphicon-floppy-remove"></span> + <span class="glyphicon-class">glyphicon glyphicon-floppy-remove</span> + </li> + <li> + <span class="glyphicon glyphicon-floppy-save"></span> + <span class="glyphicon-class">glyphicon glyphicon-floppy-save</span> + </li> + <li> + <span class="glyphicon glyphicon-floppy-saved"></span> + <span class="glyphicon-class">glyphicon glyphicon-floppy-saved</span> + </li> + <li> + <span class="glyphicon glyphicon-folder-close"></span> + <span class="glyphicon-class">glyphicon glyphicon-folder-close</span> + </li> + <li> + <span class="glyphicon glyphicon-folder-open"></span> + <span class="glyphicon-class">glyphicon glyphicon-folder-open</span> + </li> + <li> + <span class="glyphicon glyphicon-font"></span> + <span class="glyphicon-class">glyphicon glyphicon-font</span> + </li> + <li> + <span class="glyphicon glyphicon-forward"></span> + <span class="glyphicon-class">glyphicon glyphicon-forward</span> + </li> + <li> + <span class="glyphicon glyphicon-fullscreen"></span> + <span class="glyphicon-class">glyphicon glyphicon-fullscreen</span> + </li> + <li> + <span class="glyphicon glyphicon-gbp"></span> + <span class="glyphicon-class">glyphicon glyphicon-gbp</span> + </li> + <li> + <span class="glyphicon glyphicon-gift"></span> + <span class="glyphicon-class">glyphicon glyphicon-gift</span> + </li> + <li> + <span class="glyphicon glyphicon-glass"></span> + <span class="glyphicon-class">glyphicon glyphicon-glass</span> + </li> + <li> + <span class="glyphicon glyphicon-globe"></span> + <span class="glyphicon-class">glyphicon glyphicon-globe</span> + </li> + <li> + <span class="glyphicon glyphicon-hand-down"></span> + <span class="glyphicon-class">glyphicon glyphicon-hand-down</span> + </li> + <li> + <span class="glyphicon glyphicon-hand-left"></span> + <span class="glyphicon-class">glyphicon glyphicon-hand-left</span> + </li> + <li> + <span class="glyphicon glyphicon-hand-right"></span> + <span class="glyphicon-class">glyphicon glyphicon-hand-right</span> + </li> + <li> + <span class="glyphicon glyphicon-hand-up"></span> + <span class="glyphicon-class">glyphicon glyphicon-hand-up</span> + </li> + <li> + <span class="glyphicon glyphicon-hd-video"></span> + <span class="glyphicon-class">glyphicon glyphicon-hd-video</span> + </li> + <li> + <span class="glyphicon glyphicon-hdd"></span> + <span class="glyphicon-class">glyphicon glyphicon-hdd</span> + </li> + <li> + <span class="glyphicon glyphicon-header"></span> + <span class="glyphicon-class">glyphicon glyphicon-header</span> + </li> + <li> + <span class="glyphicon glyphicon-headphones"></span> + <span class="glyphicon-class">glyphicon glyphicon-headphones</span> + </li> + <li> + <span class="glyphicon glyphicon-heart"></span> + <span class="glyphicon-class">glyphicon glyphicon-heart</span> + </li> + <li> + <span class="glyphicon glyphicon-heart-empty"></span> + <span class="glyphicon-class">glyphicon glyphicon-heart-empty</span> + </li> + <li> + <span class="glyphicon glyphicon-home"></span> + <span class="glyphicon-class">glyphicon glyphicon-home</span> + </li> + <li> + <span class="glyphicon glyphicon-import"></span> + <span class="glyphicon-class">glyphicon glyphicon-import</span> + </li> + <li> + <span class="glyphicon glyphicon-inbox"></span> + <span class="glyphicon-class">glyphicon glyphicon-inbox</span> + </li> + <li> + <span class="glyphicon glyphicon-indent-left"></span> + <span class="glyphicon-class">glyphicon glyphicon-indent-left</span> + </li> + <li> + <span class="glyphicon glyphicon-indent-right"></span> + <span class="glyphicon-class">glyphicon glyphicon-indent-right</span> + </li> + <li> + <span class="glyphicon glyphicon-info-sign"></span> + <span class="glyphicon-class">glyphicon glyphicon-info-sign</span> + </li> + <li> + <span class="glyphicon glyphicon-italic"></span> + <span class="glyphicon-class">glyphicon glyphicon-italic</span> + </li> + <li> + <span class="glyphicon glyphicon-leaf"></span> + <span class="glyphicon-class">glyphicon glyphicon-leaf</span> + </li> + <li> + <span class="glyphicon glyphicon-link"></span> + <span class="glyphicon-class">glyphicon glyphicon-link</span> + </li> + <li> + <span class="glyphicon glyphicon-list"></span> + <span class="glyphicon-class">glyphicon glyphicon-list</span> + </li> + <li> + <span class="glyphicon glyphicon-list-alt"></span> + <span class="glyphicon-class">glyphicon glyphicon-list-alt</span> + </li> + <li> + <span class="glyphicon glyphicon-lock"></span> + <span class="glyphicon-class">glyphicon glyphicon-lock</span> + </li> + <li> + <span class="glyphicon glyphicon-log-in"></span> + <span class="glyphicon-class">glyphicon glyphicon-log-in</span> + </li> + <li> + <span class="glyphicon glyphicon-log-out"></span> + <span class="glyphicon-class">glyphicon glyphicon-log-out</span> + </li> + <li> + <span class="glyphicon glyphicon-magnet"></span> + <span class="glyphicon-class">glyphicon glyphicon-magnet</span> + </li> + <li> + <span class="glyphicon glyphicon-map-marker"></span> + <span class="glyphicon-class">glyphicon glyphicon-map-marker</span> + </li> + <li> + <span class="glyphicon glyphicon-minus"></span> + <span class="glyphicon-class">glyphicon glyphicon-minus</span> + </li> + <li> + <span class="glyphicon glyphicon-minus-sign"></span> + <span class="glyphicon-class">glyphicon glyphicon-minus-sign</span> + </li> + <li> + <span class="glyphicon glyphicon-move"></span> + <span class="glyphicon-class">glyphicon glyphicon-move</span> + </li> + <li> + <span class="glyphicon glyphicon-music"></span> + <span class="glyphicon-class">glyphicon glyphicon-music</span> + </li> + <li> + <span class="glyphicon glyphicon-new-window"></span> + <span class="glyphicon-class">glyphicon glyphicon-new-window</span> + </li> + <li> + <span class="glyphicon glyphicon-off"></span> + <span class="glyphicon-class">glyphicon glyphicon-off</span> + </li> + <li> + <span class="glyphicon glyphicon-ok"></span> + <span class="glyphicon-class">glyphicon glyphicon-ok</span> + </li> + <li> + <span class="glyphicon glyphicon-ok-circle"></span> + <span class="glyphicon-class">glyphicon glyphicon-ok-circle</span> + </li> + <li> + <span class="glyphicon glyphicon-ok-sign"></span> + <span class="glyphicon-class">glyphicon glyphicon-ok-sign</span> + </li> + <li> + <span class="glyphicon glyphicon-open"></span> + <span class="glyphicon-class">glyphicon glyphicon-open</span> + </li> + <li> + <span class="glyphicon glyphicon-paperclip"></span> + <span class="glyphicon-class">glyphicon glyphicon-paperclip</span> + </li> + <li> + <span class="glyphicon glyphicon-pause"></span> + <span class="glyphicon-class">glyphicon glyphicon-pause</span> + </li> + <li> + <span class="glyphicon glyphicon-pencil"></span> + <span class="glyphicon-class">glyphicon glyphicon-pencil</span> + </li> + <li> + <span class="glyphicon glyphicon-phone"></span> + <span class="glyphicon-class">glyphicon glyphicon-phone</span> + </li> + <li> + <span class="glyphicon glyphicon-phone-alt"></span> + <span class="glyphicon-class">glyphicon glyphicon-phone-alt</span> + </li> + <li> + <span class="glyphicon glyphicon-picture"></span> + <span class="glyphicon-class">glyphicon glyphicon-picture</span> + </li> + <li> + <span class="glyphicon glyphicon-plane"></span> + <span class="glyphicon-class">glyphicon glyphicon-plane</span> + </li> + <li> + <span class="glyphicon glyphicon-play"></span> + <span class="glyphicon-class">glyphicon glyphicon-play</span> + </li> + <li> + <span class="glyphicon glyphicon-play-circle"></span> + <span class="glyphicon-class">glyphicon glyphicon-play-circle</span> + </li> + <li> + <span class="glyphicon glyphicon-plus"></span> + <span class="glyphicon-class">glyphicon glyphicon-plus</span> + </li> + <li> + <span class="glyphicon glyphicon-plus-sign"></span> + <span class="glyphicon-class">glyphicon glyphicon-plus-sign</span> + </li> + <li> + <span class="glyphicon glyphicon-print"></span> + <span class="glyphicon-class">glyphicon glyphicon-print</span> + </li> + <li> + <span class="glyphicon glyphicon-pushpin"></span> + <span class="glyphicon-class">glyphicon glyphicon-pushpin</span> + </li> + <li> + <span class="glyphicon glyphicon-qrcode"></span> + <span class="glyphicon-class">glyphicon glyphicon-qrcode</span> + </li> + <li> + <span class="glyphicon glyphicon-question-sign"></span> + <span class="glyphicon-class">glyphicon glyphicon-question-sign</span> + </li> + <li> + <span class="glyphicon glyphicon-random"></span> + <span class="glyphicon-class">glyphicon glyphicon-random</span> + </li> + <li> + <span class="glyphicon glyphicon-record"></span> + <span class="glyphicon-class">glyphicon glyphicon-record</span> + </li> + <li> + <span class="glyphicon glyphicon-refresh"></span> + <span class="glyphicon-class">glyphicon glyphicon-refresh</span> + </li> + <li> + <span class="glyphicon glyphicon-registration-mark"></span> + <span class="glyphicon-class">glyphicon glyphicon-registration-mark</span> + </li> + <li> + <span class="glyphicon glyphicon-remove"></span> + <span class="glyphicon-class">glyphicon glyphicon-remove</span> + </li> + <li> + <span class="glyphicon glyphicon-remove-circle"></span> + <span class="glyphicon-class">glyphicon glyphicon-remove-circle</span> + </li> + <li> + <span class="glyphicon glyphicon-remove-sign"></span> + <span class="glyphicon-class">glyphicon glyphicon-remove-sign</span> + </li> + <li> + <span class="glyphicon glyphicon-repeat"></span> + <span class="glyphicon-class">glyphicon glyphicon-repeat</span> + </li> + <li> + <span class="glyphicon glyphicon-resize-full"></span> + <span class="glyphicon-class">glyphicon glyphicon-resize-full</span> + </li> + <li> + <span class="glyphicon glyphicon-resize-horizontal"></span> + <span class="glyphicon-class">glyphicon glyphicon-resize-horizontal</span> + </li> + <li> + <span class="glyphicon glyphicon-resize-small"></span> + <span class="glyphicon-class">glyphicon glyphicon-resize-small</span> + </li> + <li> + <span class="glyphicon glyphicon-resize-vertical"></span> + <span class="glyphicon-class">glyphicon glyphicon-resize-vertical</span> + </li> + <li> + <span class="glyphicon glyphicon-retweet"></span> + <span class="glyphicon-class">glyphicon glyphicon-retweet</span> + </li> + <li> + <span class="glyphicon glyphicon-road"></span> + <span class="glyphicon-class">glyphicon glyphicon-road</span> + </li> + <li> + <span class="glyphicon glyphicon-save"></span> + <span class="glyphicon-class">glyphicon glyphicon-save</span> + </li> + <li> + <span class="glyphicon glyphicon-saved"></span> + <span class="glyphicon-class">glyphicon glyphicon-saved</span> + </li> + <li> + <span class="glyphicon glyphicon-screenshot"></span> + <span class="glyphicon-class">glyphicon glyphicon-screenshot</span> + </li> + <li> + <span class="glyphicon glyphicon-sd-video"></span> + <span class="glyphicon-class">glyphicon glyphicon-sd-video</span> + </li> + <li> + <span class="glyphicon glyphicon-search"></span> + <span class="glyphicon-class">glyphicon glyphicon-search</span> + </li> + <li> + <span class="glyphicon glyphicon-send"></span> + <span class="glyphicon-class">glyphicon glyphicon-send</span> + </li> + <li> + <span class="glyphicon glyphicon-share"></span> + <span class="glyphicon-class">glyphicon glyphicon-share</span> + </li> + <li> + <span class="glyphicon glyphicon-share-alt"></span> + <span class="glyphicon-class">glyphicon glyphicon-share-alt</span> + </li> + <li> + <span class="glyphicon glyphicon-shopping-cart"></span> + <span class="glyphicon-class">glyphicon glyphicon-shopping-cart</span> + </li> + <li> + <span class="glyphicon glyphicon-signal"></span> + <span class="glyphicon-class">glyphicon glyphicon-signal</span> + </li> + <li> + <span class="glyphicon glyphicon-sort"></span> + <span class="glyphicon-class">glyphicon glyphicon-sort</span> + </li> + <li> + <span class="glyphicon glyphicon-sort-by-alphabet"></span> + <span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet</span> + </li> + <li> + <span class="glyphicon glyphicon-sort-by-alphabet-alt"></span> + <span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet-alt</span> + </li> + <li> + <span class="glyphicon glyphicon-sort-by-attributes"></span> + <span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes</span> + </li> + <li> + <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> + <span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes-alt</span> + </li> + <li> + <span class="glyphicon glyphicon-sort-by-order"></span> + <span class="glyphicon-class">glyphicon glyphicon-sort-by-order</span> + </li> + <li> + <span class="glyphicon glyphicon-sort-by-order-alt"></span> + <span class="glyphicon-class">glyphicon glyphicon-sort-by-order-alt</span> + </li> + <li> + <span class="glyphicon glyphicon-sound-5-1"></span> + <span class="glyphicon-class">glyphicon glyphicon-sound-5-1</span> + </li> + <li> + <span class="glyphicon glyphicon-sound-6-1"></span> + <span class="glyphicon-class">glyphicon glyphicon-sound-6-1</span> + </li> + <li> + <span class="glyphicon glyphicon-sound-7-1"></span> + <span class="glyphicon-class">glyphicon glyphicon-sound-7-1</span> + </li> + <li> + <span class="glyphicon glyphicon-sound-dolby"></span> + <span class="glyphicon-class">glyphicon glyphicon-sound-dolby</span> + </li> + <li> + <span class="glyphicon glyphicon-sound-stereo"></span> + <span class="glyphicon-class">glyphicon glyphicon-sound-stereo</span> + </li> + <li> + <span class="glyphicon glyphicon-star"></span> + <span class="glyphicon-class">glyphicon glyphicon-star</span> + </li> + <li> + <span class="glyphicon glyphicon-star-empty"></span> + <span class="glyphicon-class">glyphicon glyphicon-star-empty</span> + </li> + <li> + <span class="glyphicon glyphicon-stats"></span> + <span class="glyphicon-class">glyphicon glyphicon-stats</span> + </li> + <li> + <span class="glyphicon glyphicon-step-backward"></span> + <span class="glyphicon-class">glyphicon glyphicon-step-backward</span> + </li> + <li> + <span class="glyphicon glyphicon-step-forward"></span> + <span class="glyphicon-class">glyphicon glyphicon-step-forward</span> + </li> + <li> + <span class="glyphicon glyphicon-stop"></span> + <span class="glyphicon-class">glyphicon glyphicon-stop</span> + </li> + <li> + <span class="glyphicon glyphicon-subtitles"></span> + <span class="glyphicon-class">glyphicon glyphicon-subtitles</span> + </li> + <li> + <span class="glyphicon glyphicon-tag"></span> + <span class="glyphicon-class">glyphicon glyphicon-tag</span> + </li> + <li> + <span class="glyphicon glyphicon-tags"></span> + <span class="glyphicon-class">glyphicon glyphicon-tags</span> + </li> + <li> + <span class="glyphicon glyphicon-tasks"></span> + <span class="glyphicon-class">glyphicon glyphicon-tasks</span> + </li> + <li> + <span class="glyphicon glyphicon-text-height"></span> + <span class="glyphicon-class">glyphicon glyphicon-text-height</span> + </li> + <li> + <span class="glyphicon glyphicon-text-width"></span> + <span class="glyphicon-class">glyphicon glyphicon-text-width</span> + </li> + <li> + <span class="glyphicon glyphicon-th"></span> + <span class="glyphicon-class">glyphicon glyphicon-th</span> + </li> + <li> + <span class="glyphicon glyphicon-th-large"></span> + <span class="glyphicon-class">glyphicon glyphicon-th-large</span> + </li> + <li> + <span class="glyphicon glyphicon-th-list"></span> + <span class="glyphicon-class">glyphicon glyphicon-th-list</span> + </li> + <li> + <span class="glyphicon glyphicon-thumbs-down"></span> + <span class="glyphicon-class">glyphicon glyphicon-thumbs-down</span> + </li> + <li> + <span class="glyphicon glyphicon-thumbs-up"></span> + <span class="glyphicon-class">glyphicon glyphicon-thumbs-up</span> + </li> + <li> + <span class="glyphicon glyphicon-time"></span> + <span class="glyphicon-class">glyphicon glyphicon-time</span> + </li> + <li> + <span class="glyphicon glyphicon-tint"></span> + <span class="glyphicon-class">glyphicon glyphicon-tint</span> + </li> + <li> + <span class="glyphicon glyphicon-tower"></span> + <span class="glyphicon-class">glyphicon glyphicon-tower</span> + </li> + <li> + <span class="glyphicon glyphicon-transfer"></span> + <span class="glyphicon-class">glyphicon glyphicon-transfer</span> + </li> + <li> + <span class="glyphicon glyphicon-trash"></span> + <span class="glyphicon-class">glyphicon glyphicon-trash</span> + </li> + <li> + <span class="glyphicon glyphicon-tree-conifer"></span> + <span class="glyphicon-class">glyphicon glyphicon-tree-conifer</span> + </li> + <li> + <span class="glyphicon glyphicon-tree-deciduous"></span> + <span class="glyphicon-class">glyphicon glyphicon-tree-deciduous</span> + </li> + <li> + <span class="glyphicon glyphicon-unchecked"></span> + <span class="glyphicon-class">glyphicon glyphicon-unchecked</span> + </li> + <li> + <span class="glyphicon glyphicon-upload"></span> + <span class="glyphicon-class">glyphicon glyphicon-upload</span> + </li> + <li> + <span class="glyphicon glyphicon-usd"></span> + <span class="glyphicon-class">glyphicon glyphicon-usd</span> + </li> + <li> + <span class="glyphicon glyphicon-user"></span> + <span class="glyphicon-class">glyphicon glyphicon-user</span> + </li> + <li> + <span class="glyphicon glyphicon-volume-down"></span> + <span class="glyphicon-class">glyphicon glyphicon-volume-down</span> + </li> + <li> + <span class="glyphicon glyphicon-volume-off"></span> + <span class="glyphicon-class">glyphicon glyphicon-volume-off</span> + </li> + <li> + <span class="glyphicon glyphicon-volume-up"></span> + <span class="glyphicon-class">glyphicon glyphicon-volume-up</span> + </li> + <li> + <span class="glyphicon glyphicon-warning-sign"></span> + <span class="glyphicon-class">glyphicon glyphicon-warning-sign</span> + </li> + <li> + <span class="glyphicon glyphicon-wrench"></span> + <span class="glyphicon-class">glyphicon glyphicon-wrench</span> + </li> + <li> + <span class="glyphicon glyphicon-zoom-in"></span> + <span class="glyphicon-class">glyphicon glyphicon-zoom-in</span> + </li> + <li> + <span class="glyphicon glyphicon-zoom-out"></span> + <span class="glyphicon-class">glyphicon glyphicon-zoom-out</span> + </li> + </ul> + </div> <h2 id="glyphicons-how-to-use">How to use</h2> <p>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.</p> + <div class="bs-callout bs-callout-danger"> + <h4>Don't mix with other components</h4> + <p>Icon classes cannot be combined with other elements. They are designed to be standalone elements.</p> + </div> {% highlight html %} <span class="glyphicon glyphicon-search"></span> {% endhighlight %} @@ -296,9 +902,13 @@ base_url: "../" {% endhighlight %} <h3 id="dropdowns-alignment">Alignment options</h3> - <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p> + <p>Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p> + <div class="bs-callout bs-callout-warning"> + <h4>Deprecated <code>.pull-right</code> alignment</h4> + <p>As of v3.1, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p> + </div> {% highlight html %} -<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> +<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel"> ... </ul> {% endhighlight %} @@ -549,11 +1159,11 @@ base_url: "../" {% endhighlight %} <h3 id="btn-groups-justified">Justified link variation</h3> - <p>Make a group of buttons stretch at the same size to span the entire width of its parent.</p> + <p>Make a group of buttons stretch at the same size to span the entire width of its parent. Also works with button dropdowns within the button group.</p> <div class="bs-callout bs-callout-warning"> <h4>Element-specific usage</h4> - <p>This only works with <code><a></code> elements as the <code><button></code> doesn't pick up these styles.</p> + <p>This only works with <code><a></code> elements as the <code><button></code> doesn't pick up the styles we use to justify content (some <code>display: table-cell;</code>-fu).</p> </div> <div class="bs-example"> @@ -562,6 +1172,23 @@ base_url: "../" <a class="btn btn-default" role="button">Middle</a> <a class="btn btn-default" role="button">Right</a> </div> + <br> + <div class="btn-group btn-group-justified"> + <a class="btn btn-default" role="button">Left</a> + <a class="btn btn-default" role="button">Middle</a> + <div class="btn-group"> + <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + Dropdown <span class="caret"></span> + </a> + <ul class="dropdown-menu" role="menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div> + </div> </div> {% highlight html %} <div class="btn-group btn-group-justified"> @@ -918,6 +1545,11 @@ base_url: "../" <h4>Tooltips & popovers in input groups require special setting</h4> <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p> </div> + <div class="bs-callout bs-callout-info"> + <h4>Don't mix with form groups</h4> + <p>Do not apply input group classes directly to form groups. An input group is an isolated component.</p> + </div> + <h2 id="input-groups-basic">Basic example</h2> <form class="bs-example bs-example-form" role="form"> @@ -1277,8 +1909,8 @@ base_url: "../" <h2 id="nav-justified">Justified</h2> <p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p> <div class="bs-callout bs-callout-warning"> - <h4>WebKit and responsive justified navs</h4> - <p>Chrome and Safari both exhibit a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p> + <h4>Safari and responsive justified navs</h4> + <p>Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p> </div> <div class="bs-example"> <ul class="nav nav-tabs nav-justified"> @@ -1416,16 +2048,16 @@ base_url: "../" <h4>Customize the collapsing point</h4> <p>Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</p> </div> - <div class="bs-callout bs-callout-warning" id="multiple-navbars-warning"> - <h4>Multiple navbars require custom code</h4> - <p>Multiple nearby navbars with dropdown menus are not supported by default. You will need to override the <code>z-index</code>es of the dropdown menus yourself. Otherwise, the dropdown menu will display behind the other navbar.</p> + <div class="bs-callout bs-callout-danger"> + <h4>Requires JavaScript</h4> + <p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p> </div> <div class="bs-example"> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1435,7 +2067,7 @@ base_url: "../" </div> <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse navbar-ex1-collapse"> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> @@ -1478,7 +2110,7 @@ base_url: "../" <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1488,7 +2120,7 @@ base_url: "../" </div> <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse navbar-ex1-collapse"> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> @@ -1528,15 +2160,15 @@ base_url: "../" </nav> {% endhighlight %} -<div class="bs-callout bs-callout-danger"> - <h4>Plugin dependency</h4> - <p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p> -</div> + <div class="bs-callout bs-callout-danger"> + <h4>Plugin dependency</h4> + <p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p> + </div> -<div class="bs-callout bs-callout-warning"> - <h4>Make navbars accessible</h4> - <p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p> -</div> + <div class="bs-callout bs-callout-warning"> + <h4>Make navbars accessible</h4> + <p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p> + </div> <h2 id="navbar-forms">Forms</h2> @@ -1545,7 +2177,7 @@ base_url: "../" <div class="bs-example"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1553,7 +2185,7 @@ base_url: "../" </button> <a class="navbar-brand" href="#">Brand</a> </div> - <div class="collapse navbar-collapse navbar-ex2-collapse"> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> @@ -1572,18 +2204,18 @@ base_url: "../" </form> {% endhighlight %} -<div class="bs-callout bs-callout-danger"> - <h4>Always add labels</h4> - <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p> -</div> + <div class="bs-callout bs-callout-danger"> + <h4>Always add labels</h4> + <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the <code>.sr-only</code> class.</p> + </div> <h2 id="navbar-buttons">Buttons</h2> - <p>For buttons not residing in a <code><form></code>, add this class to vertically center buttons within a navbar.</p> + <p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p> <div class="bs-example"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex3-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1591,7 +2223,7 @@ base_url: "../" </button> <a class="navbar-brand" href="#">Brand</a> </div> - <div class="collapse navbar-collapse navbar-ex3-collapse"> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3"> <button type="button" class="btn btn-default navbar-btn">Sign in</button> </div> </nav> @@ -1600,13 +2232,17 @@ base_url: "../" <button type="button" class="btn btn-default navbar-btn">Sign in</button> {% endhighlight %} + <div class="bs-callout bs-callout-warning"> + <h4>Context-specific usage</h4> + <p>Like the standard <a href="{{ page.base_url }}css#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code><a></code> and <code><input></code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code><a></code> elements within <code>.navbar-nav</code>.</p> + </div> <h2 id="navbar-text">Text</h2> <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p> <div class="bs-example"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex4-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1614,7 +2250,7 @@ base_url: "../" </button> <a class="navbar-brand" href="#">Brand</a> </div> - <div class="collapse navbar-collapse navbar-ex4-collapse"> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4"> <p class="navbar-text">Signed in as Mark Otto</p> </div> </nav> @@ -1629,7 +2265,7 @@ base_url: "../" <div class="bs-example"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1637,13 +2273,13 @@ base_url: "../" </button> <a class="navbar-brand" href="#">Brand</a> </div> - <div class="collapse navbar-collapse navbar-ex5-collapse"> - <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5"> + <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> </div> </nav> </div> {% highlight html %} -<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> +<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> {% endhighlight %} @@ -1658,7 +2294,7 @@ base_url: "../" <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex6-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1668,7 +2304,7 @@ base_url: "../" </div> <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse navbar-ex6-collapse"> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1699,7 +2335,7 @@ body { padding-top: 70px; } <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex7-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1709,7 +2345,7 @@ body { padding-top: 70px; } </div> <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse navbar-ex7-collapse"> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-7"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1740,7 +2376,7 @@ body { padding-bottom: 70px; } <nav class="navbar navbar-default navbar-static-top" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex8-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1750,7 +2386,7 @@ body { padding-bottom: 70px; } </div> <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse navbar-ex8-collapse"> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1772,7 +2408,7 @@ body { padding-bottom: 70px; } <nav class="navbar navbar-inverse" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex9-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1782,7 +2418,7 @@ body { padding-bottom: 70px; } </div> <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse navbar-ex9-collapse"> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -2084,6 +2720,10 @@ body { padding-bottom: 70px; } </a> </li> </ul> + <br> + <button class="btn btn-primary" type="button"> + Messages <span class="badge">4</span> + </button> </div> {% highlight html %} <ul class="nav nav-pills nav-stacked"> @@ -2106,25 +2746,30 @@ body { padding-bottom: 70px; } <div class="page-header"> <h1 id="jumbotron">Jumbotron</h1> </div> - <p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. To make the jumbotron full width, don't include it within a <code>.container</code>. Placing it within a container will keep it at the width of the rest of your content and provide rounded corners.</p> + <p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.</p> <div class="bs-example"> <div class="jumbotron"> - <div class="container"> - <h1>Hello, world!</h1> - <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> - <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> - </div> + <h1>Hello, world!</h1> + <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> + <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div> </div> {% highlight html %} <div class="jumbotron"> + <h1>Hello, world!</h1> + <p>...</p> + <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> +</div> +{% endhighlight %} + <p>To make the jumbotron full width, and without rounded corners, place it outside all <code>.container</code>s and instead add a <code>.container</code> within.</p> +{% highlight html %} +<div class="jumbotron"> <div class="container"> - <h1>Hello, world!</h1> - <p>...</p> - <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> + ... </div> </div> {% endhighlight %} + </div> @@ -2162,31 +2807,31 @@ body { padding-bottom: 70px; } <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> <div class="bs-example"> <div class="row"> - <div class="col-sm-6 col-md-3"> + <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> - <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,"> + <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail"> </a> </div> - <div class="col-sm-6 col-md-3"> + <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> - <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,"> + <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail"> </a> </div> - <div class="col-sm-6 col-md-3"> + <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> - <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,"> + <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail"> </a> </div> - <div class="col-sm-6 col-md-3"> + <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> - <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,"> + <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail"> </a> </div> </div> </div><!-- /.bs-example --> {% highlight html %} <div class="row"> - <div class="col-sm-6 col-md-3"> + <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img data-src="holder.js/100%x180" alt="..."> </a> @@ -2201,7 +2846,7 @@ body { padding-bottom: 70px; } <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> - <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,"> + <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> @@ -2211,7 +2856,7 @@ body { padding-bottom: 70px; } </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> - <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,"> + <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> @@ -2221,7 +2866,7 @@ body { padding-bottom: 70px; } </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> - <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,"> + <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> @@ -2527,7 +3172,7 @@ body { padding-bottom: 70px; } <div class="bs-example"> <div class="media"> <a class="pull-left" href="#"> - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,"> + <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> @@ -2536,17 +3181,17 @@ body { padding-bottom: 70px; } </div> <div class="media"> <a class="pull-left" href="#"> - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,"> + <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. <div class="media"> <a class="pull-left" href="#"> - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,"> + <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> <div class="media-body"> - <h4 class="media-heading">Media heading</h4> + <h4 class="media-heading">Nested media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> @@ -2571,7 +3216,7 @@ body { padding-bottom: 70px; } <ul class="media-list"> <li class="media"> <a class="pull-left" href="#"> - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,"> + <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> @@ -2579,7 +3224,7 @@ body { padding-bottom: 70px; } <!-- Nested media object --> <div class="media"> <a class="pull-left" href="#"> - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,"> + <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading">Nested media heading</h4> @@ -2587,7 +3232,7 @@ body { padding-bottom: 70px; } <!-- Nested media object --> <div class="media"> <a class="pull-left" href="#"> - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,"> + <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading">Nested media heading</h4> @@ -2599,7 +3244,7 @@ body { padding-bottom: 70px; } <!-- Nested media object --> <div class="media"> <a class="pull-left" href="#"> - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,"> + <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading">Nested media heading</h4> @@ -2610,7 +3255,7 @@ body { padding-bottom: 70px; } </li> <li class="media"> <a class="pull-right" href="#"> - <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,"> + <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> @@ -2717,6 +3362,43 @@ body { padding-bottom: 70px; } </div> {% endhighlight %} + <h3 id="list-group-contextual-classes">Contextual classes</h3> + <p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p> + <div class="bs-example"> + <div class="row"> + <div class="col-sm-6"> + <ul class="list-group"> + <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li> + <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li> + <li class="list-group-item list-group-item-danger">Vestibulum at eros</li> + <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li> + </ul> + </div> + <div class="col-sm-6"> + <div class="list-group"> + <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a> + <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a> + <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a> + <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a> + </div> + </div> + </div> + </div> +{% highlight html %} +<ul class="list-group"> + <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li> + <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li> + <li class="list-group-item list-group-item-danger">Vestibulum at eros</li> + <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li> +</ul> +<div class="list-group"> + <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a> + <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a> + <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a> + <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a> +</div> +{% endhighlight %} + <h3 id="list-group-custom-content">Custom content</h3> <p>Add nearly any HTML within, even for linked list groups like the one below.</p> <div class="bs-example"> |