CSS

Bootstrap4のプロっぽい使い方

動画

動画はこちらからチェック!!

是非イイねとチャンネル登録お願いします!!

公式の”Quick start”をそのまま使わない

公式のページにはこう書かれています。

HTMLに<link>貼って~ HTMLの最後にJSを3つ追加して~

↑これをするとBootstrapの全ての機能を読み込む事になります。正直いらないものが多く、プロとしては欲しい機能だけ読み込むようにした方が、柔軟性がありまた、衝突が起こりにくく開発スピードも早いです

欲しい機能だけ読み込む方法

SASSです。実はbootstrapはパッケージ配布がされており、npm i bootstrapでパッケージを入れることができます。

パッケージをインストールするとnode_modules/bootstrap/scssの中に色々と使えそうなものがインストールされます。それらを読み込むか読み込まないかで、欲しい機能だけをインストールしましょう

また読み込む前にcontainerサイズやマージンサイズなどを設定すると、それらを反映したcssを吐き出してくれる超スグレモノです。

下記が自分の設定例です。

使いたい機能をコメントインしてく感じですね。

例では$theme-colorsの中が primary だけですが、例えばblack: #111111も宣言すると、.btn.btn-blackという感じで使えるようになります。(スゴ!)

Reboot(reset)は自前で作ったほうが無難

bootstrapがどれだけ優れているかはわかっていただいたと思うのですが、resetは…

h1やolなどに勝手に margin-bottom: 1rem がついたりしますので、resetは自前で用意しましょう

jQueryを使わなくてもいい

JSが無くてもレイアウトは全てできるので、特段Bootstrapのこの機能がほしい!って気持ちにならない限りは3つのJSは読み込まないでいいと思っています。

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