Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Izdelava strani Vodiči

Spletno stran Vodiči sestavimo s pomočjo datoteke bootstrap.html. Kreiramo kopijo te datoteke z imenom vodici.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 vodici.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 Vodiči.

Primer izdelave spletišča Postavitev strani Vodiči predloga glave, noge in naslova

Predloga spletne strani vodici.html s spremenjenim naslovom spletne strani eNSA | Spletišče: Vodiči in spremenjenim besedilom glavnega naslova in odstavka pod naslovom. Spremnimo tudi vrednost atributa id v HTML oznaki <section> v vodici:

<!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: Vodiči</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 class="active"><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="vodici">
    <header>
      <!-- Glavni naslov -->
      <div class="bs-glavaStrani">
        <div class="container">
          <h1>Vodiči</h1>
          <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</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>
  Poglej spletno stran!

Odsek <section>

V odsek <section> pod naslov vstavimo Bootstrapov okvir container z Bootstrapovo vrstico row v katero vstavimo štiri stolpce:

  • container - okvir s fiksno širino
  • row - vrstica
  • col-sm-3 - prilagodljivi stolpci (sm - za zaslone, ki imajo širino večjo ali enako 768px, 3 - 4 stolpci)
Primer izdelave spletišča Postavitev strani Vodiči odesek <section>
...
<!-- Odsek <section> s 4 stolpci v Bootstrapovi vrstici -->
<section id="vodici">
  ...
  <div class="container">
    <div class="row">
      <div class="col-sm-3">

      </div>
      <div class="col-sm-3">

      </div>
      <div class="col-sm-3">

      </div>
      <div class="col-sm-3">

      </div>
    </div>
  </div>
</section>
...
  Poglej spletno stran!

Okvir vodiča

V stolpce vstavimo okvirje vodiča brez vsebine, ki so zgrajeni na sledeč način:

Primer izdelave spletišča Postavitev strani Vodiči okvir vodiča
...
<!-- Okvir vodiča brez vsebine -->
<a href="#" target="_blank">
  <div class="vodici-okvir">
    <img class="img-responsive" src="" alt="">
    <div class="kartica">
      <h4 class="kartica-naslov">...</h4>
      <p class="kartica-text">...</p>
      <p class="kartica-text"><small class="kartica-text-min">...</small></p>
    </div>
  </div>
</a>
...

V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge okvirja vodičev:

/* Okvir vodiča */
#vodici .vodici-okvir {
  border: 1px solid #efefef;
  opacity: 0.9;
  margin: 15px 0;
}
#vodici a {
  color: #666;
  text-decoration: none;
}
#vodici a .vodici-okvir:hover {
  color: #666;
  opacity: 1;
  background-color: #efefef;
  text-decoration: none;
}
#vodici .kartica { padding: 10px }
#vodici .kartica-naslov { color: #000; font-size: 1.3em }
#vodici .kartica-text { font-size: 1.1em }
#vodici .kartica-text-min { color: #999; font-size: .9em; font-style: italic }
#vodici .vodici-okvir img { width: 100% }
  Poglej spletno stran!

Vsebina vodičev

V vsak Bootstrapov stolpec vstavimo 3 okvirje vodiča z vsebino. Posameznemu vodiču določimo povezavo in naslov (seznam naslovov in povezav je v tabeli), vstavimo sliko (slike so priložene v gradivu) in generično vsebino odstavkov Lorem ipsum.

