twitter-bootstrap-3
Schaltflächen in Twitter-Bootstrap-3
Suche…
Verwendung der twitter-bootstrap-Klasse "btn"
btn Klasse von Twitter-Bootstrap kann mit jedem der folgenden HTML-Elemente verwendet werden.
- Anker
- Taste
- Eingabe
with both type="button" and type="submit"
Nachfolgend finden Sie Beispiele aller möglichen Anwendungsfälle der btn Klasse
<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
btn Klasse btn kann zwar auf eine der vier oben genannten Arten verwendet werden, empfiehlt sich jedoch nach Möglichkeit, das Element <button> verwenden
Das Bild des obigen Codes ist unten beigefügt
verschiedene Tastengrößen in twitter-bootstrap-3
twitter-bootstrap-3 hat vier verschiedene Tastengrößen zur Verfügung gestellt
- Große
btn-lg - Die Standardschaltfläche
does not require any btn size - Kleine
btn-sm - Extra kleine
btn-xs
<button type="button" class="btn btn-lg">Large button</button>
<button type="button" class="btn">Default button</button>
<button type="button" class="btn btn-sm">Small button</button>
<button type="button" class="btn btn-xs">Extra small button</button>
Das Bild des obigen Codes ist unten beigefügt
Glyphicon zum Button hinzufügen
Glyphicons können in Text, Schaltflächen, Symbolleisten, Navigation, Formularen usw. verwendet werden (Quelle: W3Schools). Glyphikons sind im Grunde Symbolformen, mit denen alle oben genannten gestaltet werden können. In diesen Beispielen wird die Verwendung von Glyphicons in zwei Arten von Schaltflächen beschrieben, indem einfach ein Bereich innerhalb der Schaltflächen verwendet wird, die eine Klasse vom Typ Glyphicon haben:
HTML-Schaltfläche
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
ASP-Schaltfläche
<asp:LinkButton runat="server" CssClass="btn btn-info" >
<span class="glyphicon glyphicon-envelope"></span> Email
</asp:LinkButton>


