Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Izdelava strani Bootstrap

Spletno stran Bootstrap sestavimo s pomočjo datoteke domače spletne strani index.html. Kreiramo kopijo domače spletne strani, ki jo shranimo na isto lokacijo in jo poimenujemo bootstrap.html. Spletno stran sestavimo tako, da sledimo zgradbi dokumenta od vrha spletne strani proti dnu po naslednjih korakih:

Predloga glave in noge spletne strani

V datoteki bootstrap.html obdržimo HTML kodo zaglavja spletne strani in kodo, ki opisuje meni z logotipom ter nogo spletne strani, preostalo kodo pa izbrišemo.

Primer izdelave spletišča Postavitev strani Bootstrap predloga glave in noge

Predloga spletne strani bootstrap.html z odstranjeno HTML kodo in spremenjenim naslovom spletne strani eNSA | Spletišče: Bootstrap.

V meniju moramo spremeniti tudi položaj Bootstrapovega razreda active, ki ga dodamo alineji s povezavo na datoteko bootstrap.html:

<!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: Bootstrap</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>
            <!-- Razred 'active' določi aktivno povezavo menija -->
            <li class="active"><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>
	
  <!-- 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!

Glavni naslov spletne strani

V glavo spletne strani <header> pod meni <nav> vstavimo okvir glavnega naslova in odstavka besedila na vijoličnem barvnem ozadju.

Za oblikovanje uporabimo Bootstrapov razred container, ki določi okvir s fiksno širino.

Primer izdelave spletišča Postavitev strani Bootstrap glavni naslov

Okvir glavnega naslova ima vijolično barvo ozadja #553d7b. Uporabimo tudi Bootstrapov okvir container, besedilo v odstavku pa je generično Lorem Ipsum:

...
<section id="bs">
  <header>
    <!-- Glavni naslov -->
    <div class="bs-glavaStrani">
      <div class="container">
        <h1>Bootstrap</h1>
        <p>Nam fermentum tellus vel lacus ultricies luctus. Nunc a arcu enim. Duis dui ligula, ultrices faucibus sagittis sed, venenatis pretium diam.</p>
      </div>
    </div>
  </header>
</section>
...

V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge glavnega naslova:

/* Bootstrap - Glavni naslov */
.bs-glavaStrani {
   background-color: #553d7b;
   color:#cdbfe3;
   padding: .5em 15px;
}
.bs-glavaStrani h1 {
   font-size: 2.8em;
   font-weight: 400;
   color: #fff;
}
.bs-glavaStrani p {
   font-size: 1.3em;
   font-weight: 300;
}
  Poglej spletno stran!

Okvir 'Kaj je Bootstrap?'

Pod glavni naslov vstavimo okvir 'Kaj je Bootstrap?', ki je z Bootstrapovo mrežo razdeljen na 2 stolpca. V levem stolpcu je besedilo z gumboma, v desnem stolpcu pa je slika. Pri mobilni verziji se stolpca razvrstita drug pod drugega. Gumba v levem stolpcu zasedata celotno širino stolpca.

Gumba vstavimo kot aktivno povezavo, pri tem jima priredimo Bootstrapove razrede, ki določijo obliko gumba. Bootstrapovi razredi, ki določajo obliko gumbov, so opisani na spletnem mestu Bootstrap in w3schools.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

  • container - okvir s fiksno širino
  • row - vrstica
  • col-*-* - prilagodljivi stolpci
  • btn - oblikovanje gumba
  • btn-primary - primarno oblikovanje gumba
  • btn-lg - večji gumb
  • btn-block - gumb kot bločni element (en gumb v vrsti)
  • text-center - sredinska poravnava besedila
  • img-responsive - prilagodljiva velikost slike
Primer izdelave spletišča Postavitev strani Bootstrap okvir 'Kaj je Bootstrap?'

Besedilo v odstavkih je generično Lorem Ipsum. Za oblikovanje gumbov uporabimo Bootstrapov razred btn, ki določi obliko gumba, razred btn-primary, ki določi barvo gumba, razred btn-lg, ki gumb raztegne čez celotno širino in razred btn-block, ki gumba razporedi drug pod drugega.

Gumb Dokumentacija kaže na datoteko zacetek.html, ki se nahaja v mapi dokumentacija. Gumb Prenos pa kaže na spletno mesto https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.6/bootstrap-4.0.0-alpha.6-dist.zip, kjer lahko prenesemo datoteke Bootstrap.

<section id="bootstr">
  
  <!-- Okvir 'Kaj je Bootstrap?' -->
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h2>Kaj je Bootstrap?</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl massa, consectetur quis volutpat sed, convallis eget velit. Nullam ut tempus mauris. Vivamus justo libero, volutpat ac est et, fermentum vehicula nisl. Suspendisse id eleifend nisl. Nulla vulputate cursus lobortis. Aliquam erat volutpat. Vestibulum at consectetur quam. Fusce faucibus leo vel turpis molestie, eget venenatis tortor tincidunt. Ut lacinia fringilla est vel elementum.</p>
        <p>Fusce faucibus leo vel turpis molestie, eget venenatis tortor tincidunt. Ut lacinia fringilla est vel elementum. Duis commodo ligula id nibh aliquet laoreet. Sed auctor malesuada auctor. Nulla et porttitor nisl. </p>
        <a href="dokument/zacetek.html" class="btn btn-primary btn-lg btn-block">Dokumentacija</a>
        <a href="https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.6/bootstrap-4.0.0-alpha.6-dist.zip" class="btn btn-primary btn-lg btn-block">Prenos</a>
        <p class="verzija">Trenutna verzija v4.0.0-beta</p>
      </div>
      <div class="col-sm-6">
        <p class="text-center"><img src="slike/bootstrap/bootstrap-stack.png" alt="Logotipi Bootstrap" class="img-responsive"></p>
      </div>
    </div>
  </div>
   
