Bootstrap-Eingabegruppen

In diesem Tutorial wird erläutert, wie Sie Text oder Schaltflächen vor, nach oder auf beiden Seiten einer textbasierten Eingabe hinzufügen. Der Bootstrap stellt die Klasse bereit .Eingabegruppe mit einem .input-group-addon Klasse zum Voranstellen oder Anhängen von Text in a .form-control. Um Vor- oder Nachelemente in ein Formularsteuerelement einzufügen, verwenden wir einfach die Klasse input-group innerhalb des div-Elements und platzieren den Inhalt innerhalb eines -Tags, indem wir die Klasse input-group-addon innerhalb desselben div-Elements verwenden.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Das Folgende ist ein Beispiel für die Implementierung der Schaltflächengruppen:

Bootstrap-Eingabegruppen

<!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>Basic Input Group</h2>
<div  >
   <span  >#</span>
   <input type="text"   placeholder="Number">
</div><br>
<div  >
   <input type="text"   placeholder="Number">
   <span  >#</span>
</div><br>
<div  >
   <span  >#</span>
   <input type="text"  >
   <span  >$</span>
</div>
</div>
</body>
</html>

Wie im Skript gezeigt, verwenden wir die Klassen .Eingabegruppe Und .input-group-addon innerhalb des div-Elements, um Elemente an a voranzustellen oder anzuhängen Formularkontrolle. Wir können der Benutzereingabe beliebige Arten von Elementen hinzufügen. Im obigen Skript haben wir „#“ für die Nummer verwendet. Alternativ kann je nach Benutzerwunsch für die Anwendung auch etwas anderes verwendet werden.

  • Führen Sie die Bootstrap Basic Input Group-Demo aus

Beispiel für eine einfache Bootstrap-Eingabegruppe

Bootstrap-Größe der Eingabegruppe

Mithilfe von können wir Eingabegruppen mit unterschiedlichen Größen erstellen, z. B. größer, kleiner oder besonders kleiner .input-group-lg, .input-group-sm Und .input-group-xs Klassen. 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>Sizing Input Group</h2>
<div  >
   <span  >#</span>
   <input type="text"   placeholder="Number">
</div><br>
<div  >
   <span  >#</span>
   <input type="text"   placeholder="Number">
</div><br>
<div  >
   <span  >#</span>
   <input type="text"   placeholder="Number">
</div>
</div>
</body>
</html>
  • Führen Sie Bootstrap aus Sizing Input Group Demo

Beispiel für eine Eingabegruppe für die Bootstrap-Größenanpassung

Bootstrap-Kontrollkästchen und Radio-Add-ons

Wir können Kontrollkästchen und Optionsfelder im Add-on der Eingabegruppe platzieren. Wir können vor oder nach Kontrollkästchen oder Optionsfeldern anstelle von Text platzieren, 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>Checkboxes and Radio Addons</h2>
<div  >
   <span  >
   <input type="checkbox"></span>
   <input type="text"   placeholder="This is Checkbox">
</div><br>
<div  >
   <span  >
   <input type="radio"></span>
   <input type="text"   placeholder="This is Radio Button">
</div>
</div>
</body>
</html>

Wie im obigen Skript gezeigt, haben wir Checkbox- und Radiotypen innerhalb des Span-Elements verwendet, das mit der div-Klasse .input-group umschlossen ist.

  • Führen Sie Bootstrap aus Checkbox- und Radio-Addons-Demo

Bootstrap-Kontrollkästchen und Radio-Addons-Bild

Bootstrap-Button-Add-ons

Wie Checkbox- und Radio-Add-ons ist es auch möglich, Button-Add-ons in Eingabegruppen zu platzieren. Um Button-Add-Ons zu erstellen, müssen wir nur verwenden .input-group-btn statt zu verwenden .input-group-addon. 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>
<style>
div{
max-width:800px;
margin:0 auto;
}
</style>
</head>
<body>
<div  >
<h2>Checkboxes and Radio Addons</h2>
<div  >
   <span  >
   <button   type="button">MyButton</button></span>
   <input type="text"   placeholder="This is Button">
</div><br>
<div  >
   <input type="text"   placeholder="This is Button">
   <span  >
   <button   type="button">MyButton</button></span>
</div>
</div>
</body>
</html>

