bootstrap4.css
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
bootstrap4.css
.offset-1 {
margin-left: 8.333333%;
}
bootstrap4.css
.offset-2 {
margin-left: 16.666667%;
}
bootstrap4.css
.offset-3 {
margin-left: 25%;
}
bootstrap4.css
.offset-4 {
margin-left: 33.333333%;
}
bootstrap4.css
.offset-5 {
margin-left: 41.666667%;
}
bootstrap4.css
.offset-6 {
margin-left: 50%;
}
bootstrap4.css
.offset-7 {
margin-left: 58.333333%;
}
bootstrap4.css
.offset-8 {
margin-left: 66.666667%;
}
bootstrap4.css
.offset-9 {
margin-left: 75%;
}
bootstrap4.css
.offset-10 {
margin-left: 83.333333%;
}
bootstrap4.css
.offset-11 {
margin-left: 91.666667%;
}
■レイアウト:rowとcol:オフセットのリセット
col-sm-5とcol-md-6
col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0
<div class="row">
<div class="col-sm-5 col-md-6">col-sm-5とcol-md-6</div>
<!-- Medium以上でオフセットをクリア -->
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0</div>
</div>
■レイアウト:rowとcol:オフセット用クラスによるカラムのオフセット
col-md-4
col-md-4とoffset-md-4
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 offset-md-4">col-md-4とoffset-md-4</div><!-- Medium以上で4列分左に移動 -->
</div>
■ドロップダウン:dropdown-menu:コンポーネント:ドロップダウンのオフセット値を設定する
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" data-offset="10,20" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
</div>
</div>
■ドロップダウン:dropdown-menu:js:ドロップダウンのオフセット値を設定する
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
</div>
</div>
<script>
$(function() {
$('#dropdownMenuButton').dropdown({
offset: '10, 20'
})
});
</script>
■ボタン:button:コンポーネント:ラジオボタンをボタンに変更する
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" checked autocomplete="off">ラジオ1
</label>
<label class="btn btn-secondary">
<input type="radio" autocomplete="off">ラジオ2
</label>
<label class="btn btn-secondary">
<input type="radio" autocomplete="off">ラジオ3
</label>
</div>
■ボタン:button:コンポーネント:チェックボックスをボタン変更する data-toggle=buttons
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off">チェック1
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off">チェック2
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off">チェック3
</label>
</div>
■ボタン:button:コンポーネント:切り替えボタンを作成する
<button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true" autocomplete="off">プッシュ状態</button>
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">未プッシュ状態</button>
■ボタン:button:コンポーネント:JavaScriptでボタンの動作 id指定 toggle-btn:js
<button type="button" class="btn btn-primary" aria-pressed="true" autocomplete="off" id="toggle-btn">押してね</button>
<script>
$("#toggle-btn").on('click', function() {
$(this).button('toggle').text('押したね');
});
</script>