Bootstrap CSS component: Big screen display

When designing web page layout, there is often a large-screen content display jumpotron

As the name implies, this component can increase the size of the title and add more margins to the login page content.

It can be seen from the source code:

If the jumpotron is placed in the container style, the rounded corners will be displayed; if not placed inside, the rounded corners will not be displayed.

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
 &lt;!-- Bootstrapfrom3.0The version begins to fully support mobile platforms，Implement the mobile-first purpose --&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

 &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;

 &lt;!-- Bootstrap --&gt;
 &lt;link href="bootstrap-3.3.7-dist/css/" rel="stylesheet"&gt;

 &lt;/head&gt;
 &lt;body&gt;
  &lt;!-- Extra large screenjumbotron：
   1.Create a class .jumbotron. container &lt;div&gt;
   2.Except for a larger one &lt;h1&gt;，Font thickness font-weight Reduced to 200--&gt;
  &lt;div class="jumbotron"&gt;
   &lt;h1&gt;Hello,world!&lt;/h1&gt;
   &lt;p&gt;This is a simple hero unit.&lt;/p&gt;
   &lt;p&gt;&lt;button class="btn btn-primary"&gt;Learn more&lt;/button&gt;&lt;/p&gt;
  &lt;/div&gt;

 &lt;!-- bootstrapIt is based onjQuery--&gt;
 &lt;script src="/ajax/libs/jquery/1.12.4/"&gt;&lt;/script&gt;
 &lt;script src="bootstrap-3.3.7-dist/js/"&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.