長期サイト運用はエックスサーバー チェックする

Bootstrap5を使うと量産が簡単!GitHubで管理すると更に便利!

シンプルなデザイン

前回もご紹介した様に、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ソースコードです。

 

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フリーランスのWebDeveloper | フロントエンドエンジニア、元グラフィックデザイナーです。

目次