recherche

Maison >interface Web >js tutoriel >Explication détaillée des compétences Bootstrap button_javascript

Explication détaillée des compétences Bootstrap button_javascript

WBOY
WBOYoriginal
2016-05-16 15:22:141055parcourir

Description

Le plugin JavaScript Bootstrap Button vous permet d'améliorer les fonctionnalités de vos boutons. Vous pouvez contrôler l'état des boutons et créer des groupes de boutons pour les composants, tels que les barres d'outils.

Ce qui est requis

Vous devez référencer jquery.js et bootstrap-button.js - ces deux fichiers JavaScript. Ils sont tous situés dans le dossier docs/assets/js.

Comment l'utiliser

Vous pouvez utiliser le plugin uniquement via le balisage sans écrire de JavaScript, ou vous pouvez activer les boutons via JavaScript.

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 3499910bf9dac5ae3c52d5ede7383485, bb9345e55eb71822850ff156dfde57c8 ou d5fd7aea971a85678ba271703566ebfd :

Cours Description
.btn Ajouter des styles de base aux boutons
.btn-default Bouton par défaut/standard
.btn-primaire Style de bouton original (non manipulé)
.btn-succès Une action indiquant le succès
.btn-info Ce style peut être utilisé pour les boutons qui souhaitent afficher des informations
.btn-warning Boutons qui nécessitent une utilisation minutieuse
.btn-danger Fonctionnement du bouton indiquant une action dangereuse
.btn-link Faire ressembler le bouton à un lien (conserver toujours le comportement du bouton)
.btn-lg Faire un gros bouton
.btn-sm Faire un petit bouton
.btn-xs Faire un super petit bouton
.btn-block Bouton au niveau du bloc (étiré à 100 % de la largeur de l'élément parent)
.active Bouton cliqué
.disabled Bouton Désactiver

Regardez d'abord les boutons de différentes couleurs : 

<html lang="en"> 
<head> 
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="关键词一，关键词二"> 
  <meta name="Description" content="网站描述内容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> 
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
</head> 
  <body style="padding: 20px;"> 
    <!-- 标准的按钮 --> 
    <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>

Effet :

btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link ajoute différents styles aux boutons.

Taille du bouton

Étant donné que les parties de la tête sont toutes identiques, seul le contenu du corps est répertorié. 

<body style="padding: 20px;width:500px;"> 
  <!-- 标准的按钮 --> 
  <button type="button" class="btn btn-default">默认按钮</button> 
  <button type="button" class="btn btn-lg btn-default">大的默认按钮</button> 
  <br/><br/> 
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> 
  <button type="button" class="btn btn-primary">原始按钮</button> 
  <button type="button" class="btn btn-sm btn-primary">小的原始按钮</button> 
  <br/><br/> 
  <!-- 表示一个成功的或积极的动作 --> 
  <button type="button" class="btn btn-success">成功按钮</button> 
  <button type="button" class="btn btn-xs btn-success">特别小的成功按钮</button> 
  <br/><br/> 
  <!-- 用于要弹出信息的按钮 --> 
  <button type="button" class="btn btn-info">信息按钮</button><br/><br/> 
  <button type="button" class="btn btn-block btn-info">块级信息按钮</button> 
</body>

L'effet est le suivant :

État du bouton

Le bouton est divisé en deux états : actif et désactivé,
État actif : le bouton prend l'apparence d'une pression, avec un arrière-plan plus sombre, une bordure sombre et une ombre.
État désactivé : la couleur du bouton devient 50 % plus claire et perd son dégradé

Voir exemples précis : 

<body style="padding: 20px;width:500px;"> 
  <!-- 标准的按钮 --> 
  <button type="button" class="btn btn-default">默认按钮</button> 
  <button type="button" class="btn btn-default active">激活的默认按钮</button> 
  <br/><br/> 
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> 
  <button type="button" class="btn btn-primary">原始按钮</button> 
  <button type="button" class="btn btn-primary active">激活的原始按钮</button> 
  <br/><br/> 
  <!-- 表示一个成功的或积极的动作 --> 
  <button type="button" class="btn btn-success">成功按钮</button> 
  <button type="button" class="btn btn-success active">激活的成功按钮</button> 
  <br/><br/> 
  <!-- 用于要弹出信息的按钮 --> 
  <button type="button" class="btn btn-info">信息按钮</button> 
  <button type="button" class="btn btn-info active">激活的信息按钮</button> 
  <br/><br/> 
 
  <button type="button" class="btn btn-default">默认按钮</button> 
  <button type="button" class="btn btn-default disabled">禁用的默认按钮</button> 
  <br/><br/> 
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> 
  <button type="button" class="btn btn-primary">原始按钮</button> 
  <button type="button" class="btn btn-primary disabled">禁用的原始按钮</button> 
  <br/><br/> 
  <!-- 表示一个成功的或积极的动作 --> 
  <button type="button" class="btn btn-success">成功按钮</button> 
  <button type="button" class="btn btn-success disabled">禁用的成功按钮</button> 
  <br/><br/> 
  <!-- 用于要弹出信息的按钮 --> 
  <button type="button" class="btn btn-info">信息按钮</button> 
  <button type="button" class="btn btn-info disabled">禁用的信息按钮</button> 
</body>

Étiquette du bouton

a, l'entrée peut se comporter comme un bouton, mais pour éviter les incohérences entre navigateurs, il est préférable d'utiliser la balise Button. 

<body style="padding: 20px;"> 
  <a class="btn btn-default" href="#" role="button">超链接按钮</a> 
  <button class="btn btn-default btn-primary" type="submit">button按钮</button> 
  <input class="btn btn-default btn-success" type="button" value="input按钮"> 
  <input class="btn btn-default btn-info" type="submit" value="submit按钮"> 
</body>

Le contenu ci-dessus vous présente les connaissances sur les boutons Bootstrap. J'espère qu'il vous plaira.

Déclaration：
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
Article précédent：Exemple de code, explication détaillée de l'implémentation javascript de la gigue de fenêtre et des compétences qq window jitter_javascriptArticle suivant：Exemple de code, explication détaillée de l'implémentation javascript de la gigue de fenêtre et des compétences qq window jitter_javascript

Articles Liés

Voir plus