Izdelava domače strani spletišča

Kreiramo domačo stran vzorčnega spletišča. Stran bo prilagodljiva vsem napravam. V urejevalniku kode Code Inspector programa Adobe Dreamweaver CC ali pa v kateremkoli drugem urejevalniku kode kreiramo in odpremo datoteko index.html.

Domačo spletno stran sestavimo po korakih, pri čemer sledimo zgradbi dokumenta od vrha spletne strani proti dnu v naslednjih korakih:

HTML5 ogrodje in naslov strani

V datoteko index.html napišemo osnovno HTML5 ogrodje in določimo naslov strani eNSA | Spletišče: Domača stran:

Primer izdelave spletišča Postavitev domače strani ogrodje in naslov strani

<!doctype html>
<html lang="sl">
<head>
  <title>eNSA | Spletišče: Domača stran</title>
</head>

<body>

</body>
</html>

Meta oznake

V zaglavje strani vstavimo <meta> oznake, ki določajo kodiranje znakov, ključne besede, opis strani in avtorja:

Primer izdelave spletišča Postavitev domače strani meta oznake

...
<head>
  <meta charset="utf-8">
  <meta name="keywords" content="eNSA, spletišče, website, kreiranje spletišča, spletno mesto, Bootstrap">
  <meta name="description" content="Izdelava in oblikovanje spletnih strani z brezplačnim odprtokodnim okvirjem Bootstrap.">
  <meta name="author" content="eNSA, Stanislav Jagodic">
</head>
...

Ikona spletišča, Bootstrap, ikone, Googlova pisava

V zaglavje strani vstavimo povezavo do:

ikone spletišča
spletnega okvirja Bootstrap
ikon Font Awesome
Googlove pisave Roboto

Primer izdelave spletišča Postavitev domače strani ikona spletišča, Bootstrap, ikone, Googlova pisava

Vstavljanje ikone spletišča:

...
 <head>
   ...
   <!-- Ikona spletišča -->
   <link rel="icon" href="slike/favicon.ico" type="image/x-icon">
 </head>
...

Spletni okvir Bootstrap vstavimo v spletno stran tako, da vsatavimo <meta> oznaki, ki določata združljivost z brskalniki Internet Explorer in nastavita privzeto velikost elementov na velikost 100 % v vsaki napravi.

Vstavimo tudi povezavo do Bootstrapove datoteke z oblikovnimi slogi bootstrap.min.css, ki se nahaja na Bootstrapovem spletnem mestu.

Na konec spletnega dokumenta vstavimo povezavi do skriptnih datotek jQuery in Bootstrap JS, ki se prav tako nahajata na Bootstrapovem spletnem mestu.

...
 <head>
   ...
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 </head>
 <body>
   ...
   <!-- jQuery in Bootstrap JS. -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </body>

Vključitev ikon s spletnega mesta Font Awesome:

...
<head>
  ...
  <!-- Ikone Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
...

Vključitev Googlove pisave s spletnega mesta Google Fonts:

...
<head>
  ...
  <!-- pisava Google Fonts: Roboto -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
...

Datoteke z oblikovnimi slogi spletišča

V zaglavje strani vstavimo povezavo do datoteke z oblikovnimi slogi spletišča slog.css. Povezavo vstavimo za povezavo, ki vstavi Bootstrap oblikovne sloge:

Primer izdelave spletišča Postavitev domače strani slogovna datoteka spletiščaa

...
<head>
  ...
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Oblikovni slogi spletišča -->
  <link rel="stylesheet" href="css/slog.css">
</head>
...

V telesu spletne strani kreiramo glavo spletne strani <header> v katero vključimo logotip in glavni meni, kot je prikazano na sliki osnutka postavitve:

Glava domače spletne strani, ki vsebuje logotip in glavni meni.

Meni v spletno stran vključimo z Bootstrapovo komponento Navbar. Med možnimi meniji Bootstrapa izberemo meni, ki vsebuje tudi logotip in ima vgrajen spustni podmeni. HTML koda menija je na voljo v dokumentaciji na spletnem mestu Bootstrap ali na spletnem mestu w3schools.com.

Za oblikovanje uporabimo Bootstrapove razrede:

