Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:04:07
original
1462 Les gens l'ont consulté

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> 
Copier après la connexion

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> 
Copier après la connexion

3. Bouton Fermer

<button type="button" class="close">&times;</button> 
Copier après la connexion

4. Symbole triangulaire

<span class="caret"></span> 
Copier après la connexion

5. Flotteur rapide

<div class="pull-left">左边</div>
<div class="pull-right">右边</div> 
Copier après la connexion

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> 
Copier après la connexion

Remarque : est margin:x auto; et display:block est défini.

7. Nettoyer les flotteurs

<div class="clearfix"></div> 
Copier après la connexion

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> 
Copier après la connexion

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> 
Copier après la connexion

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 !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!