The tenth chapter of the huge screen head thumbnail and warning box components _javascript tips

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. Here is the first point to learn.

Learning points:

1. Macro Screen Components

2. Page Header Components

3. Thumbnail components

4. Warning Box component

In this lesson, we'll take a look at the four component features of Bootstrap: the macro screen component, the page header component, the thumbnail component, and the warning box component.

A Macro Curtain Assembly

The macro screen component is the key area of the display site.

Within a fixed range, rounded corners
<div class= "container" >
<div class= "Jumbotron" >
 
 

Two Page Header Component

Add some space
<div class= "Page-header" >
 
 

Three Thumbnail component

Thumbnail matching response <div class= "container" > <div class= "Row" > <div class= "col-xs-6 col-md-3 col-sm-4" > <div class= "thumbnail" >  </div> </div> <div class= "Col-xs-6 col-md-3 Col-sm-4 "> <div class=" thumbnail ">  </div> </div> <div
class= "col-xs-6 col-md-3 col-sm-4" > <div class= "thumbnail" >  </div> </div> <div class= "col-xs-6 col-md-3 col-sm-4" > <div class= "thumbnail" >  </div> </div> </div> </div>/custom content <div class= "container" > <div class= "Row" &
Gt <div class= "col-xs-6 col-md-3 col-sm-4" > <div class= "thumbnail" >  < Div class= "caption" >  

Four Warning Box component

The warning box component is a set of predefined messages.

Basic Warning Box
<div class= "alert alert-success" >Bootstrap</div>
<div class= "alert Alert-info" > bootstrap</div>
<div class= "alert alert-warning" >Bootstrap</div>
<div class= "alert Alert-danger ">Bootstrap</div> 
//With closed warning box
<div class=" alert alert-success ">
Bootstrap
<button type= "button" class= "Close" data-dismiss= "alert" >
<span>x</span>
</ button>
</div> 
//Auto Fit Hyperlink
<div class= "alert alert-success" >
Bootstrap, please go to the official website <a href= "#" class= "Alert-link" > Downloads </a>
</div>

The above content is small to introduce the bootstrap components of the tenth chapter of the huge screen head thumbnail and warning box components, I hope to help!