Bootstrap4 Créer une page Web
Ensuite, nous utiliserons Bootstrap4 pour créer une page web responsive simple.
Avant d'apprendre, nous pouvons d'abord regarder l'effet :https://www.example.com/try/demo_source/bootstrap3-makewebsite.htm
Code HTML
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>Ma première page Bootstrap 4</h1>
<p>Redimensionnez la fenêtre du navigateur pour voir l'effet !</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navigation</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<h2>À propos de moi</h2>
<h5>Ma photo :</h5>
<div class="fakeimg">Insérer une image ici</div>
<p>Introduction à propos de moi..</p>
<h3>Quelques liens</h3>
<p>Texte descriptif</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">État actif</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Désactivé</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>Titre</h2>
<h5>Sous-titre</h5>
<div class="fakeimg">Image</div>
<p>Un peu de texte..</p>
<p>Tutoriel d'exemple, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!! Tutoriel d'exemple, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!! Tutoriel d'exemple, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!!</p>
<br>
<h2>Titre</h2>
<h5>Sous-titre</h5>
<div class="fakeimg">Image</div>
<p>Un peu de texte..</p>
<p>Tutoriel d'exemple, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!! Tutoriel d'exemple, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!! Tutoriel d'exemple, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!!</p>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Contenu du pied de page</p>
</div>
Essayez-le vous-même »