どこでつまずいたかと何をやっているかがわからないのでメモ。無能なのでやりたい事色々あると頭の中ごっちゃになるので書きだしつつ実装する。
目的
(1)使い回せるコンテンツテンプレートを作る。
(2)それをLaravelのBladeに移す
学習に有用なサイト
大体はここ見ればOK!
![](https://toriyaru.com/wp-content/uploads/cocoon-resources/blog-card-cache/7f06bd21b03716f9c34e2189833a1eb9.png)
Bootstrap4移行ガイド
Bootstrap4の使い方をBootstrap3からの変更箇所を交えて解説
クラス一覧
![](https://toriyaru.com/wp-content/uploads/cocoon-resources/blog-card-cache/35edb092c8c628b24e4fbf00d16ab3dc.jpg)
Bootstrap4に用意されているクラス | Webお役立ちネタ帳
Bootstrap4の標準で用意されているクラスです。 text-align テキストの左・中央・右寄せ text-left 左寄せテキスト 左寄せテキスト
わからない事一覧
ヘッダーをページ上部固定(fixed-top)すると直下のコンテンツと重なる
対策1:bodyにpaddingを設定する
cssに以下のコードを追加
body { padding-top: 70px; }
対策2:fixed-topを使わない
そもそも上部固定にする必要があるかを考える。右下にトップへ戻るボタンを実装すれば十分
下部に固定したフッターを実装する
以下記事のコードをそのまま使用。とりあえず動いたからヨシ!
![](https://toriyaru.com/wp-content/uploads/cocoon-resources/blog-card-cache/e6579f1f2cf98c355fe4ca4f06577c05.jpg)
Bootstrap3 フッターをページの下部に固定する方法(スティッキーフッター) - tkymtk's blog
2014/07/11: 最後に追記しました。 ことはじめ Bootstrap3でfooterのCSSを設定したかったので、調べたら Sticky footer という方法があった。 しかし、Stackoverflowや既存のサイトを見ると、どうもおかしい。 そこで、Bootstrap3の公式サイトからちゃんとコードを取...
グリッドシステム基礎
列数は12、大きさを考えると3分割くらいが限界なので、12、6、4をコンテンツに応じて使う
rowクラスで行を指定することができる(らしい)
rowで囲った中に12*1 6*2 4*3のコンテンツを用意してあげればよい(たぶん)
スクロールすると出てくるトップページボタン実装
Bootstrap関係ないけど、下記記事を読めば実装できる
スクロールすると出てくる「トップへ戻る」ボタンの作り方 | コトダマウェブ
最近のホームページはページをスクロールすると右下にページトップに戻るボタンが出てくるのが当たり前になっていますよね。ここでは、このボタンの作り方について見ていきたいと思います。
『Bootstrap4』所感
2019/10/11
どんなにデザインが下手でもある程度まとまったデザインになるのですごい便利!
ネット上の情報も充実しているので、学習は楽だと思う。本とかは必要なさそう。『汎用のコンテンツテンプレート』をいくつか作って使い回せるようにすれば楽。
参考
ヘッダーをページ上部固定
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Ym9vdHN0cmFwJUUzJTgxJUE3bmF2YmFyLWZpeGVkLXRvcCVFMyU4MiU5MiVFNiU4QyU4NyVFNSVBRSU5QSVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSVBOCVFMyU4MSU4RCVFMyU4MSVBRmJvZHklRTMlODElQUJwYWRkaW5nJUUzJTgxJThDJUU1JUJGJTg1JUU4JUE2JTgxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz04ZTJlMjkxMjJkMDkyODViMTRhYjFiOWRhZmM5ZTY2Mw&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBQb29oU3VubnkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTMxZDQyMmE4YzFhMjY1MzlkNGVlYTZjNDVmOWE5NzA5&blend-x=142&blend-y=486&blend-mode=normal&s=bf7701da8acfad4e70a33c3d71341adb)
bootstrapでnavbar-fixed-topを指定するときはbodyにpaddingが必要 - Qiita
tl;drBoostrapを使っていて、navbar-fixed-topもしくはnavbar-fixed-bottomを使うときは、bodyにpaddingを入れる。じゃないと他のエレメントに…
下部に固定したフッターを実装
![](https://toriyaru.com/wp-content/uploads/cocoon-resources/blog-card-cache/e6579f1f2cf98c355fe4ca4f06577c05.jpg)
Bootstrap3 フッターをページの下部に固定する方法(スティッキーフッター) - tkymtk's blog
2014/07/11: 最後に追記しました。 ことはじめ Bootstrap3でfooterのCSSを設定したかったので、調べたら Sticky footer という方法があった。 しかし、Stackoverflowや既存のサイトを見ると、どうもおかしい。 そこで、Bootstrap3の公式サイトからちゃんとコードを取...
コメント