Help us understand the problem. What is going on with this article?

Bootstrap4だけでwebアプリのレイアウトをした時によく使ったクラスを紹介

More than 1 year has passed since last update.

概要

  • 0からwebアプリ(rails)を作った時、Bootstrap4だけでサイトをレイアウトをしました。
  • 特に便利だったclassを紹介します
  • コードも公開しています。自由にコピペして活用して下さい!

環境

  • rails 5.2
  • Bootstrap 4.1.3
  • iconはfontawesomeを使っています

参照

Bootstrap 4 で新規導入された個人的に重宝したクラス

ベスト3

  1. パディングとマージンを調整できるp-1, m-1
    • コード例 https://github.com/junara/dokode/blob/v1.0/app/views/home/_search_box.html.erb#L1-L23
    • Bootstrap4 sizing ドキュメント https://getbootstrap.com/docs/4.1/utilities/spacing/
    • pt-3の事例 Image from Gyazo
    • これがあるから、bootstrapだけでレイアウトすることを決意できた。
    • p-xもしくはm-x (xは0から5)を設定するとそれぞれpadding, marginを設定する事ができる
    • pt (padding-topの略)、pr (padding-rightの略)、pb (padding-bottomの略)、pl (padding-leftの略)のようにt, r, b, lをつけると該当の箇所のみにpadding(もしくはmargin)を設定する事ができる
    • bootstrapのコンポーネントのpadding や marginが気に入らなければ、p-0やm-0としてから好きなpaddingやmarginをつけるといいと思う。
  2. 上下左右を揃えをflexboxでできる d-flex
    • コード例 https://github.com/junara/dokode/blob/v1.0/app/views/events/_share_buttons.html.erb#L1-L26
    • Image from Gyazo
    • bootstrap3時にfloatベースのレイアウトにより苦しんだ人は、ぜひ! bootstrapだけでflexboxでレイアウトすることができるので、今までのつらさがいっぺんになくなります
    • flexboxの理解が必要です。ただし、flexboxは1日あれば基本は十分理解できます。理解した分のリターンは必ずあります。
    • 縦方向なら、alight-items-xxxxx、横方向ならjustify-content-xxxxx
    • 折り返したいならflex-wrap
    • とりあえず中央に揃えたいならd-flex justify-content-center align-items-center
  3. スクロールに応じてページトップに固定できるsticky-top

次点

  • w-100とかh-100とかとりあえず幅と高さを目一杯にできるクラス
    • widht: 100%;, height: 100%をそれぞれクラスだけで実現できます
    • https://getbootstrap.com/docs/4.1/utilities/sizing/
    • なんか揃わないなーと思ったときは使うとうまく行くことあり
    • w-25とかw-50ははまるような場面なら使い勝手良いかもただし、その場合colを使って等幅でも問題なさそうな気がする
  • ボーダーをなしにできる border-0
    • Image from Gyazo
    • cardのpaddingとかmarginとかは活用したい。でも、枠線が邪魔なときにつかった。
  • 影をつける事ができる shadow

その他Bootstrap使用事例

hidden-smとかvisible-smとかの代わり

実はbootstrapだけではレイアウトできなかったところ・・・

最後に協力者募集

  • サイト https://www.dokode.work/ のデータ充実に協力してくれる人を最大2名募集しています
  • 「実験系の研究室に所属し学会に定期的に参加している && Rails初心者 (Railsに興味があるけどRails tutorialは第1章で挫折したぐらいのレベルとか) && 八王子まで行くことができる」全てに合致して興味のある方は https://twitter.com/junara783 まで相談のDMください。
    • 年齢と所属の公的/民間はついて特に制限ないです。
  • 八王子までご足労いただければ、Rails tutorialをベースに最大3時間マンツーマンレッスンできます。満足いただけるようでしたら、見合う形で学会データ収集作業の協力をお願いしたいです!
junara
10年間医療の研究していたが、Webサービス作りたくて、エンジニアへ。 Rails, Javascritptのエンジニアとして働きながら、生命科学学会検索サービスを作りました。 https://www.dokode.work
bldt
"Your growth, Improve the world" をビジョンに掲げ、自社事業やシステム開発サービスを提供しています
https://bldt.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away