AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【Bootstrap3.0建站笔记一】表单元素排版

2017-10-19 1111
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

1、文字和输入框前后排列：


代码：

 <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>条件查找</h2>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-md-4 control-label" for="select">归属地</div>
                                    <div class="col-md-4">
                                        <asp:DropDownList ID="ddlsheng" DataTextField="name" DataValueField="id" runat="server"
                                            AutoPostBack="True" OnSelectedIndexChanged="ddlsheng_SelectedIndexChanged" CssClass="form-control">
                                             <asp:ListItem Value="0">全国</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                    <div class="col-md-4">
                                        <asp:ScriptManager ID="ScriptManager1" runat="server">
                                        </asp:ScriptManager>
                                        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                                            <ContentTemplate>
                                                <asp:DropDownList ID="ddlshi" DataTextField="name" DataValueField="id" runat="server"
                                                    AutoPostBack="True" CssClass="form-control">
                                                </asp:DropDownList>
                                            </ContentTemplate>
                                            <Triggers>
                                                <asp:AsyncPostBackTrigger ControlID="ddlsheng" EventName="SelectedIndexChanged" />
                                            </Triggers>
                                        </asp:UpdatePanel>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-md-4 control-label" for="select">剩余金额</div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" runat="server" id="Balance_start" name="Balance_start" />
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" runat="server" id="Balance_end" name="Balance_end" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-md-4 control-label" for="select">是否VIP</div>
                                    <div class="col-md-4">
                                        <asp:DropDownList ID="select_IsVIP" runat="server"
                                            AutoPostBack="True" CssClass="form-control">
                                            <asp:ListItem Value="-1">所有</asp:ListItem>
                                            <asp:ListItem Value="0">是</asp:ListItem>
                                            <asp:ListItem Value="1">否</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-md-4 control-label" for="select">日期</div>
                                    <div class="col-md-4">
                                        <input type="text" id="txtfrom" runat="server" class="form-control" placeholder="选择開始日期" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd'})">
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" id="txtto" runat="server" class="form-control" placeholder="选择结束日期" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd'})"><%--,minDate:'%y-%M-%d %H:%m:%s'--%>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-md-4 control-label" for="select">代驾次数</div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" runat="server" id="daijicount_start" name="daijicount_start" />
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" runat="server" id="daijicount_end" name="daijicount_end" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-md-4 control-label" for="select">生日月份</div>
                                    <div class="col-md-4">
                                        <asp:DropDownList ID="BirthdayMonth" runat="server"
                                            AutoPostBack="True" CssClass="form-control">
                                            <asp:ListItem Value="0">所有</asp:ListItem>
                                            <asp:ListItem Value="1">1月</asp:ListItem>
                                            <asp:ListItem Value="2">2月</asp:ListItem>
                                            <asp:ListItem Value="3">3月</asp:ListItem>
                                            <asp:ListItem Value="4">4月</asp:ListItem>
                                            <asp:ListItem Value="5">5月</asp:ListItem>
                                            <asp:ListItem Value="6">6月</asp:ListItem>
                                            <asp:ListItem Value="7">7月</asp:ListItem>
                                            <asp:ListItem Value="8">8月</asp:ListItem>
                                            <asp:ListItem Value="9">9月</asp:ListItem>
                                            <asp:ListItem Value="10">10月</asp:ListItem>
                                            <asp:ListItem Value="11">11月</asp:ListItem>
                                            <asp:ListItem Value="12">12月</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-md-4 control-label" for="select">跟踪状态</div>
                                    <div class="col-md-4">
                                        <asp:DropDownList ID="TrackingState" runat="server" AutoPostBack="True" CssClass="form-control">
                                            <asp:ListItem Value="-1">所有</asp:ListItem>
                                            <asp:ListItem Value="0">有意向</asp:ListItem>
                                            <asp:ListItem Value="1">无意向</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-md-4 control-label" for="select">再联系时间</div>
                                    <div class=" col-md-8 ">
                                        <input type="text" id="NextContactDate" runat="server" class="form-control" placeholder="选择日期" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-md-4 control-label" for="select">集团用户</div>
                                    <div class="col-md-4">
                                        <asp:DropDownList ID="GroupUser" runat="server" AutoPostBack="True" CssClass="form-control">
                                            <asp:ListItem Value="-1">所有</asp:ListItem>
                                            <asp:ListItem Value="0">个人用户</asp:ListItem>
                                            <asp:ListItem Value="1">集团用户</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-md-4 control-label" for="select">客户类型</div>
                                    <div class="col-md-4">
                                        <asp:DropDownList ID="CustomersType" runat="server" AutoPostBack="True" CssClass="form-control">
                                            <asp:ListItem Value="0">所有</asp:ListItem>
                                            <asp:ListItem Value="1">预付用户</asp:ListItem>
                                            <asp:ListItem Value="2">推荐用户</asp:ListItem>
                                            <asp:ListItem Value="3">普通用户</asp:ListItem>
                                            <asp:ListItem Value="4">定额合约后付费商户</asp:ListItem>
                                            <asp:ListItem Value="5">非定额后付费合约商户</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-md-3 control-label" for="select" >开票</div>
                                    <div class="col-md-3" >
                                        <asp:DropDownList ID="ddl_Invoice" runat="server" AutoPostBack="True" CssClass="form-control">
                                            <asp:ListItem Value="-1">所有</asp:ListItem>
                                            <asp:ListItem Value="1">已开发票</asp:ListItem>
                                            <asp:ListItem Value="0">未开发票</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                <div class="col-md-3 control-label" for="select">标记</div>
                                    <div class="col-md-3">
                                    <asp:DropDownList ID="ddlRemark"  runat="server"
                                                                  CssClass="form-control" >
                                                 <asp:ListItem Value="0">所有</asp:ListItem>
                                                                    <asp:ListItem Value="1">空号</asp:ListItem>
                                                                    <asp:ListItem Value="2">通话中</asp:ListItem>
                                                  <asp:ListItem Value="3">拒接</asp:ListItem>
                                                  <asp:ListItem Value="4">无人接听</asp:ListItem>
                                                  <asp:ListItem Value="5">停机</asp:ListItem>
                                                  <asp:ListItem Value="6">非本人</asp:ListItem>
                                                  <asp:ListItem Value="7">不须要</asp:ListItem>
                                                  <asp:ListItem Value="8">酒店</asp:ListItem>
                                                  <asp:ListItem Value="9">E代驾</asp:ListItem>
                                                  <asp:ListItem Value="10">反复数据</asp:ListItem>
                                                  <asp:ListItem Value="11">其它</asp:ListItem>
                                          </asp:DropDownList>
                                        </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-8 col-xs-8 col-xxs-12">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-md-4 control-label">关键字</div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" runat="server" id="keyword" name="keyword" />
                                    </div>
                                    <div class="col-md-4">
                                        <asp:Button ID="btnSearch" runat="server" Text=" 筛 选 "  CssClass="btn btn-success  col-md-12 " OnClick="btnSearch_Click"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--查询 button-->
                </div>
            </div>
        </div>
        <!--/col-->
    </div>
    <!--/条件查找-->

