Bs Dropdowns

-

Bootstrap Dropdowns

Basic Dropdown

Influenza A virus subtype H5N1 dropdown carte is a toggleable carte that allows the user to select ane value from a predefined list:

Example

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Example Explained

The .dropdown shape indicates a dropdown menu.
To opened upwards the dropdown menu, exercise a push or a link alongside a shape of .dropdown-toggle as well as the data-toggle="dropdown" attribute.
The .caret shape creates a caret arrow prototype (), which indicates that the push is a dropdown.
Add the .dropdown-menu shape to a <ul> chemical subdivision to genuinely construct the dropdown menu.

Dropdown Divider

The .divider shape is used to separate links within the dropdown carte alongside a sparse horizontal border:

Example

<li class="divider"></li>

Dropdown Header

The .dropdown-header shape is used to add together headers within the dropdown menu:

Example

<li class="dropdown-header">Dropdown header 1</li>

Disable as well as Active items

Highlight a specific dropdown especial alongside the .active shape (adds a bluish background color).
To disable an especial inwards the dropdown menu, exercise the .disabled shape (gets a light-grey text color as well as a "no-parking-sign" prototype on hover):

Example

<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>

Dropdown Position

To right-align the dropdown, add together the .dropdown-menu-right shape to the chemical subdivision alongside .dropdown-menu:

Example

<ul class="dropdown-menu dropdown-menu-right">

Dropup

If y'all desire the dropdown carte to expand upwards instead of downwards, alter the <div> chemical subdivision alongside class="dropdown" to "dropup":

Example

<div class="dropup">

Dropdown Accessibility

To assistance better accessibility for people using covert readers, y'all should include the next role as well as aria-* attributes, when creating a dropdown menu:

Example

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
  <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
    <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
    <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
  </ul>
</div>

Comments

Post a Comment

Popular posts from this blog

What Are The Main Components of a Computer System

-
Each part has a purpose and this list will help give you a brief idea of what the purpose if for each. Tower: The tower or computer case is there to protect the components inside. The case works to protect the parts against electrical shock, dirt and other sources of danger that surround your computer. Power Supply: The power supply is found secure inside your tower and offers the main source of power to the motherboard and other components such as your hard drive and Rom drives. The power supply can be changed out for a larger wattage one to ensure better power and cooling to the parts installed on your system. Motherboard: The motherboard acts as the heart of the computer where everything ties into it and works from it. The slots on the motherboard are available for an assortment of components such as the CPU, memory, video, sound, TV tuners etc. CPU: The central processing unit, otherwise known simply as the CPU is the brains of the sy...
Read more

Top Qualities To Look For In An IT Support Team

-
Regardless of how "state of the art" or "updated" your company's technical systems may be, they will at one time or another encounter glitches or breakdowns that will require immediate attention. A company that experiences such issues must have an IT support team that they can turn to in order to acquire fixes and upgrades. Otherwise, a company will experience substantial "down time" or may even lose clients. This could result in life-long issues for the company and could ultimately result in a loss of profit. The best solution to avoid such detrimental issues is to obtain the services of an IT support provider that can prevent such situations from arising. You will need to take advantage of IT support London services that realize that your company will grow over time, and know how to adapt and maintain your technical services to keep up and manage this growth. Additionally, you will only want to deal with an IT su...
Read more

Removing The Index.Php File From Url Inward Codeigniter

-
By default, the index.php file volition survive included inwards your URLs: example.com/index.php/news/article/my_article You tin easily take away this file yesteryear using a .htaccess file amongst simply about uncomplicated rules. RewriteEngine on RewriteCond $1 !^(index\.php|images|robots\.txt) RewriteRule ^(.*)$ index.php?/$1 [L] This htaccess dominion is footling dissimilar than dominion y'all tin honor inwards Codeigniter's ain website. When I used the codeigniters htaccess rule, it didn't worked. After searching the solution I works life inwards a higher house solution. It worked. :) Sumber http://developer-paradize.blogspot.com
Read more