Play Turn bootstrap (Basic)--(7. Other built-in components)

1. Thumbnail image (I.)
Thumbnails in the site is the most commonly used in the Product List page, a line to display a few pictures, and some under the picture (left or right) with the title, description and other information. The bootstrap framework independently sets this part up as a module component. And through the "thumbnail" style with the bootstrap grid system to achieve. You can make the Product List page look better.
This is achieved through the "thumbnail" style with the bootstrap grid system.
As I said earlier, the implementation of thumbnails is used in conjunction with the grid system, assuming we have a list of products as shown in:

<div class="container">    <div class="Row">        <div class="col-xs-6 col-md-3">            <a href="#" class="thumbnail">                <img src="Http://img.mukewang.com/5434eba100014fe906000338.png" style ="height:180px; width:100%; Display:block; " alt="">            </a>            <div class="caption">                <h3>Bootstrap Frame Series Tutorial</h3>                <p>Bootstrap framework is a good front-end box, even if you are a back-end programmer or you are a non-design front-end personnel, you can rely on bootstrap to make a beautiful website ...</P>                <p>                    <a href="# #" class="btn btn-primary">Start learning</a>                    <a href="# #" class="btn btn-info">are learning</a>                </P>            </div>          </div>    </div></div>

2. Alert box
The bootstrap frame uses the "alert" style to implement the alert box effect. By default, four different alert box effects are available:
1, success warning Box: Tell the user to succeed, add "alert-success" style based on "alert" style, the background, border and text are all green;
2. Information Alert box: To provide users with information, the "alert" style based on the "Alert-info" style, the actual background, border and text are light blue;
3, Warning Alert box: Prompt user to operate carefully (provide warning information), on the "alert" style based on the Append The "alert-warning" style, which is the background, the border, the text is light yellow;
4, Error warning Box: Prompt user action error, the "alert" style based on the "Alert-danger" style, the background, the border and text are light red.
When you use it, you can place a cue message in a div container with the class name "alert". To implement different types of alert boxes, simply append the corresponding class name to "alert", as follows:

<div  class  =  "alert Alert-success"  role= "alert"  > Congratulations on your successful operation! </div  ><div  class  = "alert Alert-info"  role=  "alert"  > Please enter the correct password </div  ><div  class  = "alert Alert-warning " role= > You have failed the operation two times and one last chance </ div  ><div   Class  = "alert Alert-danger"  role= "alert"  > Sorry, you entered the wrong password </div ; 

Implementation principle:
The "alert" style of the source code is mainly set the warning box background color, border, rounded corners and text color. In addition to its internal several elements H4, p, UL and ". Alert-link" do a special style of processing:

alert box with off function
How to use:
Just add a close button to the default Alert box. Then proceed to three steps:
1. The "alert-dismissable" style needs to be added based on the basic alert box "alert".
2. Add the class= "Close" class to the button tag to implement the style of the alert box Close button.
3. To ensure that a custom property is set on the Close button element: "data-dismiss=" alert "(Because the Disable alert box requires JavaScript to detect the property, which controls the closing of the alert box).
The specific use is as follows:

<divclass="alert alert-success alert-dismissable" role="alert">    class="close" type="button" data-dismiss="alert">&times;</button>    恭喜您操作成功！</div>

Principle analysis: In the style, you need to add the "alert-dismissable" style on the basis of the basic alert box "alert".

How to link
Implementation method:
The bootstrap framework adds a class name named "Alert-link" to the link to the alert box and provides highlighting to the link through the "Alert-link" style.

<div class="alert alert-success" role="alert">    <strong>Well done!</strong>     You successfully read     <a href="#" class="alert-link">this important alert message</a>    .</div>

3. Progress bar
progress bar – Basic style
How to use:
Bootstrap framework is also implemented in this way, he provides two containers, outer containers using the "progress" style, sub-containers using the "Progress-bar" style. Where progress is used to set the container style for the progress bar, and Progress-bar is used to limit progress on the progress bar. The use of the method is very simple:
Show progress by adding a percentage to the style.

<divclass="progress">       <divclass="progress-bar" style="width:40%"></div></div>

