🍌

Bootstrap②

2022/12/07に公開

Bootstrap

Bootstrapのセットアップ

Get startedボタンをクリック
イントロダクションページが表示される
Bootstrapのファイルをダウンロードして使う方法もあるが
CDNを使ってBootstrapを読み込む方法をおすすめ

CDNはContent Delivery Networkの略
CDNとは、効率的かつスピーディーにWebコンテンツを配信できるように工夫されたネットワークのこと

この最適化されたネットワークに配置されたBootstrapのファイルをHTMLから読み込んで使う

Bootstrapを使うにはCSSとJSのファイルを読み込む
CSSのコードをコピーしてheadタグ内にペースト（他のスタイルシートよりも先に入れる）
JSのBundleのところにあるコードをコピーしてbodyタグ終了直前にペースト

Bootstrapのボタン

ベーシックなボタン

<button type="button">button</button>

スタイルを当ててみる
クラス名を変えることで様々なスタイルのボタンを表示することができる
Examples
表示サンプル下のサンプルコード
やりたいスタイルの行をコピーして貼り付ければOK

アウトラインボタン
Outline buttons
も同じようにサンプルコードをコピペすればOK

サイズ指定
Sizes
大きいボタン・小さいボタン

ボタンの無効化
Disabled state

基本的にはサンプルコードのコピペでサイトを作っていくが
指定されているクラスが重要になる
どのようなクラスが指定されているかを意識する

ハンバーガーメニューを付けてみる

Supported content
サンプルコードの４行目からのボタンのコードをコピー

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

コピペして、ハンバーガーメニューのアイテムとして表示したい項目のdivタグにidをつける
aria-controls属性の値を入れる

スマホの狭い画面でも使やすいUIが簡単に実装できる

ナビゲーションバーの色を変える

Color schemes
クラスを変更することでナビゲーションバーの色を変更できる

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

色をRGB値で指定する

  <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #ccc;">

CSSを使うことで柔軟にスタイルを変えることができる！

グリッドシステム（1番重要になってくる！

グリッドシステムとは

レイアウトを格子状に分解して配置するデザイン方法
コンテナ・行・列を使用してコンテンツを整列
画面サイズが異なるデバイスでも、レスポンシブに表示可能

Grid system
よく使うもの

Bodyタグの中に記述
row ＝行
col ＝列

横幅を３等分にしてレイアウト、真ん中に寄せる

  <div class="container">
    <div class="row">
      <div class="col">A</div>
      <div class="col">B</div>
      <div class="col">C</div>
    </div>
  </div>

グリッド数の指定

グリッドの列数は12を基準

classsの指定で、col-数字とすることで、列の幅を指定できる
列の幅の数字は、一列で12となるように設定

<div class="container">
    <div class="row">
      <div class="col-1 orange">1</div>
    </div>
  </div>

col-1は12分割したうちの１つをそのdivタグで使うという意味

カラムの組み合わせ方

col-3

<div class="row">
      <div class="col-3">3</div>
      <div class="col-3">3</div>
      <div class="col-3">3</div>
      <div class="col-3">3</div>
    </div>

col-4

<div class="row">
      <div class="col-4">4</div>
      <div class="col-4">4</div>
      <div class="col-4">4</div>
    </div>

col-6

<div class="row">
      <div class="col-6">6</div>
      <div class="col-6">6</div>
    </div>

col-12

<div class="row">
      <div class="col-12">12</div>
    </div>

自由な組み合わせ
２カラムのレイアウト

<div class="row">
      <div class="col-9">9</div>
      <div class="col-3">3</div>
    </div>

３カラムのレイアウト

<div class="row">
      <div class="col-3">3</div>
      <div class="col-6">6</div>
      <div class="col-3">3</div>
    </div>

Auto

<div class="row">
      <div class="col">auto</div>
      <div class="col-5">5</div>
      <div class="col">auto</div>
    </div>

colのハイフン以降はなしにするとサイズは自動で決まる

12を超えて指定すると

余ったものは次の行に表示される

 <div class="row">
      <div class="col-6">6</div>
      <div class="col-6">6</div>
      <div class="col-6">6</div>
    </div>

今日でBootstrapの基本終わらせたかったけどギブ😂
明日に持ち越します、、！
ジムと、Bootstrapの基本と、
Bootstrapでフォトギャラリー制作まで終わらせるのが明日の目標！！
それ終わればJavascrptに一旦入れる！
パワー💪🏻