Maison > Article > interface Web > Exemple de système de disposition de grille Bootstrap
Exemple de système de disposition de grille Bootstrap
- PHPzoriginal
- 2018-06-28 16:40:464776parcourir
1. Principes de base :
1. Considérez l'écran comme une grille/grille/cellule/composition ordonnée dans les directions horizontale et verticale ;
2. Toutes les données doivent être placées. dans la grille ;
3. Utilisez d'abord la mise en page réactive, les paramètres mobiles
2. Division de la résolution d'écran basée sur
1. (écran < 768px) : ultra-petit écran col-xs-x
2. (768px <= écran < 992px) : petit écran col-sm-x
3. (992px <= écran < 1200) : écran moyen col-md-x
4. (1200 <= écran) : grand écran col-lg-x
2. Principe de mise en œuvre
1. Le première étape : un conteneur doit être créé, class="container"
2. La deuxième étape : une ligne doit être créée, class="row"
3 .Étape 3 : La grille doit être créé, class="col-md-x", en prenant un écran moyen comme exemple, le point critique est 992px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="jquery-3.2.1.js"></script>
<script src="dist/js/bootstrap.js"></script>
<title>栅格布局系统</title>
<style>
.grid {
border: 1px solid #696969;
border-radius: 5px;
background-color: lightskyblue;
min-height: 30px;
text-align: center;
line-height: 30px;
}
.green {
background-color: lightgreen;
}
.pink {
background-color: lightpink;
}
</style>
</head>
<body>
<div class="container">
<h4>整行:</h4>
<div class="row">
<div class="col-md-12 grid">内容</div>
</div>
<h4>二等分:</h4>
<div class="row">
<!--<div class="col-md-6 grid">内容</div>-->
<!--大屏39分-->
<!--<div class="col-md-6 col-lg-3 grid green">内容</div>-->
<!--小屏48分-->
<div class="col-md-6 col-lg-3 col-sm-4 grid green">内容</div>
<!--<div class="col-md-6 col-sm-8 grid">内容</div>-->
<!--<div class=" col-md-6 grid">内容</div>-->
<!--<div class=" col-md-6 col-lg-9 grid pink">内容</div>-->
<div class=" col-md-6 col-lg-9 grid col-sm-8 pink">内容</div>
<!--<div class=" col-md-6 col-sm-4 grid">内容</div>-->
</div>
<h4>三等分:</h4>
<div class="row">
<div class="col-md-4 grid">内容</div>
<div class="col-md-4 grid">内容</div>
<div class="col-md-4 grid">内容</div>
</div>
<h4>四等分:</h4>
<div class="row">
<div class="col-md-3 grid">内容</div>
<div class="col-md-3 grid">内容</div>
<div class="col-md-3 grid">内容</div>
<div class="col-md-3 grid">内容</div>
</div>
<!--<h4>五等分:12除5除不尽,不用五等分</h4>-->
<h4>六等分:</h4>
<div class="row">
<div class="col-md-2 grid">内容</div>
<div class="col-md-2 grid">内容</div>
<div class="col-md-2 grid">内容</div>
<div class="col-md-2 grid">内容</div>
<div class="col-md-2 grid">内容</div>
<div class="col-md-2 grid">内容</div>
</div>
<h4>四八开:</h4>
<div class="row">
<div class="col-md-4 grid">内容</div>
<div class="col-md-8 grid">内容</div>
</div>
<h4>三九开:</h4>
<div class="row">
<div class="col-md-3 grid">内容</div>
<div class="col-md-9 grid">内容</div>
</div>
</div>
</body>
</html>[Recommandation vidéo associée : Tutoriel Bootstrap】
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!