Izdelava strani Dokumentacija

Spletno stran Kako začeti sestavimo s pomočjo datoteke bootstrap.html. Kreiramo kopijo te datoteke z imenom zacetek.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 in glavnega naslova spletne strani

V datoteki zacetek.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.

Primer izdelave spletišča Postavitev strani Kako začeti predloga glave, noge in naslova

Predloga spletne strani zacetek.html s spremenjenim naslovom spletne strani eNSA | Spletišče: Kako začeti in spremenjenim besedilom glavnega naslova in odstavka pod naslovom:

<!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: Kako začeti</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>Kako začeti</h1>
          <p>Suspendisse faucibus convallis feugiat. Donec vitae elit at est scelerisque semper. Maecenas non tortor ut tortor tincidunt consequat.</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!

Stranski meni

Pod glavni naslov vstavimo okvir s stranskim menijem in vsebino spletne strani.

Za oblikovanje uporabimo Bootstrapove razrede:

container - okvir s fiksno širino
row - vrstica
col-*-* - prilagodljivi stolpci
list-unstyled - seznam brez oznak

Primer izdelave spletišča Postavitev strani Kako začeti stranski meni

Z Bootstrapovim mrežnim okvirjem razdelimo okvir v 2 stolpca. Pri tem je stolpec z vsebino članka 3-krat širši kot stolpec z navigacijo.

Povezave v stranskem meniju kažejo na naslove v članku na spletni strani. Za oblikovanje seznama menija uporabimo Bootstrapov razred list-unstyled, ki seznamu odstrani oznake.

...
  </header>
  <div class="container">
    <div class="row">
      <!-- navigacija stranskega menija -->
      <nav>
        <div class="col-sm-3">
          <h3>Vsebina strani:</h3>
          <ul class="list-unstyled">
            <li><a href="#uvod">Uvod</a></li>
            <li><a href="#prenos">Prenos</a></li>
            <li><a href="#vsebina">Vsebina</a></li>
            <li><a href="#naprave">Brskalniki in naprave</a></li>
            <li><a href="#js">JavaScript</a></li>
            <li><a href="#opcije">Opcije</a></li>
          </ul>
        </div>
      </nav>
      <!-- članek vsebine -->
      <article>
        <div class="col-sm-9">

        </div>
      </article>
    </div>
  </div>
</section>
...

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

/* Stranski meni */
#bs article h1 { padding-top: 1em; }

#bs #uvod, #bs #pregled, #bs #tipografija, #bs #opozorila {
   padding-top: 0;
}
#bs nav h3 { border-bottom: 1px solid #efefef;}
#bs nav li {
   padding: 3px 5px;
   font-size: 1.2em;
}

Poglej spletno stran!

Vsebina: Uvod

V odsek <article> vstavimo vsebino spletne strani - poglavje Uvod. Uporabimo podnaslove, odstavke, slike in HTML oznako <code>, v katero vstavimo kodo.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

col-*-* - prilagodljivi stolpci
text-center - sredinska poravnava besedila odstavka
img-responsive - prilagaja velikost slike velikosti zaslona

Primer izdelave spletišča Postavitev strani Kako začeti vsebina: Uvod

...
<!-- članek vsebine: poglavje 'Uvod' -->
<article>
  <div class="col-sm-9">
    <h2 id="uvod">Uvod</h2>
    <p>Sed mauris orci, commodo id viverra vitae, scelerisque vel eros. Curabitur dapibus euismod hendrerit. Nam accumsan eros eu pharetra faucibus. Donec vitae interdum ipsum. Vivamus faucibus lectus non turpis sodales, ultrices porta urna lobortis. </p>
    <p class="text-center"><img src="../../../_slike/splet/primer/dokumentacija/devices.png" alt="naprave" class="img-responsive"></p>
    <p>Nullam eros leo, consectetur id ante nec, fringilla elementum nunc.</p>
    <p><strong>Duis feugiat metus a urna posuere gravida. Sed ultricies ex ut metus congue laoreet.</strong></p>
    <p class="text-center"><img src="../../../_slike/splet/primer/dokumentacija/orodja.png" alt="orodja" class="img-responsive"></p>

    <h3>Hiter začetek</h3>
    <p>Donec ut felis et risus semper tristique. Ut ex odio, commodo id est at, viverra dictum turpis. Suspendisse eleifend nec augue nec iaculis. Ut aliquam tortor sed sapien commodo fringilla. Mauris vulputate quam <code><link></code> mi laoreet semper <code><head></code>. Ut faucibus tristique finibus.</p>
    <code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"></code><br><br>

    <p>Sed a justo eget enim euismod cursus vitae ac mauris. Maecenas non elit eu leo rhoncus euismod. Praesent neque ante, tincidunt et sapien ac, convallis posuere nunc. Morbi metus lorem, vestibulum id <code><body></code> ex sit amet, interdum pharetra mi. Morbi auctor sodales arcu eget scelerisque. Aenean elit nisl, ultricies nec ex id, placerat commodo augue. Integer ut tempus metus.</p>
    <code>
      <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
      <br><br>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
      <br><br>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    </code>
  </div>
