Framework | Library/Bootstrap
[Bootstrap] Radio
arajo
2022. 11. 23. 03:35
728x90
기본 라디오(세로)
<!-- Default radio -->
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"/>
<label class="form-check-label" for="flexRadioDefault1"> Default radio </label>
</div>
<!-- Default checked radio -->
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked/>
<label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label>
</div>
기본 라디오(가로)
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" />
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" />
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled />
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
토글 버튼 라디오
<div class="btn-group">
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked />
<label class="btn btn-secondary" for="option1">Checked</label>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off" />
<label class="btn btn-secondary" for="option2">Radio</label>
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" />
<label class="btn btn-secondary" for="option3">Radio</label>
</div>