Bouton d'amorçage


Ce chapitre expliquera comment utiliser les boutons Bootstrap à travers des exemples. Tout élément de classe .btn héritera de l'apparence par défaut d'un bouton gris arrondi. Mais Bootstrap propose quelques options pour définir le style des boutons, comme indiqué dans le tableau suivant :

Les styles suivants peuvent être utilisés sur les éléments <a>, <button> ou <input> 🎜>

类描述实例
.btn为按钮添加基本样式尝试一下
.btn-default默认/标准按钮尝试一下
.btn-primary原始按钮样式（未被操作）尝试一下
.btn-success表示成功的动作尝试一下
.btn-info该样式可用于要弹出信息的按钮尝试一下
.btn-warning表示需要谨慎操作的按钮尝试一下
.btn-danger表示一个危险动作的按钮操作尝试一下
.btn-link让按钮看起来像个链接 (仍然保留按钮行为)尝试一下
.btn-lg制作一个大按钮尝试一下
.btn-sm制作一个小按钮尝试一下
.btn-xs制作一个超小按钮尝试一下
.btn-block块级按钮(拉伸至父元素100%的宽度)尝试一下
.active按钮被点击尝试一下
.disabled禁用按钮尝试一下
L'exemple suivant illustre toutes les classes de boutons ci-dessus :


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮选项</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>

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>

<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>

<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>

<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>

<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>

<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>

<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

</body>
</html>

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



Taille du bouton

Répertoriés dans le tableau ci-dessous Pour obtenir les classes pour les boutons de différentes tailles :

L'exemple suivant illustre toutes les classes de boutons ci-dessus :


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮大小</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>
   <button type="button" class="btn btn-primary btn-lg">
      大的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-lg">
      大的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary">
      默认大小的原始按钮
   </button>
   <button type="button" class="btn btn-default">
      默认大小的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-sm">
      小的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-sm">
      小的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-xs">
      特别小的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-xs">
      特别小的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg btn-block">
      块级的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-lg btn-block">
      块级的按钮
   </button>
</p>

</body>
</html>

Exécuter l'instance»

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

Statut du bouton

Bootstrap fournit des classes pour l'activation, la désactivation et d'autres statuts de boutons, qui seront expliqués en détail ci-dessous.

État d'activation

Le bouton aura une apparence enfoncée (fond sombre, bordure sombre, ombre) lorsqu'il est activé.

Le tableau suivant répertorie les classes qui rendent les éléments de bouton et les éléments d'ancrage actifs :

元素Class
按钮元素添加 .active class 来显示它是激活的。
锚元素添加 .active class 到 <a> 按钮来显示它是激活的。

L'exemple suivant le démontre :


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮激活状态</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>
   <button type="button" class="btn btn-default btn-lg ">
      默认按钮
   </button>
   <button type="button" class="btn btn-default btn-lg active">
      激活按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按钮
   </button>
   <button type="button" class="btn btn-primary btn-lg active">
      激活的原始按钮
   </button>
</p>

</body>
</html>

Exécuter l'instance»

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


État désactivé

Lorsque vous désactivez un bouton, il devient 50% plus léger et perd son dégradé.

Le tableau suivant répertorie les classes qui désactivent les éléments de bouton et les éléments d'ancrage :

ÉlémentClasse
Élément boutonAjouterdésactivé Propriétés< /em> sur le bouton <bouton>
Élément d'ancrageAjoutez une classe désactivée au bouton <a>
元素Class
按钮元素添加 disabled 属性 到 <button> 按钮。
锚元素添加 disabled class 到 <a> 按钮。
注意：该 class 只会改变 <a> 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。
Remarque : Cette classe modifiera uniquement l'apparence de <a>, pas sa fonctionnalité. Ici, vous devez utiliser du JavaScript personnalisé pour désactiver le lien.


Instance

下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮禁用状态</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>
   <button type="button" class="btn btn-default btn-lg">
      默认按钮
   </button>
   <button type="button" class="btn btn-default btn-lg" disabled="disabled">
      禁用按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按钮
   </button>
   <button type="button" class="btn btn-primary btn-lg" disabled="disabled">
      禁用的原始按钮
   </button>
</p>
<p>
   <a href="#" class="btn btn-default btn-lg" role="button">
      链接
   </a>
   <a href="#" class="btn btn-default btn-lg disabled" role="button">
      禁用链接
   </a>
</p>
<p>
   <a href="#" class="btn btn-primary btn-lg" role="button">
      原始链接
   </a>
   <a href="#" class="btn btn-primary btn-lg disabled" role="button">
      禁用的原始链接
   </a>
</p>

</body>
</html>

Exécuter l'instance»

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

Étiquette du bouton

Vous pouvez cliquer sur <a>, < ;button> ou Utilisez la classe bouton sur l'élément <input> Toutefois, il est recommandé d'utiliser la classe bouton sur l'élément <button> pour éviter les incohérences entre navigateurs.

L'exemple suivant le démontre :

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮标签</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>

<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">

</body>
</html>

Exécuter l'instance»

Cliquez sur « Exécuter instance" pour afficher les instances en ligne