</article>
...

Poglej spletno stran!

Vsebina: Prenos

V odsek <article> vstavimo vsebino spletne strani - poglavje Prenos. Uporabimo podnaslove, odstavke, gumbe in HTML oznako <code>, v katero vstavimo kodo.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

btn - oblikovanje gumba
btn-info - informacijsko oblikovanje gumba
btn-warning - opozorilno oblikovanje gumba
btn-lg - večji gumb
active - oblikovanje aktivne povezave

Primer izdelave spletišča Postavitev strani Kako začeti vsebina: Prenos

...
<!-- članek vsebine: poglavje 'Prenos' -->
<article>
  <div class="col-sm-9">
    ...
    <h2 id="prenos">Prenos</h2>
    <p><strong>Bootstrap v4.0.0-alpha.6</strong> facilisis rhoncus purus. Aliquam porta laoreet eros, non ultrices neque facilisis in. Aenean nec tortor eget arcu molestie hendrerit id a erat. Suspendisse potenti. Ut vitae quam sed est euismod convallis ac et orci. Aliquam iaculis velit id tortor gravida eleifend. Nunc in elementum sapien, id aliquam magna.</p>

    <h3>Bootstrap CSS and JS</h3>
    <p><strong>Praesent neque ante, tincidunt et sapien ac, convallis posuere nunc.</strong> Morbi metus lorem, vestibulum id ex sit amet, interdum pharetra mi. Morbi auctor sodales arcu eget scelerisque. Aenean elit nisl, ultricies nec ex id, placerat commodo augue. Integer ut tempus metus.</p>
    <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-info btn-lg active" role="button" aria-pressed="true">Prenesi Bootstrap</a>
    
    <h3>Izvorna koda</h3>
    <p><strong>Vivamus elementum a nunc nec venenatis, estibulum at leo eget diam placerat efficitur?</strong> Fusce interdum gravida dolor, eu lobortis lacus malesuada ac. In pharetra consectetur neque, consequat pulvinar erat sodales et. Fusce dignissim dolor risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ullamcorper enim a ante rhoncus, et porta velit lacinia. Fusce id consequat quam, sagittis mollis felis. Duis congue sem laoreet nunc bibendum dapibus.</p>
    <a href="https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.6.zip" class="btn btn-warning active" role="button" aria-pressed="true">Prenesi Bootstrap</a>

    <h3>Bootstrap CDN</h3>
    <p>Aenean nec tortor eget arcu molestie hendrerit id a erat. Suspendisse potenti. Ut vitae quam sed est euismod convallis ac et orci. Aliquam iaculis velit id tortor gravida eleifend. Nunc in elementum sapien, id aliquam magna.</p>
    <code>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
      <br><br>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    </code>
  </div>
</article>
...

Poglej spletno stran!

Vsebina: Vsebina Bootsrapovih paketov

V odsek <article> vstavimo vsebino spletne strani - poglavje Vsebina Bootsrapovih paketov. Uporabimo podnaslove in odstavke.

Primer izdelave spletišča Postavitev strani Kako začeti vsebina: Vsebina ...

