Analysis on Bootstrap thumbnail component and Alert box component _ javascript skills

Thumbnails are commonly used on the product list page of a website. Several images are displayed on one line, and some have titles, descriptions, buttons, and other information under the images. This article introduces the Bootstrap thumbnail component and the Alert box component. If you are interested, learn it together. Bootstrap Introduction

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

Thumbnail Components

Thumbnails are commonly used on the product list page of a website. Several images are displayed on one line, and some have titles, descriptions, buttons, and other information under the images.

The bootstrap framework makes this part independent of a module component, which is implemented through the class name. thumbnail and the bootstrap grid system. The following is the source code file of the bootstrap thumbnail component of different versions:

LESS: tbumbnails. less

SASS: _ tbumbnails. scss

Implementation principle:

The layout implementation mainly relies on the mesh system of the bootstrap framework. below is the style corresponding to 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;}

Let's look at an example:

The effect is as follows:

You can use Firefox's responsive design view to view

Add a p container class named. caption Based on the thumbnail, and place other content in the container, such as title, text description, and button.

Here is the title 1111
Here is the description content here is the description content
Start learning...
Here is the title 2222
Here is the description content 2222 here is the description content 22222 here is the description content 22222 here is the description content 222 here is the description content 2222
Start learning...
Here is the title 3333
Here is the description content 3333 here is the description content 3333 here is the description content 33333 here is the description content 222 here is the description content 3333
Start learning...
Here is the title 4444
Here is the description content 4444 here is the description content 4444 here is the description content 4444 here is the description content 4444 here is the description content 4444
Start learning...

Alert box component

The bootstrap framework uses the. alert style to implement the alert box effect. By default, bootstrap provides four different alert box effects:

1. success warning box: indicates that the operation is successful. Add the. alert-success style to the. alert file;

2. Information warning box: provides the user with prompt information, and adds the. alert-info style based on. alert;

3. warning box: Provides warning information and adds the. alert-warning style to the. alert style;

4. error warning box: indicates an operation error. append the. alert-danger style to the. alert style;

Where ,. the alert style mainly sets the background color, border, rounded corner, and text color of the alert box. In addition, it also applies to h4, p, ul, and. alert-link implements style processing. 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-color: #c9e2b3;}.alert-success .alert-link {color: #2b542c;}.alert-info {color: #31708f;background-color: #d9edf7;border-color: #bce8f1;}.alert-info hr {border-top-color: #a6e1ec;}.alert-info .alert-link {color: #245269;}.alert-warning {color: #8a6d3b;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:

Congratulations!
Enter the correct password.
You have failed the operation twice and have the last chance.
Sorry, your password entered incorrectly!

Warning box that can be closed

1. append a. alert-dismissable class name to the container in the default alert box.

2. Add. close to the button label to enable the close button of the warning box.

3. Make sure that the custom attribute data-dismiss = "alert" is set on the close button element. (To close the alert box, you must use js to detect this attribute to control the closing of the alert box)

Example:

×Congratulations!
×Enter the correct password.
×You have failed the operation twice and have the last chance.
×Sorry, your password entered incorrectly!

Link to the Alert box

Sometimes you need to add a link in the Alert box to tell the user to jump to a new page. The bootstrap Framework highlights the link in the Alert box. Add a class name for. alert-link to the link added to the warning box. The following is the css style of alert-link.

. Alert. alert-link {font-weight: bold;}/* text color linked to different warning boxes */. 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:

Well done!You successfully readthis important alert message
Well done!You successfully readthis important alert message
Well done!You successfully readthis important alert message
Well done!You successfully readthis important alert message

I would like to introduce so much about the Bootstrap thumbnail components and Alert box components introduced in this article, and hope to help you!