navbar - prilagodljiva navigacijska vrstica
navabar-inverse - prilagodljiva navigacijska vrstica s črnim ozadjem
container-fluid - prilagodljiv okvir
navbar-header - glava prilagodljive navigacijske vrstice
navbar-toggle - prilagodljiva navigacijska vrstica z elementi spustnega menija
icon-bar - ikona skrite prilagodljive navigacijske vrstice
navbar-brend - logotip v prilagodljivi navigacijski vrstici
collapse - označuje zložljiv element, ki bo prikazan ali skrit s klikom na gumb
navbar-collapse - zložljiva prilagodljiva navigacijska vrstica
navbar-nav - navigacijska vrstica s polno višino in lahko navigacijo
navbar-right - desna poravnava prilagodljive navigacijske vrstice
active - označuje aktivno povezavo
dropdown - spustni meni prilagodljive navigacijske vrstice
dropdown-toggle - oznaka spustnega menija
caret - oznaka puščice
dropdown-menu - seznam elementov spustnega menija

Primer izdelave spletišča Postavitev domače strani glava, logotip in glavni meni

Postavitev glave spletne strani, ki vsebuje logotip in glavni meni, kjer je pod izbiro Dokumentacija tudi podmeni:

<header>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
			
      <div class="navbar-header">
        <!-- gumb menija -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#meni">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
        </button>
        <!-- logotip -->
        <a class="navbar-brand" href="index.html"><img src="slike/index/logo.png" alt="eNSA logotip"></a>
      </div>
	  
	  <!-- meni, ki se na manjših zaslonih skrči -->			
      <div class="collapse navbar-collapse" id="meni">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="index.html">Domov</a></li>
          <li><a href="bootstrap.html">Bootstrap</a></li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Dokumentacija <span class="caret"></span></a>
            <!-- spustni meni -->
            <ul class="dropdown-menu">
              <li><a href="dokument/zacetek.html">Kako začeti</a></li>
              <li><a href="dokument/postavitev.html">Postavitev</a></li>
              <li><a href="dokument/vsebina.html">Vsebina</a></li>
              <li><a href="dokument/komponente.html">Komponente</a></li>
            </ul>
          </li>
          <li><a href="vodici.html">Vodiči</a></li>
          <li><a href="kontakt.html">Kontakt</a></li>
          <li><a href="blog.html">Blog</a></li>
        </ul>
      </div>
				
    </div>		
  </nav>
</header>

V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge, s katerimi spremenimo privzeto obliko Bootstrap slogov v datoteki bootstrap.min.css. Lastni oblikovni slogi naslovov, logotipa in menija:

/* Pisava, velikost in barva naslovov */
body{ font-family: Roboto, Helvetica, Arial, sans-serif; }
h1 { color: rgba(85,61,123,1.0) }
h2 { color: rgba(85,61,123,0.85); font-size: 2em; font-weight: bold }
h3 { color: rgba(85,61,123,0.80); font-size: 2em }
p {font-size: 1.15em;}

/* okvir <header>: Logotip in navigacija */
.navbar {
   margin-bottom: 0;
   border-radius: 0;
   background-color: #fff;
   color: #222;
   border: 0;
   font-size: 1.2em;
}

/* Oblikovne lastnosti ikone menija */
.navbar-inverse .navbar-toggle {
   border-color: #aaa;
   background-color: #aaa;
   margin-top: 30px;
}

.navbar-inverse .navbar-toggle:focus, 
.navbar-inverse .navbar-toggle:hover {
   border-color: #666;
   background-color: #666;
}

/* Oblikovne lastnosti logotipa */
.navbar-brand {
   float: left;
   min-height: 85px;
   padding: 10px 0 0 25px;
}

/* Oblikovne lastnosti navigacije */
.navbar-inverse .navbar-nav { margin-top: 40px; }

.navbar-inverse .navbar-nav .active a,
.navbar-inverse .navbar-nav .active a:focus,
.navbar-inverse .navbar-nav .active a:hover {
   color: #000;
   background-color: #fff;
}

.navbar-inverse .navbar-nav li a {
   color: #999;
   padding: 3px 8px;
}

