【Bootstrapその⑥】Components系のカスタムⅢ～デザイン系の機能3選～【学習積み上げ】

f:id:mmmouh8845:20200123002523p:plain

引き続き、Bootstrapの学習を進めていきます、マサです。

前回同様、Components系に関するカスタムについてのまとめです。

https://www.appatwi.com/entry/2020/01/21/programming_bootstrap_4-2_componentswww.appatwi.com

www.appatwi.com

今回はデザインと書きましたが、正確には各セクション内のコンテンツに使えるデザインについての機能を紹介します。

具体的に言うと、ホームページやポートフォリオサイトでのデザイン実装に使えます。

という方が分かりやすいかもしれませんが。

言葉にすると伝わりにくいと思いますので、実際に見ていただく方が分かりやすいです。

それではいきましょう。

Components系のカスタム
- デザイン系に使える便利機能
おわりに

Components系のカスタム

デザイン系に使える便利機能

まずは一例からです。

Carousel
Carousel(カルーセル)は、画像やスライドをよこにスライドさせて複数表示させるコンポーネントです。カルーセルの使い方の例を示します。
公式より

Carouselは写真などをスライド表示させるのには適した実装で、最近のWebサイトでは必ずと行っていいほど使われていますよね。

f:id:mmmouh8845:20200124232659p:plain — googleのウェブストアです。

このようにトップページのお知らせやトピックスなどに用いられています。

これもBootstrapを使えば簡単に実装できます。

f:id:mmmouh8845:20200126082249p:plain

画像のみで実装してみました。

  <div class="container my-5">
    <div id="carouselExampleControls" class="carousel slide w-50"     data-ride="carousel">
     <!-- w-50は小さく見せるためにwidthを50%にしてます -->

      <div class="carousel-inner">
        <div class="carousel-item active">
         <img class="d-block w-100" height="300"  src="images/markus-spiske-Mg9gYOmaslM-unsplash.jpg" alt="">
        </div>
        <!-- 親要素のcarousel-innerの中にスライドさせるcarousel-itemを入れる。 -->
        <!-- class名はブロック要素でwidth100%に、heightは300pxです。 -->

        <div class="carousel-item">
          <img class="d-block w-100" height="300"  src="images/nordgreen-Iqc4WR1TNp0-unsplash.jpg" alt="">
        </div>
        
        <div class="carousel-item">
          <img class="d-block w-100" height="300"  src="images/the-honest-company-QNWLBff7f9M-unsplash.jpg" alt="">
        </div>  
      </div>
      
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>  
  </div>

注意点は、carousel-innnerの中のcarousel-itemのひとつに必ずactiveを追加しないといけないことです。
コピペしても使えるので、知っておくくらいでいいかもしれません。

また、この画像には前後(previous/next)のコントロール(矢印のbtnのようなもの)を追加しています。
一番良く見るパターンですね。

コードのaタグのところがその記述部分ですので、ここをなくしてもコントロールなしのカルーセルとして機能してくれます。
(デフォルトで自動的に5秒で画像が変わるようになっています)

オプションで機能を追加することもできます。

.carousel(options)
object オプションを使用してアイテムのスライドを開始します。

$('.carousel').carousel({ interval: 2000 })
.carousel('cycle')
左から右にアイテムがスライドします。
.carousel('pause')
アイテムのスライドを停止します。
.carousel(number)
特定のフレーム（0を起点, 配列と同様）のアイテムにスライドします。**ターゲットのアイテムが表示される前に（すなわち slid.bs.carousel イベントが生じる前に） return されます。
.carousel('prev')
前のアイテムにスライドします。
.carousel('next')
次のアイテムにスライドします。
.carousel('dispose')
アイテムを破棄します。

他にもこういったコンテンツに使えるデザインが2つあります。
Card(カード)とJambotron(ジャンボトロン)です。

f:id:mmmouh8845:20200126091358p:plain

  <div class="container my-5">
    <div class="card" style="width: 18rem;">
      <img class="w-100" src="images/boris-misevic-Sn7yeNh-nK8-unsplash.jpg" alt="">
      <div class="card-body">
        <h5 class="card-title">タイトルです</h5>
        <p class="card-text">文章が入ります。文章が入ります。文章が入ります。</p>
        <a href="#" class="btn btn-danger">ボタンをクリック</a>
      </div>
    </div>
  </div>

カードはこのようにあるセクションに画像ありのコンテンツを複数並べるのに向いていますよね。

また、ジャンボトロンはトップページの見出しに使われるものです。

f:id:mmmouh8845:20200126092604p:plain

  <div class="container my-5">
    <div class="jumbotron">
      <h1 class="display-4">見出しです！</h1>
      <p class="lead">説明文です。</p>
      <hr class="my-4">
      <p>説明文です。</p>
      <a class="btn btn-primary btn-lg" href="#" role="button">ボタンをクリック</a>
    </div>
  </div>