Primer izdelave spletišča Postavitev strani Vodiči vsebina vodičev
...
<section id="vodici">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <a href="https://www.youtube.com/watch?v=gqOEoUR5RHg" target="_blank">
          <div class="vodici-okvir">
            <img class="img-responsive" src="slike/vodici/yt-1.jpg" alt="Bootstrap Tutorial">
            <div class="kartica">
              <h4 class="kartica-naslov">Bootstrap Tutorial</h4>
              <p class="kartica-text">Nam id lorem et lacus consequat condimentum in sed lectus. Fusce et ullamcorper est, vitae rutrum magna.Integer ac orci dolor. Donec aliquam eleifend velit sed suscipit. Maecenas sit amet rhoncus est. Suspendisse magna mi, fringilla rhoncus blandit eget, tempus vel orci.</p>
              <p class="kartica-text"><small class="kartica-text-min">Etiam ornare, velit nec.</small></p>
            </div>
          </div>
        </a>
        <a href="https://www.youtube.com/watch?v=gqOEoUR5RHg" target="_blank">
          <div class="vodici-okvir">
            <img class="img-responsive" src="slike/vodici/yt-2.jpg" alt="Bootstrap Tutorial">
            <div class="kartica">
              <h4 class="kartica-naslov">Bootstrap Beginner Crash Course</h4>
              <p class="kartica-text">In hac habitasse platea dictumst. Nunc id efficitur metus, a faucibus sapien. Sed egestas sed leo in convallis. Vivamus fermentum neque et justo tempus, a varius sem consequat.</p>
              <p class="kartica-text"><small class="kartica-text-min">Cras vitae tempor.</small></p>
            </div>
          </div>
        </a>
        <a href="https://www.youtube.com/watch?v=10SwsoYNkVc" target="_blank">
          <div class="vodici-okvir">
            <img class="img-responsive" src="slike/vodici/yt-9.jpg" alt="Bootstrap Tutorial">
            <div class="kartica">
              <h4 class="kartica-naslov">Creating a Website with Bootstrap Studio</h4>
              <p class="kartica-text">Aliquam tempor, sem ut malesuada commodo, ex augue fermentum ex, quis lacinia dui metus vitae dolor. Vivamus odio purus, facilisis et nisl vitae, pellentesque egestas lacus. Ut sit amet placerat ex. Nunc tincidunt eu elit vel eleifend. In vestibulum felis a dolor maximus finibus vel vitae velit.</p>
              <p class="kartica-text"><small class="kartica-text-min">Duis fermentum ex efficitur.</small></p>
            </div>
          </div>
        </a>
      </div>
				
      <div class="col-sm-3">  
        <a href="https://www.youtube.com/watch?v=eIWRbvE1B2E" target="_blank">
          <div class="vodici-okvir">
            <img class="img-responsive" src="slike/vodici/yt-3.jpg" alt="Bootstrap Tutorial">
            <div class="kartica">
              <h4 class="kartica-naslov">Create A Responsive Bootstrap Website From Scratch</h4>
              <p class="kartica-text">Suspendisse ac arcu scelerisque, pulvinar eros et, pretium massa. Aliquam rhoncus eros at arcu semper.</p>
              <p class="kartica-text"><small class="kartica-text-min">Fusce a interdum sem.</small></p>
            </div>
          </div>
        </a>
        <a href="https://www.youtube.com/watch?v=pbGNYgJD-dw" target="_blank">
          <div class="vodici-okvir">
            <img class="img-responsive" src="slike/vodici/yt-4.jpg" alt="Bootstrap Tutorial">
            <div class="kartica">
              <h4 class="kartica-naslov">How to building awesome bootstrap websites</h4>
              <p class="kartica-text">Aliquam iaculis sed leo ut ultricies. Vestibulum quis leo aliquam, vehicula nulla tempor, vehicula ipsum. Duis laoreet metus felis. Nam vel egestas odio. Praesent rutrum tortor tortor, id ullamcorper justo accumsan eu.</p>
              <p class="kartica-text"><small class="kartica-text-min">Phasellus ac augue ligula.</small></p>
            </div>
          </div>
        </a>
        <a href="https://www.youtube.com/watch?v=oepmLGQP1m4&list=PLUoqTnNH-2Xz_BUrjcahKWDhPcUj-FTOt" target="_blank">
          <div class="vodici-okvir">
            <img class="img-responsive" src="slike/vodici/yt-10.jpg" alt="Bootstrap Tutorial">
            <div class="kartica">
              <h4 class="kartica-naslov">Code a Responsive Website with Twitter Bootstrap</h4>
              <p class="kartica-text">Cras euismod risus orci, eget rutrum mi interdum in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a felis ante. Vestibulum pretium blandit velit, vel tristique erat posuere ut. Mauris vitae venenatis odio. Mauris gravida non turpis vitae porttitor. Proin vitae velit odio. Sed semper faucibus tortor, et lacinia nisl lacinia ut.</p>
              <p class="kartica-text"><small class="kartica-text-min">Nulla facilisis arcu.</small></p>
            </div>
          </div>
        </a>
      </div>
				
      <div class="col-sm-3">        
        <a href="https://www.youtube.com/watch?v=PmJ4OSRod8I" target="_blank">
          <div class="vodici-okvir">
            <img class="img-responsive" src="slike/vodici/yt-5.jpg" alt="Bootstrap Tutorial">
            <div class="kartica">
              <h4 class="kartica-naslov">LayoutIt! - Drag and Drop Interface Builder for Bootstrap</h4>
              <p class="kartica-text">Ut elementum, neque et consectetur gravida, dui velit accumsan ligula, et molestie velit. </p>
              <p class="kartica-text"><small class="kartica-text-min">Morbi laoreet neque.</small></p>
            </div>
          </div>
        </a>
        <a href="https://www.youtube.com/watch?v=314m7YBRFvQ&list=PL6n9fhu94yhXd4xnk-j5FGhHjUv1LsF0V" target="_blank">
          <div class="vodici-okvir">
            <img class="img-responsive" src="slike/vodici/yt-6.jpg" alt="Bootstrap Tutorial">
            <div class="kartica">
              <h4 class="kartica-naslov">Bootstrap tutorial for beginners</h4>
              <p class="kartica-text">Morbi consectetur ultrices odio, non molestie orci mollis ac. Etiam fermentum tellus vel purus congue finibus. Quisque non pretium velit. Etiam consectetur velit sem, sed vulputate augue interdum eget. Curabitur tortor ligula, tincidunt sagittis lorem vitae, congue efficitur dolor. Duis malesuada magna eget dui interdum ullamcorper. Donec a nunc malesuada, semper tortor vel, venenatis arcu. Vestibulum non faucibus nulla. Integer vitae augue.</p>
              <p class="kartica-text"><small class="kartica-text-min">In dignissim varius.</small></p>
            </div>
          </div>
        </a>        
        <a href="https://www.youtube.com/watch?v=6spqHfiCwtY" target="_blank">
          <div class="vodici-okvir">
            <img class="img-responsive" src="slike/vodici/yt-11.jpg" alt="Bootstrap Tutorial">
            <div class="kartica">
              <h4 class="kartica-naslov">Creare siti con Bootstrap con un Metodo Efficace</h4>
              <p class="kartica-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a ante lectus. Fusce venenatis velit massa, eu dapibus mi auctor vel. Morbi consectetur ultrices odio, non molestie orci.</p>
              <p class="kartica-text"><small class="kartica-text-min">Etiam fermentum.</small></p>
            </div>
          </div>
        </a>
      </div>
				
      <div class="col-sm-3">
        <a href="https://www.youtube.com/watch?v=nug1pMke-y4" target="_blank">
          <div class="vodici-okvir">
            <img class="img-responsive" src="slike/vodici/yt-7.jpg" alt="Bootstrap Tutorial">
            <div class="kartica">
              <h4 class="kartica-naslov">Curso completo de Bootstrap desde cero 1.- Introducción e Instalación</h4>
              <p class="kartica-text">Quisque non pretium velit. Etiam consectetur velit sem, sed vulputate augue interdum eget. Curabitur tortor ligula, tincidunt sagittis lorem vitae, congue efficitur dolor. Duis malesuada magna eget dui interdum ullamcorper. Donec a nunc malesuada, semper tortor vel, venenatis arcu. Vestibulum non faucibus nulla.</p>
              <p class="kartica-text"><small class="kartica-text-min">Integer vitae augue.</small></p>
            </div>
          </div>
        </a>
        <a href="https://www.youtube.com/watch?v=e6VYRVRoC40" target="_blank">
          <div class="vodici-okvir">
            <img class="img-responsive" src="slike/vodici/yt-8.jpg" alt="Bootstrap Tutorial">
            <div class="kartica">
              <h4 class="kartica-naslov">Bootstrap 3 tutorial - Create your first one-page responsive website using Bootstrap</h4>
              <p class="kartica-text">Tincidunt est venenatis hendrerit commodo et enim. In dignissim varius malesuada. Pellentesque egestas, erat in tempus ullamcorper, ante lectus iaculis augue, quis mollis dolor justo.</p>
              <p class="kartica-text"><small class="kartica-text-min">Phasellus ex lectus.</small></p>
            </div>
          </div>
        </a>
        <a href="https://www.youtube.com/watch?v=p4hU45Le9sY" target="_blank">
          <div class="vodici-okvir">
            <img class="img-responsive" src="slike/vodici/yt-12.jpg" alt="Bootstrap Tutorial">
            <div class="kartica">
              <h4 class="kartica-naslov">Create responsive website in bootstrap</h4>
              <p class="kartica-text">Sed vel libero eget lacus condimentum varius. Vestibulum sit amet odio vitae augue ullamcorper condimentum vel.</p>
              <p class="kartica-text"><small class="kartica-text-min">Hendrerit dui.</small></p>
            </div>
          </div>
        </a>
      </div>			
    </div>
  </div>
</section>
...
  Poglej spletno stran!
Nazaj
Naprej