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

前の言葉

基本的な使い方

ホームページ

ウェブフロントエンド

htmlチュートリアル

Bootstrapボタングループの詳細例

零下一度

Jul 03, 2017 am 11:40 AM

bootstrap ボタン

前の言葉

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 を設定します。 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 までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7339

Java チュートリアル

1627

CakePHP チュートリアル

1352

Laravel チュートリアル

1265

PHP チュートリアル

1210

Related knowledge

Eclipseにブートストラップを導入する方法 Apr 05, 2024 am 02:30 AM

5 つのステップで Eclipse に Bootstrap を導入します。 Bootstrap ファイルをダウンロードして解凍します。 Bootstrap フォルダーをプロジェクトにインポートします。ブートストラップの依存関係を追加します。 Bootstrap CSS と JS を HTML ファイルにロードします。ブートストラップの使用を開始して、ユーザーインターフェイスを強化します。

Windows 11 の電源ボタンの動作を変更する [5 つのヒント] Sep 29, 2023 pm 11:29 PM

電源ボタンは PC をシャットダウンするだけではありませんが、これはデスクトップユーザーのデフォルトのアクションです。 Windows 11 で電源ボタンの動作を変更したい場合、それは思っているよりも簡単です。物理的な電源ボタンはスタートメニューのボタンとは異なるため、以下の変更はスタートメニューの操作には影響しないことに注意してください。さらに、デスクトップかラップトップかに応じて、電源オプションが若干異なります。 Windows 11 で電源ボタンの動作を変更する必要があるのはなぜですか?コンピュータをシャットダウンするよりもスリープ状態にすることが多い場合は、ハードウェア電源ボタン (つまり、PC の物理的な電源ボタン) の動作を変更すると効果があります。同じ考え方がスリープモードや単にディスプレイをオフにする場合にも当てはまります。 Windows 11 を変更する

電源ボタンを押してもラップトップが起動しないのはなぜですか? Mar 10, 2024 am 09:31 AM

Windows ラップトップが起動しない理由はいくつか考えられます。メモリ障害、バッテリー切れ、電源ボタンの故障、またはハードウェアの問題はすべて一般的な原因です。この問題の解決に役立つ解決策をいくつか紹介します。電源ボタンを押してもラップトップの電源が入らない電源ボタンを押しても Windows ラップトップの電源がオンにならない場合は、問題を解決するために次の手順を実行してください。ラップトップは完全に充電されていますか?ハードリセットを実行してラップトップをクリーニングします。メモリを取り付け直します。透明 CMOS タイプのバッテリーを取り付けます。ラップトップを修理に持っていきます。 1] ラップトップは完全に充電されていますか?最初に行うことは、ラップトップが完全に充電されているかどうかを確認することです。バッテリーが消耗するとノートパソコンが起動しなくなる

ブートストラップメディエーション効果テスト結果をstataで読み取る方法 Apr 05, 2024 am 01:48 AM

Stata でのブートストラップ媒介効果テストの解釈手順: 係数の符号を確認します: 媒介効果の正または負の方向を決定します。検定の p 値: 0.05 未満は、仲介効果が有意であることを示します。信頼区間を確認します。ゼロが含まれていない場合は、仲介効果が有意であることを示します。中央値の p 値を比較すると、0.05 未満であるため、仲介効果の重要性がさらに裏付けられます。

アイデアをブートストラップに導入する方法 Apr 05, 2024 am 02:33 AM

IntelliJ IDEA に Bootstrap を導入する手順: 新しいプロジェクトを作成し、「Web アプリケーション」を選択します。「Bootstrap」Maven 依存関係を追加します。 HTML ファイルを作成し、ブートストラップ参照を追加します。 Bootstrap CSS ファイルへの実際のパスに置き換えます。 HTML ファイルを実行してブートストラップスタイルを使用します。ヒント: CDN を使用して、ブートストラップをインポートしたり、HTML ファイルテンプレートをカスタマイズしたりできます。

大型モデル間の1対1バトル75万ラウンド、GPT-4が優勝、Llama 3が5位にランクイン Apr 23, 2024 pm 03:28 PM

Llama3 に関しては、新しいテスト結果が発表されました。大規模モデル評価コミュニティ LMSYS は、Llama3 が 5 位にランクされ、英語カテゴリでは GPT-4 と同率 1 位にランクされました。このリストは他のベンチマークとは異なり、モデル間の 1 対 1 の戦いに基づいており、ネットワーク全体の評価者が独自の提案とスコアを作成します。最終的に、Llama3 がリストの 5 位にランクされ、GPT-4 と Claude3 Super Cup Opus の 3 つの異なるバージョンが続きました。英国のシングルリストでは、Llama3 がクロードを追い抜き、GPT-4 と並びました。この結果について、Meta の主任科学者 LeCun 氏は非常に喜び、リツイートし、

iPhone 16および16 Plusにアクションボタンが導入 Oct 03, 2023 pm 12:13 PM

iPhone16シリーズではProシリーズの画面が大型化しますが、iPhone16標準版とiPhone16Plusについては、現在発売されているiPhone15、15Plusとほぼ同じで、重量がわずかに2g増加するだけです。これは、Apple が iPhone mini を再発売する予定はなく、引き続き iPhone Plus を発売することを意味します。アクションボタンの追加 iPhone 16 には、iPhone 15 Pro シリーズのアクションボタンや新しい「キャプチャボタン」など、いくつかの新機能も追加されます。 iPhone12のカメラ縦配置に変更 iPhone16標準版とiPhone

IEブラウザでボタンが反応しない問題を解決する方法 Jan 30, 2024 am 10:48 AM

IEブラウザがWebボタンをクリックしても応答がない場合はどうすればよいですか? Web ボタンをクリックしても反応がない場合は、互換ビューで設定できます。友人が IE ブラウザを使用しているときに、Web ページ上のボタンをクリックしてもブラウザが応答しなくなり、Web ページの機能が使用できなくなりました。どのように設定すればよいでしょうか?以下に IE ブラウザをまとめました。Web ボタンをクリックしたときにブラウザが応答しない問題を解決するにはどうすればよいですか? そうでない場合は、フォローして読み続けてください。 IE ブラウザで Web ボタンをクリックしても反応しない解決方法: 1. 図に示すように、IE ブラウザを開き、操作バーの [ツール] ボタンをクリックし、[互換表示] 設定をクリックします。 2. [互換表示]設定ページで、右側の[追加]ボタンをクリックし、Webサイトを入力します。

See all articles

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

Bootstrapボタングループの詳細例

前の言葉

基本的な使い方