使用bootstrap和栅格系统实现响应式的基础信息提交

最新推荐文章于 2020-06-24 15:01:59 发布

时光飞逝，岁月依然

最新推荐文章于 2020-06-24 15:01:59 发布

阅读量203

点赞数 2

分类专栏： css bootstrap 栅格系统文章标签： bootstrap css3

本文链接：https://blog.csdn.net/qq_43260038/article/details/106584431

版权

css 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

bootstrap

2 篇文章 0 订阅

订阅专栏

栅格系统

2 篇文章 0 订阅

订阅专栏

使用bootstrap和栅格系统实现响应式的基础信息提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="lib/css/bootstrap.css">
    <title>Bootstrap栅格系统</title>
</head>
<body>
<div class="container">
    <form>
        <div class="form-row">
            <div class="form-group col-md-6">
                <lable for="loginId">账号</lable>
                <input type="email" id="loginId" placeholder="请输入登录账号" class="form-control">
            </div>

            <div class="form-group col-md-6">
                <lable for="password">密码</lable>
                <input type="password" id="password" placeholder="请输入登录密码" class="form-control">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-6 col-lg-3 col-xl-3">
                <lable for="name">姓名</lable>
                <input type="text" id="name" placeholder="请输入姓名" class="form-control">
            </div>

            <div class="form-group col-md-6 col-lg-3 col-xl-3">
                <lable for="country">国家</lable>
                <input type="text" id="country" placeholder="请输入国家" class="form-control">
            </div>

            <div class="form-group col-md-6 col-lg-3 col-xl-3">
                <label for="city" style="margin-bottom:-8px">城市</label>
                <select class="form-control" id="city" >
                    <option>北京</option>
                    <option>上海</option>
                    <option>天津</option>
                    <option>重庆</option>
                    <option>四川</option>
                </select>
            </div>
            <div class="form-group col-md-6 col-lg-3 col-xl-3" >
                <lable for="postalcode">邮编</lable>
                <input type="text" id="postalcode" placeholder="请输入邮编" class="form-control">
            </div>
        </div>
        <div class="form-group" >
            <lable for="address">详细地址</lable>
            <textarea id="address" rows="3" cols="100%" class="form-control" placeholder="请输入详细地址"></textarea>
        </div>
        <div>请选择你的爱好</div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="checkbox1" value="option1">
            <label class="form-check-label" for="checkbox1">篮球</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="checkbox2" value="option2">
            <label class="form-check-label" for="checkbox2">羽毛球</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="checkbox3" value="option3">
            <label class="form-check-label" for="checkbox3">游泳</label>
        </div>
        <div class="form-group" >
            <lable for="submit"></lable>
            <input type="submit" id="submit" value="提交" class="form-control" style="background-color: #007aff;color: white">
        </div>
    </form>
</div>
</body>
</html>