毎日学ばなければならないブートストラップボタン_JavaScript スキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

毎日学ばなければならないブートストラップボタン_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:29 PM

bootstrapボタン

1. ボタン (ボタングループ)

Web ページでの単一のボタンの使用は、ビジネスニーズを満たさない場合があります。リッチテキストエディターの一連の小さなアイコンボタンなど、複数のボタンが一緒に使用されていることがよくあります。そこでこのセクションでは、Bootstrap フレームワークが提供するボタングループコンポーネントを主に紹介します。

ソースコードクエリ:

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

☑ LESS バージョン: 対応するソースファイルは button.less

です。

☑ Sass バージョン: 対応するソースファイルは _buttons.scss

です。

☑ CSS バージョン: bootstrap.css ファイル

の 3131 ～ 3291 行目に相当します

使用法:

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

構造としては非常にシンプルです。「btn-group」という名前のコンテナを使用し、このコンテナに複数のボタンを配置します。以下に示すように:

<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.css文件第3131行～第3161行/

.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;
}

レンダリングすると、ボタングループの四隅が丸くなっていることがわかります (CSS3 をサポートするブラウザ)。しかし、通常 Web ページを作成するときに、一部の友人から、各ボタンの角が丸くなっているのではないかと尋ねられることがあります。ボタングループの最初と最後のボタンは角が丸く、他のボタンは角が丸くありません。これはどのようにして実現されるのでしょうか。実際、実装方法は非常に簡単です:

1. すべてのボタンはデフォルトで角が丸くなっています
2. 最初のボタンと最後のボタン (ドロップダウンボタンを除く) を除き、他のすべてのボタンは角丸効果をキャンセルします
3. 最初のボタンの左上隅と左下隅のみを丸くします
4. 最後のボタンの右上隅と右下隅のみを丸くします

対応するソースコードは次のとおりです:

/bootstrap.css ファイルの 3174 ～ 3203 行目を表示/

.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;
}

2. ボタン (ボタンツールバー)

次の図に示すように、リッチテキストエディターで、ボタングループをコピー、切り取り、グループとして左揃え、中央揃え、右揃えなどで配置します。

Bootstrap フレームワークのボタンツールバーでも、そのような作成方法が提供されています。以下に示すように、ボタングループ「btn-group」を大きなコンテナ「btn-toolbar」にグループとして配置するだけです。

<div class="btn-toolbar">
 <div class="btn-group">
 …
 </div>
 <div class="btn-group">
 …
 </div>
 <div class="btn-group">
 …
 </div>
 <div class="btn-group">
 …
 </div>
</div>

実装原則は主に、コンテナの複数のグループ「btn-group」要素をフローティングにし、グループ間の左マージンを 5px 維持することです。コードは次のとおりです:

/ソースコードについては、bootstrap.css ファイルの 3162 ～ 3173 行目を参照してください/

.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」のフロートをクリアすることに注意してください。

/ソースコードについては、bootstrap.css ファイルの 5062 行目を参照してください/

.btn-toolbar:before,
.btn-toolbar:after｛
　display: table;
content: " ";
｝
.btn-toolbar:after{
 clear: both;
}

操作効果は次のとおりです:

ボタングループのサイズ設定

ボタンを紹介するセクションでは、ボタンが 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-toolbar">
 <div class="btn-group btn-group-lg">
 …
 </div>
 <div class="btn-group">
 …
 </div>
 <div class="btn-group btn-group-sm">
 …
 </div>
 <div class="btn-group btn-group-xs">
 …
 </div>
</div>

ボタングループサイズ効果スタイルコードを実装するコードは次のとおりです:

/ソースコードについては、bootstrap.css ファイルの 2320 ～ 2340 行目を参照してください/

.btn-lg,
.btn-group-lg> .btn{
 padding: 10px 16px;
 font-size: 18px;
 line-height: 1.33;
 border-radius: 6px;
}
.btn-sm,
.btn-group-sm> .btn {
 padding: 5px 10px;
 font-size: 12px;
 line-height: 1.5;
 border-radius: 3px;
}
.btn-xs,
.btn-group-xs> .btn{
 padding: 1px 5px;
 font-size: 12px;
 line-height: 1.5;
 border-radius: 3px;
}

3、按钮（嵌套分组）