2、文字和输入框上下排列：



代码：

<div class="row">
                                                            <div class="form-group col-sm-4">
                                                                <div>司机姓名</div>
                                                                <asp:TextBox ID="txt_DriverName" runat="server" class="form-control "></asp:TextBox>
                                                            </div>
                                                            <div class="form-group col-sm-4">
                                                                <div>司机工号</div>
                                                                <asp:TextBox ID="txt_Ucode" runat="server" class="form-control "></asp:TextBox>
                                                            </div>
                                                            <div class="form-group col-sm-2">
                                                                <div>归属地</div>
                                                                <asp:DropDownList ID="ddlshengAdd" runat="server" CssClass="form-control  " OnSelectedIndexChanged="ddlshengAdd_SelectedIndexChanged" AutoPostBack="true">
                                                                     <asp:ListItem Value="0">全省</asp:ListItem>
                                                                </asp:DropDownList>
                                                            </div>
                                                            <div class="form-group col-sm-2">
                                                                <asp:ScriptManager ID="ScriptManager1" runat="server">
                                                                </asp:ScriptManager>
                                                                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                                                                    <ContentTemplate>
                                                                        <label></label>
                                                                        <asp:DropDownList ID="ddlshiAdd" DataTextField="name" DataValueField="id" runat="server" CssClass="form-control  "></asp:DropDownList>
                                                                    </ContentTemplate>
                                                                    <Triggers>
                                                                        <asp:AsyncPostBackTrigger ControlID="ddlshengAdd" EventName="SelectedIndexChanged" />
                                                                    </Triggers>
                                                                </asp:UpdatePanel>
                                                            </div>
                                                        </div>








