Bootstrap

BootstrapはTwitter社が開発した「プログラムのひな形」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、Bootstrapにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。

Bootstrapを適用するには

1. HTMLソースのheadタグ内に、BootstrapのCSS及びジャバスクリプトを呼び込む記述をします。
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
2. BootstrapのTOPページで「Documentaion」をクリックします。

   

3. ページ左側のカラムから挿入する要素を選択します。
4. ページ右側のカラムのプレビューを確認し、その直下にあるソースをコピーして自分のページの目的の位置に貼り付けます。
   

   Alertsの場合

   

   クラス「alert-primary」の部分を書き換えると背景色を替えることが出来ます。例えば「alert-danger」すると赤色になります。又クラス「m-○」を加えるとマージンが設定出来ます。ここで「○」は0から5の数字を指定します。 0は0、1は0.25rem、2は0.5rem、3は1rem、4は1.5rem、5は3remとなります。（remとはCSS3で使えるようになった文字の大きさの単位で文書のルート要素、つまりhtml要素のfont-sizeを基準にします。ちなみにemは親要素のfont-sizeを基準にします。）「m」を「mt」「mb」「m1」「mr」「mx」「my」に書き換えるとそれぞれ「上マージン」「下マージン」「左マージン」「右マージン」「左右マージン」「上下マージン」になります。
   更に「w-50」を加えると幅が50%になります。50の他25、75、100及びautoが用意されています。

   Jumbotronの場合

   

   ボタンの場合

   

   Alertsの場合と同様にクラスを変更・追記することにより、表示形式を変更出来ます。