🌊

bootstrap

2021/07/03に公開

Documents
https://getbootstrap.jp/docs/4.5/

Bootstrapを活用したフォームのデザインサンプル
https://getbootstrap.jp/docs/5.0/examples/
ページサンプル
https://ferret-plus.com/8517

bootstrapは、class="この中にcss"を書く感じ

nav-barをつくる
高さを調整<div class="h-25">Height 25%</div>  h-50 h-75 h-100
横の長さ調節  <div class="w-25">Height 25%</div>  w-50 w-75 w-100

flexの設定
https://getbootstrap.jp/docs/4.5/utilities/flex/#enable-flex-behaviors

margin paddingよく使うやつ
https://qiita.com/nakanishi03/items/c80a16b9b9796c25f890

formタグ
https://getbootstrap.jp/docs/4.1/components/forms/
詰まった所・・ボタンタグの中央寄せ
・<div class="form-group justify-content-center row">
<button type=" submit" class="btn btn-block btn-secondary w-50 "> 会員登録
</button> </div>

card
https://getbootstrap.jp/docs/4.2/components/card/

レイアウトのサイズに応じて、非表示を設定する
class="d-none"を設定する
https://getbootstrap.jp/docs/5.0/utilities/display/
参考ブログ
https://qumeru.com/magazine/356

参考サイト
画像を丸くする
<img src="画像のURL" class="rounded-circle">
画像を切り取る
object-fit: cover;
https://www.webcreatorbox.com/tech/object-fit

Discussion