A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
Basic example
Default behavior show the same content as previous version 4.1.0
That meens, with only jumbotron
attribute defined, we got such output :title:
or :doctitle:
for header, and :description:
for sub-header.
Jumbotron Bootstrap Component
http://getbootstrap.com/components/#jumbotron
Html code produced is :
<div class="jumbotron"> <h1>Jumbotron Bootstrap Component</h1> <p class="lead">http://getbootstrap.com/components/#jumbotron</p> </div>
Common Jumbotron
If you want to display the same jumbotron content on all pages, use both jumbotron
and jumboinfo1
attributes
and put the common content into a jumboinfo.html
file.
E.g: Content of a jumboinfo.html
file
<h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
We got such result :
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Specific Jumbotron
If you want to display a specific jumbotron content on one page, use both jumbotron
and jumboinfo
attributes
and put the specific content into a <filename>-jumboinfo.html
file, where <filename>
is the docname
of your page.
[http://asciidoc.org/userguide.html#X60]
for
docname
attribute.E.g: Content of a <filename>-jumboinfo.html
file
<h1>Hello, world!</h1> <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
We got such result :
Hello, world!
Combined Common and Specific Jumbotron
If you want to display a jumbotron that include both the common and the specific content, use both jumbotron
and jumboinfo2
attributes
and put the specific content into a <filename>-jumboinfo.html
file, where <filename>
is the docname
of your page.
[http://asciidoc.org/userguide.html#X60]
for
docname
attribute.E.g: Content of a jumboinfo.html
file
<h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
E.g: Content of a <filename>-jumboinfo.html
file
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
We got such result :
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.