【MDB】 Material Design for Bootstrap 4 ～ テンプレートについて ～

フロントエンドフレームワーク

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37632575.html
の続き。

即使える無料テンプレートが豊富なので、自分用に少し改変してみた。
フリーテンプレート
https://mdbootstrap.com/freebies/

■ テンプレートを改造する

https://mdbootstrap.com/previews/free-templates/admin/dashboard.html
をダウンロードして、一部改変してみる

# 使用しているBootstrapなどもバージョンアップする

【１】 サイドバーを字下げする

　以下のサイトにあるマージン「.ml-5」などで字下げしてもよかったのだが
http://cccabinet.jpn.org/bootstrap4/utilities/spacing
どうせなら、以下のサイトのようにしてみた
https://jsfiddle.net/u3gd85cj/544/
テンプレート（改変版）・一部抜粋 
    <!-- Font Awesome v5.2に変更 -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="css/style.min.css" rel="stylesheet">

    <style>
    <!-- ★ Side Bar indent ★ -->
    .list-group.list-group-root > .list-group > .list-group-item {
      padding-left: 30px;
    }
    .list-group.list-group-root > .list-group > .list-group > .list-group-item {
      padding-left: 45px;
    }
    </style>
</head>
... 略 ...
<!-- Sidebar -->
<div class="sidebar-fixed position-fixed">

    <a class="logo-wrapper waves-effect">
        <img src="https://mdbootstrap.com/img/logo/mdb-email.png" class="img-fluid" alt="">
    </a>

    <div class="list-group list-group-flush list-group-root">
       <a href="#" class="list-group-item list-group-item-action waves-effect">
          <i class="fas fa-home mr-3"></i>Home
       </a>
       <div class="list-group">
         <a href="#" class="list-group-item list-group-item-action waves-effect">
             <i class="fa fa-user mr-3"></i>Profile
         </a>
         <div class="list-group">
           <a href="#" class="list-group-item active waves-effect">
               <i class="fas fa-chart-pie mr-3"></i>Dashboard
           </a>
         </div>
       </div>
       <a href="#" class="list-group-item list-group-item-action waves-effect">
           <i class="fa fa-table mr-3"></i>Tables
       </a>
       <a href="#" class="list-group-item list-group-item-action waves-effect">
           <i class="fa fa-map mr-3"></i>Maps
       </a>
       <a href="#" class="list-group-item list-group-item-action waves-effect">
           <i class="far fa-money-bill-alt mr-3"></i>Orders
       </a>
    </div>
</div>
<!-- Sidebar -->

【２】 カード・ヘッダーに丸ボタンを追加

カード・ヘッダーに丸ボタンを追加したら、テキスト部分が中央にしたかったが
なかなかうまくいかなかったが、
https://getbootstrap.com/docs/4.1/utilities/flex/
の以下を使用し、解決できた。
～～～～～
Enable flex behaviors

<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
～～～～～
テンプレート（改変版）・一部抜粋 
<!--Card-->
<div class="card mb-4">
  <!-- Card header -->
  <div class="card-header text-center">
   <div class="d-inline-flex p-2">Pie chart</div>
   <button type="button" class="btn btn-outline-primary btn-sm px-2 rounded-circle shadow-sm float-right"><i class="fa fa-trash-alt mt-0"></i></button>
   <button type="button" class="btn btn-outline-primary btn-sm px-2 rounded-circle shadow-sm float-right"><i class="fa fa-pencil-alt mt-0"></i></button>
  </div>
  <!--Card content-->
  <div class="card-body">
    <canvas id="pieChart"></canvas>
  </div>
</div>
<!--/.Card-->

【３】 ボディ部のヘッダ枠にグループボタンを追加する

【２】の「d-inline-flex」が役立った 
<!-- Heading -->
<div class="card mb-4 wow fadeIn">
    <!--Card content-->
    <div class="card-body d-sm-flex justify-content-between">
      <!-- ★グループボタンを追加★ -->
      <div class="d-inline-flex p-2 justify-content-center btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-mdb-color form-check-label active">
              <input class="form-check-input" type="checkbox" autocomplete="off" checked> Pre-checked
          </label>
          <label class="btn btn-mdb-color form-check-label">
              <input class="form-check-input" type="checkbox" autocomplete="off"> Check
          </label>
          <label class="btn btn-mdb-color form-check-label">
              <input class="form-check-input" type="checkbox" autocomplete="off"> Check
          </label>
      </div>
      <form class="d-flex justify-content-center">
          <!-- Default input -->
          <input type="search" placeholder="Type your query" aria-label="Search" class="form-control">
          <button class="btn btn-primary btn-sm my-0 p" type="submit">
            <i class="fa fa-search"></i>
          </button>
      </form>
    </div>
</div>
<!-- Heading -->
【補足】グループボタンに関するトラブル「グループボタンが思った通りな値が取れない」 
 * 以下の関連記事を参照のこと
https://blogs.yahoo.co.jp/dk521123/37678439.html

関連記事

Material Design for Bootstrap 4 ～ 入門編 ～

https://blogs.yahoo.co.jp/dk521123/37632575.html

Material Design for Bootstrap 4 ～ フローティングラベル ～

https://blogs.yahoo.co.jp/dk521123/37674556.html

Material Design for Bootstrap 4 におけるトラブルシュート

https://blogs.yahoo.co.jp/dk521123/37678439.html