【DAY12.】30DAYSトライアル12日目をわかりやすく解説

Bootstrap学習の画像

 

おはこんばにちは、ミヤビです。

 

今回は、前回の続きでドットインストールのBootstrap4(全22回)を最後まで終わらせましょう。

 

 

✔︎本記事の内容

  • DAY12.『Bootstrapでレイアウトを作ろう 前編』の解説

 

✔︎30DAYSトライアル1stの最終目標

  • 月5万を稼ぐスキルを目指す
  • 未経験からWEB系エンジニアの転職を目指す
  • 未経験からWEB系ノマドエンジニアを目指す

 

レスポンシブサイトを作ろう【ドットインストール#10〜#22】

Bootstrapのホームページ

今回はBootstrapで学んだことを備忘録的にまとめます。

 

基本的にclassにコードを書いていきます。

 

コーディングの手順は下記のとおり。

 

  1. containerクラスを作る
  2. その中にrowクラスを作る
  3. その中にcolクラスを作る

 

<div class="container">

  <div class="row">

    <div class="col">

    </div>

  </div>

</div>

 

そして、上記のclassに対し、Bootstrapでコーディングしていきます。

 

たとえば、、、

 

  • display-4 →見出しの大きさ
  • btn-primary btn-lg →ボタンの色と大きさ
  • py-5, mb-5 →パディングとマージンの大きさ
  • text-white text-center →テキストの色と中央寄せ
  • w-100 rounded-circle →幅が100%で角丸
  • order-sm-1,order-sm-2 表示の並べ替え

 

CSSを記述しなくても、Bootstrapを使えば楽チンにコーディングができたりします。

 

テーブルの作り方

Bootstrapを使えば、簡単にテーブル(表)が作れてしまいます。

 

手順は下記のとおり。

 

  1. tableタグにtableクラスをつける
  2. theadとtbodyタグを用意する
  3. tr(行)td(セル)タグを指定する

 

<table class="table table-hover">

<thead>
 <tr>
   <th>商品A</th>
   <th>商品B</th>
 </tr>
</thead>

<tbody>
 <tr>
  <td>AA</td><td>BB</td>
 </tr>
 <tr>
  <td>AAA</td><td>BBB</td>
 </tr>
 <tr>
  <td>AAAA</td><td>BBBB</td>
 </tr>
</tbody>

</table>

 

これで、マウスオーバーのイケイケな表が作れます。

 

他にも様々なテーブルがBootstrapでは用意されているので、公式サイトを確認してみて下さい。

ブレイクポイントを理解しよう

Bootstrapでは、画面幅の基準(区間名)が設けられており下記のとおり。

 

  • xs 0〜544px
  • sm 544px〜768px
  • md 768px〜992px
  • lg 992px〜1200px
  • xl 1200px〜

 

書き方は、、、

 

  • col-xs-10 (0px以上で、10列幅のボックス)
  • col-sm-6 (544px以上で、6列幅のボックス)
  • col-md-2 (768px以上で、2列幅のボックス)

 

こんな感じです。

 

ツールチップの実装方法

要素にマウスを乗っけたときにツールチップを表示させることもできます。

 

data-toggle="tooltip" title="ツールチップ名"

 

さらに、titleにdata-placement=”bottom”を追加で、ツールチップを下に表示できます。

 

 jQueryの実装方法

ツールチップを機能させるには、jQueryも必要です。

 

下記をコピペでオッケーです。

 

<script>

$(function() {

'use strict' ;

$('[data-toggle="tooltip"]').tooltip();

});

</script>

ナビバーを作る【ハンバーガーメニュー】

ハンバーガーメニューがあるといい感じのレスポンシブサイトに仕上がります。

 

<nav class="navbar navbar-expand-sm navbar-light">
  <a href="#" class="navbar-brand">Logo</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
    <span class="navbar-toggler-icon"></span>
  </button>

<div id="menu" class="collapse navbar-collapse">
 <ul class="navbar-nav">
  <li class="nav-item"><a href="#" class="nav-link">Link1</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Link2</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Link3</a></li>
 </ul>
</div>

</nav>

 

  • navbar ナビゲーションメニュー
  • navbar-expand-sm sm以上で開く
  • navbar-light 文字色をグレー
  • navbar-brand ブランド名やロゴ付きのナビゲーションバーを使うときに使用
  • navbar-toggler ボタンのスタイル
  • data-toggle=”collapse” 非表示
  • data-target=”#menu” 開くメニューを#menuに指定
  • navbar-toggler-icon メニューアイコン
  • navbar-collapse ナビゲーションメニューを非表示

 

暗記は不要なので、分からなければググって解決しましょう。

 

というわけで、今回はここまでです。

 

次回からは、YouTubeでチュートリアルを見ながらアウトプットしていきます。

 

それでは、楽しいBootstrapライフを送りましょう。

 

パソコンでコーディングする女性 【DAY13.】30DAYSトライアル13日目をわかりやすく解説

 

[caed2 id=”4626″]