Vorige
Volgende

Bootstrap een header maken

Elke webpagina bezit wel een hoofding, header, logo of hoe je het ook wilt noemen. Normaal is dat de bovenste balk van je website.

Deze van de website

Hoe gemaakt?

Dit logo is een afbeelding, samengesteld uit wat andere afbeeldingen en samengevoegd met de Gimp of uiteraard jouw afbeelding programma.
De code ziet er als volgt uit.

De code voor Bootstrap V 3.3.7

<div id="home" class="header">
   <div class="container">
      <div class="header-nav">
        <p><img class="img-responsive" src="afbeelding/logo.jpg" width="1580" height="300"></p>

          <nav class="navbar navbar-default">
              Hier komt nog code voor het menu
          </nav>

      </div>
   </div>
</div>

De code voor Bootstrap V 4.0.0 beta 2

<div id="home" class="header">
   <div class="container">
      <div class="header-nav">
        <p><img class="img-fluid" src="afbeelding/logo.jpg" width="1580" height="300"></p>

          <nav class="navbar navbar-default">
              Hier komt nog code voor het menu
          </nav>

      </div>
   </div>
</div>


Op de 4de regel zie je bij V 3.3.7 het volgende staan.
class="img-responsive"
In V 4.0.0 wordt dit
class="img-fluid"
die responsive of fluid zorgt ervoor dat de afbeelding de beschikbare ruimte gebruikt, niet meer of niet minder.

Vorige
Volgende