Bootstrap(4) 表单和图片

    <form class="form-horizontal">
        <div class="form-group has-error">
            <label class="col-sm-6 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" placeholder="请输入您的电子邮件">
            </div>
        </div>

        <div class="form-group has-warning">
            <label class="col-sm-6 control-label">电子fff</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" placeholder="请输入您的电子邮件">
            </div>
        </div>

        <div class="form-group has-success">
            <label class="col-sm-4 control-label">密码</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <div class="input-group-addon">￥</div>
                    <input type="password" class="form-control" placeholder="请输入您的密码">
                        <div class="input-group-addon">.00</div>
                </div>

            </div>
        </div>
    </form>

<!--  设置复选框 -->
    <div class="checkbox">
        <label> <input type="checkbox">体育 </label>
    </div>
    <div class="checkbox">
        <label> <input type="checkbox">音乐 </label>
    </div>

    <!-- 设置禁用的复选框 -->
    <div class="checkbox disabled">
        <label> <input type="checkbox" disabled>音乐 </label>
    </div>
    
    <!-- 设置内联一行显示的复选框 -->
    <label class="checkbox-inline"> <input type="checkbox">体育</label>
    <label class="checkbox-inline disabled"> <input type="checkbox" disabled>音乐 </label>
        
    <!--设置单选框 -->
    <div class="radio">
        <label> <input type="radio" name="sex" disabled>男 </label>
    </div>

      <!--圆角 圆形  缩略图  -->
<img src="Bootstrap/img/1.jpg" alt="图片" class="img-rounded"> 
    <img src="Bootstrap/img/2.jpg" alt="图片" class="img-circle">
    <img src="Bootstrap/img/3.jpg" alt="图片" class="img-thumbnail">
    <!-- //响应式图片 -->
    <img src="Bootstrap/img/4.jpg" alt="图片" class="img-responsive">