Créer un thème: "Société"
Cette page va vous montrer comment construire un thème Bootstrap à 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 Company</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Company</h1>
<p>We specialize in blablabla</p>
</body>
</html>Ajouter Bootstrap CDN et Ajouter un Jumbotron
Ajouter Bootstrap CDN et un lien vers jQuery et de mettre des éléments HTML dans un .jumbotron :
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme Company</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="jumbotron">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>
</html>Résultat:
Compagnie
Nous nous spécialisons dans blablabla
Ajouter la couleur de fond et le Centre de texte
1. Ajouter une couleur de fond orange au jumbotron.
2. Ajouter le .text-center classe pour centrer le texte à l' intérieur du jumbotron:
Exemple
<style>
.jumbotron {
background-color:
#f4511e;
/* Orange */
color: #ffffff;
}
</style>
<body>
<div class="jumbotron
text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>Résultat:
Compagnie
Nous nous spécialisons dans blablabla
Ajouter un formulaire
Ajouter un formulaire avec un champ de saisie et un bouton:
Exemple
<div class="jumbotron
text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
<form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email
Address">
<button type="button" class="btn btn-danger">Subscribe</button>
</form>
</div>Résultat:
Compagnie
Nous nous spécialisons dans blablabla
Ajouter Containers
Ajouter deux récipients ( .container-fluid ), et d' ajouter une classe personnalisée au deuxième récipient ( .bg-grey - ajoute une couleur de fond gris):
Exemple
<style>
.bg-grey {
background-color: #f6f6f6;
}
</style>
<div class="container-fluid">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button
class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="container-fluid
bg-grey">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..
</div>Résultat:
A propos de page d'entreprise
Lorem ipsum ..
Lorem ipsum ..
Nos valeurs
MISSION: Notre mission lorem ipsum ..
VISION: Notre vision Lorem ipsum ..
Ajouter Rembourrage
Permet de rendre le jumbotron et les conteneurs semblent bonnes en ajoutant un peu de rembourrage:
Exemple
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px
50px;
}
</style>Résultat:
Compagnie
Nous nous spécialisons dans blablabla
A propos de page d'entreprise
Lorem ipsum ..
Lorem ipsum ..
Nos valeurs
MISSION: Notre mission lorem ipsum ..
VISION: Notre vision Lorem ipsum ..
Ajouter une grille
1. Ajouter une icône (ou le logo de l'entreprise) pour chaque conteneur.
2. Séparer l'icône et le "texte sur" en créant deux colonnes ( .col-sm-8 et .col-sm-4 )
3. Ajouter les requêtes des médias pour centrer la colonne "logo" sur les écrans plus petits que 768 pixels de large.
Exemple
<style>
.logo {
font-size: 200px;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
</style>
<div class="container-fluid">
<div
class="row">
<div class="col-sm-8">
<h2>About Company Page</h2>
<h4>Lorem
ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get
in Touch</button>
</div>
<div
class="col-sm-4">
<span
class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon
glyphicon-globe logo"></span>
</div>
<div class="col-sm-8">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
</div>
</div>
</div>Résultat:
A propos de page d'entreprise
Lorem ipsum ..
Lorem ipsum ..
Nos valeurs
MISSION: Notre mission lorem ipsum ..
VISION: Notre vision Lorem ipsum ..
Ajouter des services Container
Ajouter un nouveau conteneur, avec des colonnes 2x3 de largeur égale ( .col-sm-4 ):
Exemple
<div class="container-fluid text-center">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon
glyphicon-off"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon
glyphicon-heart"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon
glyphicon-lock"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon
glyphicon-leaf"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon
glyphicon-certificate"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor
sit amet..</p>
</div>
<div
class="col-sm-4">
<span class="glyphicon
glyphicon-wrench"></span>
<h4>HARD
WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
Résultat:
PRESTATIONS DE SERVICE
Ce que nous offrons
PUISSANCE
Lorem ipsum dolor sit amet..
AMOUR
Lorem ipsum dolor sit amet..
TRAVAIL TERMINÉ
Lorem ipsum dolor sit amet..
VERT
Lorem ipsum dolor sit amet..
AGRÉÉ
Lorem ipsum dolor sit amet..
UN DUR TRAVAIL
Lorem ipsum dolor sit amet..
Styling Icons
Ajouter une classe personnalisée ( .logo-small ) à chaque glyphicon dans le conteneur "Services". Utilisez CSS pour les coiffer:
Exemple
/* Add an orange color to all icons and set the font-size */
.logo-small
{
color: #f4511e;
font-size:
50px;
}
.logo
{
color: #f4511e;
font-size:
200px;
}
Résultat:
A propos de page d'entreprise
Lorem ipsum ..
Lorem ipsum ..
Nos valeurs
MISSION: Notre mission lorem ipsum ..
VISION: Notre vision Lorem ipsum ..
PRESTATIONS DE SERVICE
Ce que nous offrons
PUISSANCE
Lorem ipsum dolor sit amet..
AMOUR
Lorem ipsum dolor sit amet..
TRAVAIL TERMINÉ
Lorem ipsum dolor sit amet..
VERT
Lorem ipsum dolor sit amet..
AGRÉÉ
Lorem ipsum dolor sit amet..
UN DUR TRAVAIL
Lorem ipsum dolor sit amet..
Ajouter portefeuille Container
Créer un nouveau conteneur pleine largeur, avec trois colonnes de largeur égale ( .col-sm-4 ):
A l'intérieur de chaque colonne, ajouter une image.
Ensuite, utilisez le .img-thumbnail classe pour façonner l'image d'une vignette.
Normalement, vous devez ajouter la .img-thumbnail classe directement à l'élément <img>. Dans cet exemple, nous avons placé un conteneur de vignettes autour de l'image, de sorte que nous pouvons spécifier un texte d'image aussi bien.
Exemple
<div class="container-fluid text-center bg-grey">
<h2>Portfolio</h2>
<h4>What we have created</h4>
<div
class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img
src="paris.jpg" alt="Paris">
<p><strong>Paris</strong></p>
<p>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img
src="newyork.jpg" alt="New York">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div
class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div>
Résultat:
Portefeuille
Ce que nous avons créé
Paris
Oui, nous avons construit Paris
New York
Nous avons construit de New York
San Francisco
Oui, San Fran est la nôtre
Styling images miniatures
Utilisez CSS pour le style des images. Dans notre exemple, nous avons essayé de les faire ressembler à des cartes, en supprimant leur frontière, et définir une largeur de 100% sur chaque image.
Exemple
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
Résultat:
Portefeuille
Ce que nous avons créé
Paris
Oui, nous avons construit Paris
New York
Nous avons construit de New York
San Francisco
Oui, San Fran est la nôtre
Ajouter un carrousel
Ajouter un carrousel:
Exemple
<h2>What our customers say</h2>
<div id="myCarousel" class="carousel
slide text-center" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel"
data-slide-to="0" class="active"></li>
<li
data-target="#myCarousel" data-slide-to="1"></li>
<li
data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4>"This company is the
best. I am so happy with the result!"<br><span style="font-style:normal;">Michael
Roe, Vice President, Comment Box</span></h4>
</div>
<div class="item">
<h4>"One word...
WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
</div>
<div class="item">
<h4>"Could I... BE any more happy with this company?"<br><span style="font-style:normal;">Chandler
Bing, Actor, FriendsAlot</span></h4>
</div>
</div>
<!-- Left and right controls -->
<a
class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control" href="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Résultat:
Que disent nos clients
Essayez - le vous - même »Style de The Carousel
Utilisez CSS pour le style du carrousel:
Exemple
.carousel-control.right, .carousel-control.left {
background-image: none;
color:
#f4511e;
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item
span {
font-style: normal;
}Résultat:
Que disent nos clients
Essayez - le vous - même »Ajouter Prix Container
Créer un conteneur de largeur, avec trois colonnes de largeur égale ( .col-sm-4 ):
A l'intérieur de chaque colonne, ajouter un panneau:
Exemple
<div class="container-fluid">
<div class="text-center">
<h2>Pricing</h2>
<h4>Choose a payment plan that works
for you</h4>
</div>
<div class="row">
<div class="col-sm-4">
<div
class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div
class="panel-footer">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Pro</h1>
</div>
<div class="panel-body">
<p><strong>50</strong> Lorem</p>
<p><strong>25</strong> Ipsum</p>
<p><strong>10</strong> Dolor</p>
<p><strong>5</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div
class="panel-footer">
<h3>$29</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Premium</h1>
</div>
<div class="panel-body">
<p><strong>100</strong> Lorem</p>
<p><strong>50</strong> Ipsum</p>
<p><strong>25</strong> Dolor</p>
<p><strong>10</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div
class="panel-footer">
<h3>$49</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
Résultat:
Tarification
Choisissez un plan de paiement qui fonctionne pour vous
De base
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Amet sans fin
Pro
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Amet sans fin
Prime
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Amet sans fin
Panneaux coiffants
Utilisez CSS pour le style des panneaux:
Exemple
.panel {
border: 1px solid #f4511e;
border-radius:0;
transition: box-shadow
0.5s;
}
.panel:hover {
box-shadow: 5px 0px
40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #f4511e;
background-color: #fff
!important;
color: #f4511e;
}
.panel-heading
{
color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius:
0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color:
#fff !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin:
15px 0;
background-color: #f4511e;
color: #fff;
}
Résultat:
Tarification
Choisissez un plan de paiement qui fonctionne pour vous
De base
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Amet sans fin
Pro
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Amet sans fin
Prime
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Amet sans fin
Ajouter un contact Container
Ajouter un nouveau conteneur avec des informations de contact:
Exemple
<div class="container-fluid bg-grey">
<h2
class="text-center">CONTACT</h2>
<div class="row">
<div
class="col-sm-5">
<p>Contact us and we'll get back to you
within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>
Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>
[email protected]</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-6
form-group">
<input class="form-control" id="name" name="name"
placeholder="Name" type="text" required>
</div>
<div class="col-sm-6
form-group">
<input class="form-control" id="email" name="email"
placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments"
placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right"
type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>Résultat:
CONTACT
Contactez-nous et nous reviendrons vers vous dans les 24 heures.
Chicago, États-Unis
+00 1515151515
Ajouter Google Maps
Ajouter Google Maps (Pour plus d' informations, lisez notre Google Maps Tutoria l):
Exemple
<!-- Set height and width with CSS -->
<div id="googleMap" style="height:400px;width:100%;"></div>
<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("googleMap"),mapProp);
var
marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window,
'load', initialize);
</script>Résultat:
Essayez - le vous - même »Ajouter un Navbar
Ajouter un navbar en haut de la page qui s'effondre sur les petits écrans:
Exemple
<nav class="navbar navbar-default
navbar-fixed-top">
<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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul
class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>Résultat:
Essayez - le vous - même » | Astuce: droit aligner les boutons de navigation avec le navbar-right classe. |
|---|
Style Le Navbar
Utilisez CSS pour personnaliser la barre de navigation:
Exemple
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing:
4px;
border-radius: 0;
}
.navbar li a, .navbar
.navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav
li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle
{
border-color: transparent;
color: #fff !important;
}Résultat:
Essayez - le vous - même »Ajouter Scrollspy
Ajouter scrollspy mettre à jour automatiquement les liens de la barre de navigation lors du défilement:
Exemple
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div id="about" class="container-fluid">
<div id="services"
class="container-fluid">
<div id="portfolio" class="container-fluid">
<div id="pricing" class="container-fluid">
<div id="contact"
class="container-fluid"> Essayez - le vous - même » Ajouter un pied de page
Ajouter une icône "Flèche" pour le pied de page, qui prendra l'utilisateur en haut de la page lorsque vous cliquez sur:
Exemple
<style>
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color:
#f4511e;
}
</style>
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon
glyphicon-chevron-up"></span>
</a>
<p>Bootstrap Theme
Made By <a href="http://www.w3ii.com"
title="Visit w3ii">www.w3ii.com</a></p>
</footer>Résultat:
Essayez - le vous - même »Ajout lisse Scrolling
Utilisez jQuery pour ajouter un défilement fluide (en cliquant sur les liens dans la barre de navigation):
Exemple
<script>
$(document).ready(function(){
// Add
smooth scrolling to all links in navbar + footer link
$(".navbar
a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor
click behavior
event.preventDefault();
// Store hash
var hash =
this.hash;
// Using jQuery's animate() method to add smooth page
scroll
// The optional number (900) specifies the number of milliseconds
it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash
(#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
})
</script> Essayez - le vous - même » Touche finale
Personnalisez votre thème en ajoutant une police que vous aimez. Nous avons utilisé "Montserrat" et "Lato" 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" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Ensuite, vous pouvez les utiliser dans la page:
Exemple
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.jumbotron {
font-family: Montserrat,
sans-serif;
}
.navbar {
font-family:
Montserrat, sans-serif;
}Nous avons également ajouté un peu de style supplémentaire à certains éléments:
Exemple
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
} Essayez - le vous - même » Slide In Elements
Nous avons également créé un effet d'animation qui va glisser dans les éléments sur parchemin. Si vous voulez l'utiliser, il suffit d' ajouter la .slideanim classe à l'élément que vous voulez glisser dans, et ajouter ce qui suit à votre CSS et jQuery ( se sentir libre de modifier la durée, l' opacité, où commencer, quand à glisser dans, etc):
CSS Exemple
.slideanim {visibility:hidden;}
.slide {
/* The
name of the animation */
animation-name: slide;
-webkit-animation-name: slide;
/* The duration of the
animation */
animation-duration: 1s;
-webkit-animation-duration:
1s;
/* Make the element visible */
visibility: visible;
}
/* Go from 0% to 100% opacity (see-through) and specify the percentage
from when to slide in the element along the Y-axis */
@keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-webkit-keyframes
slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}jQuery Exemple
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop =
$(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
}); Essayez - le vous - même »