Créer un thème: "Simply Me"
Cette page va vous montrer comment construire un Bootstrap thème à partir de zéro.
Nous allons commencer par une simple page HTML, puis ajoutez plus en plus de composants, jusqu'à ce que nous avons un site Web entièrement fonctionnel, personnel et réactif.
Le résultat ressemblera à ceci, et vous êtes libre de modifier, sauvegarder, partager, utiliser ou faire ce que vous voulez avec elle:
HTML Start Page
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 Put Elements dans Container
Ajouter Bootstrap CDN et un lien vers jQuery et de mettre des é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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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 la couleur de fond et le Centre de texte
1. Ajouter une classe personnalisée (.bg-1) au récipient pour ajouter une couleur d'arrière-plan.
2. Ajouter le .text-center de classe pour centrer le texte à l' intérieur du conteneur:
Exemple
<style>
.bg-1 {
background-color: #1abc9c;
/* Green */
color: #ffffff;
}
</style>
<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
Cercle image
Façonner l'image à un cercle avec le .img-circle classe:
Exemple
<img src="bird.jpg"
class="img-circle" alt="Bird">
Résultat:
Qui suis je?
Je suis un aventurier
Plus de contenu
Ajouter plus de contenu et le mettre dans de nouveaux conteneurs:
Exemple
<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>
<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?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Où trouver de moi?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ajouter Rembourrage
Permet de rendre les récipients bien paraître en ajoutant un peu de rembourrage:
Exemple
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>Résultat:
Qui suis je?
Je suis un aventurier
Que suis je?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Où trouver de moi?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ajouter un bouton
Ajouter un bouton au conteneur mi:
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?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
ChercherAjouter une icône
Ajouter une icône de Recherche sur le bouton "Recherche":
Exemple
<a href="#" class="btn btn-default btn-lg">
<span
class="glyphicon glyphicon-search"></span> Search
</a>
Résultat:
Essayez - le vous - même »Modifier La troisième Container (Ajouter Grid)
Ajouter trois colonnes de largeur égale à l' intérieur du troisième récipient ( .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ù trouver de moi?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua.
Rendre les images Responsive
Ajoutez le .img-responsive classe à toutes les images.
Ajouter display:inline à la première image pour le forcer à être centré (le .img-responsive classe ajoute display:block à l'image, ce qui en fait sauter à la gauche de l'écran).
Si vous voulez que l'image pour couvrir la totalité de la largeur de l'écran quand il commence à empiler, ajouter width:100% à l'image.
Lors de l'ouverture de l'exemple, rappelez-vous de redimensionner l'écran pour voir l'effet sensible:
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"> Essayez - le vous - même » Ajouter un Navbar
Ajouter une barre de navigation standard en haut de la page avec et de le rendre pliable sur les petits écrans:
Exemple
<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>Résultat:
Essayez - le vous - même »Style Le Navbar
Utilisez CSS pour personnaliser la barre de navigation:
Exemple
.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;
}Résultat:
Essayez - le vous - même »Ajouter un pied de page
Ajouter un pied de page et utiliser les CSS pour dénommer:
Exemple
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4
text-center">
<p> Bootstrap Theme Made By <a href="http://www.w3ii.com">www.w3ii.com</a></p>
</footer>Résultat:
Essayez - le vous - même »Touche finale
Personnalisez votre thème en ajoutant une police que vous aimez. Nous avons utilisé "Montserrat" de la bibliothèque de polices de Google.
Lien vers la police dans le <head> section:
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Ensuite, vous pouvez l'utiliser dans la page:
Exemple
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;} Nous avons également créé un "helper" classe de marge pour ajouter un espace supplémentaire où nous pensons qu'il est nécessaire; habituellement après chaque <h3> et <img> élément.