Základná responzivita webstránky
Vďaka Twitter Bootstrapu bude pomerne jednoduché a rýchle pripraviť stránku pre responzívne chovanie.
Na responzivitu sa musíme pozerať inak ako na zobrazenie na webstránke. To čo je na webstránke zobrazené 3x v 4 roch stĺpcoch, bude na mobile zobrazené 1x v 12tich stĺpcoch.
Poďme spoločne upraviť responzivitu v súbore index.html
Úprava slideru na webstránke.
V praxi je dobrým zvykom a z pohľadu UI taktiež vhodné na tabletoch a mobiloch nezobrazovať slider. Slider je pomerne dátovo náročný a na mobiloch je načítanie oveľa pomalšie. Preto do html elementu kde máme priradený aj identifikátor #myCarosuel
pridáme nasledovné dve triedy:
.hidden-sm
, .hidden-xs
, čím docielime, že na mobiloch a tabletoch nebude slider zobrazený.
<div id="myCarousel" class="carousel slide hidden-sm hidden-xs" data-ride="carousel">
...
</div>
Pridanie obrázku
Namiesto slideru bude na webstránke obrázok.
Do index.html súboru hneď za sekciu so sliderom pridáme nasledujúci kód.
<div class="container mobile-image hidden-lg hidden-md col-sm-12 col-xs-12">
<div class="carousel-caption1">
<p class="text-center mobile-p">Som programátorka, ktorá má rada hady :)</p>
</div>
</div>
Tu je pre nás v tejto chvíli dôležité zabezpečiť, aby sa obrázok neukázal na počítačovom a väčšom rozlíšení, čo docielime pomocou tried .hidden-lg
a .hidden-md
, pričom zase zobrazenie od tabletu a mobilu nastavíme pomocou tried .col-sm-12
a .col-xs-12
.
Následne prejdeme do súboru custom.css kde nastavíme základný štýl pre obrázok.
Do triedy .mobile-image
vložíme obrázok (ja som vybrala slide1) z nášho slideru.
Nastavíme obrázku výšku 200px, background-size cover a position na relative, vďaka čomu budeme vedieť nacentrovať text v obrázku.
.mobile-image {
background: url('../img/slide1.jpg') no-repeat;
background-size: cover;
height: 200px;
position: relative;
}
Text v obrázku bude opäť bielou farbou a odsadíme ho zhora o 75px, čím zabezpečíme, že bude vždy v strede.
.carousel-caption1 {
color: #fff;
margin-top: 75px;
}
A na záver text zvýrazníme väčším písmom.
.mobile-p {
font-size: 18px;
}
Ešte jedna vec. - Opäť nahráme kód na Github :) Zálohovania nikdy nie je dosť :)