生活随笔
收集整理的這篇文章主要介紹了
bootstrap基础表单样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- 在項目開發中表單是最為重要的組件,所以在Bootstrap中對表單也是有支持的.
表單基本樣式
-
表單的元素包括有:文本,單選扭,復選框,下拉列表,而在HTML5中也擴充了許多的組件,例如事件選擇,日期選擇,email輸入,url輸入等組建,但是不管如何操作,表單的定義之中表單也要使用一些樣式進行修飾
-
示例:基礎組件
<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>用戶注冊
</legend><div class="form-group"><label class="col-md-2 control-label" for="mid">用戶名稱
</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">確認密碼
</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">鎖定狀態
</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="中國">中國
</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>
- 在表單中每一個".form-group"都表示一組輸入組件,所以在這個組建之中可以進行自己的布局控制
表單樣式擴展
- 實際上表單本身是可以禁用的,那么如果要進行表單禁用,使用"disabled"樣式
- 示例
<fieldset disabled>
- 如果要為摸一個組件進行禁用,則在具體某個組件中使用"disabled"
<input class="form-control" id="password" type="password" disabled/>
- 為此我們可以設置一個簡單的控制表單組件是否可用的功能
- 當用戶點擊鎖定的時候,用戶密碼框將無法使用,當用戶沒有選擇鎖定狀態是,用戶密碼框可以使用
$(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"/>
-
對于按鈕也是有自己的樣式,可以使用如下幾種按鈕
- 顯示顏色:.btn-link,btn-default,btn-warning,btn-info,btn-primary,btn-success
- 大小樣式:btn-lg,btn-sm,btn-xs
-
不同的大小按鈕
<input class="btn btn-primary btn-lg" type="submit" value="提交"/><input class="btn btn-warning btn-sm" type="reset" value="重置"/>
- 有些時候需要一些小型圖標
- 將fonts目錄拷貝到項目之中
<legend><span class="glyphicon glyphicon-user"></span>用戶注冊
</legend>
總結
以上是生活随笔為你收集整理的bootstrap基础表单样式的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
