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>×</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!