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

 シンプルなデザイン

前回もご紹介した様に、Bootstrap5.0にあるサンプルから、今回はProductを使ってメニューバーを作ってみました。

メニューバーの詳細をデフォルトから変更しようとすると、理解しておかないといけないものがあります。

Bootstrap v5.0 Examples

 

Get Started

 ナビゲーションバーの設置方法

ドキュメント: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/)

My Portfolio

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ソースコードです。

 

最後までお読みくださり、ありがとうございました!

 GitHubに リポジトリをアップして 管理しよう

Liked Liked
No Comments