Poglavje 6 D2.1 Uporaba obstoječega sloga Bootstrap

D2.1

6.1 Uvod

Bootstrap je odprtokodno ogrodje za razvoj uporabniškega vmesnika, ki pohitri in olajša razvoj spletnih aplikacij. Bootstrap vključuje predloge za oblikovanje HTML-jev in sloge CSS za tipografijo, spletne obrazce, gumbe, tabele, navigacijo, podrejena okna1 idr. Z uporabo Bootstrap lahko enostavno razvijamo prilagodljive in odzivne spletne strani.

Namig: Prilagodljiva in odzivna spletna stran se samodejno prilagaja (vsebina je ustrezno prikazana oz. prilagojena) glede na velikost zaslona naprave (npr. namizni računalnik, tablica, telefon), kjer jo pregledujemo.

Pri uporabi vseh zunanjih knjižnic je potrebno biti pozoren na verzijo in vedno preveriti dokumentacijo.

V okviru delavnice bomo uporabljali Bootstrap 4.1, kjer je za vključitev v naše HTML datoteke potrebno dodati povezave do elementov knjižnice.

Najprej dodamo CSS sloge, ki jih vključimo v HTML datoteko, znotraj oznake <head>.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Nato pred zaključkom oznake <body> vključimo še naslednje JavaScript datoteke, ki poskrbijo za dinamično delovanje Bootstrap sloga.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Namen uporabe Bootstrap predloge je doseči prilagodljiv uporabniški vmesnik, kjer bomo tabele pretvorili v Bootstrap elemente in dodali navigacijsko vrstico, ki se ustrezno prikaže glede na velikost zaslona.

6.1.1 Prilagajanje vsebine z mrežnim sistemom

Dinamično prilagajanje vsebine na različnih napravah je pri Bootstrap doseženo z uporabo mrežnega sistema, kjer je vsebina strani porazdeljena v 12 stolpcev. Če ne želite uporabljati vseh 12 stolpcev, jih lahko tudi združujete skupaj.

Mrežni sistem z 12 stolpci na različnih napravah

Slika 6.1: Mrežni sistem z 12 stolpci na različnih napravah

Bootstrap ima vnaprej opredeljene razrede, ki nam omogoča obvladovanje vsebine na različnih napravah (glej primer na sliki 6.1). Npr. za mobilne naprave uporabimo razrede .col-xs-*, za tablice .col-sm-*, za običajne namizne zaslone .col-md-* in za večje namizne zaslone .col-lg-*.

Tabela 6.1: Različni razredi mrežnega sistema glede na velikost naprave
Lastnost
Bootstrap mrežni sistem		 Zelo majhne naprave
Telefon (< 768px)		 Majhne naprave
Tablica (≥ 768px)		 Srednje naprave
Namizni računalnik (≥ 992px)		 Velike naprave
Namizni računalnik (≥ 1200px)
največja širina vsebnika neomejeno (samodejno) 750px 970px 1170px
delovanje mrežnega sistema ves čas vodoraven na začetku stisnjeno, nato vodoravno čez točko preloma na začetku stisnjeno, nato vodoravno čez točko preloma na začetku stisnjeno, nato vodoravno čez točko preloma
predpona razreda .col-xs- .col-sm- .col-md- .col-lg-
največja širina stolpca samodejno ~62px ~81px ~97px
širina presledka med stolpci 15px na vsaki strani, skupaj 30px 15px na vsaki strani, skupaj 30px 15px na vsaki strani, skupaj 30px 15px na vsaki strani, skupaj 30px

Tabela 6.1 prikazuje ključne razrede, ki jih opredeljuje Bootstrap pri prilagajanju vsebine na različnih napravah. Pomemben način delovanja je dedovanje lastnosti; če npr. HTML5 elementu dodelimo razred .col-sm-*, potem to velja za več naprav in sicer za tablice in obe skupini namiznih računalnikov.

6.2 Prilagajanje velikosti zaslona začetne strani

Kot že omenjeno v uvodnem poglavju 6.1, bomo najprej dodali Bootrstrap knjižnico (glej vrstice 10 - 11 in 162 - 166).

