Bootstrap Jumbotron en Page Header
Die skep van 'n Jumbotron
'n Jumbotron dui op 'n groot boks om ekstra aandag te vestig op 'n paar spesiale inhoud of inligting.
'n Jumbotron word vertoon as 'n grys boks met geronde hoeke. Dit vergroot ook die lettergroottes van die teks daarin.
Wenk: Binne 'n jumbotron kan jy byna enige geldige HTML plaas, insluitend ander Bootstrap-elemente/-klasse.
Gebruik 'n <div>element met klas .jumbotronom 'n jumbotron te skep:
Selflaai-tutoriaal
Bootstrap is die gewildste HTML-, CSS- en JS-raamwerk vir die ontwikkeling van responsiewe, selfone-eerste projekte op die web.
Jumbotron Binne-houer
Plaas die jumbotron binne-in die <div class="container">as jy wil hê die jumbotron moet NIE tot by die rand van die skerm strek nie:
Voorbeeld
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Jumbotron Buitehouer
Plaas die jumbotron buite die <div class="container">as jy wil hê dat die jumbotron na die skermrande moet strek:
Voorbeeld
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Skep 'n bladsyopskrif
'n Bladopskrif is soos 'n afdelingverdeler.
Die .page-headerklas voeg 'n horisontale lyn onder die opskrif by (+ voeg 'n bietjie ekstra spasie rondom die element by):
Voorbeeld bladsyopskrif
Gebruik 'n <div>element met klas .page-headerom 'n bladsyopskrif te skep:
Voorbeeld
<div class="page-header">
<h1>Example Page Header</h1>
</div>