...
<!-- članek vsebine: poglavje 'Vsebina ...' -->
<article>
  <div class="col-sm-9">
    ...
    <h2 id="vsebina">Vsebina Bootstrapovih paketov</h2>
    <p>Morbi metus lorem, vestibulum id ex sit amet, interdum pharetra mi. Morbi auctor sodales arcu eget scelerisque. Aenean elit nisl, ultricies nec ex id, placerat commodo augue. Integer ut tempus metus. Maecenas et mollis turpis. Donec ut felis et risus semper tristique. </p>
						
    <h3>Preveden Bootstrap</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet odio consectetur purus fringilla iaculis:</p>
    <pre>bootstrap/
       ├── css/
       │   ├── bootstrap.css
       │   ├── bootstrap.css.map
       │   ├── bootstrap.min.css
       │   └── bootstrap.min.css.map
       └── js/
       	├── bootstrap.js
       	└── bootstrap.min.js</pre>
    <p>Sed a justo eget enim euismod cursus vitae ac mauris. Maecenas non elit eu leo rhoncus euismod. Praesent neque ante, tincidunt et sapien ac, convallis posuere nunc. Morbi metus lorem, vestibulum id ex sit amet, <a href="#">interdum</a> pharetra mi. Morbi auctor sodales arcu eget scelerisque. Aenean elit nisl, ultricies nec ex id, placerat commodo augue. Integer ut tempus metus.</p> 
						
    <h3>Bootstrapova izvorna koda</h3>
    <p>Maecenas et mollis turpis. Donec ut felis et risus semper tristique. Ut ex odio, commodo id est at, viverra dictum turpis. Suspendisse eleifend nec augue nec iaculis. Ut aliquam tortor sed sapien commodo fringilla. Mauris vulputate quam quis mi laoreet semper. Ut faucibus tristique finibus.</p>
    <pre>bootstrap/
       ├── dist/
       │   ├── css/
       │   └── js/
       ├── docs/
       │   └── examples/
       ├── js/
       └── scss/</pre>
    <p>Vivamus elementum a nunc nec venenatis. Vestibulum at leo eget diam placerat efficitur. Fusce interdum gravida dolor, eu lobortis lacus malesuada ac. In pharetra consectetur neque, consequat pulvinar erat sodales et.</p>
  </div>
</article>
...

Poglej spletno stran!

Vsebina: Brskalniki in naprave

V odsek <article> vstavimo vsebino spletne strani - poglavje Brskalniki in naprave. Uporabimo podnaslove, odstavke in tabele.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

table - osnovna oblika tabele
table-bordered - tabela z obrobami
table-striped - poudarek vsake druge vrstice
table-responsive - prilagodljiva tabela
text-success - oblikovanje besedila (zelena barva)
text-muted - oblikovanje besedila (siva barva)
text-danger - oblikovanje besedila (rdeča barva)

Primer izdelave spletišča Postavitev strani Kako začeti vsebina: Brskalniki in naprave

