Spletno stran Postavitev sestavimo s pomočjo datoteke zacetek.html. Kreiramo kopijo te datoteke z imenom postavitev.html
, ki jo shranimo v mapo dokument. Spletno stran sestavimo tako, da sledimo zgradbi dokumenta od vrha spletne strani proti dnu po naslednjih korakih:
Predloga glave, noge, glavnega naslova in stranskega menija spletne strani
V datoteki postavitev.html izbrišemo kodo v mrežnem stolpcu članka article
, ki določa vsebino strani. Spremenimo besedilo glavnega naslova in odstavka pod glavnim naslovom. Spremenimo tudi vsebino seznama stranskega menija.
Predloga spletne strani postavitev.html s spremenjenim naslovom spletne strani eNSA | Spletišče: Postavitev. Predloga ima zamenjano besedilo glavnega naslova in odstavka pod naslovom, spremenjen pa je tudi stranski meni:
<!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: Postavitev</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 active"><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>
<section id="bs">
<header>
<!-- Glavni naslov -->
<div class="bs-glavaStrani">
<div class="container">
<h1>Postavitev</h1>
<p>Maecenas tristique nibh est, quis ultrices dui congue at. Curabitur fermentum, elit at vulputate feugiat, quam odio volutpat dui, in ornare magna turpis id lacus. Aenean mattis dapibus ante ac volutpat. Vestibulum aliquet accumsan mi sit amet cursus.</p>
</div>
</div>
</header>
<div class="container">
<div class="row">
<!-- Stranski meni -->
<nav>
<div class="col-sm-3">
<h3>Vsebina strani:</h3>
<ul class="list-unstyled">
<li><a href="#pregled">Pregled</a></li>
<li><a href="#mreza">Mreža</a></li>
<li><a href="#media">Objekt <code>media</code></a></li>
<li><a href="#orodja">Prilegajoča orodja</a></li>
</ul>
</div>
</nav>
<article>
<div class="col-sm-9">
<!-- Vsebina članka spletne strani -->
</div>
</article>
</div>
</div>
</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>
Poglej spletno stran!
Vsebina: Pregled
V odsek <article>
vstavimo vsebino spletne strani - poglavje Pregled. Uporabimo podnaslove, odstavke, slike in oznaki <kbd>
ter <code>
, ki označujeta vnos s tipkovnico in kodo.
Za oblikovanje uporabimo naslednje Bootstrapove razrede:
- col-*-* - prilagodljivi stolpci
- text-center - sredinska poravnava besedila
- img-responsive - prilagaja velikost slike velikosti zaslona
- container - okvir s fiksno širino
- container-fluid - okvir s prilagodljivo širino
...
<!-- članek vsebine: poglavje 'Pregled' -->
<article>
<div class="col-sm-9">
<h2 id="pregled">Pregled</h2>
<p>Quisque consectetur neque a eleifend gravida. Curabitur vitae felis fermentum, condimentum neque in, iaculis purus. Integer elit erat, molestie a pretium quis, finibus id magna. Suspendisse sodales eros neque, id iaculis turpis rutrum vehicula. Aliquam ultrices nisi eget tincidunt condimentum. </p>
<p class="text-center"><img src="../slike/dokumentacija/postavitev/grid-system.jpg" alt="Mrežni sistem" class="img-responsive"></p>
<h3>Okvirji</h3>
<p>Ut egestas venenatis est, at lobortis turpis ultrices eu. Aenean ut aliquam magna. <strong>Phasellus posuere</strong>, sapien at varius ullamcorper, nunc nunc condimentum elit, eget dignissim neque orci sed justo. Aliquam efficitur tempus eleifend. In fringilla ligula quis finibus pellentesque. Phasellus interdum maximus dictum. Donec sollicitudin libero turpis, eu consectetur ante volutpat vitae.</p>
<p>Maecenas quis consectetur nisi <kbd>max-width</kbd> aliquam dapibus risus mauris, eget imperdiet ante tincidunt <kbd>100%</kbd> ac. Morbi sit amet mollis erat. Integer sit amet ultricies mi.</p>
<p class="text-center"><img src="../slike/dokumentacija/postavitev/container.png" alt="container" class="img-responsive"></p>
<pre><code><div class="container"><br> <!-- Content here --><br></div></code></pre><br>
<p>Maecenas sed quam non nunc fermentum gravida vitae a ipsum. Mauris placerat, erat quis facilisis accumsan, dolor velit dignissim magna, eu hendrerit ligula sapien a arcu.</p>
<p>Aenean vel metus congue, convallis dui eu, cursus felis. Duis eget orci sed <kbd>.container-fluid</kbd> turpis bibendum tincidunt. Curabitur ultricies aliquet turpis et dignissim. Sed vitae sapien gravida, tincidunt leo ac, tincidunt leo.</p>
<p class="text-center"><img src="../slike/dokumentacija/postavitev/container-fluid.png" alt="container-fluid" class="img-responsive"></p>
<pre><code><div class="container-fluid"><br> <!-- Content here --><br></div></code></pre>
</div>
</article>
...
Poglej spletno stran!
Vsebina: Mrežni sistem
V odsek <article>
vstavimo vsebino spletne strani - poglavje Mrežni sistem. Uporabimo podnaslove, odstavke, slike in oznaki <pre>
ter <code>
, ki označujeta kodo v preddefiniranem odstavku.
Za oblikovanje uporabimo naslednje Bootstrapove razrede:
- text-center - sredinska poravnava besedila
- img-responsive - prilagaja velikost slike velikosti zaslona
- row - vrstica
- col - stolpci
- col-*-* - prilagodljivi stolpci
...
<!-- članek vsebine: poglavje 'Mrežni sistem' -->
<article>
<div class="col-sm-9">
...
<h2 id="mreza">Mrežni sistem</h2>
<p>Maecenas sed finibus felis. Proin a lorem tortor. Nam scelerisque, sapien nec tincidunt pulvinar, ligula ipsum semper tortor, non blandit ligula eros in lectus. Aenean aliquet porta nisi id placerat. Vivamus eget egestas odio. <a href="#">Suspendisse congue</a> justo id ipsum tempus, vel vehicula quam mattis. Suspendisse eget nisi magna.</p>
<h3>Kako deluje</h3>
<p>Curabitur fermentum, elit at vulputate feugiat, quam odio volutpat dui, in ornare magna turpis id lacus. Aenean mattis dapibus ante ac volutpat. Vestibulum aliquet accumsan mi sit amet cursus. Maecenas tristique nibh est, quis ultrices dui congue at.</p>
<p class="text-center"><img src="../slike/dokumentacija/postavitev/col1.png" alt="Mrežni sistem" class="img-responsive"></p>
<p>Aenean dictum leo pharetra convallis hendrerit. Etiam malesuada, metus vel vehicula pretium, urna velit tristique velit, sit amet sagittis velit est sit amet est. Vivamus pellentesque tellus vel metus pellentesque pretium <code>.container</code>:</p>
<ul>
<li>Morbi eget hendrerit enim. Proin tristique interdum est, dictum rutrum lectus efficitur ultrices.</li>
<li>Donec malesuada, lectus quis congue varius, nulla ipsum tincidunt enim, ac congue lacus metus in arcu.</li>
<li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Maecenas at nibh lacus. Vestibulum et semper lectus. Morbi lobortis dolor <code>.col-sm-6</code> dolor, sed finibus tellus tincidunt sit amet.</li>
<li>Phasellus dui sapien, cursus vulputate tempus nec, cursus sit amet justo. Proin vitae dui porta, dictum enim nec, convallis nunc. Nunc feugiat condimentum nunc quis fermentum. Sed lacinia tincidunt magna, vitae tincidunt augue commodo nec.</li>
<li>Mauris rhoncus felis nec velit aliquet egestas. Nullam iaculis pellentesque nulla at ultrices. Pellentesque ut laoreet nibh. Maecenas aliquet erat lacus, nec viverra purus eleifend in.</li>
</ul>
<p>Donec vel aliquam erat. Donec sit amet sapien eros. <a href="#">Suspendisse potenti</a>. Nulla facilisi. Donec vehicula consequat suscipit. Sed aliquam sagittis efficitur. Integer ornare euismod venenatis. Donec porttitor elit ut tellus faucibus vestibulum bibendum eget nibh. Phasellus sit amet leo vel orci posuere bibendum. Proin in ante sed mauris iaculis mollis sit amet quis elit. Morbi et ligula nisl.</p>
<h3>Avtomatska razporeditev mreže</h3>
<p>Morbi eget hendrerit enim. Proin tristique interdum est, dictum rutrum lectus efficitur ultrices. Donec malesuada, lectus quis congue varius, nulla ipsum tincidunt enim, ac congue lacus metus <code>xs</code> in <code>xl</code> arcu.</p>
<p class="text-center"><img src="../slike/dokumentacija/postavitev/col2.png" alt="Avtomatska razporeditev mreže" class="img-responsive"></p>
<h3>Prilegajoča mreža</h3>
<p>Class aptent taciti sociosqu ad litora torquent per <code>.col</code> conubia nostra <code>.col-*</code>, per inceptos himenaeos. Suspendisse potenti. Maecenas at nibh lacus. Vestibulum et semper lectus. Morbi lobortis dolor dolor, sed finibus tellus tincidunt sit amet. Phasellus dui sapien, cursus vulputate tempus nec, cursus sit amet justo. <a href="#">Proin vitae</a> dui porta, dictum enim nec, convallis nunc.</p>
<p class="text-center"><img src="../slike/dokumentacija/postavitev/col3.png" alt="Prilegajoča razporeditev mreže" class="img-responsive"></p>
<pre><code><div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div></code></pre>
<h3>Poravnava</h3>
<p>Nunc feugiat condimentum nunc quis fermentum. Sed lacinia tincidunt magna, vitae tincidunt augue commodo nec. Mauris rhoncus felis nec velit aliquet egestas.</p>
<p class="text-center"><img src="../slike/dokumentacija/postavitev/col4.png" alt="Poravnava mreže" class="img-responsive"></p>
</div>
</article>
...
Poglej spletno stran!
Vsebina: Objekt .media
V odsek <article>
vstavimo vsebino spletne strani - poglavje Objekt .media. Uporabimo podnaslove, odstavke, sliko, citat in oznake za kodo <code>
.
Za oblikovanje uporabimo naslednje Bootstrapove razrede:
- col-*-* - prilagodljivi stolpci
- text-center - sredinska poravnava besedila
- img-responsive - prilagaja velikost slike velikosti zaslona
- media - okvir medijske vsebine
- media-body - besedilo ob sliki medijske vsebine
...
<!-- članek vsebine: poglavje 'Objekt .media' -->
<article>
<div class="col-sm-9">
...
<h2 id="media">Objekt <code>.media</code></h2>
<p>Nullam iaculis pellentesque nulla at ultrices <code>.media</code>. Pellentesque ut laoreet nibh. Maecenas aliquet erat <code>.media-body</code>lacus, nec viverra <a href="#">purus eleifend</a> in.</p>
<p class="text-center"><img src="../slike/dokumentacija/postavitev/media.png" alt="Objekt media" class="img-responsive"></p>
<pre><code><div class="media">
<img class="d-flex mr-3" src="..." alt="Generična slika">
<div class="media-body">
<h5 class="mt">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla...
</div>
</div></code></pre>
<p>Praesent porta elementum neque sed faucibus. Etiam iaculis nisi tempus orci hendrerit congue. Sed sed porta lacus. Vestibulum feugiat turpis id sapien accumsan, in sagittis urna ullamcorper. Donec nisi arcu, sodales id vulputate in, aliquam in mi.</p>
<blockquote><h4><strong>Donec #14: aliquam erat. Donec sit amet sapien eros. Suspendisse potenti.</strong></h4> Nulla facilisi. Donec vehicula consequat suscipit. Sed aliquam sagittis <code>::before</code> efficitur. Integer <code>::after</code> ornare euismod venenatis. Donec porttitor elit ut tellus faucibus vestibulum bibendum eget nibh. Phasellus sit amet leo vel orci posuere bibendum. Proin in ante sed mauris iaculis mollis sit amet quis elit.<br><br><strong>Morbi:</strong> <a href="#">et ligula nisl.</a></blockquote>
</div>
</article>
...
V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge citata v oznaki <blockquote>
:
/* Dokumentacija / Postavitev - citat <blockquote> */
#bs blockquote {
border: 1px solid #ccc;
border-radius: 5px;
border-left: 5px solid #fc9c12;
}
Poglej spletno stran!
Vsebina: Prilegajoča orodja
V odsek <article>
vstavimo vsebino spletne strani - poglavje Prilegajoča orodja. Uporabimo podnaslove, odstavke, sliko, citat in oznake za kodo <code>
.
Za oblikovanje uporabimo naslednje Bootstrapove razrede:
- col-*-* - prilagodljivi stolpci
- text-center - sredinska poravnava besedila
- img-responsive - prilagaja velikost slike velikosti zaslona
- media - okvir medijske vsebine
- media-body - besedilo ob sliki medijske vsebine
...
<!-- članek vsebine: poglavje 'Prilegajoča orodja' -->
<article>
<div class="col-sm-9">
...
<h2 id="responsive">Prilegajoča orodja</h2>
<p>Etiam id metus lacus. Suspendisse sed sodales sapien. Vestibulum congue purus vel placerat venenatis. Morbi condimentum semper euismod. Nulla sit amet orci sed enim cursus hendrerit. Etiam tincidunt, elit non interdum imperdiet, leo felis malesuada dolor, at mollis libero sem id justo. Nulla porttitor ac turpis a elementum. Duis sollicitudin tortor ut consectetur elementum. Phasellus accumsan vestibulum gravida. Integer feugiat vel quam eget iaculis.</p>
<table class="table table-bordered table-striped responsive-utilities table-responsive">
<thead>
<tr>
<th></th>
<th>
Extra small devices
<small>Portrait phones (544px)</small>
</th>
<th>
Small devices
<small>Landscape phones (≥544px - 768px)</small>
</th>
<th>
Medium devices
<small>Tablets (≥768px - 992px)</small>
</th>
<th>
Large devices
<small>Desktops (≥992px - 1200px)</small>
</th>
<th>
Extra large devices
<small>Desktops (≥1200px)</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><code>.hidden-xs-down</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th scope="row"><code>.hidden-sm-down</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th scope="row"><code>.hidden-md-down</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th scope="row"><code>.hidden-lg-down</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th scope="row"><code>.hidden-xl-down</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th scope="row"><code>.hidden-xs-up</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th scope="row"><code>.hidden-sm-up</code></th>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th scope="row"><code>.hidden-md-up</code></th>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th scope="row"><code>.hidden-lg-up</code></th>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th scope="row"><code>.hidden-xl-up</code></th>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
</tr>
</tbody>
</table>
<h3 id="responsive-utilities-print">Tiskanje</h3>
<p> Nunc nec vestibulum massa. Cras pretium, ex vel pretium consectetur, quam dolor pellentesque mi, eget condimentum risus ante at libero.</p>
<table class="table table-bordered table-striped responsive-utilities table-responsive">
<thead>
<tr>
<th>Class</th>
<th>Browser</th>
<th>Print</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>.visible-print-block</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible<br />(as <code>display: block</code>)</td>
</tr>
<tr>
<th><code>.visible-print-inline</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible<br />(as <code>display: inline</code>)</td>
</tr>
<tr>
<th><code>.visible-print-inline-block</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible<br />(as <code>display: inline-block</code>)</td>
</tr>
<tr>
<th><code>.hidden-print</code></th>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
</tr>
</tbody>
</table>
</div>
</article>
...
V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge celic tabele:
/* Dokumentacija / Postavitev - celice tabele */
#bs .is-hidden {
background-color: #e5e5e5;
color: #888;
}
#bs .is-visible {
background-color: #E4F9ED;
color: #3EAA69;
}
Poglej spletno stran!