細かすぎて使い道がないかもしれないBootstrap4小技集10選

overflow:scrollを使わないレスポンシブなテーブル

No. 名前 属性 所属 操作
1 あいうえお太郎 社畜 営業部
1 あいうえお太郎 社畜 営業部 
/* overflow:scrollを使わないレスポンシブなtable  */
<table class="table">
          <thead class="text-center">
            <tr class="row mx-0 d-flex d-sm-table-row  align-items-center">
              <th class="col-1 d-block d-sm-table-cell align-middle">No.</th>
              <th class="col-11 d-block d-sm-table-cell align-middle">名前</th>
              <th class="col-4 d-block d-sm-table-cell align-middle">属性</th>
              <th class="col-4 d-block d-sm-table-cell align-middle">所属</th>
              <th class="col-4 d-block d-sm-table-cell align-middle">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr class="row  mx-0 d-flex d-sm-table-row align-items-center">
              <td class="col-1 d-block d-sm-table-cell text-center align-middle">1</td>
              <td class="col-11 d-block d-sm-table-cell align-middle">あいうえお太郎</td>
              <td class="col-4 d-block d-sm-table-cell text-center align-middle">社畜</td>
              <td class="col-4 d-block d-sm-table-cell text-center align-middle">営業部</td>
              <td class="col-4 d-block d-sm-table-cell text-center align-middle"><button class="btn btn-primary"
                  disabled>編集</button></td>
            </tr>
            <tr class="row  mx-0 d-flex d-sm-table-row align-items-center">
              <td class="col-1 d-block d-sm-table-cell text-center align-middle">1</td>
              <td class="col-11 d-block d-sm-table-cell align-middle">あいうえお太郎</td>
              <td class="col-4 d-block d-sm-table-cell text-center align-middle">社畜</td>
              <td class="col-4 d-block d-sm-table-cell text-center align-middle">営業部</td>
              <td class="col-4 d-block d-sm-table-cell text-center align-middle"><button class="btn btn-primary"
                  disabled>編集</button></td>
            </tr>
          </tbody>
        </table>

/*　Sass */
.table {

    th,
    td {
    width: auto !important;
    }

    @include media-breakpoint-down(xs) {
    td:nth-last-child(4)~td {
        border-top: none;
    }

    thead {
        tr {
        border-bottom: 2px solid $gray-300;
        }

        th {
        border-bottom: none;
        }
    }

    }
}

色を足す

bg-twitterを指定
text-facebookを指定
border-tiktokを指定
@import "variables";

/* 色を足す @import "variables"の直後に書く　*/
$theme-colors: map-merge(('twitter': #53A7E8,
    'facebook': #4064AD,
    'tiktok': #F6305D), $theme-colors);

@import "mixins";

文字サイズ（diplay-x）を足す

display-5 (2rem)
display-6 (1.5rem)
display-7 (1rem)
/* 文字サイズを足す */
$display5-size: 2rem !default;
$display6-size: 1.5rem !default;
$display7-size: 1rem !default;
$display5-weight: 300 !default;
$display6-weight: 300 !default;
$display7-weight: 300 !default;

.display-5 {
  @include font-size($display5-size);
  font-weight: $display5-weight;
  line-height: $display-line-height;
}

.display-6 {
  @include font-size($display6-size);
  font-weight: $display6-weight;
  line-height: $display-line-height;
}

.display-7 {
  @include font-size($display7-size);
  font-weight: $display7-weight;
  line-height: $display-line-height;
}

border-sm-top,border-md-0などを足す

スマホでは縦並び、PCでは横並びならborderの向き変えたいですよね
スマホでは縦並び、PCでは横並びならborderの向き変えたいですよね
スマホでは縦並び、PCでは横並びならborderの向き変えたいですよね 
@import "mixins";
/* @import "mixins"; より後ろ、@import "utilities";より前に書く*/
            
/*border-sm-top,border-md-0などを足す*/
$borders: top,
right,
bottom,
left;

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .border#{$infix} {
        border: $border-width solid $border-color !important;
    }

    .border#{$infix}-0 {
        border: 0 !important;
    }

    @each $border in $borders {
        .border#{$infix}-#{$border} {
        border-#{$border}: $border-width solid $border-color !important;
        }

        .border#{$infix}-#{$border}-0.border#{$infix}-#{$border}-0 {
        border-#{$border}: 0 !important;
        }
    }
    }
}

ネガティブマージン

Ver4.2からの新機能です。m-n5のように「n」をつけるとマイナスになります。

