Bootstrap4の動きのあるパーツをいくつか

このブログのテーマを WordPress + Bootstrap 4 Theme Framework – UnderStrap に変更してみました。
ちょくちょく仕事でも使っている Bootstrap をこのブログでも使えるようにしてみようという試みです。 Bootstrap はVer.3のころから使っていますが、Bootstrap4 について調べてみると、結構面白い機能があるんですね。
まあ、 Ver.3のころからもあって、知らなかっただけですが。 このブログでもBootstrap4が使えるようになったということで、個人的に面白そうな機能をいくつか 試してみようと思います。

アコーディオン

Collapse · Bootstrap ボタンを押すと内容がにゅるっと出てくるやつです。 コード

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

スライダー

Carousel · Bootstrap スライドショーですね。

サンプル コード

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

ライトボックス

Modal · Bootstrap

サンプル

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

使いようによっては、ブログの表現力を上げることができそうな気がします。