Bootstrap ボタングループの詳細な紹介-htmlチュートリアル-php.cn

Web ページでの単一のボタンの使用は、ビジネスニーズを満たさない場合があります。リッチテキストエディターの一連の小さなアイコンボタンなど、複数のボタンが一緒に使用されていることがよくあります。この記事では、Bootstrap ボタングループの使い方を詳しく紹介します

ボタングループは、ドロップダウンメニューコンポーネントと同様に、適切に機能するには button.js プラグインに依存する必要があります。ただし、bootstrap.js ファイルのみを直接呼び出すこともできます。このファイルには button.js プラグイン機能が統合されているため

同様に、Bootstrap のコンポーネントインタラクションエフェクトはすべて jQuery ライブラリによって記述されたプラグインに依存しているため、bootstrap.js を使用してエフェクトを生成する前に jquery.js をロードする必要があります

。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css?1.1.11" rel="stylesheet"></head><body><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js?1.1.11"></script></body></html>

ログイン後にコピー

基本的な使い方

ボタングループの構造はとてもシンプルです。「btn-group」というコンテナを使用し、このコンテナに複数のボタンを配置します

スクリーンリーダーユーザーにボタンの正しいグループを伝えるには、適切な role 属性を指定する必要があります。ボタングループの場合は role="group"、ツールバーの場合は role="toolbar" である必要がありますrole 属性。对于按钮组合，应该是 role="group"，对于toolbar（工具栏）应该是 role="toolbar"

　　此外，按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的 role 属性，但是大多数辅助技术将不会正确的识读他们。可以使用 aria-label

さらに、ボタングループとツールバーは次のようにする必要があります。明示的なラベルタグを定義すると、正しい role 属性を設定しても、ほとんどの支援技術はそれらを正しく読み取りません。 aria-label または aria-labelledby を使用できます

<button> 要素に加えて、ラベルなどの他のラベル要素も使用できます。唯一確認すべきことは、どのようなタグが使用されているかに関係なく、「.btn-group」コンテナ内のタグ要素にはクラス名「.btn」が必要であるということです

<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-fast-backward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button></div>

ログイン後にコピー

ボタンツールバー

リッチテキスト編集の場合ブラウザでは、ボタングループをグループ化します。たとえば、グループを左揃え、中央揃え、右揃え、および両端揃えでコピー、切り取り、貼り付けます。 Bootstrap フレームワークのボタンツールバーでも、このような作成方法が提供されています。ボタングループ「btn-group」を、グループごとに大きなコンテナ「btn-toolbar」に配置するだけです

<div class="btn-toolbar">
  <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
  </div>
  <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
  </div>
  <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
  </div>
  <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
  </div></div>

ログイン後にコピー

。フォームボタンを紹介するブログ投稿では、ボタンが btn-lg、btn-sm、btn-xs の 3 つのクラス名を使用して、padding、font-size、line-height、border-radius の属性値を変更して調整していることがわかります。ボタンのサイズ。次に、同様の方法を使用してボタングループのサイズを決定することもできます:

☑ .btn-group-lg: 大きなボタングループ

☑ .btn-group-sm: 小さなボタングループ

☑ .btn-group -xs: 超小型のボタングループ

異なるサイズのボタングループを取得するには、「.btn-group」クラス名に対応するクラス名を追加するだけです

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <button type="button" class="btn btn-default">3</button></div><div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <button type="button" class="btn btn-default">3</button></div><div class="btn-group btn-group-sm">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <button type="button" class="btn btn-default">3</button></div><div class="btn-group btn-group-xs">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <button type="button" class="btn btn-default">3</button></div>

ログイン後にコピー

ネストされたグループ化

ナビゲーションメニューと同様の効果を実現するために、ドロップダウンメニューと通常のボタングループを一緒に配置することがよくあります。使用するときは、元のドロップダウンメニューの「ドロップダウン」コンテナを「btn-group」に変更し、縦に並べられた通常のボタン

<div class="btn-group">
  <button class="btn btn-default" type="button">首页</button>
  <button class="btn btn-default" type="button">产品展示</button>
  <button class="btn btn-default" type="button">案例分析</button>
  <button class="btn btn-default" type="button">联系我们</button>
  <div class="btn-group">  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们 <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="##">公司简介</a></li><li><a href="##">企业文化</a></li><li><a href="##">组织结构</a></li><li><a href="##">客服服务</a></li></ul>
  </div></div>

ログイン後にコピー

と同じレベルに配置するだけです。

デフォルトでは、ボタングループは水平方向に表示されます。しかし、実際のアプリケーションでは、常に垂直表示の影響に遭遇することになります。このスタイルは、Bootstrap フレームワークでも提供されます。水平グループ化の「btn-group」クラス名を「btn-group-vertical」に変更するだけです

<div class="btn-group-vertical">
  <button class="btn btn-default" type="button">首页</button>
  <button class="btn btn-default" type="button">产品展示</button>
  <button class="btn btn-default" type="button">案例分析</button>
  <button class="btn btn-default" type="button">联系我们</button>
  <div class="btn-group">  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="##">公司简介</a></li><li><a href="##">企业文化</a></li><li><a href="##">组织结构</a></li><li><a href="##">客服服务</a></li></ul>
  </div></div>

ログイン後にコピー

イコールボタン

イコールボタンの効果はモバイル側で特別で実用的です。ボタングループ全体の幅はコンテナーの 100% であり、ボタングループ内の各ボタンはコンテナー全体の幅を均等に分割します。たとえば、ボタングループに 5 つのボタンがある場合、各ボタンの幅は 20%、ボタンが 4 つある場合、各ボタンの幅は 25% などになります

均等に分割されたボタンともよく呼ばれます。アダプティブグループボタンの実装も非常に簡単です。ボタングループ「btn-group」にクラス名「btn-group-justified」を追加するだけです。それをテーブル (display:table) に変換し、内部のボタンをテーブルセル (display:table-cell) にシミュレートします

[注] 等しいボタングループを作成する場合は、タグ要素を使用してボタンを作成するようにしてください。 <button> タグ要素を使用する場合、display:table の使用は一部のブラウザではフレンドリーではないためです

.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-cell と table-cell を設定します。 margin を設定できず、境界線を削除するためにコード内で -margin 値が設定されていますが、これは明らかに効果がありません。したがって、重複した境界線を削除するコードは、テーブルの境界線をマージする必要があります - border-collapse: Collapse

<div class="btn-group btn-group-justified"><a class="btn btn-default" href="#">首页</a><a class="btn btn-default" href="#">产品展示</a><a class="btn btn-default" href="#">案例分析</a><a class="btn btn-default" href="#">联系我们</a></div>

ログイン後にコピー

　　为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中。因为大部分的浏览器不能将CSS 应用到对齐的 <button> 元素上，但是，可以用按钮式下拉菜单来解决这个问题

<div class="btn-group btn-group-justified"><div class="btn-group" role="group"><button class="btn btn-default" >首页</button></div>    <div class="btn-group" role="group"><button class="btn btn-default" >产品展示</button></div>    <div class="btn-group" role="group"><button class="btn btn-default" >案例分析</button></div>    <div class="btn-group" role="group"><button class="btn btn-default" >联系我们</button></div>    </div>

ログイン後にコピー

以上がBootstrap ボタングループの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。