Bootstrap4の練習で簡単なレイアウトを作ってみた話

Bootstrap4 css

はじめに

今回は前回学んだ知識を利用してBootstrap4を用いてサイトレイアウトを作ってみた。 また、今回のコードはGitHubにてあげているのでフルでみたい場合はそちらをご覧ください。

今回のプレビューはこちらです。

ハンバーガーボタンの色を変更

ナビバーの色を青色(primary)に指定した関係でデフォルトの黒だと見えづらかったため白にしたいので調べてみた。

その結果、別途CSSを書いて記述する方法と白にするだけなら<nav class="navbar-light>"をnavbar-darkにする方法があった。

今回は今後のためにCSSを書いて白にする方法で記述することにしました。

ブートストラップ4ハンバーガートグルカラーの変更

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

上記コードの中のstroke=rgba()の中でカラーコードを指定することで、好きな色を指定することができる。

終わりに

GitHubに今回の完成系をプッシュしたが、以前CSSで似た様なレイアウトのサイトを作るのに数日かけたのに対して、Bootstrapを用いることで4時間ほどで完成させることができた。

やはりテンプレートを読み込むだけで様々な部品を一瞬で作れるというのは開発コストを減らすのに非常に有益な手法なんだなと感じた。