🌊

BootstrapのButton groupでフォントサイズを変更

2021/02/18に公開

Bootstrap

HTML

jQuery

tech

概要

ここでは、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についても大きさが変わってしまう為、本番環境等で実装しようと思った時には、少しデザインを調整しないといけないと感じました。

概要

Button groupについて

コード

コードについて説明

工夫したところ

Discussion