Wie im Skript gezeigt, haben wir gerade die Eingabegruppenschaltfläche mithilfe der Klasse .input-group-btn in das div-Element eingeschlossen, das die Klasse namens .input-group verwendet.

  • Führen Sie Bootstrap aus Tasten-Addons-Demo

Bootstrap Buttons Addons Bild

Bootstrap-Buttons mit Dropdowns

Es ist auch möglich, Dropdown-Menüs in Eingabegruppen zu erstellen, indem Sie einfach das Dropdown-Menü innerhalb der Klasse verwenden .input-group-btn. 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>
<style>
div{
max-width:800px;
margin:0 auto;
}
</style>
</head>
<body>
<div  >
<h2>Buttons with Dropdowns</h2>
<div  >
<div  >
     <button   type="button" data-toggle="dropdown">Country List<span  ></span></button>
   <ul  >
      <li><a href="#">India</a></li>
      <li><a href="#">Australia</a></li>
      <li><a href="#">Srilanka</a></li>
      <li><a href="#">South Africa</a></li>
      <li><a href="#">New Zealand</a></li>
   </ul>
</div>
   <input type="text"   placeholder="This is Dropdown Menu">
</div><br>

<div  >
<input type="text"   placeholder="This is Dropdown Menu">
<div  >
   <button   type="button" data-toggle="dropdown">Country List<span  ></span></button>
   <ul  >
      <li><a href="#">India</a></li>
      <li><a href="#">Australia</a></li>
      <li><a href="#">Srilanka</a></li>
      <li><a href="#">South Africa</a></li>
       <li><a href="#">New Zealand</a></li>
   </ul>
</div>
</div>
</div>
</body>
</html>

Wie im obigen Skript gezeigt, wird das Dropdown-Menü in der ersten Eingabegruppe standardmäßig auf der linken Seite und das zweite Dropdown-Menü auf der rechten Seite angezeigt, indem die Klasse .pull-right verwendet wird, die mit der definierten ul-Klasse umschlossen ist unter div-Element.

  • Führen Sie Bootstrap aus Schaltflächen mit Dropdown-Demo

Bootstrap-Schaltflächen mit Dropdown-Bild

Segmentierte Bootstrap-Schaltflächen

Wir können Schaltflächen-Dropdowns auf die gleiche Weise wie die Schaltflächen-Dropdowns segmentieren, können diese jedoch mit einer kleinen Änderung verwenden, 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>
<style>
div{
max-width:800px;
margin:0 auto;
}
</style>
</head>
<body>
<div  >
<h2>Segmented Buttons</h2>
<div  >
<div  >

   <button   type="button" data-toggle="dropdown" tabindex="-1"><span  ></span></button>
   <span  >Country List</span>
   <ul  >
      <li><a href="#">India</a></li>
      <li><a href="#">Australia</a></li>
      <li><a href="#">Srilanka</a></li>
      <li><a href="#">South Africa</a></li>
      <li><a href="#">New Zealand</a></li>
   </ul>
</div>
   <input type="text"   placeholder="This is Dropdown Menu">
</div><br>

<div  >
<input type="text"   placeholder="This is Dropdown Menu">
<div  >
   <button   type="button" data-toggle="dropdown" tabindex="-1"><span  ></span></button>
   <span  >Country List</span>
   <ul  >
       <li><a href="#">India</a></li>
       <li><a href="#">Australia</a></li>
       <li><a href="#">Srilanka</a></li>
       <li><a href="#">South Africa</a></li>
       <li><a href="#">New Zealand</a></li>
    </ul>
</div>
</div>
</div>
</body>
</html>

Das obige Skript definiert das Dropdown-Menü wie im Abschnitt „Schaltflächen-Dropdowns“ gezeigt. Wir haben es mit einer kleinen Änderung am Dropdown-Menü verwendet, wie oben erwähnt. Die sr-only-Klasse verbirgt Informationen für die Bildschirmleseprogramme. Nach der Ausführung des Skripts erhalten wir ein Dropdown-Menü mit einem Abwärtspfeil ohne Namen des Dropdown-Menüs.

  • Führen Sie Bootstrap aus Demo zu segmentierten Schaltflächen

Bild mit segmentierten Schaltflächen

Kommentar verfassen

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

Nach oben scrollen