Chapter 7 menu button icon component _ javascript skills

Bootstrap, from Twitter, is currently the most popular front-end framework. This article mainly introduces the menu button and Icon components of the BootStrap component. If you need more information, see Bootstrap. Twitter is the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is concise and flexible, making Web development faster.

Learning points:

1. Small icon Components

2. drop-down menu Components

3. Button group components

4. Click the drop-down menu

In this lesson, we will mainly learn about three Bootstrap component functions: small icon components, drop-down menu components, and various button components.

I. Small icon Components

Bootstrap provides 263 free icons (twice). For details, refer to the component links on the Chinese official website:

Http://v3.bootcss.com/components/?glyphicons.

Some icons are as follows:

AvailableOr use tags in combination, as follows:

// Use a small icon// You can also combine buttons 

Ii. drop-down menu Components

Click an element or button to display the hidden list.

// Basic format
Drop-down menu
  
  
 
   
Homepage
 
   
Information
 
   
Product
 
   
About
 
  
 

Buttons and menus must be enclosed in the. dropdown container, and data-toggle = "dropdown" must be set as the clicked element button to be valid. For the menu, set class = "dropdown-menu" to automatically hide and add a fixed style. Set class = "caret" to indicate the arrow, which can be up or down.

// Set to trigger up
// The menu items are right aligned. The default value is dropdown-menu-left.
  
  

    // Set the menu title. Do not add a hyperlink. 
   
Website navigation
// Set the menu split line 
   
// Set the menu item to disable 
   
Product
// Display the menu by default 
   
 
 
  

3. Button group components

A button group is used to integrate multiple buttons in a container to form a unique effect.

// Basic format
LeftMediumRight
// Integrate multiple button groups for easy management
LeftMediumRight
// Set the button group size
// Nest a group, such as a drop-down menu
LeftMediumRight
Drop-down menu
  
  
 
   
Homepage
 
   
Information
 
   
Product
 
   
About
 
  
 

Note: Here

Class = "dropdown" is not implemented in. It is known through source code analysis that the nesting itself has been located and does not need to be set. You only need to add a class = "dropdown-toggle" to the rounded corner on the right.

// Set the vertical arrangement of Button groups
// Set the button groups at both ends and use labels
Middle left and right
// If you need to useLabel, You Need To group each button
Left
Medium
Right
 

4. Click the drop-down menu

This drop-down menu is actually the same as the second knowledge point, except that it is in a group and does not need

Declare class = "dropdown ".

// Group button drop-down menu
Drop-down menu
  
  
 
   
Homepage
 
   
Information
 
   
Product
 
   
About
 
  
// Split button drop-down menu
Drop-down menu
  
  
 
   
Homepage
 
   
Information
 
   
Product
 
   
About
 
  
// Pop-up

The above content is the menu button icon component of the BootStrap component introduced by the editor. I hope it will help you!