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. Table
2. Button
In this lesson, we mainly learn about the Bootstrap table and button functions, and display various rich effects through the built-in CSS definition.
one. sheet
Bootstrap provides some rich table styles for developers to use.
1. Basic format
//Implement basic table style <table>
Note: We can view the corresponding CSS through Firebug.
2. Striped form
//Let the lines in <tbody> produce one line after another and a monochrome background effect <table>
Note: The table effect needs to be based on the basic format.table
3. Table with borders
//Add a border to the table <table>
4. Hover the mouse
//Let the table under <tbody> hover the mouse to achieve background effect <table>
5. Status Class
//The background style of each line can be set separately <tr>
Note: There are five different styles to choose from.
Style description:
Active mouse hovering over row or cell
Success signs successful or positive action
Info marks normal prompt information or actions
Warning logo warning or user attention is required
Danger indicates dangerous or potential negative actions
6. Hide a line
//Hide line<tr>
7. Responsive table
//There is a responsive form for the parent element of the table, less than 768px, and the border appears <body>
two. Button
Bootstrap provides a lot of rich buttons for developers to use.
1. Labels or elements that can be used as buttons
//Convert to normal button<a href="###">Link</a><button>Button</button><input type="button" value="input">
There are three things to note:
(1). Things to note about components
Although the button class can be applied to the <a> and <button> elements, the Navigation and Navigation Bar components only support the <button> elements.
(2). Things to note when the link is used as a button
If the <a> element is used as a button -- and is used to trigger certain functions on the current page -- rather than linking other pages or linking other parts of the current page, be sure to set the role="button" property for it.
(3). Cross-browser display
The best practice we summarized is that it is highly recommended to use the <button> element whenever possible to obtain matching drawing effects on each browser.
In addition, we also discovered a bug on the browser in Firefox <30, which shows that it prevents us from setting the line-height attribute for buttons created based on the <input> element, which causes the Firefox browser to not be fully consistent with other buttons.
2. Predefined styles
//General information <button>Button</button>
Style description
btn-default default style
btn-success style
btn-info general information style
btn-warning warning style
btn-danger dangerous style
btn-primary preference style
btn-link link style
3. Size
//Size from large to small<button>Button</button><button>Button</button><button>Button</button><button>Button</button>
4. Block level button
//Block level line break<button>Button</button><button>Button</button>
5. Activation status
//Activate button <button>Button</button>
6. Disable status
//Disable button <button>Button</button>
The above is the Bootstrap table and button functions introduced to you by the editor. I hope it will be helpful to everyone!