Bootstrap-04-常见样式——表单控件(单选框和复选框)

原生单选框

name 判断是否同组

	<input type="radio" name="hobby" id="">男
    <input type="radio" name="hobby" id="">女

bootstrap 单选框

bootstrap单选框
垂直显示:.radio
水平显示:.radio-inline

 <!-- 垂直 -->
    <div class="row">
        <div class="col-md-3">
            <div class="radio">
                <label for=""><input type="radio" name="sex" id="">男</label>
            </div>
            <div class="radio">
                <label for=""><input type="radio" name="sex" id="">女</label>
            </div>
        </div>
    </div>
    <!-- 水平 -->
    <div class="row">
        <div class="col-md-3">
            <div class="radio-inline">
                <label for=""><input type="radio" name="sex" id="">男</label>
            </div>
            <div class="radio-inline">
                <label for=""><input type="radio" name="sex" id="">女</label>
            </div>
        </div>
    </div>

原生复选框

<input type="checkbox" name="hobby" id="">唱歌
<input type="checkbox" name="hobby" id="">跳舞

bootstrap 复选框

bootstrap 复选框
垂直:.checkbox
水平:.checkbox-inline

 <!-- 垂直 -->
     <div class="row">
        <div class="col-md-3">
            <div class="checkbox">
                <label for=""><input type="checkbox" name="hobby" id="">唱歌</label>
            </div>
            <div class="checkbox">
                <label for=""><input type="checkbox" name="sex" id="">跳舞</label>
            </div>
        </div>
    </div>
    <!-- 水平 -->
    <div class="row">
        <div class="col-md-3">
            <div class="checkbox-inline">
                <label for=""><input type="checkbox" name="sex" id="">男</label>
            </div>
            <div class="checkbox-inline">
                <label for=""><input type="checkbox" name="sex" id="">女</label>
            </div>
        </div>
    </div>