Bootstarp 基礎(chǔ)教程之表單部分實(shí)例代碼
bootstrap 表單部分,具體代碼如下所示:
<div class="container"> <form action="#" method="post"> <fieldset> <legend>用戶登陸</legend> <div class="form-group"> <label>用戶名:</label> <input type="text" class="form-control" name="name" placeholder="用戶名"> </div> <div class="form-group"> <label>密碼:</label> <input type="password" class="form-control" name="pwd" placeholder="密碼"> <!--form-control代表的是占滿容器--> </div> <div class="checkbox"> <label><input type="checkbox">記住密碼</label> </div> <!--多選框必須這么寫 不然會(huì)造成選框與文本重疊的問題--> <div class="form-group"> <button type="submit" class="btn btn-default">提交</button> </div> </fieldset> </form> </div>
inline表單與label隱藏
<div class="container"> <form action="#" method="post" class="form-inline"> <!--form-inline讓表單橫向放置--> <fieldset> <legend>用戶登陸</legend> <div class="form-group"> <label class="sr-only">用戶名:</label> <!--sr-only讓label隱藏--> <input type="text" class="form-control" name="name" placeholder="用戶名"> </div> <div class="form-group"> <label>密碼:</label> <input type="password" class="form-control" name="pwd" placeholder="密碼"> <!--form-control代表的是占滿容器--> </div> <div class="checkbox"> <label><input type="checkbox">記住密碼</label> </div> <!--多選框必須這么寫 不然會(huì)造成選框與文本重疊的問題--> <div class="form-group"> <button type="submit" class="btn btn-default">提交</button> </div> </fieldset> </form> </div>
把label和input放在同一行內(nèi)的方法
<div class="container"> <form action="#" method="post" class="form-horizontal"> <!--form-horizontal讓表單初始化--> <fieldset> <legend>用戶登陸</legend> <div class="form-group"> <label class="col-xs-3 control-label">用戶名:</label> <!--借助柵格系統(tǒng)設(shè)置label的寬度--> <div class="col-xs-9"> <input type="text" class="form-control" name="name" placeholder="用戶名"> </div> <!--用div設(shè)置柵格并包裹input--> </div> </form> </div> <!--注意!把label和input放在同一行在768分辨率一下是有問題的 在md和lg上正常-->
小圖標(biāo)的添加
<div class="container"> <form action="#" method="post" class="form-horizontal"> <!--form-horizontal讓表單初始化--> <fieldset> <legend>用戶登陸</legend> <div class="form-group has-feedback has-success"> <!--在項(xiàng)目的div外包圍class加has-feedback--> <label class="col-xs-3 control-label">用戶名:</label> <div class="col-xs-9"> <input type="text" class="form-control" name="name" placeholder="用戶名"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <!--在input之下添加一個(gè)span 記得加form-c-f--> </div> </div> </form> </div>
一堆按鈕組件
<div class="container"> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-success"><span class="glyphicon glyphicon-star"></span></button> <button class="btn btn-info"><span class="glyphicon glyphicon-star"></span></button> <button class="btn btn-danger"><span class="glyphicon glyphicon-star"></span></button> <button class="btn btn-default"><span class="glyphicon glyphicon-star"></span></button> </div> </div> </div>
不要強(qiáng)行去做一個(gè)按鈕分離 因?yàn)檫@是一組 中間的按鈕不是圓角的
搜索框
<div class="col-md-4 col-md-offset-2"> <div class="input-group input-lg"> <div class="input-group-addon"> <a href=""><span class="glyphicon glyphicon-star"></span></a> </div> <input type="text" class="form-control input-xs"> </div> </div> </div>
以上所述是小編給大家介紹的Bootstarp 基礎(chǔ)教程之表單部分,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JS+CSS實(shí)現(xiàn)自動(dòng)切換的網(wǎng)頁(yè)滑動(dòng)門菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)自動(dòng)切換的網(wǎng)頁(yè)滑動(dòng)門菜單效果代碼,涉及JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)變換頁(yè)面tab樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JavaScript 模式之工廠模式(Factory)應(yīng)用介紹
工廠模式也是對(duì)象創(chuàng)建模式之一,它通常在類或類的靜態(tài)方法中去實(shí)現(xiàn),本文將詳細(xì)介紹JavaScript 工廠模式2012-11-11微信小程序?qū)崿F(xiàn)批量倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)批量倒計(jì)時(shí)功能,適用于商品列表倒計(jì)時(shí),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06FireFox下XML對(duì)象轉(zhuǎn)化成字符串的解決方法
近,在客戶端解吸xml時(shí)候,需要將XML轉(zhuǎn)化成字符串,看了很多文章,介紹的最多的是將XML字符串轉(zhuǎn)化成對(duì)象2011-12-12在Chrome DevTools中調(diào)試JavaScript的實(shí)現(xiàn)
這篇文章主要介紹了在Chrome DevTools中調(diào)試JavaScript的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04PixiJS學(xué)習(xí)之Sprite類的使用詳解
Sprite 直譯為 “精靈”,是游戲開發(fā)中常見的術(shù)語(yǔ),就是將一個(gè)角色的多個(gè)動(dòng)作放到一個(gè)圖片里,通過裁剪局部區(qū)域得到當(dāng)前的角色狀態(tài)圖。本文主要介紹了PixiJS中Sprite類的使用,需要的可以參考一下2023-02-02JS.GetAllChild(element,deep,condition)使用介紹
JS.GetAllChild()獲取所有子節(jié)點(diǎn),想必大家都知道吧,具體的使用方法如下,感興趣的朋友可以參考下2013-09-09