Bootstrap Jumbotron
This chapter will discuss one more feature Bootstrap supports, the Jumbotron. As the name suggest this component can optionally increases the size of headings and add a lot of margin for landing page content. To use the Jumbotron:
simply create a container <div> with the class of .jumbotron.
In addition to a larger <h1>, the font-weight is reduced to 200px.
The following example demonstrates this:
<div class="container">
<div class="jumbotron">
<h1>Welcome to landing page!</h1>
<p>This is an example forjumbotron.</p>
<p><a class="btn btn-primarybtn-lg" role="button">
Learn more</a>
</p>
</div>
</div>
To get a jumbotron full width, and without rounded corners use the .jumbotron class outside all .container classes and instead add a.container within as shown in the following example:
<div class="jumbotron">
<div class="container">
<h1>Welcome to landing page!</h1>
<p>This is an example forjumbotron.</p>
<p><a class="btn btn-primarybtn-lg" role="button">
Learn more</a>
</p>
</div>
</div>
ليست هناك تعليقات:
إرسال تعليق