Bootstrap5の覚書 | ワクガンス

Bootstrap5のラジオボタン

    <div class="form-check">
        <input class="form-check-input" type="radio" name="neko_type" id="neko_type1" value="1" checked>
        <label class="form-check-label" for="neko_type1">茶白猫</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="neko_type" id="neko_type2" value="2">
        <label class="form-check-label" for="neko_type2">キジトラ</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="neko_type" id="neko_type3" value="3" disabled>
        <label class="form-check-label" for="neko_type3">シャムトラ猫</label>
    </div>
	

2022-12-27

Bootstrap5のチェックボックス

    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="neko_flg1">
        <label class="form-check-label" for="neko_flg1">猫の毛を切る</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="neko_flg1" checked>
        <label class="form-check-label" for="neko_flg1">猫の爪を切る</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="neko_flg2" disabled>
        <label class="form-check-label" for="neko_flg2">猫を風呂に入れる</label>
    </div>

	

2022-12-27

アイコン | Bootstrap Icons

Bootstarap5にはアイコン関連のパッケージが含まれていない。 なので、追加で「Bootstrap Icons」をインストールしなければならない。

インストール方法

「package.json」が配置されているディレクトリへcdコマンドで移動し、以下のコマンドを実行する。

npm i bootstrap-icons

読み込み

	<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="node_modules/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
	
	<script src="/note_prg/js/jquery3.js"></script>	<!-- jquery-3.3.1.min.js -->
	<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
	

使用例

		<button type="button" class ="btn btn-info"><span class="text-light"><i class="bi bi-0-circle"></i></span></button>
	

アイコンを探すサイト

https://icons.getbootstrap.jp/


2023-8-31

xxx

2023-1-1