Classe d'assistance Bootstrap


Ce chapitre abordera certaines classes d'assistance dans Bootstrap qui peuvent s'avérer utiles.

Texte

Les différentes classes suivantes affichent différentes couleurs de texte. Si le texte est un lien, le texte s'assombrit lorsque la souris passe dessus :

类描述实例
.text-muted "text-muted" 类的文本样式尝试一下
.text-primary "text-primary" 类的文本样式尝试一下
.text-success "text-success" 类的文本样式尝试一下
.text-info "text-info" 类的文本样式尝试一下
.text-warning "text-warning" 类的文本样式尝试一下
.text-danger"text-danger" 类的文本样式尝试一下

Arrière-plan

Les différentes classes suivantes affichent différentes couleurs d'arrière-plan. Si le texte est un lien, passer la souris sur le texte s'assombrira :

类描述实例
.bg-primary表格单元格使用了 "bg-primary" 类尝试一下
.bg-success表格单元格使用了 "bg-success" 类尝试一下
.bg-info表格单元格使用了 "bg-info" 类尝试一下
.bg-warning表格单元格使用了 "bg-warning" 类尝试一下
.bg-danger表格单元格使用了 "bg-danger" 类尝试一下

Autres

类描述实例
.pull-left元素浮动到左边尝试一下
.pull-right元素浮动到右边尝试一下
.center-block设置元素为 display:block 并居中显示尝试一下
.clearfix清除浮动
.show强制元素显示尝试一下
.hidden强制元素隐藏尝试一下
.sr-only除了屏幕阅读器外，其他设备上隐藏元素尝试一下
.sr-only-focusable与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)尝试一下
.text-hide将页面元素所包含的文本内容替换为背景图尝试一下
.close显示关闭按钮尝试一下
.caret显示下拉式功能尝试一下

Plus d'exemples

Icône de fermeture

Utilisez une icône de fermeture universelle pour fermer les modaux et les alertes. Utilisez la classe close pour obtenir l'icône de fermeture.

<!DOCTYPE html>
<html>
<head>
;link rel="stylesheet" href="http://apps.bdimg. com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http:/ /apps.bdimg.com/libs/jquery/2.1.1/jquery.min .js"></script>
 <script src="http://apps.bdimg.com/libs/bootstrap /3.3.0/js/bootstrap.min.js"></ script>
</head>
<body>

<p>Fermer l'instance d'icône
<button type="button" class="close" aria-hidden= "vrai">
×
</button>
</p>

</body>
</html>
Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 关闭图标</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>关闭图标实例
   <button type="button" class="close" aria-hidden="true">
      ×
   </button>
</p>

</body>
</html>

Instance en cours d'exécution»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Caret

<!DOCTYPE html>
<html>
<head>
<title>Exemple de bootstrap - Caret</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css /bootstrap.min.css">
<script src=" http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/ libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<p>Exemple Caret
<span class="caret"></span>
</p>

</body>
</html>
Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 插入符</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>插入符实例
   <span class="caret"></span>
</p>

</body>
</html>

Instance en cours d'exécution»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Quick Float

Vous pouvez utiliser la classe pull-left ou pull-right pour faire flotter l'élément vers la gauche ou la droite respectivement. L’exemple suivant le démontre. <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

<script src="http : / /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/ bootstrap /3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="pull- left ">
Flottez rapidement vers la gauche
</div>
<div class="pull-right">
Flottez rapidement vers la droite
</div> ;


</body>
</html>



Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 快速浮动</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="pull-left">
   向左快速浮动
</div>
<div class="pull-right">
   向右快速浮动
</div>


</body>
</html>

Exécuter l'exemple »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'exemple en ligne

Pour aligner les composants dans la barre de navigation, veuillez utiliser
.navbar-left ou .navbar-right

à la place. Consultez la barre de navigation Bootstrap.

Content Centered

Utilisez la classe center-block pour centrer l'élément.

<!DOCTYPE html>

<html>

<head> <title>Exemple de bootstrap - Bloc de contenu centré</title> < ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

<script src="http: / /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/ bootstrap /3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row" > 🎜></div>

</body>
</html>



Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 居中内容块</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row">
   <div class="center-block" style="width:200px;background-color:#ccc;">
      这是 center-block 实例
   </div>
</div>

</body>
</html>


Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Effacer le flotteur

Pour effacer le flotteur d'un élément, veuillez utiliser la classe .clearfix. < ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

<script src="http :/ /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs /bootstrap /3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="clearfix " style =" arrière-plan : #D8D8D8; bordure : 1px solide #000; rembourrage : 10px;">
<div class="pull-left" style="arrière-plan :#58D3F7;">
Vers la gauche Flottez rapidement
</div>
<div class="pull-right" style="background: #DA81F5;">
Flottez rapidement vers la droite
< /div>
</div>

</body>
</html>



Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 清除浮动</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
   <div class="pull-left" style="background:#58D3F7;">
      向左快速浮动
   </div>
   <div class="pull-right" style="background: #DA81F5;">
      向右快速浮动
   </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Afficher et masquer du contenu

Vous pouvez forcer l'affichage ou le masquage d'un élément (y compris par les lecteurs d'écran) en utilisant les classes .show et .hidden.

<!DOCTYPE html>
<html>
<head>
<title>Exemple de bootstrap - Afficher et masquer le contenu</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http : //apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs / bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row " style="padding : 91px 100px 19px 50px;">
<div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
Ceci est une instance de show class
</div>
<div class="hidden" style="width:200px;background-color:#ccc;">
Ceci est une classe hide Exemples de


<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 显示和隐藏内容</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row" style="padding: 91px 100px 19px 50px;">
   <div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
      这是 show class 的实例
   </div>
   <div class="hidden" style="width:200px;background-color:#ccc;">
      这是 hide class 的实例
   </div>
</div>

</body>
</html>


Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Lecteurs d'écran

Vous pouvez masquer un élément sur tous les appareils à l'exception des lecteurs d'écran en utilisant la classe .sr-only.

<!DOCTYPE html>
<html>
<head>
<title>Exemple de bootstrap - Lecteur d'écran</title>
< lien rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http: // apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/ bootstrap/ 3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row" style= "remplissage : 91px 100px 19px 50px;">
<form class="form-inline" role="form">
<div class="form-group">
        < ;label class="sr-only" for="email">Adresse e-mail</label>
                                                                                                                                                                                                                 ;
                                                                                                                   
                                                                                                               🎜>
</body>
</html>



Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 屏幕阅读器</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row" style="padding: 91px 100px 19px 50px;">
   <form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="email">Email 地址</label>
      <input type="email" class="form-control" placeholder="Enter email">
   </div>
   <div class="form-group">
      <label class="sr-only" for="pass">密码</label>
      <input type="password" class="form-control" placeholder="Password">
   </div>
   </form>
</div>

</body>
</html>
Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
←
→

Site Web PHP chinois

MaisonMaisonCoursCoursArticleArticleQuestions et réponsesQuestions et réponsesDictionnaireDictionnaireManuelManuelTéléchargerTéléchargerrechercherechercheAPPTélécharger APPTélécharger