Bootstrap-Tasten

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. Der Bootstrap bietet verschiedene Arten von Schaltflächen, um unterschiedliche Schaltflächenzustände anzugeben. Die folgenden Schaltflächenklassen stehen zum Formatieren einer Schaltfläche im Bootstrap zur Verfügung:

  • Standard: Dies ist die Standardschaltfläche.
  • Primär: Definiert das visuelle Gewicht und die primäre Aktion im Tastensatz.
  • Erfolg: Es definiert eine Erfolgsmeldung, wenn die Aktion erfolgreich abgeschlossen wird.
  • Die Info: Wird zum Definieren von Informationswarnmeldungen verwendet.
  • Warnung:Warnung des Benutzers vor Risiken bei der Verwendung des zugehörigen Elements auf der Webseite.
  • Gefahr: Zeigt Vorsicht an, wenn es auf der Webseite eine negative Aktion gibt.

Das folgende Beispiel zeigt, wie Standardschaltflächen angepasst werden:

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Default Buttons Example</h2>
<button type="button"  >Default Button</button>
<button type="button"  >Primary Button</button>
<button type="button"  >Success Button</button>
<button type="button"  >Informational Button</button>
<button type="button"  >Warning Button</button>
<button type="button"  >Danger Button</button>
</div>
</body>
</html>

Das obige Skript spezifiziert verschiedene Arten von Schaltflächen, die im Bootstrap verfügbar sind, wodurch unterschiedliche Stile für die Schaltflächen definiert werden.

  • Führen Sie die Bootstrap-Standardschaltflächen-Demo aus

Beispiel für Standardschaltflächen

Größen von Schaltflächen ändern

Der Bootstrap bietet die Möglichkeit, die Größe von Schaltflächen mithilfe zusätzlicher Klassen zu ändern .btn-lg, .btn-sm Und .btn-xs. Das folgende Beispiel zeigt, wie Sie verschiedene Größen von Schaltflächen auf der Webseite definieren:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Large Buttons</h2>
	<button type="button"  >Default Button</button>
	<button type="button"  >Primary Button</button>
	<button type="button"  >Success Button</button>
	<button type="button"  >Informational Button</button>
	<button type="button"  >Warning Button</button>
	<button type="button"  >Danger Button</button>
<hr>
<h2>Small Buttons</h2>
	<button type="button"  >Default Button</button>
	<button type="button"  >Primary Button</button>
	<button type="button"  >Success Button</button>
	<button type="button"  >Informational Button</button>
	<button type="button"  >Warning Button</button>
	<button type="button"  >Danger Button</button>
<hr>
<h2>Extra Small Buttons</h2>
	<button type="button"  >Default Button</button>
	<button type="button"  >Primary Button</button>
	<button type="button"  >Success Button</button>
	<button type="button"  >Informational Button</button>
	<button type="button"  >Warning Button</button>
	<button type="button"  >Danger Button</button>
</div>
</body>
</html>

Der obige Code verwendet die Klassen .btn-lg, .btn-sm und .btn-xs, um verschiedene Größen von Schaltflächen zu definieren. Die Klasse .btn-lg wird zum Erstellen großer Schaltflächen verwendet, die Klasse .btn-sm zum Erstellen kleiner Schaltflächen und die Klasse .btn-xs zum Erstellen besonders kleiner Schaltflächen auf der Webseite.

  • Führen Sie Bootstrap aus Demo zum Ändern der Tastengröße

Beispiel für große Tasten
Beispiel für kleine Knöpfe
Beispiel für extra kleine Knöpfe

Schaltflächen auf Blockebene

Mithilfe der Klasse können wir Schaltflächen auf Blockebene verwenden, um die gesamte Breite des Containers zu nutzen, in dem sich die Schaltfläche befindet .btn-Block. Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Block Level Buttons</h2>
<button type="button"  >Default Button</button>
<button type="button"  >Primary Button</button><hr>
<button type="button"  >Success Button</button>
<button type="button"  >Informational Button</button><hr>
<button type="button"  >Warning Button</button>
<button type="button"  >Danger Button</button>
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Demo zu Blockebenenschaltflächen

Beispiel für extra kleine Knöpfe

Aktiver Zustand

Die Schaltflächen sind aktiv, wenn sie als gedrückt angezeigt werden, mit dunklerem Rand und eingefügtem Schatten. Dies kann mithilfe von erfolgen .aktiv auf Knopf. Wir könnten auch ein Ankerelement verwenden, um zu zeigen, dass es aktiviert ist. Das Folgende ist ein Beispiel:

]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
  <link rel="stylesheet" type="text/css" href="myclass.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Active Buttons</h2>
	<button type="button"  >default Button</button>
	<button type="button"  >primary Button</button>
	<button type="button"  >success Button</button><hr>
	<a href="#"  >link one</button></a>
	<a href="#"  >link second</button></a>
	<a href="#"  >link three</button></a>
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Demo zu aktiven Schaltflächen

Beispiel für aktive Schaltflächen

Behinderter Zustand

Wir können die Schaltfläche deaktivieren, indem wir verwenden deaktiviert Attribut für Schaltflächen. Wenn eine Schaltfläche deaktiviert ist, erscheint sie abgeblendet und reagiert nicht auf Benutzereingaben. Um die Schaltfläche zu deaktivieren, schreiben wir „disabled=“disabled“ in das Schaltflächenelement. Wir können in dieses Feld keinen Wert eingeben. Das Folgende ist ein Beispiel:

 <!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Disabled Buttons</h2>
	<button type="button"   disabled="disabled">Default Button</button>
	<button type="button"   disabled="disabled">Primary Button</button><hr>
	<button type="button"   disabled="disabled">Success Button</button>
	<button type="button"   disabled="disabled">Informational Button</button><hr>
	<button type="button"   disabled="disabled">Warning Button</button>
	<button type="button"   disabled="disabled">Danger Button</button>
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Demo zu deaktivierten Tasten

Beispiel für deaktivierte Schaltflächen

Schaltflächen-Tags

Wir können auch Button-Klassen mit verwenden , oder Elemente, um Schaltflächen als Tags zu verwenden. Es wird empfohlen, es nur mit zu verwenden Element, um browserübergreifendes Rendern sicherzustellen. Das Folgende ist ein Beispiel:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Button Tags</h2>
	<a href="#"  >link one</button></a>
	<a href="#"  >link second</button></a><hr>
	<button   type="submit">Button one</button>
	<button   type="submit">Button two</button><hr>
	<input   type="button" value="This is input">
	<input   type="submit" value="This is submit">
</div>
</body>
</html>

Beispiel für Schaltflächen-Tags

Kommentar verfassen

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

Nach oben scrollen