ブートストラップ ボタンのスタイルは何ですか?

要約: ブートストラップ ボタンのスタイルには、主に次のものが含まれます: 基本ボタン、デフォルト ボタン、メイン ボタン、成功ボタン、情報ボタン、警告ボタン、危険ボタン、リンクボタン。

1. ボタンの概要:

ボタンは、Bootstrap フレームワークの中心となるコンテンツの 1 つでもあります。 Web制作においてボタンは欠かせないものですから。

さらに、Web ページが異なればボタン スタイルも異なり、同じ Web Web サイトまたはアプリケーションでも、ボタンの色、サイズ、状態が異なるなど、複数のボタン スタイルがあります。

<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. 基本ボタン

Bootstrap Framework V3 .x バージョンの基本ボタンは V2.x バージョンの基本ボタンと同じで、クラス名「btn」によって実装されます。

違いは、V3.x バージョンがはるかにシンプルで、テキスト シャドウやグラデーション背景 (背景のグラデーション)、境界線のシャドウなど、V2.x バージョンの CSS3 の多くの特殊効果が削除されていることです。 (ボックスシャドウ)など。
Bootstrap フレームワークは、異なるブラウザーの解析の違いを考慮し、ボタンの効果が異なるブラウザーでも基本的に同じになるように、比較的安全な互換性処理を実行します。

ソース コードについては、bootstrap.css ファイルの 1992 行目から 2010 行目を参照してください:

Bootstrap フレームワークのボタンは非常に簡単に使用でき、使用方法は次のとおりです。

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

3. デフォルトボタン

Bootstrap フレームワークは、最初に基本クラス名「.btn」を渡して基本的なボタン スタイルを定義し、次に「.btn-default」でデフォルトのボタン スタイルを定義します。

デフォルトのボタン スタイルは、基本的なボタン スタイルに基づいており、背景色、境界線色、テキスト色が変更されています。

ソース コードについては、bootstrap.css ファイルの 2040 行目から 2044 行目を参照してください。

デフォルト ボタン スタイル の使用も非常に簡単で、基本的なボタンを追加するだけです。 button "btn" 基本的にはクラス名 "btn-default" を追加するだけです:

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

4. マルチラベルのサポート (複数のラベル作成ボタン)

一般的な制作 ボタンでは、 タグ要素の使用に加えて、 タグや タグなども使用できます。

同様に、Bootstrap フレームワークでボタンを作成する場合、先ほど説明したラベル要素に加えて、他のラベル要素でもボタンを使用できます。ボタン作成時のlabel要素にクラス名「btn」を追加します。

追加しない場合、ボタンの効果はありません。

<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>

ボタン スタイルはブートストラップ フレームワークの任意のラベル要素を使用して実現できますが、個人的にはこのフレームワークで使用することはお勧めしません。ブラウザの互換性の問題を避けるために、button または a タグを使用してボタンを作成することを強くお勧めします。

5. さまざまなスタイルのボタンをカスタマイズする

ボタンの概要の冒頭で述べたように、Web ページにはさまざまなボタン スタイルがある場合があります。次に、Bootstrap フレームワークも考慮されます。

Bootstrap フレームワークにはデフォルトのボタン スタイルに加えて、他に 6 つのボタン スタイルがあります。各スタイルは実際には同じです。違いは、ボタンの背景色、境界線の色、テキストの色です。

Bootstrap フレームワークのさまざまなボタン スタイルは、さまざまなクラス名を通じて実装されます。使用中、開発者はさまざまなクラス名を選択するだけで済みます:

使い方は非常に簡単で、前に紹介したデフォルトのボタンと同じように、対応する を基本ボタン「.btn」クラス名 に追加するだけで、必要な値を取得できます。ボタンスタイル。例:

<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>

 

以上がブートストラップ ボタンのスタイルは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。