コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Bootstrap ボタンのコンポーネント_JavaScript スキルの詳細な説明

Bootstrap ボタンのコンポーネント_JavaScript スキルの詳細な説明

WBOY
リリース： 2016-05-16 15:04:00
オリジナル
1584 人が閲覧しました

ドロップダウン メニュー コンポーネントなどのボタン グループが正しく機能するには、button.js プラグインに依存する必要があります。

構造的側面: btn-group というクラス名のコンテナーを使用し、このコンテナーに複数のボタンを配置します 。

ボタン グループも独立したコンポーネントなので、対応するソース コード ファイルを見つけることができます:

レス: button.less

Sass:_buttons.scss

Css:Bootstrap.css 3131 行目 ～ 3291 行目

<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
…
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-forward"></span>
</button>
</div>
ログイン後にコピー

CSS:

.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
}
ログイン後にコピー

関連ラベル：
bootstrap按钮组件 bootstrap组件
ソース：php.cn
前の記事：ブートストラップは毎日追加のナビゲーション (Affix) プラグインを学習する必要がある_JavaScript スキル 次の記事：ネイティブ JS はカルーセル スタイルの画像カルーセル プラグインを実装します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ツールヒントのリンクとボタンが機能しない ツールヒント内からクリック イベントをトリガーしようとしています。クリックイベントを含むボタンを配置しましたが、機能しません。ツールチップ内に外部リンクを追加してみました。それもう...
から 2024-04-04 22:01:46
0
1
1352
jQuery.remove() および array.splice() の問題 アイテムのリストと買い物リストを含むページがあります。アイテムのリストから x 個のアイテムをショッピング リストに追加する場合は、ショッピング リスト内のアイテムをクリックし、そ...
から 2024-04-04 17:21:35
0
1
347
JavaScript のクリップボード データ API 機能を貼り付ける際のエラー Uncaught TypeError: 未定義のプロパティを読み取れません (「getData」の読み取り) HTML ボタンのコードは次のとおりです。ボタンには単純な onclick 関数を、2 番目のボタンにはイベント <buttononclick="myFunctio...
から 2024-04-04 10:23:52
0
1
335
奥まったものを取り除くのに苦労する 私の Vue コンポーネントは、オブジェクト内のオブジェクトを使用して要素を表示します。ページ上のボタンをクリックすると、ネストされたオブジェクトの 1 つを削除したいと考えていま...
から 2024-04-03 21:48:14
0
1
302
jsxモジュールにインポートされたReact CSSが適用されない 次のように CSS ファイルをインポートします: importstylesfrom "./Documentation.module.css"; ここのスタイルを...
から 2024-04-03 18:41:07
0
1
365
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート