生活随笔
收集整理的這篇文章主要介紹了
bootstrap基础表单样式
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
- 在項(xiàng)目開(kāi)發(fā)中表單是最為重要的組件,所以在Bootstrap中對(duì)表單也是有支持的.
表單基本樣式
-
表單的元素包括有:文本,單選扭,復(fù)選框,下拉列表,而在HTML5中也擴(kuò)充了許多的組件,例如事件選擇,日期選擇,email輸入,url輸入等組建,但是不管如何操作,表單的定義之中表單也要使用一些樣式進(jìn)行修飾
-
示例:基礎(chǔ)組件
<html>
<head><meta charset="UTF-8"/><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><meta name="viewport" content="width=device-width,initial-scal=1">
</head>
<body><div class="container"><div class="row"><div class="col-md-12 "><form class="form-horizontal" method="post" action="#"><fieldset><legend>用戶注冊(cè)
</legend><div class="form-group"><label class="col-md-2 control-label" for="mid">用戶名稱(chēng)
</label><div class="col-md-4"><input class="form-control" id="mid" type="text"/></div></div><div class="form-group"><label class="col-md-2 control-label" for="password">用戶密碼
</label><div class="col-md-4"><input class="form-control" id="password" type="password"/></div></div><div class="form-group"><label class="col-md-2 control-label" for="con">確認(rèn)密碼
</label><div class="col-md-4"><input class="form-control" id="con" type="password"/></div></div><div class="form-group"><label class="col-md-2 control-label" for="sex">性別
</label><div class="col-md-5"><div class="radio-inline"><input type="radio" name="sex" id="sex-man" value="man" checked/>男
</div><div class="radio-inline"><input type="radio" name="sex" id="sex-woman" value="woman"/>女
</div></div> </div><div class="form-group"><label class="col-md-2 control-label" for="lock">鎖定狀態(tài)
</label><div class="col-md-5"><label class="checkbox-inline"><input type="checkbox" value="lock" name="city" id="lock"/>鎖定
</label></div></div><div class="form-group"><label class="control-label col-md-2" for="city">所在城市
</label><div class="col-md-4"><select id="city" class="form-control"><option value="中國(guó)">中國(guó)
</option><option value="outher">其他
</option></select></div></div><div class="form-group"><div class="col-md-6 col-md-offset-3"><input class="btn btn-primary" type="submit" value="提交"/><input class="btn btn-warning" type="reset" value="重置"/></div></div></fieldset></form></div></div> <div>
</body>
</html>
- 在表單中每一個(gè)".form-group"都表示一組輸入組件,所以在這個(gè)組建之中可以進(jìn)行自己的布局控制
表單樣式擴(kuò)展
- 實(shí)際上表單本身是可以禁用的,那么如果要進(jìn)行表單禁用,使用"disabled"樣式
- 示例
<fieldset disabled>
- 如果要為摸一個(gè)組件進(jìn)行禁用,則在具體某個(gè)組件中使用"disabled"
<input class="form-control" id="password" type="password" disabled/>
- 為此我們可以設(shè)置一個(gè)簡(jiǎn)單的控制表單組件是否可用的功能
- 當(dāng)用戶點(diǎn)擊鎖定的時(shí)候,用戶密碼框?qū)o(wú)法使用,當(dāng)用戶沒(méi)有選擇鎖定狀態(tài)是,用戶密碼框可以使用
$(function(){$("#lock").on("click",function(){if(this.checked
){$("#password").attr("disabled",true);$("#con").attr("disabled",true);}else{$("#password").attr("disabled",false);$("#con").attr("disabled",false);}})
})
<input class="form-control input-lg" id="mid" type="text"/>
<input class="form-control input-sm" id="mid" type="text"/>
<input class="btn btn-primary btn-lg" type="submit" value="提交"/><input class="btn btn-warning btn-sm" type="reset" value="重置"/>
- 有些時(shí)候需要一些小型圖標(biāo)
- 將fonts目錄拷貝到項(xiàng)目之中
<legend><span class="glyphicon glyphicon-user"></span>用戶注冊(cè)
</legend>
- 這些標(biāo)志可以有擴(kuò)充,可以下載第三方的logo圖片
總結(jié)
以上是生活随笔為你收集整理的bootstrap基础表单样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
