Hello Everyone,
Dropdown Menu Using Bootstrap:
In bootstrap, dropdowns are created using the class=”dropdown”. What we will do is create a button and then convert the button into a dropdown.
As already started in the last few tutorials, buttons can be created using the tag. But in this button, we want to create a dropdown, so we will add the class=”btn dropdown-toggle” and data-toggle=”dropdown”.
Basically, it would look something like this.
<button class=”btn btn-default dropdown-toggle” type=”button” data-toggle=”dropdown”> My Dropdown
Now we want to convert this button into a dropdown. So, we’ll create an unordered list using the
- tag having class=”dropdown-menu” and add items using the
- tag .
You can make your dropdown better by using classes in the
- tag. To add a header in a dropdown add class=”dropdown-header”, to add a divider between items, use class=”divider” and to disble an item in the list, use class=”disabled”.
Navigation Tabs using Bootstrap:
To create a tabbed navigation menu, we need to make an unordered list using
- tag and then add class=”nav nav-tabs” . Now we can add our tabs using the
- tag. Remember assigning one tab with class=”active” to view it as the default active tab. Now, we need to write the write the content of each tab using the class=”tab-pane” within the class=” tab-content”. Note that you must assign id’s to the respective tab-pane.
Adding the class=”fade” adds a fading effect when the tabs are switched.You can change the look and feel of the tabs by changing the class=”navbar-nav” to “nav-pills” or “nav-stacked” and if you want your tabs to cover the whole screen then, try adding the class=”nav-justified”
Similar to Dropdowns, we can disable any tab using class=”disabled”Note: Be-careful during the use of nav-bar it will change it’s size depending on the screen size.
Thankyou.
- tag. Remember assigning one tab with class=”active” to view it as the default active tab. Now, we need to write the write the content of each tab using the class=”tab-pane” within the class=” tab-content”. Note that you must assign id’s to the respective tab-pane.