很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。如下所示：

使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。如下所示：

<div class="btn-group">
 <button class="btnbtn-default" type="button">首页</button>
 <button class="btnbtn-default" type="button">产品展示</button>
 <button class="btnbtn-default" type="button">案例分析</button>
 <button class="btnbtn-default" type="button">联系我们</button>
 <div class="btn-group">
 <button class="btnbtn-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.css文件第3192行～第3223行/

.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;
}

4、按钮（垂直分组）

前面看到的示例，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。

运行的效果如下：

实现垂直分组的样式代码：

/请查看bootstrap.css文件第3234行～第3276行/

.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;
}

和水平分组按钮不一样的是：

☑ 水平分组按钮第一个按钮左上角和左下角具有圆角以及最后一个按钮右上角和右下角具有圆角

☑ 垂直分组按钮第一个按钮左上角和右上角具有圆角以及最后一个按钮左下角和右下角具有圆角

5、按钮（等分按钮）

等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推。

等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名，如下所示：

复制代码代码如下:

运行效果如下：

实现原理非常简单，把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）。具体样式代码如下：

/源码请查看bootstrap.css文件第3277行～第3291行/

.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%;
}

特别声明：在制作等分按钮组时，请尽量使用标签元素来制作按钮，因为使用

6、按钮下拉菜单

按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。

按钮下拉菜单其实就是普通的下拉菜单，只不过把“”标签元素换成了“

<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>

实现样式代码如下：

/查看bootstrap.css文件第3204行～第3223行/

.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;
}

运行的效果如下：

7、按钮的向下向上三角形

按钮的向下三角形，我们是通过在

复制代码代码如下:

这个三角形完全是通过CSS代码来实现的：

/源码请查看bootstrap.css文件第2994行～第3003行/

.caret {
 display: inline-block;
 width: 0;
 height: 0;
 margin-left: 2px;
 vertical-align: middle;
 border-top: 4px solid;
 border-right: 4px solid transparent;
 border-left: 4px solid transparent;
}

另外在按钮中的三角形“caret”做了一定的样式处理：

/源码查看bootstrap.css文件第3224行～第3233行/

.btn .caret {
 margin-left: 0;
}
.btn-lg .caret {
 border-width: 5px 5px 0;
 border-bottom-width: 0;
}
.dropup .btn-lg .caret {
 border-width: 0 5px 5px;
}

有的时候我们的下拉菜单会向上弹起，这个时候我们的三角方向需要朝上显示，实现方法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名）。

/源码请查看bootstrap.css文件第3109行～第3114行/

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
 content: "";
 border-top: 0;
 border-bottom: 4px solid;
}

上面代码中可以看出，向上三角与向下三角的区别：其实就是改变了一个border-bottom的值。

下面是向上弹起菜单的例子：

<div class="btn-group dropup">
 <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>

运行效果如下：

以上就是关于Bootstrap按钮组工具栏的全部内容，希望对大家的学习有所帮助。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

クォーツでタスクが開始される前に通知を送信する方法は？Apr 04, 2025 pm 09:24 PM

Quartzタイマーを使用してタスクをスケジュールする場合、Quartzでタスク通知を事前に送信する方法、タスクの実行時間はCron式によって設定されます。今...

JavaScriptでは、コンストラクターのプロトタイプチェーンで関数のパラメーターを取得する方法は？Apr 04, 2025 pm 09:21 PM

JavaScriptプログラミング、プロトタイプチェーンの関数パラメーターの理解と操作のJavaScriptのプロトタイプチェーンの関数のパラメーターを取得する方法は、一般的で重要なタスクです...

WeChat MiniプログラムWebViewでVUE.JSダイナミックスタイルの変位が失敗した理由は何ですか？Apr 04, 2025 pm 09:18 PM

WeChatアプレットWeb-ViewでVue.jsを使用する動的スタイルの変位障害がvue.jsを使用している理由の分析...

TamperMonkeyで複数のリンクの同時GETリクエストを実装し、順番に戻る結果を決定する方法は？Apr 04, 2025 pm 09:15 PM

複数のリンクの同時ゲットリクエストを作成し、結果を返すために順番に判断する方法は？ TamperMonkeyスクリプトでは、複数のチェーンを使用する必要があることがよくあります...

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。