Création d'une mise en page fixe avec Bootstrap
Avec Bootstrap 3, vous pouvez toujours créer des mises en
page de pages Web basées sur un nombre fixe de pixels, mais cette fois, elle
est sensible dès le début, contrairement à la version 2.x précédente, où vous
devez inclure la feuille de style réactive pour la rendre sensible aux autres
dispositifs.
Le processus de création de la mise en forme fixe mais
réactive commence par la classe .container. Ensuite, créez des
lignes avec la classe .row pour
envelopper les groupes horizontaux de colonnes. Les rangées doivent être
placées dans un conteneur pour un alignement et un rembourrage appropriés.
D'autres colonnes peuvent être créées à l'intérieur des
lignes en utilisant les classes de grille prédéfinies comme .col-xs- *,
.col-sm- *, .col-md- * et .col-lg- * où * représente le numéro de la grille et
doit être de 1 à 12. En savoir plus sur le système de grille Bootstrap.
Le code suivant crée une disposition à largeur fixe de 750px
pixels de large sur de petits périphériques comme une tablette ayant une
largeur d'écran ≥768px, alors qu'une largeur de 970px sur des périphériques
moyens comme un ordinateur de bureau et un ordinateur portable ayant une
largeur d'écran ≥992px et 1170px large sur des périphériques volumineux,
Largeur d'écran ≥1200px. Cependant, la largeur de la mise en page sera
automatiquement calculée pour les périphériques qui ont une largeur d'écran
<768px comme les téléphones cellulaires.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta
http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Création
d'une mise en page fixe avec Bootstrap</title>
<link rel="stylesheet"
type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet"
type="text/css" href="css/bootstrap-theme.min.css">
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript"
src="js/bootstrap.min.js"></script>
</head>
<body>
<nav
id="myNavbar" class="navbar navbar-default navbar-inverse
navbar-fixed-top" role="navigation">
<!--
Brand and toggle get grouped for better mobile display -->
<div
class="container">
<div
class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span
class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tuto
bootstrap 3</a>
</div>
<!--
Collect the nav links, forms, and other content for toggling -->
<div
class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"
target="_blank">Acceuil</a></li>
<li><a
href="#" target="_blank">A propos de
nous</a></li>
<li><a href="#"
target="_blank">Contactez nous</a></li>
</ul>
</div>
</div>
</nav>
<div
class="container">
<div
class="jumbotron">
<h1>Apprendre
à créer des sites Web</h1>
<p>Dans le monde
d'aujourd'hui Internet est la façon la plus populaire
de
se connecter avec les gens et à vous
d'apprendre l'essentiel des
technologies
de développement web avec l'exemple pratique réelle de vie,
de sorte que vous pouvez créer votre
propre site Web pour se connecter avec les gens
du monde entier</p>
<p><a href="#"
target="_blank" class="btn btn-success btn-lg">Commencer
aujourd'hui</a></p>
</div>
<div
class="row">
<div
class="col-xs-4">
<h2>HTML</h2>
<p>HTML est un langage de
balisage qui est utilisé pour créer des pages Web.
La
section du didacticiel HTML vous aidera à comprendre les bases du HTML,
de
sorte que vous puissiez créer vos propres pages Web ou site Web.</p>
<p><a
href="#" target="_blank" class="btn
btn-success">Lire la suite »</a></p>
</div>
<div class="col-xs-4">
<h2>CSS</h2>
<p>CSS est utilisé pour
décrire la présentation des pages Web.
La
section du didacticiel CSS vous aidera à apprendre l'essentiel de CSS,
afin
que vous puissiez bien contrôler le style et la mise en page de votre
document
HTML.</p>
<p><a
href="#" target="_blank" class="btn
btn-success">Lire la suite »</a></p>
</div>
<div
class="col-xs-4">
<h2>Bootstrap</h2>
<p>Bootstrap est un
puissant cadre frontal pour un dèveloppement Web plus
rapide
et plus facile. La section du didacticiel Bootstrap vous aidera à
apprendre
les techniques de Bootstrap afin que vous puissiez crèer rapidement
votre
propre site Web.</p>
<p><a
href="#" target="_blank" class="btn
btn-success">Lire la suite »</a></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<footer>
<p>© Copyright 2013 Tuto Bootstrap</p>
</footer>
</div>
</div>
</div>
</body>
</html>
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Aucun commentaire