Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【ボタングループ編】

Bootstrap

Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【ボタングループ編】

2019年10月29日 8:00 

Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【ボタングループ編】

おはようございます!社員Aです👩

連載しております「Bootstrapシリーズ」ですが、第10回目になりました!

Bootstrap4基本の使い方シリーズ

複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していきますので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。

第10回目の今回は「ボタングループ編」!Bootstrap4でイメージを設定する方法を解説していきたいと思います。Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターしてみませんか?



 

Bootstrap4 基本のボタングループ

基本のルールについて

  1. クラス「.btn」を「.btn-group」で囲む。

 

表示

 

ソース

 

 



Bootstrap4 ボタンツールバー

ボタングループをまとめたものがボタンツールバーになります。

 

基本のルールについて

  1. クラス「.btn-group」を「.btn-toolbar」で囲む。

 

表示

 

ソース

 

 

Bootstrap4 ボタングループのサイズ

ボタングループのサイズは変更することができます。

 

基本のルールについて

  1. クラス「.btn-group」に「.btn-group-lg」を追加すとボタングループが大きくなる
  2. クラス「.btn-group」に「.btn-group-sm」を追加すとボタングループが小さくなる

 

表示

 

ソース

 

 

Bootstrap4 ドロップダウンボタン付きグループボタン

基本のルールについて

  1. クラス「.btn-group」の中の「.btn」に「.dropdown-toggle[data-toggle=”dropdown”]」を追加する。

 

表示

 

ソース

 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!