Every day, Bootstrap must learn the thumbnails and warning window _ javascript skills

Every day, Bootstrap has to learn about thumbnails and warning windows, and has little knowledge about Bootstrap thumbnails and warning windows. I hope to learn more about Bootstrap thumbnails and warning windows through this article, get the result. 1. thumbnail

Thumbnails are commonly used on the product list page. Several images are displayed on one line, and some have titles, descriptions, and other information under the images (either on the left or right. The Bootstrap framework independently forms a module component. The "thumbnail" style is used in combination with the bootstrap grid system. The product list page can be better viewed.

Source code file:

☑LESS version:Corresponding file thumbnails. less

☑Sass version:Corresponding file _ thumbnails. scss

☑Compiled version:Bootstrap.css file 4,402nd lines ~ 4,426th rows

Usage:

The "thumbnail" style works with the bootstrap grid system.

As mentioned above, the implementation of thumbnails is used together with the grid system. Suppose we have a product list, as shown in:

First, let's look at the structure:

  
    
                        
  …  

The above structure indicates that when the screen width (the visible area is greater than 768px), four thumbnails are displayed in one line (Click full screen to view the effect ):

When the narrow screen (the visible area is smaller than 768px), only two thumbnails are displayed in one line:

• Col-xs-cell phone with Ultra small screen (<768px ),
• Col-sm-Small Screen Panel (≥768px ),
• Col-md-medium screen desktop display (≥992px)

Class = "col-xs-6 col-md-3" this is a responsive grid syntax that you can think so when the screen is small screen (<768px) automatic use of class = "col-xs-6" when the screen is medium screen (> = 768px) automatic use of class = "col-md-3" BootStrap is divided into 12 columns in total, the code above indicates that at a very small screen, each 6 copies (half), that is, 6, the large screen occupies 3 copies.

Implementation principle:

The layout implementation mainly relies on the mesh system of the Bootstrap framework, and the style code corresponding to the thumbnail:

/Bootstrap.css file 4,402nd lines ~ 4,426th rows/

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

In the previous section, only the thumbnail is used. In addition to this method, the thumbnail can be used with the title, description, and buttons:

On the basis of only thumbnails, a p container named "caption" is added, and other content, such as the title, text description, and buttons, is placed in the container:

  
    
                          
Bootstrap framework series tutorials
The Bootstrap framework is an excellent front-end box. Even if you are a backend programmer or you are a front-end developer who does not understand the design, you can rely on Bootstrap to create beautiful websites...
        
Start learning...
      
    
...

The effect is as follows:

3. Alert box

In websites, web pages always need to communicate with users. In particular, when a user's operation context provides users with valid warning boxes, such as notifying users of operation success, Operation errors, prompts, or warnings. As shown in:

The Bootstrap framework has an independent component to achieve the above effect. This component is called a warning box.

Source code version:

☑LESS version:Corresponding source code file alerts. less

☑Sass version:Corresponding source code file _ alerts. scss

☑Compiled version:Bootstrap.css file 4,427th lines ~ 4,499th rows

4. Default Alert box

The Bootstrap framework uses the "alert" style to implement the alert box effect. By default, four different warning boxes are provided:

1) Success warning box:Tells the user that the operation is successful. append the "alert-success" style to the "alert" style. The background, border, and text are displayed in green;

2) Information warning box:Provide the user with prompt information. append the "alert-info" style to the "alert" style. The background, border, and text are highlighted in light blue;

3) Warning box:Prompt the user to perform the operation with caution (provide warning information) and append the "alert-warning" style to the "alert" style. The background, border, and text are all pale yellow;

4) error warning box:An operation error is prompted. Add the "alert-danger" style to the "alert" style. The background, border, and text are highlighted in a light red color.

Usage:

For specific use, you can place the prompt information in the p container named "alert. To implement different types of alert boxes, you only need to append the corresponding class name based on "alert", as shown below:

Congratulations!
Enter the correct password.
You have failed the operation twice and have the last chance.
Sorry, the password you entered is incorrect.

The running effect is as follows:

Implementation principle:

The source code of the "alert" style mainly sets the background color, border, rounded corner and text color of the alarm box. In addition, some elements like h4, p, ul, And. alert-link are specially processed in the style:

/Bootstrap.css file 4,427th lines ~ 4,446th rows/

.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 are implemented through the "alert-success", "alert-info", "alert-warning", and "alert-danger" styles:

/Bootstrap.css file 4,456th lines ~ 4,499th rows/

.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. Warning box that can be closed

When you browse the webpage, you will find some warning boxes with the close button, you can click the close button to automatically close the displayed alarm box (that is, hide or not show the alarm box ). The warning box in the Bootstrap framework also has this function.

Usage:

You only need to add a close button in the default Alert box. Perform the following three steps:

1) add the "alert-dismissable" style on the basis of the basic warning box "alert.

2) Add the class = "close" class to the button label to implement the style of the close button in the Alert box.

3) Make sure that the custom attribute "data-dismiss =" alert "" is set on the close button element. (because the warning box can be closed, Javascript is used to detect this attribute, to control the close of the Alert box ).

The specific usage is as follows:

  ×Congratulations!

The running effect is as follows:

Principle Analysis:

In terms of style, you need to add the "alert-dismissable" style on the basis of the basic warning box "alert", so that you can implement the warning box with the disabled function.

/Bootstrap.css file 4,447th lines ~ 4,455th rows/

.alert-dismissable { padding-right: 35px;}.alert-dismissable .close { position: relative; top: -2px; right: -21px; color: inherit;}

6. Link to the Alert box

Sometimes you may want to add a link address in the alarm box to tell the user to jump to a certain place or a new page. At this time, you want to make it clear that this is the link address. The link style in the Alert box is highlighted in the Bootstrap framework. The links in different types of alarm boxes are roughened and the colors are deepened accordingly.

Implementation Method:

The Bootstrap framework adds a class name named "alert-link" to the link added to the alert box and uses the "alert-link" style to highlight the link.

The specific usage is as follows:

  Warning!Forgot password? ---> Click here
  Oh snap!Incorrect password ---> click here to retrieve the password ..

The running effect is as follows:

Implementation principle:

The implementation style is as follows:

/Bootstrap.css file 4,437th lines ~ 4,439th rows/

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

The above is all the content of this article, hoping to help you learn.