...
<!-- članek vsebine: poglavje 'Brskalniki in naprave' -->
<article>
  <div class="col-sm-9">
    ...
    <h2 id="naprave">Brskalniki in naprave</h2> 
    <p>Bootstrap supports the <strong>latest, stable releases</strong> of all major browsers and platforms. On Windows, we <strong>support Internet Explorer 10-11 / Microsoft Edge</strong>.</p>
    <p>Fusce dignissim dolor risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ullamcorper enim a ante rhoncus, et porta velit lacinia. Fusce id consequat quam, sagittis mollis felis. Duis congue sem laoreet nunc bibendum dapibus.</p>

    <h3>Mobilne naprave</h3>
    <p>Maecenas gravida ante id quam blandit, id commodo purus tempor. Donec fermentum ante in imperdiet sodales. Curabitur consectetur elementum risus, id aliquam justo venenatis non. Fusce ornare sem at arcu hendrerit, vitae tempor lacus tincidunt. Morbi egestas magna nec dolor consectetur lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rutrum luctus elit vel vulputate. Ut at nulla finibus, dictum justo eu, tempor ipsum.</p>
    <table class="table table-bordered table-striped table-responsive">
      <thead>
	    <tr>
	      <td></td>
	      <th>Chrome</th>
	      <th>Firefox</th>
	      <th>Safari</th>
	      <th>Android Browser & WebView</th>
	      <th>Microsoft Edge</th>
	    </tr>
      </thead>
      <tbody>
	    <tr>
	      <th scope="row">Android</th>
	      <td class="text-success">Supported</td>
	      <td class="text-success">Supported</td>
	      <td class="text-muted">N/A</td>
	      <td class="text-success">Android v5.0+ supported</td>
	      <td class="text-muted">N/A</td>
	    </tr>
	    <tr>
	      <th scope="row">iOS</th>
	      <td class="text-success">Supported</td>
	      <td class="text-success">Supported</td>
	      <td class="text-success">Supported</td>
	      <td class="text-muted">N/A</td>
	      <td class="text-muted">N/A</td>
	    </tr>
	    <tr>
	      <th scope="row">Windows 10 Mobile</th>
	      <td class="text-muted">N/A</td>
	      <td class="text-muted">N/A</td>
	      <td class="text-muted">N/A</td>
	      <td class="text-muted">N/A</td>
	      <td class="text-success">Supported</td>
	    </tr>
      </tbody>
    </table>

    <h3>Brskalniki</h3>
    <p>In in quam nec orci pellentesque luctus ut non nibh. Donec condimentum lorem aliquam erat porttitor volutpat. Vivamus quis malesuada odio, vitae tempus enim.</p>
    <table class="table table-bordered table-striped table-responsive">
      <thead>
	    <tr>
	      <td></td>
	      <th>Chrome</th>
	      <th>Firefox</th>
	      <th>Internet Explorer</th>
	      <th>Microsoft Edge</th>
	      <th>Opera</th>
	      <th>Safari</th>
	    </tr>
      </thead>
      <tbody>
	    <tr>
	      <th scope="row">Mac</th>
	      <td class="text-success">Supported</td>
	      <td class="text-success">Supported</td>
	      <td class="text-muted">N/A</td>
	      <td class="text-muted">N/A</td>
	      <td class="text-success">Supported</td>
	      <td class="text-success">Supported</td>
	    </tr>
	    <tr>
	      <th scope="row">Windows</th>
	      <td class="text-success">Supported</td>
	      <td class="text-success">Supported</td>
	      <td class="text-success">Supported, IE10+</td>
	      <td class="text-success">Supported</td>
	      <td class="text-success">Supported</td>
	      <td class="text-danger">Not supported</td>
	    </tr>
      </tbody>
    </table>
    <p>Maecenas gravida ante id quam blandit, id commodo purus tempor. Donec fermentum ante in imperdiet sodales. Curabitur consectetur elementum risus, id aliquam justo venenatis non. </p>
    <p>Fusce ornare sem at arcu hendrerit, vitae tempor lacus tincidunt. Morbi egestas magna nec dolor consectetur lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rutrum luctus elit vel vulputate. Ut at nulla finibus, dictum justo eu, tempor ipsum.</p>

  </div>
</article>
...

Poglej spletno stran!

Vsebina: JavaScript

V odsek <article> vstavimo vsebino spletne strani - poglavje JavaScript. Uporabimo podnaslove, odstavke in HTML oznako <code>, v katero vstavimo kodo.

Primer izdelave spletišča Postavitev strani Kako začeti vsebina: JavaScript

...
<!-- članek vsebine: poglavje 'JavaScript' -->
<article>
  <div class="col-sm-9">
    ...
    <h2 id="js">JavaScript</h2>
    <p>Vivamus quis malesuada odio, vitae tempus enim. In commodo velit eget nulla semper, non tristique nunc tristique. Proin placerat metus ac eros gravida bibendum. Pellentesque volutpat mauris elit, nec suscipit tellus lobortis a. Proin finibus consectetur enim quis suscipit.</p>
    <p>n sed quam leo. Morbi fermentum velit sit amet congue scelerisque. Vestibulum dignissim lacus vel mattis condimentum. Sed faucibus, felis vitae varius commodo, sapien ligula congue mauris, eget blandit purus turpis bibendum est. Phasellus dapibus augue ac mi fermentum, quis vehicula elit aliquam. Nam at ante feugiat, <mark>viverra</mark> ex sit amet, fermentum urna.</p>
    <p><code>$(document).off('.alert.data-api')</code></p>
    <p>Phasellus non malesuada urna. Pellentesque tempor nunc tincidunt ante aliquet luctus. Aenean vel metus congue, convallis dui eu, cursus felis. Duis eget orci sed turpis bibendum tincidunt. Curabitur ultricies aliquet turpis et dignissim. Sed vitae sapien gravida, tincidunt leo ac, tincidunt leo. Curabitur vitae nunc est. Suspendisse potenti. <mark>Aliquam viverra</mark> vehicula metus, quis accumsan lorem placerat id. Nullam accumsan, ipsum ac tempor hendrerit, urna justo ornare lorem, non bibendum augue metus non massa.</p>
  </div>
