「作りながら学ぶBootstrap入門」の感想・備忘録2

管理者

3年前

posted with ヨメレバ

Amazonで見る

Kindleで見る

コンテンツエリア
フッター
1. フッター

コンテンツエリア

モーダル

<h2 class="text-center py-3 mt-5">よくある質問</h2>
<div class="row">
  <div class="col-md-6 col-12 pt-3">
    <!-- モーダルのトリガー -->
    <div class="text-dark border p-3" data-toggle="modal" data-target="#exampleModalCenter1">
      質問1
    </div>
    <!-- モーダル -->
    <div class="modal fade" id="exampleModalCenter1" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">回答1タイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
          </div>
          <div class="modal-body">回答1本文<br>回答1本文</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-12 pt-3">
    <!-- モーダルのトリガー -->
    <div class="text-dark border p-3" data-toggle="modal" data-target="#exampleModalCenter2">
      質問2
    </div>
    <!-- モーダル -->
    <div class="modal fade" id="exampleModalCenter2" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">回答2タイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
          </div>
          <div class="modal-body">回答2本文<br>回答2本文</div>
        </div>
      </div>
    </div>
  </div>
</div>

カード

<h2 class="text-center py-3 mt-5">実績</h2>
<div class="row">
  <div class="col-md-4 col-12">
    <div class="card">
      <img src="img3.jpg" class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">実績1</h5>
        <p class="card-text">実績1本文<br>実績1本文<br>実績1本文</p>
        <a href="#" class="btn btn-primary">Amazonで見てみる</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-12">
    <div class="card">
      <img src="img3.jpg" class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">実績2</h5>
        <p class="card-text">実績2本文<br>実績2本文<br>実績2本文</p>
        <a href="#" class="btn btn-primary">Amazonで見てみる</a>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-12">
    <div class="card">
      <img src="img3.jpg" class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">実績3</h5>
        <p class="card-text">実績1本文<br>実績3本文<br>実績3本文</p>
        <a href="#" class="btn btn-primary">Amazonで見てみる</a>
      </div>
    </div>
  </div>
</div>

アコーディオン

<h2 class="text-center py-3 mt-5">よくある質問</h2>
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne">質問1</button>
    </div>
    <div id="collapseOne" class="collapse" data-parent="#accordionExample">
      <div class="card-body">回答1</div>
    </div>
  </div>
</div>

フォーム

Formコンポーネントを使うと、バリデーション付きのフォームを作ることができる。
JavaScriptによってバリデート後のformに.was-validatedが付与される。

<!--コンタクトフォーム-->
<div class="contactform__area mt-5" id="contactform">
  <h2 class="text-center py-3">お問い合わせ</h2>
</div>
<form class="col-md-8 col-12 mx-auto" novalidate>
  <div class="form-row">
    <div class="col-12 mb-3">
      <label for="validationCustom01">名前</label>
      <input type="text" class="form-control" id="validationCustom01" value="" required>
      <div class="invalid-feedback">名前を入れてください</div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-12">
      <label for="inputPref">都道府県</label>
      <select id="inputPref" class="form-control" required>
        <option selected value="">選択してください...</option>
        <option>Tokyo</option>
        <option>Chiba</option>
      </select>
      <div class="invalid-feedback">都道府県を選択してください</div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">送信</button>
</form>
<script>
(function () {
    'use strict';
    window.addEventListener('load', function () {
        const form = document.querySelector('form');
        form.addEventListener('submit', function (event) {
            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    }, false);
})();
</script>

フッター

<footer class="bg-white">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-12">
        <div class="py-3">
          <h4 class="d-inline-block py-3 border-bottom border-info">Profile</h4>
        </div>
        <div class="mx-5">
          <img class="img-fluid rounded-circle" src="img3.jpg" alt="">
        </div>
        <div class="text-center">
          <h4 class="d-inline-block py-3 border-bottom border-info">XXX XXX</h4>
        </div>
        <p>紹介文が入ります。<br>紹介文が入ります。</p>
      </div>
      <div class="col-md-6 col-12">
        <div class="py-3">
          <h4 class="d-inline-block py-3 border-bottom border-info">Portfolio</h4>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item"><a href="">Portfolio Site</a></li>
          <li class="list-group-item"><a href="">Twitter</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="bg-dark text-white text-center p-3">
    Copyright - XXX, 2021 All Rights Reserved.
  </div>
</footer>