水平表单

最新推荐文章于 2024-05-06 22:33:41 发布

脆订壳

最新推荐文章于 2024-05-06 22:33:41 发布

阅读量133

点赞数

分类专栏： Bootstrap 文章标签：经验分享 bootstrap html

本文链接：https://blog.csdn.net/qq_41301428/article/details/121482283

版权

Bootstrap 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平表单</title>
    <link rel="stylesheet" type="text/css" href="../static/bootstrap/css/bootstrap.min.css">
</head>
<body>
<!--水平表单
        设置样式：.form-horizontal
-->
<div class="container" style="background-color: #d4d4d4">
    <!--水平表单  需要设置宽度col-md-* -->
    <form action="#" class="form-horizontal" role="form">
        <h1 class="text-center">用户信息表</h1>
        <div class="form-group">
            <label for="uname" class="control-label col-md-2 ">姓名</label>
            <div class="col-md-8">
                <input type="text" id="uname" class="form-control" placeholder="请输入姓名">
            </div>
        </div>
        <div class="form-group">
            <label for="pwd" class="control-label col-md-2 ">密码</label>
            <div class="col-md-8">
                <input type="text" id="pwd" class="form-control" placeholder="请输入密码">
            </div>
        </div>
        <!--水平显示-->
        <div class="form-group">
            <label class="control-label col-md-2">爱好</label>
            <div class="col-md-8">
                <label class="checkbox-inline control-label"><input type="checkbox" name="hobby">唱歌</label>
                <label class="checkbox-inline control-label"><input type="checkbox" name="hobby">跳舞</label>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2 ">城市</label>
            <div class="col-md-8">
                <select class="form-control">
                    <option value="">请选择城市</option>
                    <option value="">上海</option>
                    <option value="">北京</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="remark" class="control-label col-md-2 ">简介</label>
            <div class="col-md-8">
                <textarea class="form-control" id="remark"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-2 col-md-offset-9">
                <button class="btn btn-primary">按钮</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>

脆订壳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
水平表单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水平表单</title> <link rel="stylesheet" type="text/css" href="../static/bootstrap/css/bootstrap.min.css"></head><body>&lt
复制链接

扫一扫