本文介绍一下在后台管理系统中，常用的两种基于Bootstrap的表单布局（水平布局 和 垂直布局）

下面是两个使用的效果图：

水平布局：

垂直布局：

水平布局代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向表单布局-BootStrap常用表单布局</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="js/bootstrap.js"></script>

</head>
<body>
    <form class="" role="form">
        <div class="container">
            <div class="row" style="padding: 20px 0">
                <h3>常用水平表单布局</h3>
            </div>
            <div class="row">
                <!--前缀-->
                <div class="form-group col-lg-3">
                    <div class="input-group">
                        <span class="input-group-addon">名称</span>
                        <input class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group col-lg-3">
                    <div class="input-group">
                        <span class="input-group-addon">内容</span>
                        <input class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="row">
                <!--后缀-->
                <div class="form-group col-lg-3">
                    <div class="input-group">
                        <input class="form-control" type="text">
                        <span class="input-group-addon">查询</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <!--下拉框-->
                <div class="form-group col-lg-3">
                    <div class="input-group">
                        <span class="input-group-addon">内容类型</span>
                        <select class="form-control">
                            <option>default</option>
                            <option>one</option>
                            <option>two</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

运行效果：

垂直布局代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直方向表单布局-BootStrap常用表单布局</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <!--<link rel="stylesheet" href="css/bootstrap.css">-->
</head>
<body>
    <form class="form-horizontal">
        <div class="container">
            <div class="row" style="padding: 20px 0">
                <h3>常用垂直表单布局</h3>
            </div>
            <div class="row form-group">
                <label class="control-label col-lg-1" for="name">名称</label>
                <div class="col-lg-5 col-md-6">
                    <input class="form-control" name="name" id="name" type="text">
                </div>
            </div>
            <div class="row form-group">
                <label class="control-label col-lg-1">内容</label>
                <div class="col-lg-5 col-md-6">
                    <textarea class="form-control" rows="5"></textarea>
                </div>
            </div>
            <div class="row form-group">
                <label class="control-label col-lg-1">补充</label>
                <div class="col-lg-5 col-md-6">
                    <textarea class="form-control" rows="5"></textarea>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Demo 下载地址

https://github/wangyushuai/bsCommonForm.git

更多推荐

Bootstrap常用表单布局（HTML）