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. Path component
2. Pagination components
3. Tag Components
4. Badge Components
In this lesson, we will mainly learn about the four component functions of Bootstrap: path component, paging component, label component and badge component.
one. Path Component
The path component is also called breadcrumb navigation.
//Breadcrumb navigation <ol><li><a href="#">Home</a></li><li><a href="#">Product List</a></li><li>Korean version of cashmere sweater 2015 </li></ol>
two. Pagination Components
The paging component can provide functionality with display pages.
//Default pagination<ul><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li></ul> //Preferences and disables<li><a href="#">1</a></li><li><a href="#">2</a></li> //Set sizes, four lg, default, sm and xs<ul> //Page turn effects<ul><li><a href="#">1</a></li></li> //Set sizes, four lg, default, sm and xs<ul> //Page turn effects<ul><li><a href="#">Previous page</a></li><li><a href="#">Next page</a></li></ul> //Align the page turn link <ul><li><a href="#">Previous page</a></li></ul> //Disable the page turn item <li><a href="#">Previous page</a></li>
three. Label
//Tags with the tag <h3> tag <span>new</span></h3> //Tags of different tones <h3> tags <span>new</span></h3><h3> tags <span>new</span></h3><h3> tags <span>new</span></h3><h3> tags <span>new</span></h3><h3> tags <span>new</span></h3>
Four. badge
//Unread information quantity badge<a href="#">Information<span>10</span></a> //Use badge in button<button>Submit<span>3</span></button> //Activation status automatically adapts tone<ul><li><a href="#">Homepage<span>2</span></a></li><li><a href="#">Information</a></li></ul>
The above is the path pagination tag and badge component of the Bootstrap component introduced to you by the editor. I hope it will be helpful to everyone!