Bootstrapin käyttö sivuilla
Otsikko tageille (h1-h6) on suoraan omat muotoilut. Samoin kuin monelle muullekin HTML -tagille. Kattavan listauksen muotoiluista voit käydä katsomalla esim. tästä.
Lisäksi voidaan liittää monia erilaisia komponetteja. Esim. alla oleva navikointipalkki on toteutettu komponetin avulla.
Kyseinen valikko saataisiin aikaiseksi alla olevalla koodilla:
<p><ul class="nav nav-pills">
<li> <a href="#"> Linkki 1 </a> </li>
<li> <a href="#"> Linkki 2 </a> </li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Pudotusvalikko <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li> <a href="#"> Alalinkki 1 </a> </li>
<li> <a href="#"> Alalinkki 2 </a> </li>
<li> <a href="#"> Alalinkki 3 </a> </li>
<li> <a href="#"> Alalinkki 4 </a> </li>
</ul>
</li>
<li> <a href="#"> Linkki 3 </a> </li>
<li> <a href="#"> Linkki 4 </a> </li>
</ul></p>
Lisää erilaisia komponenttien avulla tehtäviä esimerkkejä näet täältä.
Kolmas alue on valmiit javascript koodaukset, joiden avulla voidaan totetuttaa esim. alla oleva kuvakaruselli.
Ko. karusellin voisi toteuttaa esim. seuraavalla koodilla:
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
margin: auto; - keskitetään kuva ja teksti erillisellä style -osuudella
}
</style>
<div id="kuvakar" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#kuvakar" data-slide-to="0" class="active"></li>
<li data-target="#kuvakar" data-slide-to="1"></li>
<li data-target="#kuvakar" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/kuva_1.jpg" alt="Eka kuva">
<div class="carousel-caption">
<h3>Kuva 1</h3>
<p>Kuvassa ... </p>
</div>
</div>
<div class="item">
<img src="images/kuva_2.jpg" alt="Toinen kuva">
<div class="carousel-caption">
<h3>Kuva 2</h3>
<p>Kuvassa ... </p>
</div>
</div>
<div class="item">
<img src="images/kuva_3.jpg" alt="Kolmas kuva">
<div class="carousel-caption">
<h3>Kuva 3</h3>
<p>Kuvassa ... </p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#kuvakar" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#kuvakar" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Jos sivulla olevia nuolia ei haluta mukaan, voisi koodista ottaa <!--Left and right controls --> osuuden pois (viimeinen </div> jää). Lisää javascript mahdollisuuksista voit tutkia esim. tästä.
Yksi tärkeä responsiivisuuden osuus on se että esim. kuvat skaalautuvat pienemmiksi jos ne eivät mahdu olemassa olevaan tilaan. Tämä tapahtuu lisäämällä img tagiin img-responsive luokka. Myös muille elementeille (esim. table) on vastaava luokka olemassa. Esim. alla oleva kuvan koko koodi olisi:
<img class="img-responsive" src="images/kuntola.jpg" width="400" height="256" alt="Kuntola">
