如何在Bootstrap中使用Jumbotron和页面标头类？

Introduction

介绍

In the previous article, we have learned how Responsive column, Nesting Columns and offset Columns work and how to use them? I hope now, you all are comfortable with the grid system; what is it, how to use it and how we can use it for creating a responsive page. Now, in this article, we’ll see how .Jumbotron class works and what is it, and know more about .page-header class. If you have any doubt, feel free to ask in the comment section.

在上一篇文章中，我们了解了响应列，嵌套列和偏移列的工作方式以及如何使用它们？我希望现在，大家都对网格系统感到满意；它是什么，如何使用它以及我们如何使用它来创建响应式页面。现在，在本文中，我们将了解.Jumbotron类的工作原理以及它的作用，并进一步了解.page-header类 。如有任何疑问，请随时在评论部分提问。

巨宝 (JUMBOTRON)

It is like a big grey box. we can use this .jumbotron class to highlight some special piece of information and to focus on visitor's attention; where the content size of heading increases and it adds a lot of margins. We can use any HTML, CSS tags, elements and any style, including bootstrap elements and classes inside it. To use .jumbotron class you have to use a <div> element with .jumbotron class.

就像一个大灰盒子。我们可以使用这个.jumbotron类来突出显示一些特殊的信息并吸引访问者的注意力；标题的内容大小增加了，并且增加了很多边距。我们可以使用任何HTML，CSS标签，元素和任何样式，包括其中的bootstrap元素和类。要使用.jumbotron类，你必须使用一个<div>与.jumbotron类元素。

If you use .container and .container-fluid class, then you can also use .jumbotron class inside and outside the .container and .container-fluid class where .container-fluid occupies the entire horizontal space.

如果使用.container和.container-fluid类，则还可以在.container和.container-fluid类的内部和外部使用.jumbotron类，其中.container-fluid占据整个水平空间。

We can use this .jumbotron for presentation, images, Articles, blogs, New Posts etc.

我们可以使用此.jumbotron进行演示，图像，文章，博客，新帖子等。

Example

例

<div class="container">
<div class="jumbotron">
<h1> Jumbotron Inside the .container </h1>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1> Jumbotron Outside the .container </h1>
</div>
</div>	
<div class="container-fluid">
<div class="jumbotron">
<h1> Jumbotron Inside the .container-fluid </h1>
</div>
</div>
<div class="jumbotron">
<div class="container-fluid">
<h1> Jumbotron Outside the .container-fluid </h1>
</div>
</div>

Mobile and Tablet View

手机和平板电脑视图

Desktop View

桌面检视

Note:

注意：

You can also use .Jumbotron-fluid class with .container and .container-fluid for full width jumbotron. It works similarly to .container-fluid class works for full width. There is not much difference between them.

您还可以将.Jumbotron-fluid类与.container和.container-fluid一起用于全宽jumbotron 。它的作用类似于.container-fluid类的全宽度作品。它们之间没有太大区别。

Syntax:

句法：

 <div class="jumbotron jumbotron-fluid">

创建页眉 (Create a Page-header)

There is also a another class .page-header class, .page-header class mainly work in bootstrap 3, not in bootstrap 4... just like .jumbotron class that creates a big grey box; same as .page-header class, add a horizontal line and add some extra spaces. It is like a section divider; Use <div> for .page-header class.

还有另一个.page-header类， .page-header类主要在bootstrap 3中工作，而不是在bootstrap 4中工作……就像.jumbotron类会创建一个大的灰色框；与.page-header类相同，添加一条水平线并添加一些额外的空格。它就像一个分区分隔符。将<div>用于.page-header类。

Example: In this example, you can see that; there is no more difference between them.

示例：在此示例中，您可以看到；他们之间没有更多区别。

<div class="container" style="background-color:lightgrey">
<div class="page-header" >
<h1>We use page header </h1>
</div>
<p> Hello </p>
<p> You have learnt bootstrap. </p>
</div>
<div class="container-fluid" style="background-color:grey">
<div class="page-header" >
<h1>We use page header </h1>
</div>
<p> Hello </p>
<p> You have learnt bootstrap. </p>
</div>

Mobile and Tablet view

手机和平板电脑视图

page-header class mobile tablet view in BS

Desktop view

桌面检视

Conclusion:

结论：

So, In this article we have learnt about .jumbotron, .jumbotron-fluid and .page-header class. In this next article, we will learn about what is typography and how it is used. See you soon in the next article! Happy Learning!

因此，在本文中，我们了解了.jumbotron ， .jumbotron-fluid和.page -header类。在下一篇文章中，我们将学习什么是排版以及如何使用它。下篇文章很快见！学习愉快！