Chapitre six : Classes de groupes auxiliaires et compétences Responsive Tools_javascript

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">&times;</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 !