Simple analysis of bootstrap thumbnail components and warning box components _javascript skills

Bootstrap Introduction

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.

Thumbnail component

Thumbnails in the Web site is most commonly used is the Product List page, a row shows several pictures, some under the picture with a title, description content, buttons and other information.

The bootstrap framework will separate this part into a modular component that is implemented with the bootstrap grid system through the class name. Thumbnail. The following is a different version of the source file for the bootstrap thumbnail component:

LESS:tbumbnails.less

SASS: _tbumbnails.scss

Implementation principle:

The implementation of the layout relies mainly on the grid system of the bootstrap framework, which is the corresponding style of the thumbnail

. thumbnail {
display:block;
padding:4px;
margin-bottom:20px;
line-height:1.42857143;
Background-color: #fff;
border:1px solid #ddd;
border-radius:4px;
-webkit-transition:all 2s ease-in-out;
Transition:all 2s ease-in-out;
Thumbnail > img,
. Thumbnail a > img {
margin-right:auto;
Margin-left:auto;
}
A.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #428bca;
}
. Thumbnail. caption {
padding:9px;
Color: #333;
}

Take a look at an example:

<div class= "Container" >
<div class= "Row" >
<div class= "col-md-3" >
<a herf= "#" Class = "thumbnail" >

</a>
</div>
<div class= "col-md-3" >
<a herf= "#" class= "thumbnail" >

</a>
</div>
<div class=" Col-md-3 ">
<a herf=" # "class=" thumbnail "> 
</a>
</div>
<div class=" col-md-3 ">
<a herf=" # " class= "thumbnail" >

</a >
</div>
</div>
</div>

The effect is as follows:

You can use the Firefox response Design view to view

On the basis of only thumbnails, add a div container with a class name of. Caption, placing other content in the container, such as: title, text description, button, etc.

<div class= "Container" > <div class= "Row" > <div class= "col-md-3" > <a href= "#" class= "thumbnail" >  </a> <div class= "caption" >  

Warning Box components

The bootstrap framework implements the alert box effect by using the. Alert style, and by default Bootstrap provides four different warning box effects:

1, Success Warning Box: Prompt the user to operate successfully, on the basis of. Alert, append. alert-success style;

2, Information warning box: To provide users with prompt information, on the basis of. Alert, append. Alert-info style;

3, Warning Alert box: Provide warning information, on the basis of. Alert, append. alert-warning style;

4, Error warning Box: Prompts the user to operate the error, on the basis of. Alert, append. Alert-danger style;

Among them, the. Alert style mainly sets the background color of the warning box, borders, rounded corners, text color, in addition to H4, p, UL and. Alert-link did the processing of the style, the following is the CSS source code:

. alert {padding:15px; margin-bottom:20px; border:1px solid transparent; border-radius:4px}. Alert H4 {margin-top:
0;
Color:inherit; } alert. Alert-link {font-weight:bold}. Alert > P,. alert > UL {margin-bottom:0; alert > P + p {margin
-top:5px; }. alert-success {color: #3c763d; Background-color: #dff0d8; Border-color: #d6e9c6; alert-success hr {Border-top-colo
R: #c9e2b3; }. alert-success. alert-link {color: #2b542c;} alert-info {color: #31708f; Background-color: #d9edf7; Border-color: #b
CE8F1; }. Alert-info hr {border-top-color: #a6e1ec; alert-info. Alert-link {color: #245269;} alert-warning {color: #8a6d3
b
Background-color: #fcf8e3;
Border-color: #faebcc; }. alert-warning hr {border-top-color: #f7e1b5; alert-warning. Alert-link {color: #66512c;} alert-danger {color: #
a94442;
Background-color: #f2dede;
Border-color: #ebccd1; }. Alert-danger hr {border-top-color: #e4b9c0; alert-danger. Alert-link {color: #843534;}

For example:

<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=" alert > You have failed two times and one last chance </div>
<div class= "alert Alert-danger" role= "alert" > Sorry, your password input is wrong! </div>

Warning boxes that can be turned off

1. Append A. Alert-dismissable class name to the container on the default warning box

2, in the button label to add. Close, to implement the closing button of the warning box

3, to ensure that the Close button elements are set on the custom properties data-dismiss= "Alert" (off the Warning box requires JS to detect the property, thereby controlling the warning box off)

Example:

<div class= "alert alert-success alert-dismissable" role= "alert" > <button class= "Close
" type= "button" data-dismiss= "alert" >x</button>
congratulations on your successful operation!
</div>
<div class= "alert alert-info alert-dismissable" role= "alert" >
<button class= " Close "type=" button "data-dismiss=" alert ">x</button>
Please enter the correct password
</div>
<div class=" Alert alert-warning alert-dismissable "role=" alert ">
<button class=" Close "type=" button "data-dismiss=" Alert ">x</button>
you have failed to operate two times and have one last chance
</div>
<div class=" alert Alert-danger Alert-dismissable "role=" alert ">
<button class=" Close "type=" button "data-dismiss=" alert ">x</ Button>
Sorry, your password input is wrong!
</div>

Links to alert boxes

Sometimes need to add a link in the warning box, tell the user to jump to the new page, bootstrap frame of the link to the warning box to do a highlight. Add a. Alert-link class name to the link to the warning box, and the following is the Alert-link CSS style

. alert. alert-link {
font-weight:bold
}
* * The text color of the link in the different type of alert box
//. alert-success. Alert-link {
color: #2b542c;
}
. Alert-info. Alert-link {
color: #245269;
}
. Alert-warning. Alert-link {
color: #66512c;
}
. Alert-danger. Alert-link {
color: #843534;
}

Example:

<div class= "alert alert-success" role= "alert" >
<strong>well done!</strong>
Successfully read
<a href= "#" class= "Alert-link" >this important alert message</a>
</div>
<div class= "alert Alert-info" role= "alert" >
<strong>well done!</strong>
Successfully read
<a href= "#" class= "Alert-link" >this important alert message</a>
</div>
<div class= "alert alert-warning" role= "alert" >
<strong>well done!</strong>
Successfully read
<a href= "#" class= "Alert-link" >this important alert message</a>
</div>
<div class= "alert Alert-danger" role= "alert" >
<strong>well done!</strong>
Successfully read
<a href= "#" class= "Alert-link" >this important alert message</a>
</div>

About this article to introduce you to the bootstrap thumbnail components and warning box components of the relevant knowledge to introduce so many people, I hope to help you!