suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Bootstrap-Button_Javascript-Fähigkeiten

Detaillierte Erläuterung der Bootstrap-Button_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:22:141078Durchsuche

Beschreibung

Mit dem Bootstrap Button-JavaScript-Plugin können Sie die Funktionalität Ihrer Schaltflächen verbessern. Sie können den Status von Schaltflächen steuern und Schaltflächengruppen für Komponenten wie Symbolleisten erstellen.

Was ist erforderlich

Sie müssen auf jquery.js und bootstrap-button.js verweisen – diese beiden JavaScript-Dateien. Sie befinden sich alle im Ordner docs/assets/js.

Wie man es benutzt

Sie können das Plugin einfach über Markup verwenden, ohne JavaScript zu schreiben, oder Sie können Schaltflächen über JavaScript aktivieren.

Bootstrap bietet einige Optionen zum Definieren des Stils von Schaltflächen, wie in der folgenden Tabelle gezeigt:

Die folgenden Stile können für 3499910bf9dac5ae3c52d5ede7383485-, bb9345e55eb71822850ff156dfde57c8- oder d5fd7aea971a85678ba271703566ebfd-Elemente verwendet werden:

Klasse Beschreibung
.btn Grundlegende Stile zu Schaltflächen hinzufügen
.btn-default Standard-/Standardschaltfläche
.btn-primary Original-Schaltflächenstil (nicht manipuliert)
.btn-success Eine Aktion, die auf Erfolg hinweist
.btn-info Dieser Stil kann für Schaltflächen verwendet werden, die Informationen anzeigen möchten
.btn-warning Tasten, die eine sorgfältige Bedienung erfordern
.btn-danger Tastenbetätigung weist auf eine gefährliche Aktion hin
.btn-link Lassen Sie die Schaltfläche wie einen Link aussehen (behalten Sie weiterhin das Verhalten der Schaltfläche bei)
.btn-lg Machen Sie einen großen Knopf
.btn-sm Machen Sie einen kleinen Knopf
.btn-xs Machen Sie einen superkleinen Knopf
.btn-block Schaltfläche auf Blockebene (auf 100 % der Breite des übergeordneten Elements gestreckt)
.aktiv Schaltfläche angeklickt
.deaktiviert Schaltfläche deaktivieren

Schauen Sie sich zunächst die Knöpfe in verschiedenen Farben an: 

<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>

Wirkung:

btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link fügt den Schaltflächen verschiedene Stile hinzu.

Tastengröße

Da die Kopfteile alle gleich sind, wird nur der Inhalt des Körpers aufgeführt. 

<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>

Der Effekt ist wie folgt:

Schaltflächenstatus

Die Schaltfläche ist in zwei Zustände unterteilt: aktiv und deaktiviert,
Aktiver Zustand: Die Schaltfläche sieht so aus, als wäre sie gedrückt, mit einem dunkleren Hintergrund, einem dunklen Rand und Schatten.
Deaktivierter Zustand: Die Schaltflächenfarbe wird 50 % heller und verliert den Farbverlauf

Siehe konkrete Beispiele: 

<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>

Schaltflächenbeschriftung

a, Eingaben können sich wie eine Schaltfläche verhalten, aber um Inkonsistenzen zwischen Browsern zu vermeiden, ist es am besten, das Button-Tag zu verwenden. 

<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>

Der obige Inhalt führt Sie in das Wissen über Bootstrap-Schaltflächen ein. Ich hoffe, es gefällt Ihnen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispielcode, detaillierte Erläuterung der Javascript-Implementierung von Window Jitter und QQ Window Jitter_Javascript-FähigkeitenNächster Artikel：Beispielcode, detaillierte Erläuterung der Javascript-Implementierung von Window Jitter und QQ Window Jitter_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen