Bootstrap-thema "Simply Me"

Maak een thema: "Simply Me"

Deze pagina laat je zien hoe je een Bootstrap-thema helemaal opnieuw kunt bouwen.

We beginnen met een simpele HTML-pagina, en voegen dan steeds meer componenten toe, totdat we een volledig functionele, persoonlijke en responsive website hebben.

Het resultaat ziet er als volgt uit en je bent vrij om het te wijzigen, op te slaan, te delen, te gebruiken of ermee te doen wat je wilt:

Volledige pagina demo

HTML-startpagina

We beginnen met de volgende HTML-pagina:

Bootstrap CDN toevoegen en elementen in container plaatsen

Voeg Bootstrap CDN en een link naar jQuery toe en plaats HTML-elementen in een container:

Voorbeeld

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>

</body>
</html>

Resultaat:

Wie ben ik?

ik ben een avonturier

Achtergrondkleur toevoegen en tekst centreren

1. Voeg een aangepaste klasse (.bg-1) toe aan de container om een achtergrondkleur toe te voegen.

2. Voeg de .text-centerklasse toe om de tekst in de container te centreren:

Voorbeeld

<head>
<style>
.bg-1 {
    background-color: #1abc9c; /* Green */
    color: #ffffff;
  }
</style>
</head>

<body>
  <div class="container-fluid bg-1 text-center">
    <h3>Who Am I?</h3>
    <img src="bird.jpg" alt="Bird">
    <h3>I'm an adventurer</h3>
</div>
</body>

Resultaat:

Wie ben ik?

ik ben een avonturier

Cirkel Afbeelding

Vorm de afbeelding tot een cirkel met de .img-circleklas:

Voorbeeld

Resultaat:

Wie ben ik?

ik ben een avonturier

Meer inhoud

Voeg meer inhoud toe en plaats deze in nieuwe containers:

Voorbeeld

<head>
<style>
.bg-1 {
    background-color: #1abc9c; /* Green */
    color: #ffffff;
}
.bg-2 {
    background-color: #474e5d; /* Dark Blue */
    color: #ffffff;
}
.bg-3 {
    background-color: #ffffff; /* White */
    color: #555555;
}
</style>
</head>

<body>

<div class="container-fluid bg-1 text-center">
  <h3>Who Am I?</h3>
  <img src="bird.jpg" class="img-circle" alt="Bird">
  <h3>I'm an adventurer</h3>
</div>

<div class="container-fluid bg-2 text-center">
  <h3>What Am I?</h3>
  <p>Lorem ipsum..</p>
</div>

<div class="container-fluid bg-3 text-center">
  <h3>Where To Find Me?</h3>
  <p>Lorem ipsum..</p>
</div>

</body>

Resultaat:

Wie ben ik?

ik ben een avonturier

Wat ben ik?

De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn. Om tot een minimum te komen, wie van ons zou een baan moeten uitoefenen, behalve om te profiteren van de gevolgen ervan.

Waar kunt u mij vinden?

Opvulling toevoegen

Laten we de containers er goed uit laten zien door wat opvulling toe te voegen:

Voorbeeld

Resultaat:

Wie ben ik?

ik ben een avonturier

Wat ben ik?

Waar kunt u mij vinden?

Een knop toevoegen

Voeg een knop toe aan de middelste container:

Voorbeeld

<div class="container-fluid bg-2 text-center">
  <h3>What Am I?</h3>
  <p>Lorem ipsum..</p>
  <a href="#" class="btn btn-default btn-lg">Search</a>
</div>

Resultaat:

Wat ben ik?

Zoekopdracht

Een pictogram toevoegen

Voeg een zoekpictogram toe aan de knop "Zoeken":

Voorbeeld

<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>

Resultaat:

Zoekopdracht

De derde container wijzigen (raster toevoegen)

Voeg drie kolommen van gelijke breedte toe in de derde container ( .col-sm-4):

Voorbeeld

<div class="container-fluid bg-3 text-center">
  <h3>Where To Find Me?</h3>
  <div class="row">
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds1.jpg" alt="Image">
    </div>
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds2.jpg" alt="Image">
    </div>
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds3.jpg" alt="Image">
    </div>
</div>
</div>

Resultaat:

Waar kunt u mij vinden?

De pijn zelf is belangrijk, maar de pijn wordt versterkt door het proces van adipiscing, maar ik geef het de tijd om het te verminderen, zodat ik geweldig werk en pijn kan doen.

De pijn zelf is belangrijk, maar de pijn wordt versterkt door het proces van adipiscing, maar ik geef het de tijd om het te verminderen, zodat ik geweldig werk en pijn kan doen.

Maak de afbeeldingen responsief

Voeg de .img-responsiveklas toe aan alle afbeeldingen.

Voeg toe display:inlineaan de eerste afbeelding om deze te centreren (de .img-responsiveklasse voegt toe display:block aan de afbeelding, waardoor deze naar de linkerkant van het scherm springt).

Als u wilt dat de afbeelding de volledige breedte van het scherm beslaat wanneer deze begint te stapelen, voegt u deze toe width:100%aan de afbeelding.

Denk er bij het openen van het voorbeeld aan het scherm te verkleinen om het responsieve effect te zien:

Voorbeeld

<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird">


<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds2.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds3.jpg" class="img-responsive" style="width:100%" alt="Image">

Een navigatiebalk toevoegen

Add a standard navigation bar at the top of the page with and make it collapsible on smaller screens:

Example

<nav class="navbar navbar-default">
<div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Me</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">WHO</a></li>
        <li><a href="#">WHAT</a></li>
        <li><a href="#">WHERE</a></li>
      </ul>
    </div>
</div>
</nav>

Result:

Style The Navbar

Use CSS to customize the navigation bar:

Example

.navbar {
  padding-top: 15px;
  padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
  font-size: 12px;
letter-spacing: 5px;
}

.navbar-nav li a:hover {
  color: #1abc9c !important;
}

Result:

Add a Footer

Add a footer and use CSS to style it:

Example

Result:

Final Touch

Personalize your Theme by adding a font that you like. We have used "Montserrat" from Google's Font Library.

Link to the font in the <head> section:

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

Then you can use it in the page:

Example

body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}

p {font-size: 16px;}

We have also created a "helper" margin class to add extra space where we think it's needed; usually after each <h3> and <img> element.

Example

.margin {margin-bottom: 45px;}

Complete "Simply Me" Theme

Full Page Demo

❮ Previous Next ❯

Bootstrap 3 zelfstudie

Bootstrap- rasters