bootstrap form布局标准结构

最新推荐文章于 2024-05-09 09:59:41 发布

我是全栈架构师

最新推荐文章于 2024-05-09 09:59:41 发布

阅读量449

点赞数

分类专栏：前端 HTML 文章标签： web html

本文链接：https://blog.csdn.net/mxj588love/article/details/111938840

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

<div class="panel panel-primary">
        <div class="panel-heading">垂直布局</div>
        <div class="panel-body">
            <form role="form"  style="width: 500px">
                <div class="form-group">
                    <label class="control-label">订单编号</label>
                    <input type="text" class="form-control"/>
                </div>
                <div class="form-group">
                    <label class="control-label">配送地址</label>
                    <input type="text" class="form-control"/>
                </div>
            </form>
        </div>
    </div>

    <div class="panel panel-primary">
        <div class="panel-heading">水平布局</div>
        <div class="panel-body">
            <form role="form" class="form-horizontal">
                <div class="form-group">
                    <label class="control-label col-xs-1">订单编号</label>
                    <div class="col-xs-5">
                        <input type="text" class="form-control">
                    </div>
                    <label class="control-label col-xs-1">配送地址</label>
                    <div class="col-xs-5">
                        <input type="text" class="form-control">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-xs-1">下单用户</label>
                    <div class="col-xs-3">
                        <input type="text" class="form-control">
                    </div>
                    <label class="control-label col-xs-1">收件人</label>
                    <div class="col-xs-3">
                        <input type="text" class="form-control">
                    </div>
                    <label class="control-label col-xs-1">收件地址</label>
                    <div class="col-xs-3">
                        <input type="text" class="form-control">
                    </div>
                </div>

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


    <div class="panel panel-primary">
        <div class="panel-heading">内联表单</div>
        <div class="panel-body">
            <form class="form-inline" role="form">
                <div class="form-group">
                    <label class="sr-only" for="name">订单编号</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入订单编号"/>
                </div>
                <div class="form-group">
                    <label class="sr-only" for="addr">下单人</label>
                    <input type="text" class="form-control" id="addr" placeholder="请输入下单人"/>
                </div>
                <div class="form-group">
                    <button class="btn btn-default">开始查询</button>
                </div>
            </form>
        </div>
    </div>