progress bar – Color progress bar
The progress bar in the bootstrap frame is the same as the warning message box, in order to give the user a better experience, and to configure different progress bar colors depending on the state. This is called the Color progress bar, which mainly includes the following four kinds:
? Progress-bar-info: Indicates the information progress bar, the progress bar color is blue
? Progress-bar-success: Indicates success progress bar, progress bar color is green
? Progress-bar-warning: Indicates a warning progress bar, the progress bar color is yellow
? Progress-bar-danger: Indicates error progress bar, progress bar color is red
How to use:
In fact, the CSS style of the progress bar is added to the color.
It's very simple to use, just add the corresponding class name to the underlying progress. Such as:

<Div class="Progress"> <Div class="Progress-bar progress-bar-success"style="width:40%"></Div></Div><Div class="Progress"> <Div class="Progress-bar progress-bar-info"style="width:60%"></Div></Div><Div class="Progress"> <Div class="Progress-bar progress-bar-warning"style="width:80%"></Div></Div><Div class="Progress"> <Div class="Progress-bar Progress-bar-danger"style="width:50%"></Div></Div>

progress bar – Stripe progress bar
In addition to providing a colored progress bar in the bootstrap framework, a stripe progress bar is provided, which is implemented with a linear gradient of CSS3, without any image. Using the stripe progress bar in the bootstrap frame only needs to add the class name "Progress-striped" based on the "progress" of the progress bar's container, of course, if you want your progress bar to have a color effect like the color progress, You only need to add the corresponding color class name on the progress bar, as described in the previous color progress bar.

Let's take a look at the structure of the stripe progress bar:<Div class="Progress progress-striped"> <Div class="Progress-bar progress-bar-success"style="width:40%"></Div></Div><Div class="Progress progress-striped"> <Div class="Progress-bar progress-bar-info"style="width:60%"></Div></Div><Div class="Progress progress-striped"> <Div class="Progress-bar progress-bar-warning"style="width:80%"></Div></Div><Div class="Progress progress-striped"> <Div class="Progress-bar Progress-bar-danger"style="width:50%"></Div></Div>

progress bar – Dynamic stripe progress bar
How to use:
Add the "active" class name on the basis of the progress bar "Progress progress-striped" two classes. The following code:

<divclass="progress progress-striped active">    <divclass="progress-bar progress-bar-success" style="width:40%"></div></div>

Implementation principle:
To make the stripe progress bar move, the bootstrap framework also provides a dynamic stripe progress bar. Its implementation principle is mainly through the CSS3 animation to complete. First, through the @keyframes created a progress-bar-stripes animation, this animation mainly done one thing, is to change the position of the background image , that is, the value of background-position. Because the stripe progress bar is made by CSS3 linear gradients, Linear-gradient implements the background image in the corresponding background.

progress Bar – Cascade progress bar
In addition to the above-mentioned progress bars, the bootstrap framework provides a cascading progress bar, which allows the progress bars of different states to be placed together and arranged horizontally. The specific use is as follows:
There is a left floating style on "Progress-bar". That is, this style, without adding any style code to achieve the above example of cascading effect. Of course, there is a point to note that the sum of the stack progress bar width can not be greater than 100%, greater than 100% will cause the following undesirable effect

<Div class="Progress"> <Div class="Progress-bar progress-bar-success"style="width:20%"></Div> <Div class="Progress-bar progress-bar-info"style="width:10%"></Div> <Div class="Progress-bar progress-bar-warning"style="width:30%"></Div> <Div class="Progress-bar Progress-bar-danger"style="width:15%"></Div></Div>

progress bar – progress bar with label
The various progress bars described above simply pass the progress value to the user through the color progress. In practice, however, there are many times when it is necessary to pass the completed progress value directly to the user in the progress bar, and the usage scenario is considered for everyone in bootstrap.

Implementation method:
Just add the values you need in the progress bar, such as:

<divclass="progress">    <divclass="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div></div>

4. Media Objects
Implementation method:
Just add the values you need in the progress bar, such as:

<divclass="progress">    <divclass="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div></div>

5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Play Turn bootstrap (Basic)--(7. Other built-in components)