Bootstrap Créer une page Web
Ensuite, créons une page web responsive simple avec Bootstrap 3.
Avant d'apprendre, nous pouvons jeter un œil à 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</h1>
<p>Redimensionnez la fenêtre du navigateur pour voir l'effet !</p>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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="#">Nom du site</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Accueil</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>À propos de moi</h2>
<h5>Mes photos :</h5>
<div class="fakeimg">Insérer une image ici</div>
<p>Introduction à propos de moi..</p>
<h3>Liens</h3>
<p>Texte de description.</p>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
<hr class="hidden-sm hidden-md hidden-lg">
</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>Exemple, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves!!! Exemple, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves!!! 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>Exemple, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves!!! Exemple, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves!!! 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 »