ホームページ > 記事 > ウェブフロントエンド > Bootstrapボタングループの詳細例
Bootstrapボタングループの詳細例
- 零下一度オリジナル
- 2017-07-03 11:40:291469ブラウズ
前の言葉
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>
<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>
<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>
<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>
<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>
.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 を設定します。 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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。