Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Izdelava strani Dokumentacija - Komponente

Spletno stran Komponente sestavimo s pomočjo datoteke zacetek.html. Kreiramo kopijo te datoteke z imenom komponente.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 komponente.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.

Primer izdelave spletišča Postavitev strani Komponente predloga glave, noge, naslova in stranskega menija

Predloga spletne strani komponente.html s spremenjenim naslovom spletne strani eNSA | Spletišče: Komponente. 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: Komponente</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>Komponente</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in imperdiet erat, sit amet mollis augue. Nullam at imperdiet ex. Cras risus erat, euismod id dictum sed, feugiat in nisl.</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="#opozorila">Opozorila</a></li>
              <li><a href="#gumbi">Gumbi</a></li>
              <li><a href="#seznam">Seznam</code></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: Opozorila

V odsek <article> vstavimo vsebino spletne strani - poglavje Opozorila. Uporabimo podnaslove, odstavke, opozorilne odstavke in odstavke s kodo.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

  • col-*-* - prilagodljivi stolpci
  • alert - opozorilni okvir
  • alert-success - pritrdilni opozorilni okvir
  • alert-info - informacijski opozorilni okvir
  • alert-warning - okvir z opozorilom
  • alert-danger - okvir, ki opozarja na nevarnost
  • alert-link - povezava v opozorilnem okvirju
  • alert-heading - glava opozorilnega okvirja
Primer izdelave spletišča Postavitev strani Komponente vsebina: Opozorila
...
<!-- članek vsebine: poglavje 'Opozorila' -->
<article>
  <div class="col-sm-9">
    <h2 id="opozorila">Opozorila</h2>
    <p>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. 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.</p>
						
    <h3>Primeri</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 <code>.alert-success</code> tempus eleifend. </p>
						
    <div class="alert alert-success" role="alert">
      <strong>Well done!</strong> You successfully read this important alert message.
    </div>
    <div class="alert alert-info" role="alert">
      <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    </div>
    <div class="alert alert-warning" role="alert">
      <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>
    <div class="alert alert-danger" role="alert">
      <strong>Oh snap!</strong> Change a few things up and try submitting again.
    </div>
    <pre><code><div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>></code></pre>
						
    <h3>Barve povezav</h3>
    <p>Lorem ipsum dolor sit amet <code>.alert-link</code>, consectetur adipiscing elit. In dolor ante, ornare sit amet imperdiet a, hendrerit eu lacus.</p>
    <div class="alert alert-success" role="alert">
      <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
    </div>
    <div class="alert alert-info" role="alert">
      <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
    </div>
    <div class="alert alert-warning" role="alert">
      <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
    </div>
    <div class="alert alert-danger" role="alert">
      <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
    </div>
    <pre><code><div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div></code></pre>
						
    <h3>Dodatna vsebina</h3>
    <p>Aliquam erat volutpat. Aenean non justo arcu.</p>
    <div class="alert alert-success" role="alert">
      <h4 class="alert-heading">Well done!</h4>
      <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
      <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </div>
    <pre><code><div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div></code></pre>
    
  </div>
</article>
...
  Poglej spletno stran!

Vsebina: Gumbi

V odsek <article> vstavimo vsebino spletne strani - poglavje Gumbi. Uporabimo podnaslove, odstavke, gumbe in odstavke s kodo.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

  • col-*-* - prilagodljivi stolpci
  • alert - opozorilni okvir
  • alert-success - pritrdilni opozorilni okvir
  • alert-info - informacijski opozorilni okvir
  • alert-warning - okvir z opozorilom
  • alert-danger - okvir, ki opozarja na nevarnost
  • alert-link - povezava v opozorilnem okvirju
  • alert-heading - glava opozorilnega okvirja
Primer izdelave spletišča Postavitev strani Komponente vsebina: Gumbi
...
<!-- članek vsebine: poglavje 'Gumbi' -->
<article>
  <div class="col-sm-9">
    ...
    <h2 id="gumbi">Gumbi</h2>
    <p>Maecenas tristique elit at ligula placerat, non vulputate leo porta. Fusce ut tincidunt elit, non lobortis metus. Morbi ac erat nibh. Phasellus ut fermentum est. Phasellus blandit fringilla ex, et blandit lorem sodales at.</p>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
    <br><br>
    <pre><code><button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button></code></pre>
  </div>
</article>
...
  Poglej spletno stran!

Vsebina: Seznam vseh komponent

V odsek <article> vstavimo vsebino spletne strani - poglavje Seznam vseh komponent. Uporabimo podnaslove, odstavke in seznam. Povezave v seznamu so generične.

Primer izdelave spletišča Postavitev strani Komponente vsebina: Seznam vseh komponent
...
<!-- članek vsebine: poglavje 'Seznam vseh komponent' -->
<article>
  <div class="col-sm-9">
    ...
    <h2 id="seznam">Seznam vseh komponent</h2>
    <p>Aliquam pellentesque sem sodales nunc accumsan ultrices:</p>
    <ul>
      <li><a href="#">Alerts</a></li>
      <li><a href="#">Badge</a></li>
      <li><a href="#">Breadcrumb</a></li>
      <li><a href="#">Buttons</a></li>
      <li><a href="#">Button group</a></li>
      <li><a href="#">Card</a></li>
      <li><a href="#">Carousel</a></li>
      <li><a href="#">Collapse</a></li>
      <li><a href="#">Dropdowns</a></li>
      <li><a href="#">Forms</a></li>
      <li><a href="#">Input group</a></li>
      <li><a href="#">Jumbotron</a></li>
      <li><a href="#">List group</a></li>
      <li><a href="#">Modal</a></li>
      <li><a href="#">Navs</a></li>
      <li><a href="#">Navbar</a></li>
      <li><a href="#">Pagination</a></li>
      <li><a href="#">Popovers</a></li>
      <li><a href="#">Progress</a></li>
      <li><a href="#">Scrollspy</a></li>
      <li><a href="#">Tooltips</a></li>
    </ul>
  </div>
</article>
...
  Poglej spletno stran!
Nazaj
Naprej