シンプルなデザイン
前回もご紹介した様に、Bootstrap5.0にあるサンプルから、今回はProductを使ってメニューバーを作ってみました。
メニューバーの詳細をデフォルトから変更しようとすると、理解しておかないといけないものがあります。
Bootstrap v5.0 Examples
[themify_button nofollow=”no” link=”https://getbootstrap.jp/docs/5.0/getting-started/introduction/
“]Get Started[/themify_button]
ナビゲーションバーの設置方法
ドキュメント：https://getbootstrap.jp/docs/5.0/components/navbar/
こちらにもある通り、ナビバー内の間隔と配置を制御する際は、SpacingとFlexを利用します。
Spacing
要素の外観を変更する為のマージンやパディングなどが含まれる
参考：https://getbootstrap.jp/docs/5.0/utilities/spacing/
Flex
レスポンシブなFlexBoxを使ったグリッドカラム, ナビゲーション, コンポーネントなどをレイアウト, 整列, サイズ調整をすばやく設定できる便利なもの
(https://getbootstrap.jp/docs/5.0/utilities/flex/)
[themify_button bgcolor=”light-green” nofollow=”no” link=” https://github.com/yukyco/SEPT.2/blob/main/Eatwell/contact.html”]Repogitory [/themify_button]
Bootstrapソースコード
bootstrap/
├── dist/
│ ├── css/
│ └── js/
├── site/
│ └──content/
│ └── docs/
│ └── 5.0/
│ └── examples/
├── js/
└── scss/フォルダ構成の詳細
ドキュメント：https://getbootstrap.jp/docs/5.0/getting-started/contents/#bootstrap-source-code
ひとつづつ見ようとすると、気が遠くなるのですが、全部見る必要性はありません。
デザインを変更したい箇所の要素を調べて、意味を理解する為にみましょう。
SCSS
ドキュメントにある通り、scss/は、CSSソースコード
js/は JavaScriptソースコードです。
