"; 2. ボタン タグ、構文 ""; 3. ボタン タイプの入力タグ, 構文「」。"/> "; 2. ボタン タグ、構文 ""; 3. ボタン タイプの入力タグ, 構文「」。">
ホームページ >ウェブフロントエンド >フロントエンドQ&A >ブートストラップ ボタンのラベルは何ですか?
ブートストラップ ボタンは次のとおりです: 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="margin-bottom:15px"> <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 サイトの他の関連記事を参照してください。