Bootstrap3.0建站教程(一)之bootstrap表單元素排版
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">全國(guó)</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="選擇開(kāi)始日期" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd'})"> </div> <div class="col-md-4"> <input type="text" id="txtto" runat="server" class="form-control" placeholder="選擇結(jié)束日期" 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">代駕次數(shù)</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">跟蹤狀態(tài)</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">無(wú)意向</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">再聯(lián)系時(shí)間</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">集團(tuán)用戶</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">個(gè)人用戶</asp:ListItem> <asp:ListItem Value="1">集團(tuán)用戶</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">客戶類(lèi)型</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">預(yù)付用戶</asp:ListItem> <asp:ListItem Value="2">推薦用戶</asp:ListItem> <asp:ListItem Value="3">普通用戶</asp:ListItem> <asp:ListItem Value="4">定額合約后付費(fèi)商戶</asp:ListItem> <asp:ListItem Value="5">非定額后付費(fèi)合約商戶</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" >開(kāi)票</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">已開(kāi)發(fā)票</asp:ListItem> <asp:ListItem Value="0">未開(kāi)發(fā)票</asp:ListItem> </asp:DropDownList> </div> <div class="col-md-3 control-label" for="select">標(biāo)記</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">空號(hào)</asp:ListItem> <asp:ListItem Value="2">通話中</asp:ListItem> <asp:ListItem Value="3">拒接</asp:ListItem> <asp:ListItem Value="4">無(wú)人接聽(tīng)</asp:ListItem> <asp:ListItem Value="5">停機(jī)</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">重復(fù)數(shù)據(jù)</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">關(guān)鍵字</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> <!--查詢 按鈕--> </div> </div> </div> <!--/col--> </div> <!--/條件查找-->
2、文字和輸入框上下排列:
代碼:
<div class="row"> <div class="form-group col-sm-4"> <div>司機(jī)姓名</div> <asp:TextBox ID="txt_DriverName" runat="server" class="form-control "></asp:TextBox> </div> <div class="form-group col-sm-4"> <div>司機(jī)工號(hào)</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>
以上內(nèi)容是小編給大家介紹的Bootstrap3.0建站教程(一)之bootstrap表單元素排版的相關(guān)知識(shí),希望對(duì)大家有所幫助!
相關(guān)文章
JavaScript面向?qū)ο笾叽蠡驹瓌t實(shí)例詳解
這篇文章主要介紹了JavaScript面向?qū)ο笾叽蠡驹瓌t,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript面向?qū)ο笃叽蠡驹瓌t,包括單一職責(zé)、開(kāi)閉原則、里氏替換、依賴(lài)倒置、接口隔離、迪米特法則及組合/聚合復(fù)用原則,需要的朋友可以參考下2020-05-05javascript實(shí)現(xiàn)獲取cookie過(guò)期時(shí)間的變通方法
這篇文章主要介紹了javascript實(shí)現(xiàn)獲取cookie過(guò)期時(shí)間的變通方法,因?yàn)閏ookie過(guò)期時(shí)間是由瀏覽器控制的,所以想獲取過(guò)期時(shí)間只能通過(guò)本文的變通方法來(lái)實(shí)現(xiàn),需要的朋友可以參考下2014-08-08JS回調(diào)函數(shù)的應(yīng)用簡(jiǎn)單實(shí)例
這篇文章主要分享了JS回調(diào)函數(shù)應(yīng)用的簡(jiǎn)單實(shí)例,比較實(shí)用,需要的朋友可以參考下2014-09-09JS IOS/iPhone的Safari瀏覽器不兼容Javascript中的Date()問(wèn)題如何解決
這篇文章主要介紹了JS IOS/iPhone的Safari瀏覽器不兼容Javascript中的Date()問(wèn)題的解決方案,非常不錯(cuò),感興趣的朋友參考下吧2016-11-11詳解javascript new的運(yùn)行機(jī)制
這篇文章主要介紹了javascript new的運(yùn)行機(jī)制的相關(guān)資料,需要的朋友可以參考下2016-01-01JS實(shí)現(xiàn)靜態(tài)頁(yè)面搜索并高亮顯示功能完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)靜態(tài)頁(yè)面搜索并高亮顯示功能,涉及javascript事件響應(yīng)、字符遍歷替換及頁(yè)面元素屬性動(dòng)態(tài)變換等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09js+css 實(shí)現(xiàn)遮罩居中彈出層(隨瀏覽器窗口滾動(dòng)條滾動(dòng))
本文為大家詳細(xì)介紹下使用js實(shí)現(xiàn)遮罩彈出層居中,且隨瀏覽器窗口滾動(dòng)條滾動(dòng),示例代碼如下,感興趣的朋友可以參考下2013-12-12IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]
長(zhǎng)久以來(lái)JavaScript兼容性一直是Web開(kāi)發(fā)者的一個(gè)主要問(wèn)題。在正式規(guī)范、事實(shí)標(biāo)準(zhǔn)以及各種實(shí)現(xiàn)之間的存在的差異讓許多開(kāi)發(fā)者日夜煎熬2011-10-10