Nato bomo prilagodili glavo, kjer obstoječo obliko pretvorimo v navigacijsko vrstico v knjižnici Bootstrap, ki se prilagaja zaslonu. Za ta namen bomo spremenili vrstice 18 - 59 tako, da se bomo zgledovali po dokumentacji za Navbar, kjer so na voljo številni testni primeri.

Prav tako bomo poskrbeli za nogo spletne strani, kjer bomo našo stran preprosto prilagodili Bootstrap mrežnemu sistemu z div elementi razreda row za vrstice in div elementi razreda col za stolpce oz. celice v vrstici (glej vrstice 133, 134, 142, 144, 145 in 153).

Osrednji del z vsebino začetne strani (glej vrstice 69 - 127) bomo ravno tako iz tabelarične oblike spremenili v obliko Bootstrap, z uporabo elementov div in razredov row ter col. Slike se bodo ob spremembi velikosti zaslona posledično zmanjšale in se ne prenesejo v nove vrstice. Za prehode v novo vrstico poskrbimo z <div class="w-100"></div> (glej vrstici 89 in 107).

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

<!DOCTYPE html>

<!-- Osnovna HTML stran -->
<html>
  <head>
    <meta charset="utf-8">
    <title>..:: Restavracija Dobrojed ::..</title>
    <link rel="stylesheet" href="stili.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  
  <body>

    <!-- GLAVA -->
    <div class="glava">
      <div>
        <nav class="navbar navbar-expand-md navbar-dark">
          <div class="levi">
            <a class="navbar-brand" href="index.html">
              <img src="slike/logo/dobrojed_logo_veliki.png" class="veliki-logo" />
            </a>
          </div >
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button> 

          <div class="desni collapse navbar-collapse text-right" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
              <span>
              <li class="nav-item active">
                <a class="nav-link"  href="index.html">O nas</a>
              </li>
              </span>
              <span>
              <li class="nav-item active">
                <a class="nav-link" href="meni.html">Meni</a>
              </li>
              </span>
              <span>
              <li class="nav-item active">
                <a class="nav-link" href="vinska-karta.html">Vinska karta</a>
              </li>
              </span>
              <span>
              <li class="nav-item active">
                <a class="nav-link" href="dogodki.html">Dogodki</a>
              </li>
              </span>
              <span>
              <li class="nav-item active">
                <a class="nav-link" href="kontakt.html">Kontakt</a>
              </li>
              </span>
            </ul>
          </div >
        </nav>
      </div>
    </div>

    <!-- CENTER -->
    <div class="srednji-del">

      <div class="pasica">
        Restavracija izvrstnih okusov <br /> in dobrih ljudi
      </div>

      <div class="vsebina tretjina">
        <table>
        <div class="row">
          <tr>
            <td>
          <div class="col">
            <img src="slike/hrana/hrana1.jpg" />
          </div>
            </td>
            <td>
          <div class="col">
            <img src="slike/hrana/hrana2.jpg" />
          </div>
            </td>
            <td>
          <div class="col">
            <img src="slike/hrana/hrana3.jpg" />
          </div>
            </td>
          </tr>
          <div class="w-100"></div>
          <tr>
            <td>
          <div class="col">
            <img src="slike/hrana/hrana4.jpg" />
          </div>
            </td>
            <td>
          <div class="col">
            <img src="slike/hrana/hrana5.jpg" />
          </div>
            </td>
            <td>
          <div class="col">
            <img src="slike/hrana/hrana6.jpg" />
          </div>
            </td>
          </tr>
          <div class="w-100"></div>
          <tr>
            <td>
          <div class="col">
            <img src="slike/hrana/hrana7.jpg" />
          </div>
            </td>
            <td>
          <div class="col">
            <img src="slike/hrana/hrana8.jpg" />
          </div>
            </td>
            <td>
          <div class="col">
            <img src="slike/hrana/hrana9.jpg" />
          </div>
            </td>
          </tr>
        </div>
        </table>
      </div>

    </div>

    <!-- NOGA -->
    <div class="glava noga">
      <div class="levi row">
        <div class="col small">
          <a href="index.html">
            <img src="slike/logo/dobrojed_logo_mali.png" class="mali-logo" />
          </a>
          <p>
            &copy; 2018 Restavracija Dobrojed <br />
            Vse pravice pridržane
          </p>
        </div>
      </div>
      <div class="srednji col small">
        <p class="levi-odmik">
          Restavracija Dobrojed <br />
          Slovenska cesta 222 B <br />
          SI-1000 Ljubljana <br /><br />
          tel. 01 / 286 31 45 <br />
          <a href="mailto:info@dobrojed.si">info@dobrojed.si</a>
        </p>
      </div>
      <div class="col small desni">
        <p>
          IZDELAVA SPLETNE STRANI: <br />
          Informacijske tehnologije, Jože Mandeljc s.p. <br />
          OPOZORILO: Ta spletna stran služi kot učni pripomoček <br /> in vsebuje elemente iz spletne strani Restavracije Vrtnica.
        </p>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Skladno z vpeljavo Bootstrap slogo, moramo poskrbeti za prilagoditve našega obstoječega sloga. Odstranimo predvsem ročno določene velikosti posameznih gradnikov in nekaj ostalih prilagoditev v datoteki stil.css.