</article>
...

Poglej spletno stran!

Vsebina: Opcije

V odsek <article> vstavimo vsebino spletne strani - poglavje Opcije. Uporabimo podnaslove, odstavke in tabele.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

table - osnovna oblika tabele
table-bordered - tabela z obrobami
table-striped - poudarek vsake druge vrstice
table-responsive - prilagodljiva tabela
highlighter-rouge - poudarjeno besedilo (rdeče besedilo na svtlordeči podlagi)

Primer izdelave spletišča Postavitev strani Kako začeti vsebina: Opcije

...
<!-- članek vsebine: poglavje 'Opcije' -->
<article>
  <div class="col-sm-9">
    ...
    <h2 id="opcije">Opcije</h2>
    <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong> Suspendisse nibh tortor, congue et tempus in, faucibus ut ipsum. Curabitur et bibendum sem, ut placerat orci. Maecenas vulputate tellus eu dolor commodo gravida.</p>
    <p><em>Nam id euismod turpis. Nunc lobortis lorem non arcu semper, id mollis enim dapibus.</em></p> 
    <h3>Globalne opcije</h3>
    <p>Aenean ut aliquam magna. Phasellus posuere, 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>
    <table class="table table-bordered table-striped table-responsive">
      <thead>
	    <tr>
	      <th>Spremenljivke</th>
	      <th>Vrednosti</th>
	      <th>Opis</th>
	    </tr>
      </thead>
      <tbody>
	    <tr>
	      <td><code class="highlighter-rouge">$spacer</code></td>
	      <td><code class="highlighter-rouge">1rem</code> (default), or any value > 0</td>
	      <td>Eu hendrerit ligula sapien a arcu. Ut porta lacus et porttitor interdum.</td>
	    </tr>
	    <tr>
	      <td><code class="highlighter-rouge">$enable-rounded</code></td>
	      <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
	      <td> Aliquam efficitur tempus eleifend.</td>
	    </tr>
	    <tr>
	      <td><code class="highlighter-rouge">$enable-shadows</code></td>
	      <td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
	      <td>Enables predefined <code class="highlighter-rouge">box-shadow</code> styles on various components.</td>
	    </tr>
	    <tr>
	      <td><code class="highlighter-rouge">$enable-gradients</code></td>
	      <td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
	      <td>Phasellus interdum maximus dictum. Donec sollicitudin libero turpis, eu consectetur ante volutpat vitae.</td>
	    </tr>
	    <tr>
	      <td><code class="highlighter-rouge">$enable-transitions</code></td>
	      <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
	      <td>Ut egestas venenatis est, at lobortis turpis ultrices eu.</td>
	    </tr>
	    <tr>
	      <td><code class="highlighter-rouge">$enable-hover-media-query</code></td>
	      <td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
	      <td>…</td>
	    </tr>
	    <tr>
	      <td><code class="highlighter-rouge">$enable-grid-classes</code></td>
	      <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
	      <td>Maecenas sed quam non nunc fermentum gravida vitae a ipsum (e.g., <code class="highlighter-rouge">.container</code>, <code class="highlighter-rouge">.row</code>, <code class="highlighter-rouge">.col-md-1</code>, etc.).</td>
	    </tr>
	    <tr>
	      <td><code class="highlighter-rouge">$enable-print-styles</code></td>
	      <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
	      <td>Sed consectetur elit tortor, eget vestibulum ex pretium ac.</td>
	    </tr>
      </tbody>
    </table>
  </div>
</article>
...

Poglej spletno stran!

Nazaj

Naprej