あ
い
う
え
お
このcolにネガティブマージンを設定している
<div class="row align-items-center">
            <div class="col bg-light border">あ<br>い<br>う<br>え<br>お</div>
            <div class="col border ml-n5 bg-primary text-white">このcolにネガティブマージンを設定している</div>
  </div>

横に開くCollapse

これはCollapseです。
これはCollapseです。
これはCollapseです。
これはCollapseです。 
/* 横に開くCollapse */
@include media-breakpoint-up(sm) {
    #collapseExample {
    height: auto !important;
    display: block !important;
    transform: translateX(-100%);
    transition: 0.35s transform;

    &.show {
        transform: translateX(0);
    }
    }
}

1枚開いたら他を閉じるCollapse

見出しAをクリックしたらこれが開きます。
見出しAをクリックしたらこれが開きます。
見出しAをクリックしたらこれが開きます。
見出しAをクリックしたらこれが開きます。
見出しBをクリックしたらこれが開きます。
見出しBをクリックしたらこれが開きます。
見出しBをクリックしたらこれが開きます。
見出しBをクリックしたらこれが開きます。



見出しBをクリックしたらこれが開きます。
見出しCをクリックしたらこれが開きます。
見出しCをクリックしたらこれが開きます。
見出しCをクリックしたらこれが開きます。


見出しCをクリックしたらこれが開きます。 
/* 1枚開いたらほかを閉じるCollapse */
      <div class="row" id="collapseParent">
      <div class="col-12 bg-light py-3 border" data-toggle="collapse" data-target="#collapseA" aria-expanded="false" aria-controls="collapseA">見出しA</div>
      <div class="col-12 collapse" data-parent="#collapseParent" id="collapseA">
          <div class="p-3">
              見出しAをクリックしたらこれが開きます。
              <br>見出しAをクリックしたらこれが開きます。
              <br>見出しAをクリックしたらこれが開きます。
              <br>見出しAをクリックしたらこれが開きます。
  
          </div>
      </div>
      <div class="col-12 bg-light py-3  border" data-toggle="collapse" data-target="#collapseB" aria-expanded="false" aria-controls="collapseB">見出しB</div>
      <div class="col-12 collapse" data-parent="#collapseParent" id="collapseB">
          <div class="p-3">
              見出しBをクリックしたらこれが開きます。
              <br>見出しBをクリックしたらこれが開きます。
              <br>見出しBをクリックしたらこれが開きます。
              <br>見出しBをクリックしたらこれが開きます。
              <br>
              <br>
              <br>
              <br>見出しBをクリックしたらこれが開きます。
  
          </div>
      </div>
      <div class="col-12 bg-light py-3  border" data-toggle="collapse" data-target="#collapseC" aria-expanded="false" aria-controls="collapseC">見出しC</div>
      <div class="col-12 collapse" data-parent="#collapseParent" id="collapseC">
          <div class="p-3">
              見出しCをクリックしたらこれが開きます。
              <br>見出しCをクリックしたらこれが開きます。
              <br>見出しCをクリックしたらこれが開きます。
              <br>
              <br>
              <br>見出しCをクリックしたらこれが開きます。
  
          </div>
      </div>
  </div>

動的に追加される要素でもTooltipを有効にする

//動的に追加される要素でもtooltipを有効にする
    var target = $('body').get(0);
    var observer = new MutationObserver(function (records) {
        $('[data-toggle="tooltip"]').tooltip()
    })
    observer.observe(target, {
        childList: true,
        subtree: true
    });

Popoverのcontentsを動的に生成した際に位置がずれるのを回避する 

//Popoverのcontentsを動的に生成した際に位置がずれるのを回避する
$('[data-toggle="popover"]').on('inserted.bs.popover', function () {
    var $this = $(this)
    var id = $this.attr('aria-describedby'); //これがPopover本体のID
    //一旦表示されたPopoverは追加したクラスが残るので削除
    $('#' + id).removeClass('popoverLoaded')

}).on('shown.bs.popover', function () {
    var $this = $(this)
    var id = $this.attr('aria-describedby'); //これがPopover本体のID

    //たとえば、動的にコンテンツを追加しつつ親要素の色を取得してcontentsの文字色とする場合
    var cls = $this.attr('class');
    var clr = cls.match(/btn-(.+)/g);
    var clr = clr[0].replace('btn-', '');

    $('#' + id).find('.popover-body').addClass('text-' + clr).html('この文字はdata-contentではなく動的に追加されています。');

    //位置を設定し直す
    $(this).popover('update');


    //表示完了クラスを追加
    $('#' + id).addClass('popoverLoaded')
})

//CSS
/* Popoverの位置ずれ対策 */
div.popover {
  opacity: 0 !important;
}

div.popover.popoverLoaded {
  opacity: 1 !important;
}