Bootstrap font icons, use of drop-down list components

Bootstrap font icon, drop-down list component using Glyphicons font icon

1. You can see how the icon class is used by code, and the icon class cannot be used directly with other components, and the icon class can only be applied to elements that do not contain any textual content or child elements. so a span tag is usually used in front of the button's text to render the icon .
2. Aria-label: Some icons can have no text, at this point in the code by Aria-label this property to indicate the meaning of the icon, such as "left alignment" here.
3. Aria-hidden: Set it to true, indicating that the icon is only for decoration purposes, to avoid reading the device crawl, "aria" is "Aria, solo song" Meaning, so you can get a sense of it.
4. If you need an icon to express some meaning, you can express it through the . Sr-only class, while visually hiding, my understanding is that it is equivalent to making various conventions that interact with the outside environment.
   Example:

<button type="button" class="btn btn-default"  Aria-label="left Align">      <span class="Glyphicon glyphicon-align-left" aria-hidden="true" ></span>    </button>    <button type="button" class="btn btn-default"  Aria-label="Go to Cloud">      <span class="Glyphicon glyphicon-cloud" aria-hidden="true" ></span>    </button>    <button type="button" class="btn btn-default"  Aria-label="Email Me">      <span class="Glyphicon glyphicon-envelope" aria-hidden="true" ></span>    </button>    <button type="button" class="btn btn-default"  Aria-label="Glass,be Care" >      <span class="Glyphicon glyphicon-glass" aria-hidden="true" ></span>    </button>    <button type="button" class="btn btn-default btn-lg" >      <span class="Glyphicon glyphicon-star" aria-hidden="true "></span>Star</button>    <div class="alert Alert-danger" role="alert">      <span class="Glyphicon glyphicon-exclamation-sign" Aria-hidden ="true"></span>        <span class="Sr-only">Error:</span>Enter a valid email address</div>

Bootstrap drop-down list (dropdowns)

1. The right alignment is problematic by adding the. Dropdown-menu-right class Settings drop-down menu for the. Dropdown-menu (how do I fix it?). ), such as:
2. . Dropdown-header can add headings to a set of menus;
   Available lines are grouped by drop-down menus
3. To add the. Disabled class, you can disable the corresponding menu item.

Example:

<div class="dropdown">      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle= "dropdown" aria-haspopup=" False " aria-expanded=" true ">Dropdown<span class="Caret"></span>      </button>      <ul class="Dropdown-menu" aria-labelledby="DropdownMenu1" >        <li class="Dropdown-header">Dropdown Header 1</li>        <li><a href="#">Action</a></li>        <li><a href="#">Another action</a></li>        <li><a href="#">Something Else here</a></li>        <li role="Separator" class="Divider"></li>        <li><a href="#">Apple</a></li>        <li><a href="#">Apple</a></li>        <li class="Disabled"><a href="#">Nima</a></li>        <li class="Dropdown-header">Dropdown Header 2</li>        <li><a href="#">Separated link</a></li>      </ul>    </div>

Reference:
Glyphicons font icon
Dropdowns

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Bootstrap font icons, use of drop-down list components