どこでつまずいたかと何をやっているかがわからないのでメモ。無能なのでやりたい事色々あると頭の中ごっちゃになるので書きだしつつ実装する。
目的
（１）使い回せるコンテンツテンプレートを作る。
（２）それをLaravelのBladeに移す
学習に有用なサイト
大体はここ見ればOK!
Bootstrap4移行ガイド
Bootstrap4の使い方をBootstrap3からの変更箇所を交えて解説
v4.bootstrap-guide.com
クラス一覧
Bootstrap4に用意されているクラス | Webお役立ちネタ帳
Bootstrap4の標準で用意されているクラスです。 text-align テキストの左・中央・右寄せ text-left 左寄せテキスト 左寄せテキスト
webnetamemo.com
わからない事一覧
ヘッダーをページ上部固定（fixed-top)すると直下のコンテンツと重なる
対策１：bodyにpaddingを設定する
cssに以下のコードを追加
body { padding-top: 70px; }
対策２：fixed-topを使わない
そもそも上部固定にする必要があるかを考える。右下にトップへ戻るボタンを実装すれば十分
下部に固定したフッターを実装する
以下記事のコードをそのまま使用。とりあえず動いたからヨシ！
Bootstrap3 フッターをページの下部に固定する方法（スティッキーフッター） - tkymtk's blog
2014/07/11: 最後に追記しました。 ことはじめ Bootstrap3でfooterのCSSを設定したかったので、調べたら Sticky footer という方法があった。 しかし、Stackoverflowや既存のサイトを見ると、どうもおかしい。 そこで、Bootstrap3の公式サイトからちゃんとコードを取...
tkymtk.hatenablog.com
グリッドシステム基礎
列数は１２、大きさを考えると3分割くらいが限界なので、１２、６、４をコンテンツに応じて使う
rowクラスで行を指定することができる（らしい）
rowで囲った中に12*1 6*2 4*3のコンテンツを用意してあげればよい（たぶん）
スクロールすると出てくるトップページボタン実装
Bootstrap関係ないけど、下記記事を読めば実装できる
スクロールすると出てくる「トップへ戻る」ボタンの作り方 | コトダマウェブ
最近のホームページはページをスクロールすると右下にページトップに戻るボタンが出てくるのが当たり前になっていますよね。ここでは、このボタンの作り方について見ていきたいと思います。
cotodama.co
『Bootstrap4』所感
2019/10/11
どんなにデザインが下手でもある程度まとまったデザインになるのですごい便利！
ネット上の情報も充実しているので、学習は楽だと思う。本とかは必要なさそう。『汎用のコンテンツテンプレート』をいくつか作って使い回せるようにすれば楽。
参考
ヘッダーをページ上部固定
bootstrapでnavbar-fixed-topを指定するときはbodyにpaddingが必要 - Qiita
tl;drBoostrapを使っていて、navbar-fixed-topもしくはnavbar-fixed-bottomを使うときは、bodyにpaddingを入れる。じゃないと他のエレメントに…
qiita.com
下部に固定したフッターを実装
Bootstrap3 フッターをページの下部に固定する方法（スティッキーフッター） - tkymtk's blog
2014/07/11: 最後に追記しました。 ことはじめ Bootstrap3でfooterのCSSを設定したかったので、調べたら Sticky footer という方法があった。 しかし、Stackoverflowや既存のサイトを見ると、どうもおかしい。 そこで、Bootstrap3の公式サイトからちゃんとコードを取...
tkymtk.hatenablog.com
コメント