.navbar-inverse .navbar-nav li a:hover { color: #333; }

@media (max-width: 767px) {
   .navbar-inverse .navbar-nav {
      margin-top: 5px;
      padding-left: 25px;
   }
}

Poglej spletno stran!

Vrtiljak slik

Pod glavo spletne strani vstavimo vrtiljak slik:

Vrtiljak slik.

Vrtiljak slik v spletno stran vključimo z Bootstrapovo komponento Carousel. HTML koda vrtiljaka slik je na voljo v dokumentaciji na spletnem mestu Bootstrap ali na spletnem mestu w3schools.com.

Za oblikovanje uporabimo Bootstrapove razrede:

carousel - razred carousel določa, da odstavek vsebuje vrtiljak slik
slide - določa CSS tranzicijo in animacijo pri prehodu med slikami vrtiljaka
carousel-indicators - oznake posamezne slike vrtiljaka slik v številčenem seznamu
carousel-inner - vsebina vrtiljaka slik
active - označuje aktivno sliko, ki se prikaže ob nalaganju strani (če nobena slika ni določena kot aktivna, se vrtiljak slik ne prikaže)
item - vsebina posamezne slike vrtiljaka
carousel-caption - napis na sliki vrtiljaka
btn - oblikovanje gumba
btn-default - privzeto oblikovanje gumba
left - leva poravnava
right - desna poravnava
carousel-control - navigacija med slikami vrtiljaka
glyphicon - Bootstrapove Glyphicon ikone
glyphicon-chevron-left - ikona leve puščice
glyphicon-chevron-right - icona desne puščice

Primer izdelave spletišča Postavitev domače strani vrtiljak slik

Postavitev vrtiljaka slik s 3 slikami. Na prvi sliki je tudi napis in aktiven gumb, na drugi sliki pa napis.

<section id="domov">
  <!-- Vrtiljak slik -->
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Kazalniki vrtljivih slik -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Okvir vrtiljaka slik -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="slike/index/bs_slide1.png" alt="Bootstrap">
        <div class="carousel-caption">
          <p>Brezplačen odprtokodni spletni okvir za oblikovanje spletnih strani in spletnih aplikacij.</p>
          <a href="dokument/zacetek.html" class="btn btn-default">Pa začnimo</a>
        </div>
      </div>

      <div class="item">
        <img src="slike/index/bs_slide2.png" alt="Prilagodljiv dizajn Bootstrap">
        <div class="carousel-caption">
          <p>Bootstrap je najpriljubnejši okvir za razvijanje odzivnih spletnih mest z HTML-jem, CSS-jem in JavaScriptom.</p>
        </div>
      </div>

      <div class="item">
        <img src="slike/index/bs_slide3.png" alt="Bootstrap mrežni sistem">
      </div>
    </div>

    <!-- Leva in desna kontrolna puščica -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</section>

Lastni oblikovni slogi vrtiljaka slik, napisov in gumba na slikah vrtiljaka:

/* Vrtiljak slik - Carousel */
.item img { width: 100%; }

/* Položaj napisa na slikah vrtiljaka */
.carousel-caption {
   top: 70%;
   transform: translateY(-70%);
}

/* Oblika napisa na slikah vrtiljaka */
.carousel-caption p {
   font-size: 1.5em;
   color: #bbb;	
}

/* Gumb na sliki vrtiljaka */
.carousel-caption button { margin-top: 1.5em; }

.carousel-caption .btn {
   font-size: 1.2em;
   color: #fff;
   background-color: #553d7b;
   padding: 12px 22px;
   border: 2px solid #fff;
}

.carousel-caption .btn:hover {
   color: #553d7b;
   background-color: #fff;
}

/* Oblika napisov na slikah vrtiljaka pri različnih velikostih zaslona */
@media (max-width: 1200px) {
   .carousel-caption p {
      font-size: 1.3em;
   }
   .carousel-caption button {
      margin-top: 0em;	
   }
}

@media (max-width: 940px) {
   .carousel-caption button {
      display: none;
   }
   .carousel-caption p {
      font-size: 1.2em;
   }
}

@media (max-width: 700px) {
   .carousel-caption p {
      font-size: 1.1em;
      margin-top: -20px;
   }
}

@media (max-width: 525px) {
   .carousel-caption button {
      display: none;
   }
   .carousel-caption p {
      display: none;
   }
}

Poglej spletno stran!

Okvir 'Kaj uporabljamo'

Pod vrtiljak slik vstavimo okvir s štirimi slikami in napisi pod slikami:

Načrt okvirja 'Kaj uporabljamo'.

Pri kreiranju okvirja 'Kaj uporabljamo' uporabimo Bootstrapov mrežni sistem, s katerim razporedimo elemente v stolpce. Ta omogoča, da na strani uporabimo do 12 stolpcev. Stolpce lahko tudi združimo s čimer dobimo širše stolpce.

Bootstrapov mrežni sitem je prilagodljiv, kar pomeni, da se stolpci samodejno prerazporedijo glede na velikost naprave. Pri tem Bootstrap uporablja 4 razrede:

xs - za mobilne naprave (širina zaslona je manjša od 768px)
sm - za tablične naprave (širina zaslona je večja ali enaka 768px)
md - za manjše prenosne računalnike (širina zaslona je večja ali enaka 992px)
lg - za prenosne in namizne računalnike (širina zaslona je večja ali enaka 1200px)

Za boljšo prilagodljivost lahko razrede med seboj tudi kombiniramo.

Bootstrapov mrežni sistem. * predstavlja razrede xs, sm, md in lg.

Bootstrpov mrežni sistem pri kreiranju stolpcev upošteva naslednja pravila:

Vsebina mora biti v okvirju, ki je lahko fiksne širine (Bootstrapov razred container) ali pa se prilagodi polni širini (Bootstrapov razred container-fluid)
V okvir vstavimo vrste (Bootstrapov razred row), ki kreirajo vodoravne grupe stolpcev
V vrste vstavimo stolpce (Bootstrapov razred col-*-*), ki vsebujejo vsebino

Za oblikovanje uporabimo Bootstrapove razrede:

container - okvir s fiksno širino
text-center - sredinska poravnava besedila
row - vrstica
col-sm-3 - prilagodljiv stolpec za tablične naprave

Primer izdelave spletišča Postavitev domače strani okvir 'Kaj uporabljamo'

Slike razporedimo v 4 Bootstrapove stolpce:

<!-- Okvir 'Kaj uporabljamo' s štirimi stolpci -->
<div class="container text-center">
  <h1>Kaj uporabljamo</h1>
  <div class="row">
    <div class="col-sm-3">
      <img src="slike/index/html5.png" alt="HTML5" class="ikona">
      <h3>HTML5</h3>
    </div>
    <div class="col-sm-3">
      <img src="slike/index/css3.png" alt="CSS3" class="ikona">
      <h3>CSS3</h3>
    </div>
    <div class="col-sm-3">
      <img src="slike/index/js.png" alt="JavaScript" class="ikona">
      <h3>JavaScript</h3>
    </div>
    <div class="col-sm-3">
      <img src="slike/index/bootstrap.png" alt="Bootstrap" class="ikona">
      <h3>Bootstrap</h3>
    </div>
  </div>
</div>

Lastni oblikovni slogi okvirja 'Kaj uporabljamo':

/***** Slike 'Kaj uporabljamo'  **********/
#domov h1 {margin-bottom: 15px }

.container { margin: 3% auto; }

.ikona { max-width: 180px; }

.container h1 {
   padding-bottom: 15px;
   font-weight: bold;
}

.container h3 {	font-size: 1.5em; }

@media (max-width: 990px) {
   .ikona {
      max-width: 150px;
   }
}

@media (max-width: 770px) {
   .ikona { max-width: 110px; }
	
   .container h1 { font-size: 2em;	}
	
   .container h3 {
      font-size: 1.3em;
      padding-bottom: 25px;
      margin-top: 5px;
   }
}

#besedilo { background-color: #ececec; }

Poglej spletno stran!

Okvir 'Sass Less'

Pod okvir 'Kaj uporabljamo' vstavimo okvir 'Sass Less' z dvema sestavkoma besedila z naslovom in sliko:

Načrt okvirja 'Sass Less'.

Pri kreiranju okvirja 'Sass Less' uporabimo Bootstrapov mrežni sistem, s katerim razporedimo besedilo in sliko v stolpce. Število stolpcev je za vsako velikost naprave drugačno.

Za oblikovanje uporabimo Bootstrapove razrede:

container - okvir s fiksno širino
row - vrstica
col-*-* - prilagodljivi stolpci
img-responsive - prilagodljiva velikost slike

Primer izdelave spletišča Postavitev domače strani okvir 'Sass Less'

Besedilo in sliko razporedimo v Bootstrapove stolpce tako, da je pri največjih in velikih napravah besedilo 2-krat širše kot slika, pri tabličnih napravah je besedilo enako široko kot slika, pri mobilnih napravah pa sta besedilo in slika v enem stolpcu drug pod drugim. Besedilo v odstavkih je generično besedilo Lorem Ipsum:

<!-- Okvir 'Sass in Less' -->
<div id="besedilo">
  <div class="container">
    <div class="row">
      <!-- Število stolpcev se spreminja glede na velikost naprave -->
      <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12">
        <h2>Sass (stylesheet language)</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet elit a sem feugiat, eget luctus tellus tincidunt. Nam cursus erat in gravida volutpat. Nam sit amet imperdiet enim. Quisque vel nisl odio. Maecenas quis dignissim libero. Integer justo mauris, auctor sit amet risus ac, consequat efficitur neque.</p>
        <p>Vestibulum a lorem eros. Maecenas egestas, magna vitae volutpat commodo, metus orci porttitor quam, ac consectetur turpis lacus vitae velit. Pellentesque eu nisi interdum mauris scelerisque blandit. Sed tristique vulputate tempus. Praesent ultricies turpis quis ligula lobortis cursus. Etiam in consectetur massa. In eu tortor vitae sem maximus suscipit at vitae dui. Aliquam erat volutpat.</p>
        <p>Sed eleifend vehicula massa, non vulputate massa tincidunt in. Fusce sollicitudin volutpat maximus. Maecenas aliquam urna sed nulla aliquet, et euismod nisl ultrices. Etiam posuere neque sed lorem venenatis, id tempus mi egestas. Aliquam gravida, tortor in fermentum scelerisque, magna felis laoreet libero, sed maximus orci sapien ut nisi.</p>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <img src="slike/index/sass.png" alt="Sass" class="img-responsive">
      </div>
    </div>
    <div class="row">
      <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12">
        <h2>Less (stylesheet language)</h2>
        <p>Duis purus risus, laoreet quis ullamcorper sed, ullamcorper at dolor. Nullam malesuada mauris quis libero faucibus malesuada. Etiam vitae ante elit. In fermentum maximus eros a tempus. Sed ac tempor turpis. Ut vitae imperdiet ante. Cras pulvinar ante quis odio ultrices luctus. Ut sit amet massa vel diam tincidunt malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Nulla ultrices sed risus eget fringilla. Praesent volutpat eleifend ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam rutrum vitae dolor at volutpat. Vivamus ut ornare est, vitae porta orci. In ligula tellus, faucibus sit amet vehicula a, venenatis sit amet lorem.</p>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
      <img src="slike/index/less.png" alt="Less" class="img-responsive">
      </div>
    </div>
  </div>
</div>

Poglej spletno stran!

Okvir 'Mnenja naših uporabnikov'

Pod okvir 'Sass Less' vstavimo okvir 'Mnenja naših uporabnikov' :

Načrt okvirja 'Mnenja naših uporabnikov'.

Pri kreiranju okvirja 'Mnenja naših uporabnikov' uporabimo Bootstrapov mrežni sistem, s katerim razporedimo slike uporabnikov in besedilo mnenja v stolpce.

Za oblikovanje uporabimo Bootstrapove razrede:

container - okvir s fiksno širino
text-center - sredinska poravnava besedila
row - vrstica
col-*-* - prilagodljivi stolpci

Primer izdelave spletišča Postavitev domače strani okvir 'Mnenja naših uporabnikov'

Slike in besedilo mnenja razporedimo v 3 Bootstrapove stolpce, pri mobilnih napravah pa v 1 stolpec. V tabličnem in mobilnem pogledu se pomanjšajo tudi slike uporabnikov. Narekovaji v mnenju uporabnika so ikone s spletnega mesta Font Awesome:

<!-- Okvir 'Mnenja naših uporabnikov' s tremi stolpci in sredinsko poravnavo besedila -->
<div class="container text-center">
  <h1>Mnenja naših uporabnikov</h1>
  <div class="row">
    <div class="mnenje col-sm-4">
      <img src="slike/index/oseba1.png" alt="Janez Novak" class="ikona">
      <p class="poved"><sup><i class="fa fa-quote-left" aria-hidden="true"></i></sup> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque ipsum id dapibus posuere. Sed ut erat sit amet eros pharetra facilisis nec eget felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <sup><i class="fa fa-quote-right" aria-hidden="true"></i></sup></p>
      <p class="ime">Janez Novak</p>
    </div>
    <div class="mnenje col-sm-4">
      <img src="slike/index/oseba3.png" alt="Nik Pem" class="ikona">
      <p class="poved"><sup><i class="fa fa-quote-left" aria-hidden="true"></i></sup> Vestibulum vitae libero et erat elementum tincidunt. Donec elementum magna vel erat egestas, nec imperdiet massa dictum. Donec iaculis turpis quam, sit amet facilisis lorem vehicula sed. Nam sollicitudin, nunc ut porta placerat, lectus mi dignissim velit. <sup><i class="fa fa-quote-right" aria-hidden="true"></i></sup></p>
      <p class="ime">Nik Pem</p>
    </div>
    <div class="mnenje col-sm-4">
      <img src="slike/index/oseba2.png" alt="Mojca Buh" class="ikona">
      <p class="poved"><sup><i class="fa fa-quote-left" aria-hidden="true"></i></sup> Proin eleifend, massa eget tempor sollicitudin, eros justo condimentum lorem, vel bibendum justo orci at mauris. Donec posuere iaculis hendrerit. Praesent et arcu lacus. Donec faucibus nibh interdum, semper nulla at, consequat est. Ut sed odio suscipit, porta dolor ide. <sup><i class="fa fa-quote-right" aria-hidden="true"></i></sup></p>
      <p class="ime">Mojca Buh</p>
    </div>
  </div>
</div>

Lastni oblikovni slogi okvirja 'Mnenja naših uporabnikov:'

/* Okvir 'Mnenja naših uporabnikov' */
.ime {
   font-size: 1.05em;
   font-style: italic;
   color: #999;
   text-align: right;
   padding-right: 20px;
   margin-top: -7px;
}

.poved { padding-top: 15px; }

.fa-quote-left, .fa-quote-right { color: #aaa; }

@media (max-width: 770px) {
   .mnenje { margin-top: 25px;	}
}

Poglej spletno stran!

Na dno spletne strani vstavimo nogo <footer>.

Načrt noge spletne strani <footer>.

Elemente v nogi spletne strani razporedimo z Bootstrapovim mrežnim sistemom.

Za oblikovanje uporabimo Bootstrapove razrede:

container-fluid - okvir s prilagodljivo širino
text-center - sredinska poravnava besedila
row - vrstica
col-*-* - prilagodljivi stolpci

Primer izdelave spletišča Postavitev domače strani noga spletne strani <footer>

Nogo spletne strani razdelimo v 2 Bootstrapova stolpca. V mobilnem pogledu se stolpca prikažeta drug pod drugim. Socialne ikone vstavimo s spletnega mesta Font Awesome. Povezave socialnih ikon so generične in kažejo na #:

<!-- Okvir noge z dvema stolpcema -->
<footer class="container-fluid text-center">
  <div class="row">
    <!-- Socialne ikone -->
    <div class="nogaLevo col-sm-6">
      <a href="#" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a>
      <a href="#" data-toggle="tooltip" data-placement="top" title="Linkedin"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a>
      <a href="#" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a>
      <a href="#" data-toggle="tooltip" data-placement="top" title="Google+"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a>
      <a href="#" data-toggle="tooltip" data-placement="top" title="Youtube"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a>
      <a href="#" data-toggle="tooltip" data-placement="top" title="Snapchat"><i class="fa fa-snapchat-square fa-2x" aria-hidden="true"></i></a>
    </div>
    <div class="nogaDesno col-sm-6">
      © eNSA Bootstrap, 2017
    </div>
  </div>
</footer>

Lastni oblikovni slogi noge spletne strani:

/* Noga spletne strani <footer> */
footer {
   background-color: #666;
   min-height: 80px;
   color: #ccc;
   padding: 15px 0;
}
footer a { color: #eaeaea; }

.nogaLevo{ text-align: right; }

.nogaLevo .fa {	padding: 0px 5px; }

.nogaDesno{
   text-align: left;
   padding-top: 8px;
}

@media (max-width: 770px) {
   .nogaLevo{
      text-align: center;
      padding: 15px 5px;
   }
   .nogaDesno{
      text-align: center;
      padding: 15px 0;
   }
}

Poglej spletno stran!

Nazaj

Naprej

HTML5 ogrodje in naslov strani

Meta oznake

Ikona spletišča, Bootstrap, ikone, Googlova pisava

Datoteke z oblikovnimi slogi spletišča

Glava spletne strani <header> z logotipom in glavnim menijem

Vrtiljak slik

Okvir 'Kaj uporabljamo'

Okvir 'Sass Less'

Okvir 'Mnenja naših uporabnikov'

Noga spletne strani <footer>