Spletno stran Blog sestavimo s pomočjo datoteke bootstrap.html. Kreiramo kopijo te datoteke z imenom blog.html. Spletno stran sestavimo tako, da sledimo zgradbi dokumenta od vrha spletne strani proti dnu po naslednjih korakih:
Predloga glave, noge in glavnega naslova spletne strani
V datoteki blog.html obdržimo HTML kodo zaglavja spletne strani in kodo, ki opisuje meni z logotipom, glavni naslov ter nogo spletne strani, preostalo kodo pa izbrišemo. Spremenimo besedilo glavnega naslova in odstavka pod glavnim naslovom. V seznamu glavnega menija prestavimo Bootstrapov razred active v alinejo Blog.
Primer izdelave spletišča Postavitev strani Blog predloga glave, noge in naslova
Predloga spletne strani blog.html s spremenjenim naslovom spletne strani eNSA | Spletišče: Blog in spremenjenim besedilom glavnega naslova in odstavka pod naslovom. Spremnimo tudi vrednost atributa id v HTML oznaki <section> v blog:
<!DOCTYPE html>
<html lang="sl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="eNSA, spletišče, website, kreiranje spletišča, Bootstrap">
<meta name="description" content="Pošljite sporočilo, da izveš več o izdelavi in oblikovanju spletnih strani z brezplačnim odprtokodnim okvirjem Bootstrap.">
<meta name="author" content="eNSA, Stanislav Jagodic">
<title>eNSA | Spletišče: Blog</title>
<!-- Ikona spletišča -->
<link rel="icon" href="slike/favicon.ico" type="image/x-icon">
<!-- Googlove pisave -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Ikone Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Oblikovni slogi za spletišče -->
<link rel="stylesheet" href="css/slog.css">
</head>
<body>
<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 s povezavo -->
<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><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 class="active"><a href="blog.html">Blog</a></li>
</ul>
</div>
</div>
</nav>
</header>
<section id="blog">
<header>
<!-- Glavni naslov -->
<div class="bs-glavaStrani">
<div class="container">
<h1>Blog</h1>
<p>Suspendisse luctus pellentesque arcu. Proin faucibus nisl fermentum commodo hendrerit.</p>
</div>
</div>
</header>
</section>
<!-- 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>
<!-- 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>
</html>Stranski meni
Pod glavni naslov vstavimo Bootstrapov okvir container z Bootstrapovo vrstico row z dvema stolpcema, pri čemer je levi stolpec 3 krat širši od desnega. V levem stolpcu so članki bloga, v desnem pa stranski meni:
- container - okvir s fiksno širino
- row - vrstica
- col-sm-9 - prilagodljivi stolpci (sm - za zaslone, ki imajo širino večjo ali enako 768px, 9 - stolpec širine 9 Bootstrapovih kolon)
- col-sm-3 - prilagodljivi stolpci (sm - za zaslone, ki imajo širino večjo ali enako 768px, 3 - stolpec širine 3 Bootstrapove kolone)
- form-control - določa oblikovne lastnosti besedilnih polj obrazca
Primer izdelave spletišča Postavitev strani Blog stranski meni
Povezave v meniju so generične.
...
<section id="blog">
<header>
... <!-- Glavni naslov in besedilo -->
</header>
<div class="container">
<div class="row">
<div class="col-sm-9">
... <!-- Članki bloga -->
</div>
<!-- Stranski meni -->
<div class="blKategorije col-sm-3">
<h2>Kategorije</h2>
<form action="">
<input type="search" name="googlesearch" class="form-control" placeholder="Išči kategorijo ...">
</form>
<ul>
<li><a href="#">Izdelava spletnih strani</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Google oglaševanje</a></li>
<li><a href="#">Optimizacija spletnih strani</a></li>
<li><a href="#">Marketing in prodaja</a></li>
<li><a href="#">Facebook oglaševanje</a></li>
</ul>
</div>
</div>
</div>
</section>
...V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge stranskega menija:
/* Blog - Okvir <section> in stranski meni */
#blog { background-color: #eaeaea }
#blog .container { margin: 0 auto }
/*** Blog - Meni ***/
#blog h2 {
border-bottom: 1px solid #ccc;
padding: 5px 0;
}
#blog li {
font-size: 1.2em;
padding: 3px 0;
}
#blog form { margin: 25px 0 15px }
#blog input { background-color: #efefef }Okvir bloga
V levi stolpec vstavimo okvir članka bloga. Za besedilo Preberi več vstavimo ikono dveh desnih puščic s spletnega mesta Font Awesome:
- container - okvir s fiksno širino
- row - vrstica
- col-sm-9 - prilagodljivi stolpci (sm - za zaslone, ki imajo širino večjo ali enako 768px, 9 - stolpec širine 9 Bootstrapovih kolon)
- img-responsive - prilagodljiva slika
Primer izdelave spletišča Postavitev strani Blog okvir bloga
...
<div class="container">
<div class="row">
<!-- Članki bloga -->
<div class="col-sm-9">
<div class="blogClanek">
<img src="..." alt="..." class="blogSlika img-responsive">
<h2 class="blogNaslov">...</h2>
<p class="blogBesedilo">...</p>
<p class="blogDatum">...<span class="blogVec"><a href="#">Preberi več <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></span></p>
</div>
</div>
<div class="blKategorije col-sm-3">
... <!-- Stranski meni -->
</div>
</div>
</div>
...V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge okvirja bloga:
/*** Blog - Okvir bloga ****/
#blog .blogClanek {
max-width: 830px;
background-color: #fff;
padding: 0;
border: 1px solid #e5e5e5;
border-radius: 2px;
margin-top: 30px;
margin-bottom: 30px;
}
#blog .blogNaslov {
padding: 0 30px;
color: #4da6ff;
}
#blog .blogBesedilo {
padding: 0 30px;
font-size: 1.1em;
}
#blog .blogDatum {
padding: 10px 30px 0;
border-top: 1px solid #e5e5e5;
}
#blog .blogDatum .blogVec { float: right }Vsebina blogov
Izdelamo 6 kopij okvirja bloga. V okvirje blogov vstavimo slike (slike so priložene v gradivu), besedilo naslovov blogov, generično besedilo blogov in datum objave blogov.
Primer izdelave spletišča Postavitev strani Blog vsebina blogov
...
<section id="blog">
<header>
... <!-- Glavni naslov in besedilo -->
</header>
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="blogClanek">
<img src="slike/blog/blog1.png" alt="Gradnja spletnih strani" class="blogSlika img-responsive">
<h2 class="blogNaslov">Kako izdelati spletno mesto?</h2>
<p class="blogBesedilo">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.</p>
<p class="blogDatum">25. september 2017<span class="blogVec"><a href="#">Preberi več <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></span></p>
</div>
<div class="blogClanek">
<img src="slike/blog/blog2.png" alt="Facebook oglaševanje" class="blogSlika img-responsive">
<h2 class="blogNaslov">Facebook oglaševanje in Canvas</h2>
<p class="blogBesedilo">Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin sit amet nisi sit amet augue mattis pulvinar quis sagittis nisl. Fusce lorem tellus, gravida in luctus vitae, rhoncus at ligula. Morbi rutrum et sem sit amet laoreet. In lobortis nec sem a tincidunt. Pellentesque sodales nisi ac tellus ultrices iaculis. Etiam faucibus justo id mattis accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum tellus sit amet quam maximus pulvinar.</p>
<p class="blogDatum">19. september 2017<span class="blogVec"><a href="#">Preberi več <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></span></p>
</div>
<div class="blogClanek">
<img src="slike/blog/blog3.jpg" alt="Googlovo oglaševanje" class="blogSlika img-responsive">
<h2 class="blogNaslov">Kako na spletno stran pridobiti nove obiskovalce?</h2>
<p class="blogBesedilo">Praesent quis malesuada turpis. In euismod pretium sapien sed commodo. Morbi laoreet commodo nisi, ac lobortis elit molestie vulputate. In eu laoreet tortor. Donec odio ex, tincidunt ac porta eget, mollis eu risus. Nam sed interdum ex, at accumsan urna. Maecenas ultrices rutrum lorem a lacinia. Cras at convallis tortor, vitae molestie diam. Praesent a turpis odio. Nunc volutpat eleifend tellus vel commodo. Nullam congue enim sed tincidunt imperdiet. Nam tempor mauris nec justo accumsan accumsan. Proin sed tortor ut erat malesuada dapibus. Cras dictum aliquam turpis. Morbi eu ligula sed lectus rutrum finibus. Morbi sed ultricies tellus.</p>
<p class="blogDatum">13. september 2017<span class="blogVec"><a href="#">Preberi več <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></span></p>
</div>
<div class="blogClanek">
<img src="slike/blog/blog5.jpg" alt="Google Analytics" class="blogSlika img-responsive">
<h2 class="blogNaslov">Kako povečati uspeh z Google Analytics?</h2>
<p class="blogBesedilo">In venenatis tempus malesuada. Duis tincidunt, orci id finibus tristique, ex tellus hendrerit massa, vel ornare tortor ligula sit amet leo. Ut dignissim felis sit amet odio feugiat, id tristique metus imperdiet. Vivamus eget tempus diam. Maecenas malesuada ut dolor a feugiat. Ut ac erat magna. Fusce dignissim facilisis urna, id porttitor tortor euismod sed. Morbi placerat ante quis lorem tincidunt laoreet. Curabitur eget mollis enim.</p>
<p class="blogDatum">7. september 2017<span class="blogVec"><a href="#">Preberi več <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></span></p>
</div>
<div class="blogClanek">
<img src="slike/blog/blog6.jpg" alt="Optimizacija" class="blogSlika img-responsive">
<h2 class="blogNaslov">Optimizacija spletnega mesta</h2>
<p class="blogBesedilo">Praesent a turpis odio. Nunc volutpat eleifend tellus vel commodo. Nullam congue enim sed tincidunt imperdiet. Nam tempor mauris nec justo accumsan accumsan. Proin sed tortor ut erat malesuada dapibus. Cras dictum aliquam turpis. Morbi eu ligula sed lectus rutrum finibus. Morbi sed ultricies tellus.</p>
<p class="blogDatum">28. avgust 2017<span class="blogVec"><a href="#">Preberi več <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></span></p>
</div>
<div class="blogClanek">
<img src="slike/blog/blog7.jpg" alt="Bootstrap" class="blogSlika img-responsive">
<h2 class="blogNaslov">Bootstrap - učinkovito orodje</h2>
<p class="blogBesedilo">Suspendisse laoreet rhoncus purus. Integer ex dui, aliquet sed hendrerit sit amet, imperdiet nec massa. In ac nulla ac sapien rhoncus efficitur. Ut vehicula suscipit lacinia. Vestibulum augue magna, dapibus vitae tempor at, malesuada ac ante. Etiam scelerisque elementum gravida. Pellentesque dictum et leo posuere aliquam. Nulla facilisi. Ut quis arcu varius, commodo arcu sit amet, iaculis felis.</p>
<p class="blogDatum">19. avgust 2017<span class="blogVec"><a href="#">Preberi več <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></span></p>
</div>
</div>
<div class="blKategorije col-sm-3">
... <!-- Stranski meni -->
</div>
</div>
</div>
</section>
...