Tutoriel de base Bootstrap

Plugins Bootstrap

Exemple de système de grille Bootstrap : téléphone, tablette, ordinateur de bureau Exemple de système de grille Bootstrap : alignement horizontal empilé

Exemple de système de grille Bootstrap : appareils de taille moyenne et grande

dans Exemple : horizontal empilé Dans cet article, nous avons déjà vu le système de grille de base. Ici, nous utilisons 2 div, et les centrer en fonction de la largeur de la fenêtre de visualisation 50%/50% de la séparation :

<div>....</div>
<div>....</div>

Mais, sur les appareils de grande taille, vous finirez par 33%/66%。Ainsi, ce que nous devons faire est de préparer à modifier la largeur des colonnes aux points de rupture :

<div>....</div>
<div>....</div>

Maintenant, Bootstrap recherche ceux qui ont md de la classe, et utilisez-les. Sur les appareils de grande taille, il recherche ceux qui ont lg de la classe, et utilisez-les. Dans cet exemple, nos 2 div seront 50%/50% de la séparation en 33%/66%。Veuillez consulter les exemples ci-dessous pour la validation. (Dans ce cas, un style est défini pour chaque colonne, ce que vous pouvez éviter de faire.)

exemple en ligne

exemple

!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap　exemple　-　de périphériques de taille moyenne et grande</title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　　　<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div class="col-md-6　col-lg-4" style="background-color: #dedef8;　
　　　　　　　　　box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
　　　　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do　
　　　　　　　　　　　　eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut　
　　　　　　　　　　　　enim ad minim veniam, quis nostrud exercitation ullamco laboris　
　　　　　　　　　　　　nisi ut aliquip ex ea commodo consequat.　
　　　　　　　　　</p>
　　　　　　　　　Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium, totam rem aperiam, eaque ipsa　
　　　　　　　　　　　　quae ab inventore veritatis et quasi architecto beatae vitae　
　　　　　　　　　　　　dicta sunt explicabo.　
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-md-6　col-lg-8" style="background-color: #dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
　　　　　　　　　Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium.
　　　　　　　　　</p>
　　　　　　　　　Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,　
　　　　　　　　　　　　consectetur, adipisci velit, sed quia non numquam eius Modi　
　　　　　　　　　　　　tempora incidunt ut labore et dolore magnam aliquam quaerat　
　　　　　　　　　　　　voluptatem.　
　　　　　　　　　</p>
　　　	</div>
　　</div>
</div>
</body>
</html>

Voyons un test ‹/›

Les résultats sont affichés comme suit :

Exemple de système de grille Bootstrap : téléphone, tablette, ordinateur de bureau Exemple de système de grille Bootstrap : alignement horizontal empilé