使用bootstrap进行表单测试

最新推荐文章于 2023-12-01 16:28:10 发布

mischen520

最新推荐文章于 2023-12-01 16:28:10 发布

阅读量651

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/miachen520/article/details/52128791

版权

bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用bootstrap进行表单测试

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单和图片</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="margin:50px">
<!--class="form-inline表示内联表单，即把他们都放置为一行,<768就方便移动端去查看，大于768就是电脑端了"-->
    <!--<form class="form-inline">内联表单,让所有表单元素居于一行-->
<form class="form-horizontal">
    <div class="form-group">
        <!-- col-sm-2表示往右两格-->
        <label class="col-sm-2 control-label">电子邮件</label>
        <!-- col-sm-2表示往右10格-->
        <div class="col-sm-10">
            <input type="email" class="form-control" placeholder="请输入您的电子邮件">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
        <input type="password" class="form-control" placeholder="请输入您的密码">
            </div>
    </div>
</form>
<form>
        <div class="form-group has-success has-feedback">
            <label class="control-label">电子邮件</label>
            <input type="email" class="form-control" placeholder="请输入您的电子邮件">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>

        </div>
       <div class="form-group">
           <label>密码</label>
           <input type="password" class="form-control input-lg" placeholder="请输入您的密码">
       </div>
    <div class="input-group">
      <div class="input-group-addon">￥</div>
      <input type="text" class="form-control" placeholder="请输入您的价格">
        <div class="input-group-addon">.00</div>
        </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>
    <!-- disabled表示使，，，失效-->
    <label class="radio-inline disabled">
        <input type="radio" disabled>男
    </label>
    <select class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</form>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>