stil.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

body {
  margin: 0px; 
  background: url('slike/ozadje.jpg') top left repeat;
}


/* GLAVA in NOGA */
.glava {
  background-color: black; 
  color: white;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.noga {
  font-size: smaller; 
  padding-top: 20px;
}

.glava a {
  color: white; 
  text-decoration: none;
}

.glava span {
  margin-left: 30px;
}

.glava span:last-child {
  margin-right: 30px;
}

.glava .desni {
  width: 800px; 
  text-align: right;
}

.glava .levi, .veliki-logo {
  width: 200px;
}

.mali-logo {
  width: 150px;
}

.noga .srednji {
  width: 300px;
}

.noga .desni {
  width: 500px; 
  text-align: right;
}


/* SREDNJI DEL */
.srednji-del > .vsebina, .glava > div {
.srednji-del > .vsebina {
  width: 1000px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto
}

.srednji-del table {
  margin-top: 30px; 
  margin-bottom: 30px;
  border-spacing: 10px;
  border-collapse: separate;
}

.vsebina {
  margin-top: 25px; 
  margin-bottom: 25px;
}

.vsebina .col {
  padding: 0px;
  margin: 5px;
}

.vsebina .row {
  margin: 0px;
}

.pasica {
  background: url('slike/ozadje1.jpg') top center repeat left; 
  height: 200px; 
  width: 100%;
  font-size: 42px; 
  color: white; 
  text-shadow: 0 0 4px black; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
}

.tretjina img {
  width: 320px;
}

img {
  width: 100%;
}

.dogodki img {
  width: 800px;
}


/* SPLOŠNO */
.levi-odmik {
  padding-left: 150px;
}

.velik-tekst {
  font-size: x-large;
}

.sredina {
  text-align: center;
}

.kontakt {
  margin: 30px !important;
}

Končni izgled naše spletne strani se ob pregledovanju na običajnem računalniškem zaslonu z vpeljavo Bootstrap knjižnice ne spremeni, se pa spremeni izgled pri pregledovanju na mobilnem telefonu (glej sliko 6.2). Vsebina je sedaj ustrezno prilagojena tudi manjši velikosti zaslona, kar pri prejšnji različici ni veljalo. Opazimo tudi lahko, da je seznam povezav na ostale strani v tem pogledu skrit in ga lahko prikažemo s klikom na gumb desno zgoraj.

Začetna stran restavracije, prilagojena manjšim zaslonom

Slika 6.2: Začetna stran restavracije, prilagojena manjšim zaslonom

6.3 Prilagajanje velikosti zaslona strani z menijem

Pri prilagajanju strani z menijem lahko že prilagojeno obliko glave in noge preprosto prenesemo iz začetne strani, poskrbeti pa moramo še za osrednji del z vsebino, kjer so prikazane kategorije menijev in njihove podrobnosti. Vpeljemo nov CSS razred meni-razdelek, prav tako pa zahtevamo, da se vsebina prilagaja manjšim napravam (glej tabelo 6.1), saj uporabimo razred col-sm.

meni.html

51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231

<!-- CENTER -->
<div class="srednji-del">

  <div class="vsebina">
    <table>
    <div class="row">
      <tr>
        <td class="meni-razdelek">
        <div class="col-sm meni-razdelek">
          <div style="background: url('slike/hrana/hladne_predjedi.jpg') top left center no-repeat;">
            Hladne predjedi
          </div>
          <ul>
            <li>Tatarski biftek</li>
            <li>Kraški pršut</li>
            <li>Fini narezek</li>
            <li>Francoska solata</li>
            <li>Šunka s hrenom</li>
            <li>Govedina v solati</li>
            <li>Polenovka - namaz</li>
            <li>Ribja solata</li>
            <li>Hobotnica v solati</li>
          </ul>
        </div>
        </td>
        <td class="meni-razdelek">
        <div class="col-sm meni-razdelek">
          <div style="background: url('slike/hrana/juhe.jpg') top left center no-repeat;">
            Juhe
          </div>
          <ul>
            <li>Ribja juha</li>
            <li>Goveja juha</li>
            <li>Zelenjavna juha</li>
            <li>Enolončnice</li>
          </ul>
        </div>
        </td>
        <td class="meni-razdelek">
        <div class="col-sm meni-razdelek">
          <div style="background: url('slike/hrana/tople_predjedi.jpg') top left center no-repeat;">
            Tople predjedi
          </div>
          <ul>
            <li>Špageti</li>
            <li>Testenine z jurčki</li>
            <li>Ocvrti sir</li>
            <li>Njoki razni</li>
            <li>Pastičo mesni</li>
            <li>Kaneloni razni</li>
            <li>Rižota</li>
            <li>Rižota z jurčki</li>
          </ul>
        </div>
        </td>
      </tr>
      <div class="w-100"></div>
      <tr>
        <td class="meni-razdelek">
        <div class="col-sm meni-razdelek">
          <div style="background: url('slike/hrana/jedi_po_narocilu.jpg') top left center no-repeat;">
            Jedi po naročilu
          </div>
          <ul>
            <li>Mešano meso na žaru</li>
            <li>Svinjska zarebrnica na žaru</li>
            <li>Svinjska ribica - medaljoni</li>
            <li>Pleskavica</li>
            <li>Zrezki na žaru,</li>
            <li>Ramstek na žaru</li>
            <li>Ljubljanski zrezek</li>
            <li>Puranov file na žaru</li>
            <li>Piščančji file z na žaru</li>
            <li>Goveji file na žaru</li>
            <li>Telečja rolada</li>
            <li>Telečji zrezki</li>
            <li>Telečja rebrca</li>
            <li>Pečena jagnjetina</li>
            <li>Mladi sir na žaru</li>
          </ul>
        </div>
        </td>
        <td class="meni-razdelek">
        <div class="col-sm meni-razdelek">
          <div style="background: url('slike/hrana/gotove_jedi.jpg') top left center no-repeat;">
            Gotove jedi
          </div>
          <ul>
            <li>Nadevana paprika</li>
            <li>Sarma</li>
            <li>Musaka</li>
            <li>Zelenjavni krožnik</li>
            <li>Goveji golaž</li>
            <li>Svinjska pečenka</li>
            <li>Kuhana govedina</li>
            <li>Paslij z rebrci</li>
            <li>Pečenice (par)</li>
            <li>Kranjske klobase</li>
            <li>Pečeni piščanec</li>
            <li>Vampi po tržaško</li>
          </ul>
        </div>
        </td>
        <td class="meni-razdelek">
        <div class="col-sm meni-razdelek">
          <div style="background: url('slike/hrana/ribe_in_raki.jpg') top left center no-repeat;">
            Ribe in raki
          </div>
          <ul>
            <li>Orada, Brancin na žaru</li>
            <li>Lignji s tatarsko omako</li>
            <li>Lignji nadevani</li>
            <li>Losos, na žaru</li>
            <li>Hobotnica na žaru</li>
            <li>Ribji file na žaru</li>
            <li>Postrv na žaru</li>
            <li>Polenovka po primorsko</li>
          </ul>
        </div>
        </td>
      </tr>
      <div class="w-100"></div>
      <tr>
        <td class="meni-razdelek">
        <div class="col-sm meni-razdelek">
          <div style="background: url('slike/hrana/priloge_in_prikuhe.jpg') top left center no-repeat;">
            Priloge in prikuhe
          </div>
          <ul>
            <li>Dušeni riž</li>
            <li>Korenček na maslu</li>
            <li>Grah na maslu</li>
            <li>Zelje ali ohrovt</li>
            <li>Šampinjoni na žaru</li>
            <li>Špinača na maslu</li>
            <li>Krompir na različne načine</li>
          </ul>
        </div>
        </td>
        <td class="meni-razdelek">
        <div class="col-sm meni-razdelek">
          <div style="background: url('slike/hrana/solate.jpg') top left center no-repeat;">
            Solate
          </div>
          <ul>
            <li>Zelena solata</li>
            <li>Paradižnikova solata</li>
            <li>Radič</li>
            <li>Zeljnata solata</li>
            <li>Mešana solata</li>
            <li>Solata Vrtnica</li>
          </ul>
        </div>
        </td>
        <td class="meni-razdelek">
        <div class="col-sm meni-razdelek">
          <div style="background: url('slike/hrana/sladice.jpg') top left center no-repeat;">
            Sladice
          </div>
          <ul>
            <li>Jabolčni zavitek</li>
            <li>Skutni zavitek</li>
            <li>Sadne pite</li>
            <li>Gibanica</li>
            <li>Torte (razne)</li>
            <li>Gratinirane palačinke</li>
            <li>Tiramisu</li>
            <li>Kremna rezina</li>
            <li>Sadne solate</li>
            <li>Sadna kupa s prelivom</li>
            <li>Ananasov kompot</li>
            <li>Kompot</li>
          </ul>
        </div>
        </td>
      </tr>
    </div>
    </table>
  </div>

</div>

stil.css

102
103
104
105
106

/* MENI */
.meni-razdelek {
  vertical-align: top; 
  width: 320px 100%;
}

6.4 Prilagajanje velikosti zaslona strani z vinsko karto

Pri prilagajanju strani z vinsko karto lahko že prilagojeno obliko glave in noge preprosto prenesemo iz začetne strani, poskrbeti pa moramo še za osrednji del z vsebino, kjer so prikazane kategorije vinske karte in njihove podrobnosti. Vpeljemo nov CSS razred vino-razdelek, prav tako pa zahtevamo, da se vsebina prilagaja srednjim napravam (glej tabelo 6.1), saj uporabimo razred col-md.

vinska-karta.html

51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

<!-- CENTER -->
<div class="srednji-del">

  <div class="vsebina">
    <table>
    <div class="row">
      <tr>
        <td class="vino-razdelek">
        <div class="col-md vino-razdelek">
          <div style="background: url('slike/vina/odprta.jpg') top left center no-repeat;">
            Odprta vina
          </div>
          <ul>
            <li>
              <b>FRIZZANTINO, suho, V. K. Goriška Brda (1 l)</b><br />
              Prijetno sveže in iskrivo biser vino pridelano po charmat metodi, sort Prossecco, Rebula in Chardonnay.
            </li>
            <li>
              <b>MEŠANO BELO, suho, V. K. Goriška Brda (1 l)</b><br />
              Zvrst avtohtone sorte Goriških Brd, Rebule in svetovno znanega Chardonnay.
            </li>
          </ul>
        </div>
        </td>
        <td class="vino-razdelek">
        <div class="col-md vino-razdelek">
          <div style="background: url('slike/vina/kakovostna.jpg') top left center no-repeat;">
            Kakovostna vina
          </div>
          <ul>
            <li>
              <b>VRTOVČAN, suho, Vinska klet Vipava 1894 (1 l)</b><br />
              Mlado vino vipavskih sort Malvazija, Zelen, Sauvignon.
            </li>      
            <li>
              <b>MERLOT, suho, V. K. Goriška Brda (1 l)</b><br />
              Kakovostno vino rubinaste rdeče barve granatnega odtenka.
            </li>
            <li>
              <b>REFOŠK, Vinakoper (1 l)</b><br />
              Robustno vino, s prijetno kislostjo in primerno široki paleti jedi.
            </li>
          </ul>
        </div>
        </td>
      </tr>
      <div class="w-100"></div>
      <tr>
        <td class="vino-razdelek">
        <div class="col-md vino-razdelek">
          <div style="background: url('slike/vina/peneca.jpg') top left center no-repeat;">
            Peneča vina
          </div>
          <ul>
            <li>
              <b>PENINA Quercus,  suho, V. K. Goriška Brda (0,75 l)</b><br />
              Penina pridelana iz zvrsti Rebule in Chardonnay po charmat metodi.
            </li>
          </ul>
        </div>
        </td>
        <td class="vino-razdelek">
        <div class="col-md vino-razdelek">
          <div style="background: url('slike/vina/buteljcna_bela.jpg') top left center no-repeat;">
            Buteljčna bela vina
          </div>
          <ul>
            <li>
              <b>REBULA Quercus, suho,  V.K. Goriška Brda (0,75 l)</b><br />
              Vrhunsko vino prijetnega, zmerno polnega okusa, ki daje značilno svežino.
            </li>
            <li style="margin-top: 10px;">
              <b>CUVÉE BELI Quercus, suho, V.K. Goriška Brda (0,75 l)</b><br />
              Vrhunsko vino polnega okusa, prijetne svežine. Vonj spominja na jabolko, hrušk in citruse. Sorta: Chardonnay, Rbula, Sauvignonasse
            </li>
            <li style="margin-top: 10px;">
              <b>SAUVIGNONASSE Belica, suho, Medana (0,75 l)</b><br />
              Zelenkasto-rumene barve, sadnega okusa z izrazitim okusom mandljev. Sortna sestava je 100% grozdje Sauvignonasse.
            </li>
            <li style="margin-top: 10px;">
              <b>CHARDONNAY Bagueri, suho, V.K. Goriška Brda (0,75 l)</b><br />
              Vrhunsko vino prijetnega, izredno polnega okusa. Spominja na citruse, zrele breskve, melono, maslo, vanilijo in lešnike. Dopolnjen z izraženo aromo po kruhovi skorji.
            </li>
          </ul>          
        </div>
        </td>
      </tr>
      <div class="w-100"></div>
      <tr>
        <td class="vino-razdelek">
        <div class="col-md vino-razdelek">
          <div style="background: url('slike/vina/kakovostna.jpg') top left center no-repeat;">
            Buteljčna rdeča vina
          </div>
          <ul>
            <li>
              <b>REBULA Quercus, suho,  V. K. Goriška Brda (0,75 l)</b><br />
              Vrhunsko vino prijetnega, zmerno polnega okusa, ki daje značilno svežino.
            </li>
            <li>
              <b>CUVÉE BELI Quercus, suho, V.K. Goriška Brda (0,75 l)</b><br />
              Vrhunsko vino polnega okusa, prijetne svežine. Vonj spominja na jabolko, hrušk in citruse. Sorta: Chardonnay, Rbula, Sauvignonasse
            </li>
            <li>
              <b>SAUVIGNONASSE Belica, suho, Medana (0,75 l)</b><br />
              Zelenkasto-rumene barve, sadnega okusa z izrazitim okusom mandljev. Sortna sestava je 100% grozdje Sauvignonasse.
            </li>
            <li>
              <b>CHARDONNAY Bagueri, suho, V. K. Goriška Brda (0,75 l)</b><br />
              Vrhunsko vino prijetnega, izredno polnega okusa. Spominja na citruse, zrele breskve, melono, maslo, vanilijo in lešnike. Dopolnjen z izraženo aromo po kruhovi skorji.
            </li>
          </ul>
        </div>
        </td>
        <td>
        <div class="col-md vino-razdelek">
          &nbsp;
        </div>
        </td>
      </tr>
    </div>
    </table>
  </div>

</div>

stil.css

127
128
129
130
131

/* VINO */
.vino-razdelek {
  vertical-align: top; 
  width: 490px 100%;
}

6.5 Prilagajanje velikosti zaslona strani z dogodki

Pri prilagajanju strani z menijem lahko že prilagojeno obliko glave in noge preprosto prenesemo iz začetne strani, poskrbeti pa moramo še za osrednji del z vsebino, kjer so prikazani dogodki.

dogodki.html

51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<!-- CENTER -->
<div class="srednji-del">

  <div class="vsebina">
    <table>
    <div class="row">
      <tr class="dogodek">
        <td>
        <div class="col">
          <h2>Zaključna poletna zabava</h2>
          <h5>Ob Ljubljanici | Vsak petek v septembru</h5>
          <center>
            <img src="slike/dogodki/melanie.png" class="img-fluid" />
          </center>                  
          <p>
            Vsak petek zvečer od 19. ure dalje lepo vabljeni na koncert mlade pevke Melanie Öesch, ki poje v ansamblu Die Dritten. 
            Ansambel se imenuje po njej in hkrati pomeni, da predstavlja tretjo generacijo glasbenikov v svoji družini. 
            Melanie je bila večkrat nagrajena za najboljše jodlanje in je zelo prepoznana v svoji domači Švici, Nemčiji in Avstriji. Prepoznavnost ji raste in zato ves čas prireja zelo obiskane koncerte po celi Evropi, zato smo zelo veseli, da jo bomo lahko gostili med nami.
          </p>
        </div>
        </td>
      </tr>
      </div>
      <div class="row">
      <tr class="dogodek">
        <div class="col">
        <td>
          <h2>Čarodej Jani</h2>
          <h5>Dvorišče naše restavracije | 1. oktober 2018</h5>
          <center>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/aIQN9rSqrW0?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
          </center>
          <p>
            Ob začetku novega študijskega leta za vse študente organiziramo poseben družaben program s Čarodejem Janijem. Dogodek je primeren še posebej za vse študente, ki 
            se ne želijo udeležiti tradicionalnega brucovanja, saj na dogodku ne bomo stregli alkohola. Na voljo bo le hrana in pijača, ki je priporočena za otroke do 5. 
            leta starosti.
          </p>
        </td>
        </div>
      </tr>
      </div>
      <div class="row">
      <tr class="dogodek">
        <div class="col">
        <td>
          <h2>Premiera filma Mirko i Slavko</h2>
          <h5>Velika soba | 31. oktober 2018</h5>
          <center>
            <img src="slike/dogodki/mirkoslavko.jpg" class="img-fluid" />
          </center>
          <p>
            V spomin na zgodovinske trenutke in osvajanja ozemelj, se bomo s ponovno premiero spomnili junakov Slavka in Mirka,
            ki sta zaslužna za osvoboditev naših predhodnih republik.
          </p>
        </td>
        </div>
      </tr>
      </div>
    </table>
  </div>

</div>

6.6 Prilagajanje velikosti zaslona strani s kontakti

Pri prilagajanju strani z menijem lahko že prilagojeno obliko glave in noge preprosto prenesemo iz začetne strani, poskrbeti pa moramo še za osrednji del z vsebino, kjer so prikazani kontakti.

kontakt.html

51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<!-- CENTER -->
<div class="srednji-del">

  <div class="vsebina">
    <table>
      <tr>
      <div class="row align-items-center">
        <td>
        <div class="col-md-7">
          <img src="slike/lokacija.png" style="width: 450px;" />
        </div>
        </td>
        <td class="levi-odmik velik-test" style="padding-left: 150px; font-size: x-large;">
        <div class="col-md-4 levi-odmik velik-tekst kontakt">
          <p>
              Restavracija Dobrojed <br />
              Slovenska cesta 222 B <br />
              SI-1000 Ljubljana <br /><br />
              tel. 01 / 286 31 45 <br />
              <a href="mailto:info@dobrojed.si" style="color: black;">info@dobrojed.si</a>
          </p>
        </div>
        </td>
      </div>
      </tr>
      <tr>
      <div class="row">
        <td colspan="2" class="velik-test sredina" style="text-align: center; font-size: x-large;">
        <div class="col velik-tekst sredina kontakt">
          <p><b>Odpiralni čas</b></p>
          <p>ponedeljek - petek <br /> 7:00 - 18:00</p>
          <p>sobote, nedelje, prazniki <br /> ZAPRTO</p>
        </div>
        </td>
      </div>
      </tr>
    </table>
    </div>
  </div>

</div>

Delno rešitev spletne strani do te točke je na voljo na spletnem naslovu ali v obliki ZIP datoteke.

  1. angl. modal↩

Obrazec za komentarje

Tip komentarja*
v okviru " "
       
Komentar*
Predlog rešitve*
Ime in priimek
Elektronski naslov