Bootstrap, de Twitter, est actuellement le framework front-end le plus populaire. Bootstrap est basé sur HTML, CSS et JAVASCRIPT. Il est simple et flexible, ce qui accélère le développement Web.
Points d'apprentissage :
1. Cours de groupe auxiliaire
2. Outils réactifs
Dans cette leçon, nous découvrons principalement les classes auxiliaires et les outils réactifs de Bootstrap. Les classes auxiliaires fournissent un ensemble de classes pour aider à la conception de pages, tandis que les outils réactifs utilisent des requêtes multimédias pour afficher ou masquer certains contenus.
1. Classe auxiliaire
Bootstrap fournit quelques petits styles de groupes auxiliaires dans la mise en page, utilisés pour définir la couleur du texte et la couleur d'arrière-plan, afficher les icônes de fermeture, etc.
1. Couleur du texte du scénario
样式列表 样式名 描述 text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text-warning 警告黄 text-danger 危险红 //各种色调的字体 <p class="text-muted">Bootstrap 视频教程</p> <p class="text-primary">Bootstrap 视频教程</p> <p class="text-success">Bootstrap 视频教程</p> <p class="text-info">Bootstrap 视频教程</p> <p class="text-warning">Bootstrap 视频教程</p> <p class="text-danger">Bootstrap 视频教程</p>
2. Couleur de fond de la scène
样式列表 样式名 描述 bg-primary 主要蓝 bg-success 成功绿 bg-info 信息蓝 bg-warning 警告黄 bg-danger 危险红 //各种色调的背景 <p class="bg-primary">Bootstrap 视频教程</p> <p class="bg-success">Bootstrap 视频教程</p> <p class="bg-info">Bootstrap 视频教程</p> <p class="bg-warning">Bootstrap 视频教程</p> <p class="bg-danger">Bootstrap 视频教程</p>
3. Bouton Fermer
<button type="button" class="close">×</button>
4. Symbole triangulaire
<span class="caret"></span>
5. Flotteur rapide
<div class="pull-left">左边</div> <div class="pull-right">右边</div>
Remarque : Ce float est en fait un float, mais !important est utilisé pour renforcer la priorité.
6. Centrage au niveau du bloc
<div class="center-block">居中</div>
Remarque : est margin:x auto; et display:block est défini.
7. Nettoyer les flotteurs
<div class="clearfix"></div>
Remarque : Ce div peut être placé devant le bloc flottant qui doit être nettoyé.
8. Afficher et masquer
<div class="show">show</div> <div class="hidden">hidden</div>
2. Outils réactifs
Lors d'une requête multimédia, il est parfois nécessaire d'afficher et de masquer certains contenus pour différentes tailles d'écran. Les classes d'outils réactifs fournissent cette solution.
//超小屏幕激活显示 <div class="visible-xs-block a">Bootstrap</div> //超小屏幕激活隐藏 <div class="hidden-xs a">Bootstrap</div>
Remarque : Il existe trois variantes pour le contenu affiché : block, inline-block et inline.
Ce qui précède est le contenu lié à la classe de groupe auxiliaire et aux outils réactifs du composant BootStrap introduits par l'éditeur. J'espère qu'il sera utile à tout le monde !