Thème Bootstrap "Simplement moi"
Créer un thème : "Simplement moi"
Cette page vous montrera comment créer un thème Bootstrap à partir de zéro.
Nous allons commencer avec une simple page HTML, puis ajouter de plus en plus de composants, jusqu'à ce que nous ayons un site Web entièrement fonctionnel, personnel et réactif.
Le résultat ressemblera à ceci, et vous êtes libre de le modifier, de le sauvegarder, de le partager, de l'utiliser ou d'en faire ce que vous voulez :
Page de démarrage HTML
Nous allons commencer par la page HTML suivante :
<!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">
</head>
<body>
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</body>
</html>
Ajouter Bootstrap CDN et mettre les éléments dans le conteneur
Ajoutez Bootstrap CDN et un lien vers jQuery et placez les éléments HTML dans un conteneur :
Exemple
<!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>
Résultat:
Qui suis je?
je suis un aventurier
Ajouter une couleur d'arrière-plan et centrer le texte
1. Ajoutez une classe personnalisée (.bg-1) au conteneur pour ajouter une couleur d'arrière-plan.
2. Ajoutez la .text-centerclasse pour centrer le texte à l'intérieur du conteneur :
Exemple
<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>
Résultat:
Qui suis je?
je suis un aventurier
Image de cercle
Formez l'image en cercle avec la .img-circleclasse :
Exemple
<img src="bird.jpg" class="img-circle" alt="Bird">
Résultat:
Qui suis je?
je suis un aventurier
Plus de contenu
Ajoutez plus de contenu et placez-le dans de nouveaux conteneurs :
Exemple
<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>
Résultat:
Qui suis je?
je suis un aventurier
Que suis je?
La douleur elle-même est l'amour de la douleur, les principaux problèmes écologiques, mais je donne ce genre de temps pour tomber, de sorte que de grandes douleurs et douleurs. Afin que la plupart du temps, chacun d'entre nous vienne à l'exercice de n'importe quel type d'emploi sauf pour en profiter des objectifs.
Où me trouver ?
La douleur elle-même est l'amour de la douleur, les principaux problèmes écologiques, mais je donne ce genre de temps pour tomber, de sorte que de grandes douleurs et douleurs. Afin que la plupart du temps, chacun d'entre nous vienne à l'exercice de n'importe quel type d'emploi sauf pour en profiter des objectifs.
Ajouter un rembourrage
Faisons en sorte que les conteneurs aient une belle apparence en ajoutant du rembourrage :
Exemple
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
Résultat:
Qui suis je?
je suis un aventurier
Que suis je?
La douleur elle-même est l'amour de la douleur, les principaux problèmes écologiques, mais je donne ce genre de temps pour tomber, de sorte que de grandes douleurs et douleurs. Afin que la plupart du temps, chacun d'entre nous vienne à l'exercice de n'importe quel type d'emploi sauf pour en profiter des objectifs.
Où me trouver ?
La douleur elle-même est l'amour de la douleur, les principaux problèmes écologiques, mais je donne ce genre de temps pour tomber, de sorte que de grandes douleurs et douleurs. Afin que la plupart du temps, chacun d'entre nous vienne à l'exercice de n'importe quel type d'emploi sauf pour en profiter des objectifs.
Ajouter un bouton
Ajoutez un bouton au conteneur central :
Exemple
<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>
Résultat:
Que suis je?
La douleur elle-même est l'amour de la douleur, les principaux problèmes écologiques, mais je donne ce genre de temps pour tomber, de sorte que de grandes douleurs et douleurs. Afin que la plupart du temps, chacun d'entre nous vienne à l'exercice de n'importe quel type d'emploi sauf pour en profiter des objectifs.
ChercherAjouter une icône
Ajoutez une icône de recherche sur le bouton "Rechercher":
Exemple
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
Résultat:
Modifier le troisième conteneur (ajouter une grille)
Ajoutez trois colonnes de largeur égale à l'intérieur du troisième conteneur ( .col-sm-4) :
Exemple
<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>
Résultat:
Où me trouver ?
La douleur elle-même est importante, mais la douleur est renforcée par le processus d'adipiscing, mais je lui donne le temps de la réduire afin que je fasse du bon travail et de la douleur.
La douleur elle-même est importante, mais la douleur est renforcée par le processus d'adipiscing, mais je lui donne le temps de la réduire afin que je fasse du bon travail et de la douleur.
La douleur elle-même est importante, mais la douleur est renforcée par le processus d'adipiscing, mais je lui donne le temps de la réduire afin que je fasse du bon travail et de la douleur.
Rendre les images réactives
Ajoutez la .img-responsiveclasse à toutes les images.
Ajouter display:inlineà la première image pour la forcer à être centrée (la .img-responsiveclasse ajoute display:block
à l'image, ce qui la fait sauter à gauche de l'écran).
Si vous souhaitez que l'image s'étende sur toute la largeur de l'écran lorsqu'elle commence à s'empiler, ajoutez width:100%à l'image.
Lors de l'ouverture de l'exemple, n'oubliez pas de redimensionner l'écran pour voir l'effet responsive :
Exemple
<!-- The circular bird -->
<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird">
<!-- The birds in our grid: -->
<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">
Ajouter une barre de navigation
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
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p>
</footer>
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;}