diff options
Diffstat (limited to 'bower_components/bootstrap/components.html')
| -rwxr-xr-x | bower_components/bootstrap/components.html | 1299 |
1 files changed, 1005 insertions, 294 deletions
diff --git a/bower_components/bootstrap/components.html b/bower_components/bootstrap/components.html index a428529b..66f80e11 100755 --- a/bower_components/bootstrap/components.html +++ b/bower_components/bootstrap/components.html @@ -15,208 +15,808 @@ base_url: "../" </div> <h2 id="glyphicons-glyphs">Available glyphs</h2> - <p>Includes 180 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> + <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> + <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> @@ -230,7 +830,7 @@ base_url: "../" <h2 id="glyphicons-examples">Examples</h2> <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p> <div class="bs-example"> - <div class="btn-toolbar"> + <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> @@ -238,7 +838,7 @@ base_url: "../" <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button> </div> </div> - <div class="btn-toolbar"> + <div class="btn-toolbar" role="toolbar"> <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button> <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button> @@ -266,7 +866,10 @@ base_url: "../" <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> + Dropdown + <span class="caret"></span> + </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> @@ -278,7 +881,10 @@ base_url: "../" </div><!-- /example --> {% highlight html %} <div class="dropdown"> - <!-- Link or button to toggle dropdown --> + <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> + Dropdown + <span class="caret"></span> + </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> @@ -289,7 +895,7 @@ base_url: "../" </div> {% endhighlight %} - <h3 id="dropdowns-alignment">Aligninment options</h3> + <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> {% highlight html %} <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> @@ -301,7 +907,10 @@ base_url: "../" <p>Add a header to label sections of actions in any dropdown menu.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <a id="dropdownMenu2" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown"> + Dropdown + <span class="caret"></span> + </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> @@ -327,7 +936,10 @@ base_url: "../" <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <a id="dropdownMenu3" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu3" data-toggle="dropdown"> + Dropdown + <span class="caret"></span> + </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> @@ -379,7 +991,7 @@ base_url: "../" <h3 id="btn-groups-toolbar">Button toolbar</h3> <p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p> <div class="bs-example"> - <div class="btn-toolbar" style="margin: 0;"> + <div class="btn-toolbar" role="toolbar" style="margin: 0;"> <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> @@ -397,7 +1009,7 @@ base_url: "../" </div> </div> {% highlight html %} -<div class="btn-toolbar"> +<div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> <div class="btn-group">...</div> @@ -407,28 +1019,28 @@ base_url: "../" <h3 id="btn-groups-sizing">Sizing</h3> <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p> <div class="bs-example"> - <div class="btn-toolbar"> + <div class="btn-toolbar" role="toolbar"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> - <div class="btn-toolbar"> + <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> - <div class="btn-toolbar"> + <div class="btn-toolbar" role="toolbar"> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> - <div class="btn-toolbar"> + <div class="btn-toolbar" role="toolbar"> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> @@ -546,9 +1158,9 @@ base_url: "../" <div class="bs-example"> <div class="btn-group btn-group-justified"> - <a href="#" class="btn btn-default">Left</a> - <a href="#" class="btn btn-default">Middle</a> - <a href="#" class="btn btn-default">Right</a> + <a class="btn btn-default" role="button">Left</a> + <a class="btn btn-default" role="button">Middle</a> + <a class="btn btn-default" role="button">Right</a> </div> </div> {% highlight html %} @@ -659,7 +1271,10 @@ base_url: "../" <div class="bs-example"> <div class="btn-group"> <button type="button" class="btn btn-default">Default</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -670,7 +1285,10 @@ base_url: "../" </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-primary">Primary</button> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -681,7 +1299,10 @@ base_url: "../" </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-success">Success</button> - <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -692,7 +1313,10 @@ base_url: "../" </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-info">Info</button> - <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -703,7 +1327,10 @@ base_url: "../" </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-warning">Warning</button> - <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -714,7 +1341,10 @@ base_url: "../" </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-danger">Danger</button> - <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -730,6 +1360,7 @@ base_url: "../" <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> @@ -744,7 +1375,7 @@ base_url: "../" <h3 id="btn-dropdowns-sizing">Sizing</h3> <p>Button dropdowns work with buttons of all sizes.</p> <div class="bs-example"> - <div class="btn-toolbar"> + <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span> @@ -758,7 +1389,7 @@ base_url: "../" </ul> </div><!-- /btn-group --> </div><!-- /btn-toolbar --> - <div class="btn-toolbar"> + <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> Small button <span class="caret"></span> @@ -772,7 +1403,7 @@ base_url: "../" </ul> </div><!-- /btn-group --> </div><!-- /btn-toolbar --> - <div class="btn-toolbar"> + <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> Extra small button <span class="caret"></span> @@ -822,10 +1453,13 @@ base_url: "../" <h3 id="btn-dropdowns-dropup">Dropup variation</h3> <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p> <div class="bs-example"> - <div class="btn-toolbar"> + <div class="btn-toolbar" role="toolbar"> <div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -836,7 +1470,10 @@ base_url: "../" </div><!-- /btn-group --> <div class="btn-group dropup"> <button type="button" class="btn btn-primary">Right dropup</button> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> <ul class="dropdown-menu pull-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -852,6 +1489,7 @@ base_url: "../" <button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <!-- Dropdown menu links --> @@ -880,6 +1518,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"> @@ -939,7 +1582,7 @@ base_url: "../" {% highlight html %} <div class="input-group input-group-lg"> <span class="input-group-addon">@</span> - <input type="text" class="form-control input-lg" placeholder="Username"> + <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group"> @@ -1121,6 +1764,7 @@ base_url: "../" <button type="button" class="btn btn-default" tabindex="-1">Action</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> @@ -1140,6 +1784,7 @@ base_url: "../" <button type="button" class="btn btn-default" tabindex="-1">Action</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu pull-right" role="menu"> <li><a href="#">Action</a></li> @@ -1163,7 +1808,7 @@ base_url: "../" <div class="input-group"> <input type="text" class="form-control"> - <div class="input-group-btn btn-group"> + <div class="input-group-btn"> <!-- Button and dropdown menu --> </div> </div> @@ -1198,6 +1843,10 @@ base_url: "../" <li><a href="#">Messages</a></li> </ul> {% endhighlight %} + <div class="bs-callout bs-callout-info"> + <h4>Requires JavaScript tabs plugin</h4> + <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p> + </div> <h2 id="nav-pills">Pills</h2> <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> @@ -1231,7 +1880,11 @@ base_url: "../" <h2 id="nav-justified">Justified</h2> - <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p> + <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> + </div> <div class="bs-example"> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">Home</a></li> @@ -1368,12 +2021,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-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> @@ -1383,7 +2040,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> @@ -1393,7 +2050,9 @@ base_url: "../" <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> + <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> @@ -1412,6 +2071,7 @@ base_url: "../" <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> </li> @@ -1423,7 +2083,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> @@ -1433,7 +2093,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> @@ -1443,7 +2103,9 @@ base_url: "../" <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> + <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> @@ -1462,6 +2124,7 @@ base_url: "../" <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> </li> @@ -1470,23 +2133,62 @@ 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> + <p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p> + <p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin.</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="#bs-example-navbar-collapse-2"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Brand</a> + </div> + <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"> + </div> + <button type="submit" class="btn btn-default">Submit</button> + </form> + </div> + </nav> + </div> +{% highlight html %} +<form class="navbar-form navbar-left" role="search"> + <div class="form-group"> + <input type="text" class="form-control" placeholder="Search"> + </div> + <button type="submit" class="btn btn-default">Submit</button> +</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> <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-ex2-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> @@ -1494,7 +2196,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-3"> <button type="button" class="btn btn-default navbar-btn">Sign in</button> </div> </nav> @@ -1503,13 +2205,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-ex3-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> @@ -1517,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-4"> <p class="navbar-text">Signed in as Mark Otto</p> </div> </nav> @@ -1532,7 +2238,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-ex4-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> @@ -1540,7 +2246,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-5"> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> </div> </nav> @@ -1561,7 +2267,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-ex5-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> @@ -1571,7 +2277,7 @@ base_url: "../" </div> <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse navbar-ex5-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> @@ -1602,7 +2308,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-ex6-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> @@ -1612,7 +2318,7 @@ body { padding-top: 70px; } </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-7"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1643,7 +2349,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-ex7-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> @@ -1653,7 +2359,7 @@ body { padding-bottom: 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-8"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1675,7 +2381,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-ex8-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> @@ -1685,7 +2391,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-9"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -2009,25 +2715,30 @@ body { padding-bottom: 70px; } <div class="page-header"> <h1 id="jumbotron">Jumbotron</h1> </div> - <p>A lightweight, flexible component that can optional 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">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">Learn more</a></p> + ... </div> </div> {% endhighlight %} + </div> @@ -2067,22 +2778,22 @@ body { padding-bottom: 70px; } <div class="row"> <div class="col-sm-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"> <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"> <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"> <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> @@ -2102,33 +2813,33 @@ body { padding-bottom: 70px; } <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> <div class="bs-example"> <div class="row"> - <div class="col-sm-6 col-md-3"> + <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> - <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p> + <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> - <div class="col-sm-6 col-md-3"> + <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> - <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p> + <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> - <div class="col-sm-6 col-md-3"> + <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> - <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p> + <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> @@ -2136,13 +2847,13 @@ body { padding-bottom: 70px; } </div><!-- /.bs-example --> {% highlight html %} <div class="row"> - <div class="col-sm-6 col-md-3"> + <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> - <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p> + <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> @@ -2159,7 +2870,7 @@ body { padding-bottom: 70px; } <div class="page-header"> <h1 id="alerts">Alerts</h1> </div> - <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#js-alerts">alerts jQuery plugin</a>.</p> + <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#alerts">alerts jQuery plugin</a>.</p> <h2 id="alerts-examples">Examples</h2> <p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p> @@ -2193,13 +2904,13 @@ body { padding-bottom: 70px; } <h2 id="alerts-dismissable">Dismissable alerts</h2> <p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p> <div class="bs-example"> - <div class="alert alert-dismissable"> + <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> </div> {% highlight html %} -<div class="alert alert-dismissable"> +<div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> @@ -2430,7 +3141,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> @@ -2439,14 +3150,14 @@ 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> @@ -2474,7 +3185,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> @@ -2482,7 +3193,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> @@ -2490,7 +3201,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> @@ -2502,7 +3213,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> @@ -2513,7 +3224,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> |