bootstrap4.css
[tabindex="-1"]:focus {
outline: 0 !important;
}
bootstrap4.css
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}
bootstrap4.css
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
color: inherit;
text-decoration: none;
}
bootstrap4.css
a:not([href]):not([tabindex]):focus {
outline: 0;
}
■ページネーション：pagination：コンポーネント：ページネーションの配置 中央寄せ（justify-content-center）
<nav aria-label="ページネーションの例">
<ul class="pagination justify-content-center">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
■ページネーション：pagination：コンポーネント：ページネーションの配置 右寄せ（justify-content-end）
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a> </li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
■ページネーション：pagination：コンポーネント：リンクの無効状態やアクティブ状態を指定する
<nav aria-label="ページネーションの例">
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2 <span class="sr-only">(現ページ)</span></a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
■ページネーション：pagination：コンポーネント：ページネーションのサイズ pagination-lg
<nav aria-label="ページネーションの例">
<ul class="pagination pagination-lg">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
■ページネーション：pagination：コンポーネント：ページネーションのサイズ pagination-sm
<nav aria-label="ページネーションの例">
<ul class="pagination pagination-sm">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">次</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">前</a></li>
</ul>
</nav>
■モーダル：modal：モーダル 表示ボタン、外枠（非表示）、本体、コンテンツ、閉じるボタンの５点セット
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal" 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">モーダルのタイトル</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">閉じる</button>
</div>
</div>
</div>
</div>
■モーダル：modal：モーダルのアニメーション設定 fade
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<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">モーダルのタイトル</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">閉じる</button>
</div>
</div>
</div>
</div>
</div>
■モーダル：modal：垂直方向中央に配置するモーダル
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</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">閉じる</button>
</div>
</div>
</div>
</div>
</div>
<style>
.row>.col, .row>[class^=col-] {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: rgba(0, 0, 0, .1);
border: 1px solid #aaa;
}
</style>
■モーダル：modal：グリッドレイアウトを使用したモーダル
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 ml-auto">col-md-4、ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">col-md-3、ml-auto</div>
<div class="col-md-2 ml-auto">col-md-2、ml-auto</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
■モーダル：modal：長いコンテンツのモーダル
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 -->
<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">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
■モーダル：modal：大きなサイズのモーダル サイズのオプション modal-lg
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#largeModal">モーダルボタン</button>
<!-- モーダル -->
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">モーダルのタイトル</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">閉じる</button>
</div>
</div>
</div>
</div>
■モーダル：modal：小さなサイズのモーダル modal-sm
<!-- 切替ボタン -->
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#smallModal">モーダルボタン（modal-sm）</button>
<!-- モーダル -->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="smallModalLabel">モーダルのタイトル</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">閉じる</button>
</div>
</div>
</div>
</div>
■モーダル：modal：モーダルのJavaScript使用
<div class="container">
<p class="text-center"><button type="button" class="btn btn-primary">モーダルボタン</button></p>
<!-- モーダル -->
<div class="modal" id="myModal" 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">モーダルのタイトル</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">閉じる</button>
<button type="button" class="btn btn-primary">変更を保存</button>
</div>
</div>
</div>
</div>
</div>
<script>
$('.btn').click(function(){
$('#myModal').modal('show');
});
</script>
■モーダル：modal：モーダルを閉じるときにメッセージを出す：JavaScript使用