</section>

V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge gumbov in odstavka 'Trenutna verzija...' v okvirju 'Kaj je Bootstrap?':

/* Bootstrap - Okvir 'Kaj je Bootstrap?' */

/* oblikovanje gumbov */
#bootstr .btn {
   background-color: #fff;
   color: #553d7b;
   border: 1px solid #553d7b;
   padding: 5px 50px;
   font-size: 2em;
   margin-top: 20px;
   margin-bottom: 20px;
}
#bootstr .btn:hover {
   color: #fff;
   background-color: #553d7b;
}
/* Odstavek 'Trenutna verzija ... */
#bootstr .verzija {
   font-size: 1em;
   color: #999;
   font-style: italic;
}
  Poglej spletno stran!

Okvir s tremi stolpci

Pod okvir 'Kaj je Bootstrap?' vstavimo okvir s tremi stolpci. V vsakem okvirju je ikona, naslov, besedilo in gumb. V prvem okvirju je tudi odstavek s preddefinirano vsebino, v tretjem pa slika.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

  • container - okvir s fiksno širino
  • row - vrstica
  • col-*-* - prilagodljivi stolpci
  • btn - oblikovanje gumba
  • text-center - sredinska poravnava besedila
  • img-responsive - prilagodljiva velikost slike
Primer izdelave spletišča Postavitev strani Bootstrap okvir s 3 stolpci

Stolpci v okvirju imajo svetlo sivo barvo ozadja #f5f5f5 in so za nekaj pik med seboj razmaknjeni. Ikone v stolpcih so s spletnega mesta Font Awesome in so svtlo modre barve #4da6ff.

Bootstrapov razred btn določa gumbe, oblika gumbov je definirana z lastnimi oblikovnimi slogi. Gumbi nimajo aktivnih povezav.

Preddefiniranemu odstavku <pre> je dodeljena oblikovna lastnost overflow-x: scroll, ki prikaže drsnik, ko zmanjka prostora v vodoravni smeri.

V mobilni verziji se stolpci prikažejo drug pod drugim.

...
  <!-- Okvir s tremi stolpci -->
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="bs-okvir">
          <i class="fa fa-download fa-2x" aria-hidden="true"></i>
          <h2>Namestitev</h2>
          <p>Quisque rhoncus fringilla mi ac porta. Nunc consequat in lectus id imperdiet. Integer tincidunt, sem ut egestas vehicula, ante enim feugiat diam, gravida efficitur risus lectus sit amet elit.</p>
          <pre>

npm install bootstrap@4.0.0-beta

gem install bootstrap -v 4.0.0.alpha6
			
bower install bootstrap#v4.0.0-beta
			
</pre>
          <p class="text-center"><button type="button" class="btn bs-gumb">Preberi dokumentacijo</button></p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="bs-okvir">
          <i class="fa fa-cloud-download fa-2x" aria-hidden="true"></i>
          <h2>Bootstrap CDN</h2>
          <p>Nunc tempus augue sit amet ultrices mattis. Pellentesque hendrerit, tellus nec suscipit euismod, urna risus suscipit neque, sed porttitor mauris magna auctor erat. Aliquam sed porttitor lectus, vitae convallis dolor. </p>
          <h3>CSS, JS, Popper in jQuery</h3>
          <p>Suspendisse interdum turpis ut arcu gravida maximus. Donec sodales, ipsum vel volutpat molestie, dui enim commodo arcu, non lobortis ipsum leo id dolor</p>
          <p class="text-center"><button type="button" class="btn bs-gumb">Uporaba Bootstrapa</button></p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="bs-okvir">
          <i class="fa fa-cog fa-2x" aria-hidden="true"></i>
          <h2>Uradne predloge</h2>
          <p>Phasellus iaculis interdum neque sed molestie. Nullam ac ligula elementum, varius sem eu, accumsan dolor.</p>
          <br>
          <p class="text-center"><img src="slike/bootstrap/bootstrap-themes.png" alt="Uradne teme Bootstrap" class="img-responsive"></p>
          <p class="text-center"><button type="button" class="btn bs-gumb">Izberi predlogo</button></p>
        </div>
      </div>
    </div>
  </div>
</section>
...

V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge okvirja s 3 stolpci, sloge gumbov v okvirjih, slog odstavka <pre> in odmike okvirjev v mobilni verziji:

/* okvir 3 stolpcev */
#bootstr .bs-okvir {
   background-color: #f5f5f5; 
   margin: -13px;  
   padding: 15px 15px 0;
}
#bootstr .bs-okvir .fa { color: #4da6ff; padding-left: 10px }

/* gumbi v okvirju s 3 stolpci */
#bootstr .bs-gumb{
   background-color: #fff;
   color: #4da6ff;
   border: 1px solid #4da6ff;
   padding: 8px 15px;
   font-size: 1em;
}
#bootstr .bs-gumb:hover {
   background-color: #4da6ff;
   color: #fff;
   border: 1px solid #4da6ff;
}

/* okvir kode z drsnikom */
#bootstr .over { 
   display: inline-flex;
   overflow-x: scroll; 
}

/* odmik okvirjev v mobilni verziji */
@media (max-width: 767px) {
   #bootstr .bs-okvir {
      margin: 5px;  
   }
}
  Poglej spletno stran!
Nazaj
Naprej