Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.
Key points for learning:
1. Small icon component
2. Pull-down menu component
3. Button group component
4. Button-style drop-down menu
In this lesson, we will mainly learn about the three component functions of Bootstrap: small icon component, drop-down menu component and various button components.
one. Small icon component
Bootstrap provides 263 free small icons (counted twice). For details, please refer to the component link of the Chinese official website:
http://v3.bootcss.com/components/#glyphicons.
Some icons are as follows:
You can use the <i> or <span> tags to use, as follows:
//Use small icon <i></i><span></span> //You can also combine buttons with <button><span></span></button><button><button><span></span></button><button><button></span></button>
two. Drop-down menu component
The drop-down menu is to click an element or button to trigger the hidden list to be displayed.
//Basic Format<div><button data-toggle="dropdown">Drop-down Menu<span></span></button><ul><li><a href="#">Home</a></li><li><a href="#">Information</a></li><li><a href="#">Product</a></li><li><a href="#">About </a></li></ul></div>
Buttons and menus need to be wrapped in a .dropdown container, and as the clicked element button, data-toggle="dropdown" is required to be set to be effective. For the menu section, settings can automatically hide and add fixed styles. Set the arrow to be up or down.
//Set up to trigger <div> //Menu items are aligned to the right, the default value is dropdown-menu-left<ul> //Set the title of the menu, do not add hyperlinks <li>Website Navigation</li> //Set the dividing line of the menu <li></li> //Set the menu to display <div> by default <li><a href="#">Product</a></li> //Set the menu to display <div> by default
three. Button Group Component
A button group is the unique effect of integrating multiple buttons into a container.
//Basic format <div><button type="button">left</button><button type="button">middle</button><button type="button">right</button></div> //Integrate multiple buttons to facilitate management<div><div><button type="button">left</button><button type="button">right</button></div><div><button type="button"></button><button><button type="button"></button><button><button type="button"></button><button><button type="button"></button><button><button type="button"></button><button><button type="button"></button></div></div> //Set the button group size <div><divbtn-group btn-group-sm"><div> //Nest a group, such as drop-down menu <div><button type="button">left</button><button type="button">middle</button><button type="button">right</button><div><buttondata-toggle="dropdown">drop-down menu <span></span></button><ul><li><a href="#">Home</a></li><li><a href="#">Information</a></li><li><a href="#">Product</a></li><li><a href="#">About </a></li></ul></div></div>
Note: This is not implemented in <div>. Through source code analysis, you know that the nest itself has positioning, so you don’t need to set it up. And just add one more rounded corner on the right.
//Set the button group vertically arranged <div> //Set the button group aligned at both ends, use the <a> tag <div><a type="button">left</a><a type="button">middle</a><a type="button">right</a></div> //If you need to use the <button> tag, you need to group each button <div><div><button type="button">left</button></div><div><button type="button">right</button></div>
Four. Button-style drop-down menu
This drop-down menu is actually the same as the second knowledge point, except that this is in the group and there is no need to declare class="dropdown".
//Group Button Drop-down Menu <div><button type="button"data-toggle="dropdown">Drop-down Menu<span></span></button><ul><li><a href="#">Home</a></li><li><a href="#">Information</a></li><li><a href="#">Product</a></li><li><a href="#">About </a></li></ul></div> //Split Button Drop-down Menu<div><button type="button">Drop-down Menu</button><button type="button"data-toggle="dropdown"><span></span></button><ul><li><a href="#">Home</a></li><li><a href="#">Information</a></li><li><a href="#">Product</a></li><li><a href="#">About </a></li></ul></div> //Pop-up<div>
The above content is the menu button icon component of the BootStrap component introduced to you by the editor. I hope it will be helpful to everyone!