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

ブートストラップ ボタンは次のとおりです: 1. タグ、構文 ""; 2. ボタン タグ、構文 ">" ;"; 3. ボタンタイプの入力タグ、構文「」。

このチュートリアルの動作環境: Windows 7 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター

ブートストラップ ボタン可能性があるもの: label 、 button タグ、ボタン タイプの input タグ

##1.btn class

基本ボタン クラス、追加tag、button tag、button type input タグは、ブートストラップの下で基本的なボタン スタイルに変換されます。

<div style="margin-bottom:15px">
  <a href="#">查看评论</a>
  </div>
  <div style="margin-bottom:15px">
  <button type="submit">结账</button>
  </div>
  <div style="margin-bottom:15px">
  <input type="button" value="设置">
  </div>

ラベル、ボタン ラベル、およびボタン タイプ入力ラベルの元のスタイル

は、ラベル、ボタン ラベル、およびボタン タイプ入力に使用されますラベル。

ブートストラップのデフォルトのボタン スタイルを上記のタグに追加します。

<div   style="max-width:90%">
  <a class="btn" href="#">查看评论</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn" type="submit">结账</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn" type="button" value="设置">
  </div>

a ラベル、ボタン ラベル、ボタン タイプ入力ラベルは、btn クラス

2 の後のスタイルを設定します。btn-primary クラス、btn - info クラス、btn-success クラス、btn-warning クラス、btn-danger クラス、btn-inverse クラス

<div style="margin-bottom:15px">
  <a class="btn btn-primary" href="#">.btn .btn-primary</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-info" type="submit">.btn .btn-info</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn btn-success" type="button" value=".btn .btn-success">
  </div>
  <div style="margin-bottom:15px">
  <a class="btn btn-warning" href="#">.btn .btn-warning</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-danger" type="submit">.btn .btn-danger</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn btn-inverse" type="button" value=".btn .btn-inverse">
  </div>

.btn .btn-*ボタン スタイル

3. btn-large クラス、btn-small クラス、btn-mini class

はラベル サイズの設定に使用されるようです。うまくいかない 。

 <div style="margin-bottom:15px">
  <a class="btn btn-primary btn-large" href="#">.btn .btn-primary</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-info btn-small" type="submit">.btn .btn-info</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn btn-success btn-mini" type="button" value=".btn .btn-success">
  </div>

btn-large クラス、btn-small クラス、btn-mini クラス使用後のスタイル

4. i タグ

は、ボタンにアイコンを追加するためにボタン ラベル内で使用されます。うまくいきませんでした。

<div style="margin-bottom:15px">
  <a class="btn btn-primary btn-large" href="#"><i class="icon-comment icon-white"></i> 查看评论</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-info btn-small" type="submit"><i class="icon-shopping-cart"></i> 结账</button>
  </div>

i タグ追加後のスタイル

5. ボタン グループ

-btn -groupクラス: ボタンのグループを含めるために使用されます。
-btn-toolbar クラス: 複数のボタン グループをスペースを挟んで並べて表示するために使用されます。

<div class="btn-toolbar">
  <div class="btn-group">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</button>
  </div>
  
  <div class="btn-group">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</button>
  </div>
 </div>

6. ドロップダウン メニューを持つボタン

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">字体<span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="#">黑体</a></li>
  <li><a href="#">宋体</a></li>
  <li><a href="#">仿宋</a></li>  
  </ul>
  </div>

div タグ: ドロップを含めるために使用されます。 -down menu メニュー ボタンとドロップダウン メニュー。
-btn-group class
a タグ: ドロップダウン メニューのあるボタン。スパン タグとボタン名を含めることができます。
-dropdown-toggle クラス: ドロップダウン メニュー ボタンにスタイルを追加します。
-data-toggle 属性:
data-toggle="dropdown" を設定した後、ボタンをクリックしてドロップダウン メニューのポップアップと折りたたみを制御できます。
span タグ
-caret クラス: 三角形のドロップダウン ロゴを追加します
ul タグ: ドロップダウン メニューのコンテンツが含まれます
-dropdown-menu class
li タグ: それぞれが含まれますlist item

ドロップダウン メニュー付きボタン

<div class="btn-group">
   <a class="btn" href="#">字体</a>
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="#">黑体</a></li>
  <li><a href="#">宋体</a></li>
  <li><a href="#">仿宋</a></li>  
  </ul>
  </div>

ボタン名を抽出し、別の a タグに入れます。

小さな三角形はドロップダウン メニューを個別に制御します

[関連する推奨事項: 「ブートストラップ チュートリアル」]

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