Bootstrap5で簡単に作れるコンタクトフォーム

/ 0 Comments / , , , / /

　シンプルなデザイン

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