ホームページ > 記事 > ウェブフロントエンド > ブートストラップ学習ボタンコンポーネント (1)
ブートストラップ学習ボタンコンポーネント (1)
- 青灯夜游転載
- 2021-03-08 09:58:301859ブラウズ
この記事では、Bootstrap のボタン コンポーネントについて紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
関連する推奨事項: 「bootstrap チュートリアル 」
ボタン グループも独立したコンポーネントなので、対応するソースを見つけることができます。コードファイル:
Less: button.less
Sass:_buttons.scss
Css:Bootstrap.css 3131 行 ~ 3291 行
ボタングループとドロップダウン メニュー コンポーネント 同様に、適切に機能するには button.js プラグインに依存する必要があります。
構造的な側面: btn-group というクラス名のコンテナーを使用し、このコンテナー内に複数のボタンを配置します。
<div> <button> <span></span> </button> … <button> <span></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;
}
ボタン グループの 4 つの角は、最初と最後のボタンには角があり、角が丸いことを除いて、その他のボタンには角が丸いものはありません。
詳細説明:
1. デフォルト: すべてのボタンは角丸になります
2. 最初のボタンと最後のボタンを除き、他のボタンの角の丸めは解除されます
3. 最後のボタンの右上隅と右下隅のみが丸くなっています
ソース コード:
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group > .btn:first-child {
margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
ボタン グループ ツールバー
リッチ テキスト エディターで、グループのコピー、切り取り、貼り付け、左揃え、中央揃え、右揃え、両端揃えなど、ボタン グループをまとめて配置するには、ブートストラップ フレーム ボタン ツールを使用する必要があります。 .Bar btn-toolbar
<div> <div> … </div> <div> … </div> <div> … </div> <div> … </div> </div>
原則: 主に、container.btn-group 要素の複数のグループをフローティングにし、グループ間の左マージンを 5 ピクセル維持します
.btn-toolbar {
margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
margin-left: 5px;
}
btn のフロートをクリアすることに注意してください。 -toolbar
.btn-toolbar:before,
.btn-toolbar:after｛
display: table;
content: " ";
｝
.btn-toolbar:after{
clear: both;
}
例:
<div> <div> <button> <span></span> </button> <button> <span></span> </button> <button> <span></span> </button> <button> <span></span> </button> </div> <div> <button> <span></span> </button> <button> <span></span> </button> </div> </div>
ボタンのネストされたグループ化
多くの場合、ドロップダウン メニューをごく普通のボタン グループに配置します。これらを組み合わせて、ナビゲーション メニューと同様の効果を実現します。
これを使用する場合は、ドロップダウンの作成に使用されたドロップダウン コンテナーのクラス名を置き換えるだけで済みます。メニューを btn-group に変更し、通常のボタンと同じレベルに配置します。
<div> <button>首页</button> <button>产品展示</button> <button>案例分析</button> <button>联系我们</button> <div> <button> 关于我们<span></span> </button> <ul> <li><a>公司简介</a></li> <li><a>企业文化</a></li> <li><a>组织结构</a></li> <li><a>客服服务</a></li> </ul> </div> </div>
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-box-shadow: none;
box-shadow: none;
}
ボタンの垂直グループ化
水平グループのクラス名 .btn-group を置き換えるだけです。 .btn-group- を使用すると、垂直方向になります。
<div> <button>首页</button> <button>产品展示</button> <button>案例分析</button> <button>联系我们</button> <div> <button> 关于我们<span></span> </button> <ul> <li><a>公司简介</a></li> <li><a>企业文化</a></li> <li><a>组织结构</a></li> <li><a>客服服务</a></li> </ul> </div> </div>
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
均等に分割されたボタンは、アダプティブ グループ ボタンとも呼ばれます:
ボタン グループ全体の幅はコンテナーの 100% であり、ボタン グループ内の各ボタンはコンテナ全体の幅を均等に分割します。たとえば、ボタン グループに 5 つのボタンがあり、各ボタンはコンテナの幅の 20% です。ボタン グループに 4 つのボタンがあり、各ボタンは 25% です。コンテナの幅;
実装方法: ボタン group.btn-group にクラス名 .btn-group-justified
<div> <buttton>首页</buttton> <buttton>案例分析</buttton> <buttton>联系我们</buttton> <buttton>关于我们</buttton> </div>
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group-justified > .btn-group .btn {
width: 100%;
}
を追加するだけで .btn-group-justified をシミュレートできます。をテーブル (表示: table) に配置し、ボタン テンプレートをテーブル セルとしてシミュレートします (表示: table-cell)。
注: 等しいボタン グループを作成する場合は、 タグを使用してボタンを作成するようにしてください。ボタン タグ要素を使用する場合、一部のブラウザでは display: table の使用が適切ではないためです。
プログラミング関連の知識については、プログラミング入門をご覧ください。 ！
以上がブートストラップ学習ボタンコンポーネント (1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。