Chapter III Bootstrap table and button function _javascript skills

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster.

Learning points:

1. Table

2. Button

In this lesson we mainly learn about Bootstrap table and button function, through the built-in CSS definition, show a variety of rich effects.

A Form

Bootstrap offers a number of rich table styles for developers to use.

1. Basic format

Implementing a basic table style

Note: we can view the corresponding CSS through Firebug.

2. Striped Form

Let the line in <tbody> produce a row and a single row plus monochrome background effect

Note: table effects need to be based on the basic format. Table

3. Table with Border

Add a border to a table

4. Hover Mouse

Let the table under <tbody> hover mouse to achieve background effect

5. Status class

You can set the background style for each row individually

Note: There are altogether five different styles to choose from.

Style Description:

Active mouse hover over rows or cells
Success mark a successful or positive action
Info identifies common hints or actions
Warning identification warning or requiring user attention
Danger represents a dangerous or potentially negative action.

6. Hide a line

Hide Rows

7. Response Form

Table parent Element Set response, less than 768px appears border

Two Button

Bootstrap offers a number of rich buttons for developers to use.

1. Labels or elements that can be used as buttons

Convert to normal button
<a href= "###" class= "btn btn-default" >Link</a>
<button class= "btn Btn-default" > Button</button>

There are three things to note:

(1). Considerations for Components

Although the button class can be applied to <a> and <button> elements, the navigation and navigation bar components only support <button> elements.

(2). Considerations for links being used as buttons

If the <a> element is used as a button-and is used to trigger certain features on the current page-instead of linking to other pages or linking other parts of the current page, be sure to set the Role= button property for it.

(3). Cross-Browser presentation

The best practice we've summed up is that it is highly recommended to use the <button> element as much as possible to obtain a matching drawing effect on each browser.

In addition, we found a bug in the Firefox <30 version of the browser that prevents us from setting line-height properties for the buttons that are created on the <input> element, which results in Firefox The browser cannot be exactly the same height as the other buttons.

2. Predefined styles

General Information

Style description

Btn-default Default Style
Btn-success 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

From large to small size
<button class= "btn btn-lg" >Button</button>
<button class= "BTN" >button</ button>
<button class= "btn btn-sm" >Button</button>

4. Block Level button

Block-level wrapping
<button class= "btn Btn-block" >Button</button>

5. Activation status

Activate button

6. Disabled status

Disable button
<button class= "btn Active disabled" >Button</button>

The above is a small series to introduce the Bootstrap table and button function, I hope to help!