Welche Arten von Bootstrap-Buttons gibt es?

Zusammenfassung: Die Hauptstile von Bootstrap-Schaltflächen sind: Basisschaltfläche, Standardschaltfläche, Hauptschaltfläche, Erfolgsschaltfläche, Informationsschaltfläche, Warnschaltfläche, Gefahr Schaltfläche, Link-Schaltfläche.

1. Einführung in Schaltflächen:

Schaltflächen gehören ebenfalls zu den Kerninhalten des Bootstrap-Frameworks. Denn Buttons sind in der Webproduktion unverzichtbar.

Und verschiedene Webseiten haben unterschiedliche Schaltflächenstile, und sogar dieselbe Website oder Anwendung verfügt über mehrere Schaltflächenstile, z. B. unterschiedliche Schaltflächenfarben, -größen und -zustände.

<button class="btn" type="button">基础按钮.btn</button>  
   <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
   <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
   <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
   <button class="btn btn-info" type="button">信息按钮.btn-info</button> 
   <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
   <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
   <button class="btn btn-link" type="button">链接按钮.btn-link</button>

　

2. Grundlegende Schaltflächen

Bootstrap Framework V3 Die Grundschaltflächen der .x-Version sind dieselben wie die Grundschaltflächen der V2.x-Version und werden über den Klassennamen „btn“ implementiert.

Der Unterschied besteht darin, dass die V3.x-Version viel einfacher ist und in V2 eine große Anzahl von Spezialeffekten, Randschatten (Box-Shadow) usw. vorhanden ist.
Das Bootstrap-Framework berücksichtigt die Analyseunterschiede verschiedener Browser und führt eine relativ sichere Kompatibilitätsverarbeitung durch, sodass die Schaltflächeneffekte in verschiedenen Browsern grundsätzlich gleich sind.

Den Quellcode finden Sie in den Zeilen 1992 bis 2010 der Datei bootstrap.css:

Die Schaltflächen des Bootstrap-Frameworks sind sehr einfach zu verwenden. Die Verwendungsmethode ist wie folgt:

<button class="btn" type="button">我是一个基本按钮</button>

　

3. Standardschaltfläche

Das Bootstrap-Framework übergibt zunächst den Basisklassennamen „.btn“, der einen grundlegenden Schaltflächenstil definiert, und anschließend definiert „.btn-default“ einen Standardschaltflächenstil.

Der Standard-Schaltflächenstil basiert auf dem grundlegenden Schaltflächenstil mit modifizierter Hintergrundfarbe, Rahmenfarbe und Textfarbe.

Den Quellcode finden Sie in den Zeilen 2040 bis 2044 der Bootstrap.css-Datei.

Die Verwendung des Standardschaltflächenstils ist ebenfalls sehr einfach. Fügen Sie einfach die Basis hinzu Schaltfläche „btn“ Fügen Sie im Grunde einfach den Klassennamen „btn-default“ hinzu:

<button class="btn btn-default" type="button">默认按钮</button>

　

4. Multi-Label-Unterstützung (mehrere Etikettenproduktionsschaltflächen)

Allgemeine Produktion Zusätzlich zur Verwendung des -Tag-Elements können Schaltflächen auch -Tags usw. verwenden.

Ebenso können Sie beim Erstellen von Schaltflächen im Bootstrap-Framework diese zusätzlich zu den gerade erwähnten Beschriftungselementen auch für andere Beschriftungselemente verwenden. Das einzige, worauf Sie achten müssen, ist, dass Sie die verwenden müssen Fügen Sie beim Erstellen der Schaltfläche den Klassennamen „btn“ hinzu.

Wenn Sie es nicht hinzufügen, gibt es keinen Schaltflächeneffekt.

<button class="btn btn-default" type="button">button标签按钮</button><input type="submit" class="btn btn-default" value="input标签按钮"/><a href="##" class="btn btn-default">a标签按钮</a><span class="btn btn-default">span标签按钮</span><p class="btn btn-default">p标签按钮</p>

　

Obwohl der Schaltflächenstil durch die Verwendung eines beliebigen Beschriftungselements im Bootstrap-Framework erreicht werden kann, empfehle ich persönlich diese Verwendung nicht Um dies zu vermeiden, empfehle ich dringend, aus Gründen der Browserkompatibilität die Tags button oder a zum Erstellen von Schaltflächen zu verwenden.

