Chapter 10 of the giant screen header thumbnail and warning box components

  • 2021-02-17 06:13:32
  • OfStack

Bootstrap, from Twitter, is by far the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster. Let me first tell you the key points of learning.

Learning points:

1. Giant screen components

2. The header component

3. Thumbnail component

4. Warning box component

In this lesson, we will focus on the 4 components of Bootstrap: Screen, Header, Thumbnail, and Warning.

1. The giant-screen components

The giant screen component is mainly used to display the key areas of the website.


// Within a fixed range, there are rounded corners 
<div class="container">
<div class="jumbotron">
<h2> Site title </h2>
<p>
 This is a 1 A learning website! 
</p>
<p>
<a href="#" class="btn btn-default"> More content </a>
</p>
</div>
</div> 
//100% Full screen, no rounded corners 
<div class="jumbotron">
<div class="container">
<h2> Site title </h2>
<p>
 This is a 1 A learning website! 
</p>
<p>
<a href="#" class="btn btn-default"> More content </a>
</p>
</div>
</div>

2. Header component


// increase 1 Some space 
<div class="page-header">
<h1> The headlines  <small> headings </small></h1>
</div> 

3. Thumbnail component


// Thumbnail with response 
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
</div>
</div> 
// Custom content 
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3> illustrated </h3>
<p>
 This is a 1 A thumbnail of a picture combined with text 
</p>
<p>
<a href="#" class="btn btn-default"> Enter the </a>
</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3> illustrated </h3>
<p>
 This is a 1 A thumbnail of a picture combined with text 
</p>
<p>
<a href="#" class="btn btn-default"> Enter the </a>
</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3> illustrated </h3>
<p>
 This is a 1 A thumbnail of a picture combined with text 
</p>
<p>
<a href="#" class="btn btn-default"> Enter the </a>
</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3> illustrated </h3>
<p>
 This is a 1 A thumbnail of a picture combined with text 
</p>
<p>
<a href="#" class="btn btn-default"> Enter the </a>
</p>
</div>
</div>
</div>
</div>
</div> 

4. Warning box component

The alert 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> 
// Warning box with closing 
<div class="alert alert-success">
Bootstrap
<button type="button" class="close" data-dismiss="alert">
<span>&times;</span>
</button>
</div> 
// Autofit hyperlinks 
<div class="alert alert-success">
Bootstrap , please visit the official website  <a href="#" class="alert-link"> download </a>
</div>

The above content is this site to introduce BootStrap component chapter 10 of the giant screen header thumbnail and warning box components, I hope to help you!


Related articles: