Analysis of Bootstrap thumbnail components and Alert box components and bootstrap thumbnails

Analysis of Bootstrap thumbnail components and Alert box components and bootstrap thumbnails

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:

<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 Firefox's responsive design view to view

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

<Div class = "container"> <div class = "row"> <div class = "col-md-3"> <a href = "#" class = "thumbnail">  </a> <div class =" caption "> 

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:

<Div class = "alert-success" role = "alert"> congratulations! </Div> <div class = "alert-info" role = "alert"> enter the correct password </div> <div class = "alert-warning" role = "alert"> you have failed the operation twice, last chance </div> <div class = "alert-danger" role = "alert"> sorry, your password is incorrect! </Div>

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:

<Div class = "alert-success alert-dismissable" role = "alert"> <button class = "close" type = "button" data-dismiss = "alert"> × </button> congratulations! </Div> <div class = "alert-info alert-dismissable" role = "alert"> <button class = "close" type = "button" data-dismiss =" alert "> × </button> enter the correct password </div> <div class =" alert-warning alert-dismissable "role =" alert "> <button class = "close" type = "button" data-dismiss = "alert"> × </button> you have failed the operation twice, last chance </div> <div class = "alert-danger alert-dismissable" role = "alert"> <button class = "close" type = "button" Data-dismiss = "alert"> × </button> sorry, your password is incorrect! </Div>

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:
<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><div class="alert alert-info" role="alert"><strong>Well done!</strong>You successfully read<a href="#" class="alert-link">this important alert message</a></div><div class="alert alert-warning " role="alert"><strong>Well done!</strong>You successfully read<a href="#" class="alert-link">this important alert message</a></div><div class="alert alert-danger" role="alert"><strong>Well done!</strong>You successfully read<a href="#" class="alert-link">this important alert message</a></div>

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!