Bootstrap and Warning window _javascript tips for daily learning

1. Thumbnail image

Thumbnails in the site is most commonly used in the Product List page, a row shows several pictures, some under the picture (left or right) with the title, description and other information. The bootstrap framework will separate this part into a modular component. And through the "thumbnail" style with the bootstrap grid system to achieve. You can make the Product List page look better.

Source file:

☑less version: corresponding file thumbnails.less

☑sass version: corresponding file _thumbnails.scss

☑ compiled version:bootstrap.css file No. 4402 line ~ No. 4426 Line

How to use:

Through the "thumbnail" style with the bootstrap grid system to achieve.

As mentioned earlier, the implementation of the thumbnail is in conjunction with the grid system, assuming we have a product list, as shown in the following figure:

First look at the structure:

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

The above structure represents four thumbnails (click Full screen to see the effect) when the wide screen (the viewable region is greater than 768px) is displayed on one line:

In a narrow screen (the viewable area is less than 768px), a row displays only two thumbnails:

• col-xs-Ultra Small Screen cell phone (<768px),
• col-sm-small screen Flat (≥768px),
• col-md-Medium Screen Desktop display (≥992px)

class= "Col-xs-6 col-md-3" is the syntax for responsive grids, so you can assume that when the screen is a small screen (<768px) automatically uses class= "Col-xs-6" when the screen is a medium screen (>=768px). class= "Col-md-3" bootstrap a total of 12 columns, the above code indicates that in the minimum screen every 6 (half), that is 6, the medium and large screen is accounted for 3.

Implementation principle:

The layout is implemented primarily on the grid system of the bootstrap framework, and the thumbnail corresponds to the style code:

/bootstrap.css file line No. 4402 ~ No. 4426 Line

. 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;
}

2. Complex thumbnail image

The previous section shows only one use of thumbnails, in addition to the way in which thumbnails fit with headings, descriptions, buttons, and so on:

On the basis of only thumbnails, add a div named "caption" Container, in which other content, such as title, text description, button, etc.:

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

The effect is as follows:

3, Warning box

In the website, the page always needs to do with the user to do the communication and the exchange. Especially when the user action context gives the user some valid warning boxes, such as telling the user the operation is successful, operation error, prompting or warning. As shown in the following illustration:

The bootstrap framework has a separate component that implements the above effect, and this component is called a warning box.

SOURCE version:

☑less version: the corresponding source file alerts.less

☑sass version: the corresponding source file _alerts.scss

☑ compiled version:bootstrap.css file No. 4427 line ~ No. 4499 Line

4, the default warning box

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

1, Success warning Box: tell the user to operate successfully, "alert" style based on the addition of "alert-success" style, the specific rendering of the background, borders and text are green;

2, Information warning Box: to provide users with prompt information, "alert" style based on the addition of "alert-info" style, the specific rendering of the background, borders and text are light blue;

3) Warning Warning Box: prompt the user to operate carefully (provide warning information), the "alert" style based on the addition of "alert-warning" style, the specific rendering is the background, borders, text are light yellow;

4, Error warning Box: Prompt the user operation error, in the "alert" style based on the "Alert-danger" style, the specific rendering of the background, border and text are light red.

How to use:

When used specifically, you can place hints in a div container with 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= Alert" > You have failed to operate two times, and one last chance </div>
<div class= "alert Alert-danger" role= "alert" > Sorry, the password you entered is incorrect </div>

The operation effect is as follows:

Implementation principle:

The "alert" style of the source code is mainly set the warning box background color, borders, rounded corners and text color. In addition to its interior several elements h4, p, UL and ". Alert-link" made special treatment style:

/bootstrap.css file line No. 4427 ~ No. 4446 Line

. 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;
}

Different types of alert boxes, mainly through the "alert-success", "Alert-info", "alert-warning" and "Alert-danger" style to achieve:

/bootstrap.css file line No. 4456 ~ No. 4499 Line

. 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;
}

5, can be closed the warning box

When you browse the Web page, you will find some warning box with a close button, the user click the Close button can automatically turn off the display of the warning box (that is, let the warning box hidden does not show). The warning box in the bootstrap frame also has this functionality.

How to use:

Just add a close button to the default Warning box. Then proceed to three steps:

1, need to be in the basic warning box "alert" on the basis of adding "alert-dismissable" style.

2, add the class= "Close" class in the button label to implement the style of the warning box off button.

3), to ensure that a custom attribute is set on the Close button element: "data-dismiss=" alert "(because the warning box can be turned off by JavaScript to detect the property, thereby controlling the warning box to close).

The specific use is as follows:

<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>

The operation effect is as follows:

Principle Analysis:

On the style, you need to add the "alert-dismissable" style based on the basic alert box "alert" so that you can implement a warning box with a close function.

/bootstrap.css file line No. 4447 ~ No. 4455 Line

. alert-dismissable {
 padding-right:35px
}
. Alert-dismissable. Close {
 position:relative;
 Top: -2px;
 Right: -21px;
 Color:inherit;
}

6, the Warning box link

Sometimes you might want to add a link address to a warning box to tell the user to jump to a particular place or new page. And this time you want to make it obvious to the user that this is the link address. The link style in the warning box is highlighted in the bootstrap frame. The links in different types of warning boxes are processed in bold, and the color is deepened accordingly.

Implementation method:

The bootstrap framework is to add a class name named "Alert-link" to the alert box by adding a name to the link, highlighting the links with the "Alert-link" style.

The specific use is as follows:

<div class= "alert alert-warning" role= "alert" >
 <strong>Warning!</strong>
 forgotten password? ---><a href= "# #" class= "Alert-link" > click here </a>
</div>
<div class= "alert Alert-danger "role=" alert ">
 <strong>oh snap!</strong>
 Password input error---><a href=" # # "class= "Alert-link" > Please click here to retrieve the password. </a>
</div>

The operation effect is as follows:

Implementation principle:

The implementation style is as follows:

/bootstrap.css file line No. 4437 ~ No. 4439 Line

. alert. alert-link {
 font-weight:bold
}

/The text color of the link in the different Type warning 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;
}

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to help you learn.