Bootstrap-Button-Plugin

Der Taste wird zum Erstellen einer Schaltflächensteuerung verwendet, die anklickbare Aktionen definiert. Die Schaltflächen sind ein integraler Bestandteil von HTML, das die Elemente vom Typ Schaltfläche auswählt. Die Schaltflächen werden für verschiedene Zwecke verwendet, z. B. als Senden-Schaltfläche, Zurücksetzen-Schaltfläche usw. auf einer Webseite. Es wird häufig mit Formularelementen verwendet und kann auch als eigenständiges Steuerelement verwendet werden. Der Bootstrap ermöglicht die Verbesserung der Funktionalität der Schaltfläche. Wir können Gruppen von Schaltflächen oder Schaltflächenzustände für Komponenten wie Symbolleisten erstellen.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Die folgenden Beispiele veranschaulichen die Verwendung verschiedener Techniken zur Implementierung der Schaltflächen in Bootstrap. Wenn Sie Fragen dazu haben Bootstrap-Button-Pluginschreiben Sie es bitte in den Kommentarbereich.

Bootstrap Stateful-Schaltfläche

Wir können den Normalzustand einer Schaltfläche auf einen Ladezustand setzen, indem wir den Wert von verwenden Datenladetext Attribut. Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
   $(function(){
      $(".btn").click(function(){
         $(this).button('loading').delay(1000).queue(function(){
            $(this).button('reset');
         });
      });
   });
</script>
</head>
<body>
<div  >
<h2>Stateful Button</h2>
<button type="button"   data-loading-text="Loading...">Load Data</button>
</div>
</body>
</html>

Wie im obigen Skript gezeigt, haben wir das Attribut namens verwendet data-loading-text=“Laden…“ um die Daten auf die Webseite zu laden. Wenn wir auf die Schaltfläche klicken, wird die Click-Methode ausgeführt und das Laden der Daten beginnt, indem der Text „Loading…“ angezeigt wird. Wenn die 1000 ms erreicht sind, wird die Taste zurückgesetzt.

  • Beispiel für eine Bootstrap-Stateful-Schaltfläche ausführen

Beispiel für eine Bootstrap-Stateful-Schaltfläche

Bootstrap-Einzelschaltfläche

Durch einfache Verwendung können wir eine einzelne Umschaltfunktion für die Schaltfläche erstellen data-toggle=“button“ Attribut, das das Umschalten vom Normalzustand in den Push-Zustand und umgekehrt aktiviert. Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Single Toggle Button</h2><br>
<button type="button"   data-toggle="button">Toggle Button</button>
<button type="button"   data-toggle="button">Toggle Button</button>
<button type="button"   data-toggle="button">Toggle Button</button>
<button type="button"   data-toggle="button">Toggle Button</button>
</div>
</body>
</html>
  • Beispiel für die Ausführung einer einzelnen Bootstrap-Umschalttaste

Beispiel für eine einzelne Bootstrap-Umschalttaste

Kontrollkästchen Bootstrap-Schaltflächen

Die Kontrollkästchen werden auch als Auswahlfelder bezeichnet und werden häufig verwendet, wenn mehr als eine Option ausgewählt werden muss. Wir können durch einfaches Hinzufügen eine Gruppe von Kontrollkästchen erstellen data-toggle=“buttons“ zum .btn-Gruppe class innerhalb des div-Elements, wie im folgenden Beispiel gezeigt:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Buttons Checkbox</h2><br>
<div   data-toggle="buttons">
   <label  >
      <input type="checkbox">Checkbox-One
   </label>
   <label  >
         <input type="checkbox">Checkbox-Two
   </label>
   <label  >
         <input type="checkbox">Checkbox-Three
   </label>
</div>
</div>
</body>
</html>
  • Beispiel für das Kontrollkästchen „Bootstrap-Schaltfläche ausführen“.

Beispiel für ein Kontrollkästchen für die Bootstrap-Schaltfläche

Bootstrap-Tasten-Radio

Ein Optionsfeld ist ein runder Kreis, der Auswahlmöglichkeiten in einer allgemeinen Optionsliste darstellt, die verwendet werden, wenn nur eine Option auswählbar ist. Wir können durch einfaches Hinzufügen eine Gruppe von Funkeingängen erstellen data-toggle=“buttons“ zum .btn-Gruppe class innerhalb des div-Elements, wie im folgenden Beispiel gezeigt:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Buttons Radio</h2><br>
<div   data-toggle="buttons">
   <label  >
      <input type="radio" name="options" id="myoption1">Radio-One
   </label>
   <label  >
         <input type="radio" name="options" id="myoption2">Radio-Two
   </label>
   <label  >
         <input type="radio" name="options" id="myoption3">Radio-Three
   </label>
