🌊
BootstrapのButton groupでフォントサイズを変更
概要
ここでは、Bootstrap v5.0のButton groupをクリックするとjQuery v3.5.1を使ってフォントサイズを変更する方法を記載しています。
正直、どんな需要があるかは分かりませんが、どなたかのご参考になれば幸いです。
Button groupについて
コード
index.html
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Change Font-Size with Button group</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery_11.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<p>Test Paragraph.</p>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio1">1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio3">3</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio4">4</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio5" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio5">5</label>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
jquery.js
$(function () {
$('#btnradio1').click(function () {
$('html').css('font-size', '0.8rem');
})
$('#btnradio2').click(function () {
$('html').css('font-size', '0.9rem');
})
$('#btnradio3').click(function () {
$('html').css('font-size', '1.0rem');
})
$('#btnradio4').click(function () {
$('html').css('font-size', '1.1rem');
})
$('#btnradio5').click(function () {
$('html').css('font-size', '1.2rem');
})
});
Folder
├js
│└jquery.js
└index.html
もしくは、構成に合う様にコードを書き換えてください。
書き換える場所が不明な場合には、コメントください。
コードについて説明
htmlについては、Bootstrapのサイトにあるテンプレートを採用して作成しました。
また、jquery.jsファイルが利用可能となる様に、jQueryの読み込みを行っています。
工夫したところ
bodyのフォントサイズを変更しようとするとh1
タグ部分に効果がない為、htmlのフォントサイズを変更しています。
その関係でButton groupについても大きさが変わってしまう為、本番環境等で実装しようと思った時には、少しデザインを調整しないといけないと感じました。
Discussion