本文转自mfrbuaa博客园博客，原文链接：http://www.cnblogs.com/mfrbuaa/p/5168503.html，如需转载请自行联系原作者
文章标签：
.NET
关键词：
Bootstrap表单
Bootstrap排版
Bootstrap笔记排版
Bootstrap笔记表单
Bootstrap表单元素
技术mix呢
目录
相关文章
游客ogeeqvh5vfa5q
|
11月前
|
前端开发 数据安全/隐私保护 容器
Bootstrap5 表单1
本章介绍如何使用 Bootstrap5 创建表单，包括堆叠和内联表单布局。表单元素如 `&lt;input&gt;`、`&lt;textarea&gt;` 和 `&lt;select&gt;` 使用 `.form-control` 类后宽度为 100%。示例展示了如何创建包含邮箱、密码输入框及复选框的堆叠表单，并使用 `.form-label` 确保标签有适当内边距。
游客ogeeqvh5vfa5q
228 5
游客ogeeqvh5vfa5q
|
11月前
Bootstrap5 表单3
使用 `&lt;textarea&gt;` 标签和 `.form-control` 类创建和调整大小的表单文本框示例，包括大、中、小三种尺寸的输入框。
游客ogeeqvh5vfa5q
145 2
游客ogeeqvh5vfa5q
|
11月前
Bootstrap5 表单4
介绍禁用/只读表单、纯文本输入及取色器的使用方法。通过设置 `disabled` 和 `readonly` 属性，可使输入框变为禁用或只读状态；使用 `.form-control-plaintext` 类可去除输入框边框，实现纯文本显示效果；添加 `.form-control-color` 类则可创建取色器。示例代码展示了具体应用。
游客ogeeqvh5vfa5q
106 1
游客ogeeqvh5vfa5q
|
前端开发
Bootstrap5 文字排版3
Bootstrap 5 默认字体大小为 16px，行高 1.5，字体族为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有元素默认上边距为 0，下边距为 1rem (16px)。HTML 标题（h1 至 h6）和代码元素（code、kbd、pre）均有预设样式，方便快速开发和一致的视觉效果。
游客ogeeqvh5vfa5q
185 1
游客ogeeqvh5vfa5q
|
前端开发
Bootstrap5 文字排版2
Bootstrap 5 默认字体大小为 16px，行高 1.5，字体系列为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有 HTML 标题（h1 至 h6）均有预设样式，段落默认上下间距为 16px。此外，Bootstrap 5 还提供了高亮文本、缩写、引用块和描述列表等元素的样式定义。
游客ogeeqvh5vfa5q
159 1
游客ogeeqvh5vfa5q
|
11月前
|
数据安全/隐私保护
Bootstrap5 表单2
内联表单示例：通过在表单中使用 `.row` 和 `.col` 类，可以使输入框等表单元素并排显示。此例展示了一个包含邮箱和密码输入框的内联表单。
游客ogeeqvh5vfa5q
130 0
游客ogeeqvh5vfa5q
|
移动开发 前端开发
Bootstrap5 文字排版1
Bootstrap 5 的默认文字排版设置包括：font-size 为 16px，line-height 为 1.5，font-family 为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有元素的 margin-top 为 0，margin-bottom 为 1rem。HTML 标题（h1 至 h6）和 .h1 至 .h6 类均定义了样式，还有 .display-1 至 .display-4 类用于更大的标题样式。small 元素用于创建更小且颜色更浅的文本。
游客ogeeqvh5vfa5q
152 0
jjczqyjxgdegi
|
机器学习/深度学习 JSON 移动开发
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
jjczqyjxgdegi
139 0
香甜可口草莓蛋糕
|
前端开发 JavaScript 容器
Bootstrap 5 保姆级教程（十五）：表单
Bootstrap 5 保姆级教程（十五）：表单
香甜可口草莓蛋糕
598 0
N..
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
226 0