</div>
</div>
</body>
</html>
  • Führen Sie ein Beispiel für das Bootstrap-Button-Radio aus

Beispiel für ein Bootstrap-Button-Radio

Bootstrap-Buttons über JavaScript

Es ist möglich, die Schaltflächen mithilfe der JavaScript-Methode zu aktivieren $(selector).button() . Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
   $(document).ready(function(){
      $(".nav-tabs a").click(function(){
         $(this).button('loading').delay(500).queue(function(){
            $(this).button('reset');
         });
      });
   });
</script>
</head>
<body>
<div  >
<h2>Buttons via JavaScript</h2><br>
<div  >
   <ul  >
      <li  ><a href="#mydiv" data-toggle="tab" data-loading-text="Loading...">Tab 1</a></li>
      <li><a href="#mydiv1" data-toggle="tab" data-loading-text="Loading...">Tab 2</a></li>
      <li><a href="#mydiv2" data-toggle="tab" data-loading-text="Loading...">Tab 3</a></li>
   </ul>
 <div  >
<div id="mydiv"  >
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
  </div>
  <div id="mydiv1"  >
   <p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
<div id="mydiv2"  >
 <p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.</p>
      </div>
   </div>
</div>
</div>
</body>
</html>
  • Führen Sie den Bootstrap-Button über ein JavaScript-Beispiel aus

Bootstrap-Button über JavaScript-Beispiel

Bootstrap-Buttons-Methoden

Die folgende Tabelle zeigt die Schaltflächenmethoden von Bootstrap:

Methodenbeschreibung

$().button(‚toggle‘)Es schaltet den Druckzustand der Taste um, sodass die Taste so aussieht, als wäre sie aktiviert.
$().button(‚loading‘)Der Schaltflächenstatus wird auf „Laden“ gesetzt. Das heißt, beim Laden ist die Schaltfläche deaktiviert und der Text wird durch den Ladetext ersetzt.
$().button(‚reset‘)Es setzt den Schaltflächenstatus zurück und tauscht den Text gegen den Originaltext aus.
$().button(string)Es setzt den Schaltflächenstatus zurück, indem der Text in einen beliebigen durch Daten definierten Textstatus geändert wird.

Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(function () {
	 $("#toggle-demo .btn").click(function(){
		$(this).button('toggle');
	 });
  });
  $(function() {
	 $("#load-demo .btn").click(function(){
		$(this).button('loading').delay(1000).queue(function() {
		});
	 });
  });
  $(function() {
	 $("#reset-demo .btn").click(function(){
		$(this).button('loading').delay(1000).queue(function() {
		   $(this).button('reset');
		});
	 });
  });
  $(function() {
	 $("#string-demo").click(function(){
		$(this).button('loading').delay(1000).queue(function() {
		   $(this).button('complete');
		});
	 });
  });
</script>
</head>
<body>
<div  >
<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>$().button('toggle')Method</h4>
<div id="toggle-demo">
   <button type="button"  >Primary</button>
</div><br>
<h4>$().button('loading')Method</h4>
<div id="load-demo">
   <button type="button"  
      data-loading-text="Loading data...">Primary
   </button>
</div><br>
<h4>$().button('reset')Method</h4>
<div id="reset-demo">
   <button type="button"  
      data-loading-text="Loading data...">Primary
   </button>
</div><br>
<h4>$().button(string)Method</h4>
<button type="button"   id="string-demo"
   data-complete-text="Loading completed">Click Me
</button>
</div>
</body>
</html>

Das obige Skript definiert Schaltflächenmethoden, die in der obigen Tabelle angegeben sind. Die erste Methode, button(‚toggle‘), gibt der Schaltfläche den Eindruck, dass sie aktiviert wurde. Es verwendet die Toggle-Demo-ID, um seinen Status zu ändern, wenn wir auf die Schaltfläche klicken. Die zweite Methode, .button(‚loading‘), setzt den Schaltflächenstatus auf Laden. Es verwendet die Load-Demo-ID, die den Schaltflächentext in den Ladetext umwandelt, wenn auf die Schaltfläche geklickt wird. Die dritte Methode, .button(‚reset‘), setzt den Schaltflächenstatus zurück, indem der Text durch den Originaltext ersetzt wird, und verwendet die Reset-Demo-ID, um die Schaltfläche zurückzusetzen. Die letzte Methode, .button(string), tauscht den Text mit der vom Benutzer angegebenen Zeichenfolge unter Verwendung der string-demo-ID aus.

  • Beispiel für Bootstrap-Button-Methoden ausführen

Beispiel für Bootstrap-Button-Methoden

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen