Pour démarrer une page bootstrap, il nous faut un squelette de base qui comprend les liens et les scriptes.
Le lien vers le site Bootstrap ici
Nous pouvons également placer un lien pour les icônes.
Un lien pour les icônes ici
Puis un lien vers notre page de styles CSS.
Page de départ, avec la base des blocs :
Hello, world!
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
Le code :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--lien icônes-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/styles.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container py-5 ">
<div class="row section01">
<div class="colonne col-sm-12 col-md-6 col-lg-3 border border-secondary bg-primary p-2 text-center">
One of three columns
</div>
<div class="colonne col-sm-12 col-md-6 col-lg-3 border border-secondary bg-primary p-2 text-center">
One of three columns
</div>
<div class="colonne col-sm-12 col-md-6 col-lg-3 border border-secondary bg-primary p-2 text-center">
One of three columns
</div>
<div class="colonne col-sm-12 col-md-6 col-lg-3 border border-secondary bg-primary p-2 text-center">
One of three columns
</div>
</div>
<div class="row py-5 px-5 section02">
<div class="col-sm border border-secondary p-2 text-center">
One of three columns
</div>
<div class="col-sm border border-secondary p-2 text-center">
One of three columns
</div>
<div class="col-sm border border-secondary p-2 text-center">
One of three columns
</div>
<div class="col-sm border border-secondary p-2 text-center">
One of three columns
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Barre de navigation :
Noter que pour qu’elle soit fixe en haut de page, ajouter la class= »fixed-top » à <nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Blog
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
<a class="dropdown-item" href="blog-post.html">Blog Post</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other Pages
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="full-width.html">Full Width Page</a>
<a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
<a class="dropdown-item" href="faq.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
<a class="dropdown-item" href="pricing.html">Pricing Table</a>
</div>
</li>
</ul>
</div>
</div>
</nav>Breadcrumb (fil d’Ariane) :
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Home</a>
</li>
<li class="breadcrumb-item active">Contact</li>
</ol>Card (bloc avec entête, body et footer) :
Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.
Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.
Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.
<div class="row">
<div class="col-lg-4 mb-4">
<div class="card h-100 ">
<h4 class="card-header">Card Title</h4>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header">Card Title</h4>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header">Card Title</h4>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>Map et adresse (iframe) :
Contact Details
3481 Melrose Place
Beverly Hills, CA 90210
P: (123) 456-7890
H: Monday – Friday: 9:00 AM to 5:00 PM
<div class="row">
<!-- Map Column -->
<div class="col-lg-8 mb-4">
<!-- Embedded Google Map -->
<iframe width="100%" height="400px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?hl=en&ie=UTF8&ll=37.0625,-95.677068&spn=56.506174,79.013672&t=m&z=4&output=embed"></iframe>
</div>
<!-- Contact Details Column -->
<div class="col-lg-4 mb-4">
<h3>Contact Details</h3>
<p>
3481 Melrose Place
<br>Beverly Hills, CA 90210
<br>
</p>
<p>
<abbr title="Phone">P</abbr>: (123) 456-7890
</p>
<p>
<abbr title="Email">E</abbr>:
<a href="mailto:name@example.com">name@example.com
</a>
</p>
<p>
<abbr title="Hours">H</abbr>: Monday - Friday: 9:00 AM to 5:00 PM
</p>
</div>
</div>Un formulaire :
<div class="container py-5 ">
<form method="post" action="cible.php" class="px-5 col-md-12 col-lg-9">
<div class="row champs">
<div class="col">
<input type="text" class="form-control" placeholder="Prénom">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="nom">
</div>
</div>
<div class="form-group champs">
<label for="exampleInputEmail1">Adresse mail</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Mail">
<small id="emailHelp" class="form-text text-muted">Nous ne partagerons jamais votre email avec qui que ce soit.</small>
</div>
<div class="form-group champs">
<label for="exampleFormControlTextarea1">Formulez votre demande</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-check champs">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Cocher si vous êtes d'accord.
</label>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
</div>