SoFunction
Updated on 2025-04-03

Chapter 10: Thumbnail and warning box components of giant screen header

Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster. Let me tell you the key points of learning.

Key points for learning:

1. Giant screen component

2. Header component

3. Thumbnail component

4. Warning box component

In this lesson, we will mainly learn about the four component functions of Bootstrap: giant screen component, header component, thumbnail component and warning box component.

one. Giant screen component

The giant screen component is mainly a key area of ​​the website.

//In a fixed range, there are rounded corners<div class="container">
<div class="jumbotron">
<h2>Website title</h2>
<p>
This is a learning website！
</p>
<p>
&lt;a href="#" class="btn btn-default">More content</a>&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt; 
//100% full screen, no rounded corners&lt;div class="jumbotron"&gt;
&lt;div class="container"&gt;
&lt;h2&gt;Website title&lt;/h2&gt;
&lt;p&gt;
This is a learning website！
&lt;/p&gt;
&lt;p&gt;
&lt;a href="#" class="btn btn-default">More content</a>&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

two. Header component

//Add some space&lt;div class="page-header"&gt;
&lt;h1&gt;Big title &lt;small&gt;subtitle&lt;/small&gt;&lt;/h1&gt;
&lt;/div&gt;

three. Thumbnail component

//Thumbnail image and responsive&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="col-xs-6 col-md-3 col-sm-4"&gt;
&lt;div class="thumbnail"&gt;
&lt;img src="img/" alt=""&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-xs-6 col-md-3 col-sm-4"&gt;
&lt;div class="thumbnail"&gt;
&lt;img src="img/" alt=""&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-xs-6 col-md-3 col-sm-4"&gt;
&lt;div class="thumbnail"&gt;
&lt;img src="img/" alt=""&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-xs-6 col-md-3 col-sm-4"&gt;
&lt;div class="thumbnail"&gt;
&lt;img src="img/" alt=""&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt; 
//Custom content&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="col-xs-6 col-md-3 col-sm-4"&gt;
&lt;div class="thumbnail"&gt;
&lt;img src="img/" alt=""&gt;
&lt;div class="caption"&gt;
&lt;h3&gt;Pictures and texts are both rich&lt;/h3&gt;
&lt;p&gt;
This is a thumbnail of pictures combined with text
&lt;/p&gt;
&lt;p&gt;
&lt;a href="#" class="btn btn-default">Enter</a>&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-xs-6 col-md-3 col-sm-4"&gt;
&lt;div class="thumbnail"&gt;
&lt;img src="img/" alt=""&gt;
&lt;div class="caption"&gt;
&lt;h3&gt;Pictures and texts are both rich&lt;/h3&gt;
&lt;p&gt;
This is a thumbnail of pictures combined with text
&lt;/p&gt;
&lt;p&gt;
&lt;a href="#" class="btn btn-default">Enter</a>&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-xs-6 col-md-3 col-sm-4"&gt;
&lt;div class="thumbnail"&gt;
&lt;img src="img/" alt=""&gt;
&lt;div class="caption"&gt;
&lt;h3&gt;Pictures and texts are both rich&lt;/h3&gt;
&lt;p&gt;
This is a thumbnail of pictures combined with text
&lt;/p&gt;
&lt;p&gt;
&lt;a href="#" class="btn btn-default">Enter</a>&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-xs-6 col-md-3 col-sm-4"&gt;
&lt;div class="thumbnail"&gt;
&lt;img src="img/" alt=""&gt;
&lt;div class="caption"&gt;
&lt;h3&gt;Pictures and texts are both rich&lt;/h3&gt;
&lt;p&gt;
This is a thumbnail of pictures combined with text
&lt;/p&gt;
&lt;p&gt;
&lt;a href="#" class="btn btn-default">Enter</a>&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

Four. Warning box component

The warning box component is a set of predefined messages.

//Basic warning box&lt;div class="alert alert-success"&gt;Bootstrap&lt;/div&gt;
&lt;div class="alert alert-info"&gt;Bootstrap&lt;/div&gt;
&lt;div class="alert alert-warning"&gt;Bootstrap&lt;/div&gt;
&lt;div class="alert alert-danger"&gt;Bootstrap&lt;/div&gt; 
//Warning box with closed&lt;div class="alert alert-success"&gt;
Bootstrap
&lt;button type="button" class="close" data-dismiss="alert"&gt;
&lt;span&gt;&amp;times;&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt; 
//Automatically adapted hyperlink&lt;div class="alert alert-success"&gt;
Bootstrap，Please go to the official website &lt;a href="#" class="alert-link">Download</a>&lt;/div&gt;

The above content is the Big Screen Header Thumbnail and Warning Box Component Chapter 10 of the BootStrap Component, which I introduced to you. I hope it will be helpful to you!