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ť :)