5. Passen Sie Schaltflächen verschiedener Stile an Wie zu Beginn der Einführung zu Schaltflächen erwähnt, können Webseiten unterschiedliche Schaltflächenstile haben. Dann kommt auch das Bootstrap-Framework in Betracht.

Zusätzlich zum Standard-Schaltflächenstil gibt es im Bootstrap-Framework sechs weitere Schaltflächenstile. Jeder Stil ist tatsächlich derselbe. Der Unterschied besteht in der Hintergrundfarbe, der Rahmenfarbe und der Textfarbe der Schaltfläche.

Verschiedene Schaltflächenstile im Bootstrap-Framework werden durch unterschiedliche Klassennamen implementiert. Während der Verwendung müssen Entwickler lediglich unterschiedliche Klassennamen wählen:

　

　

Es ist sehr einfach zu verwenden, genau wie die zuvor eingeführte Standardschaltfläche. Sie müssen nur das entsprechende

zur Basisschaltfläche „.btn“ hinzufügen. Klassenname

, Sie können das gewünschte erhalten Knopfstil. Zum Beispiel:

<button class="btn" type="button">基础按钮.btn</button><button class="btn btn-default" type="button">默认按钮.btn-default</button><button class="btn btn-primary" type="button">主要按钮.btn-primary</button><button class="btn btn-success" type="button">成功按钮.btn-success</button><button class="btn btn-info" type="button">信息按钮.btn-info</button><button class="btn btn-warning" type="button">警告按钮.btn-warning</button><button class="btn btn-danger" type="button">危险按钮.btn-danger</button><button class="btn btn-link" type="button">链接按钮.btn-link</button>

六、按钮大小

　　在Bootstrap框架中，对于按钮的大小，也是可以定制的。类似于input一样，通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。

　　在Bootstrap框架中提供了三个类名来控制按钮大小：

　　

　　 从上表中不难发现，在Bootstrap框架中控制按钮的大小都是通过修改按钮的padding、line-height、font-size和border-radius几个属性。

　　 源码查阅bootstrap.css文件中第2319行～第2339行

　　 那么在实际使用中，这几个类名可以配合按钮中其他颜色类名一起使用，但唯一一点不能缺少“.btn”类名：

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> 
    <button class="btn btn-primary" type="button">正常按钮</button>
    <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

　　

 

 

 

 

 

七、块状按钮

　　Bootstrap框架中提供了一个类名“btn-block”。

　　按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。

　　具体源码请查阅bootstrap.css文件第2340行～第2353行：

　　使用方法和前面的类似，只需要在原按钮类名上添加“.btn-block”类名，当然“.btn”类名是不可或缺的：

<button class="btnbtn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button><button class="btnbtn-primary btn-block" type="button">正常按钮</button><button class="btnbtn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button><button class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

　　

 

 

 

 

八、按钮状态——活动状态

　　Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种：活动状态和禁用状态。

　　Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。

　　源码请查看bootstrap.css文件第2011行～第2029行

　　不同风格下的按钮都具有这几种状态效果，只是颜色做了一定的调整，我们以默认风格（btn-default）为例：

　　源码请查看bootstrap.css文件第2045行～第2058行

　　当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于

元素是通过“:active”伪类实现，而对于这样的标签元素则是通过添加类名“.active”来实现。

<button class="btn" type="button">基础按钮.btn</button>  
   <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
   <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
   <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
   <button class="btn btn-info" type="button">信息按钮.btn-info</button> 
   <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
   <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
   <button class="btn btn-link" type="button">链接按钮.btn-link</button>

 

 

 

 

 

九、按钮状态——禁用状态

　　和input等表单控件一样，在Bootstrap框架的按钮中也具有禁用状态的设置。

　　禁用状态与其他状态按钮相比，就是背景颜色的透明度做了一定的处理，opcity的值从100%调整为65%。

　　在Bootstrap框架中，要禁用按钮有两种实现方式：　　

　　　　方法1：在标签中添加disabled属性

　　　　方法2：在元素标签中添加类名“disabled”

　　两者的主要区别是：

　　　　“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。

　　　　如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。

　　　　对于标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。

　　　　而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button><button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button><button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按钮</button>

 

Das obige ist der detaillierte Inhalt vonWelche Arten von Bootstrap-Buttons gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!