bootstrap表单的其他组件
发布时间：2020-12-17 21:11:35 所属栏目：安全 来源：网络整理
导读：!DOCTYPE htmlhtml head titleBootstrap 表单/title meta charset="utf-8" meta name="viewport" content="width=device-width,initial-scale=1.0" !-- Bootstrap -- link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen" link href="b
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 表单</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body style="padding:50px;">
<h3>其他常用表单控件【多个复选框或单选按钮并排显示.inline】</h3>
<p>让多个表单标签并排显示，只需要给label添加一个.inline类</p>
<label for="" class="checkbox inline"><input type="checkbox" name="" id="" value="">1</label>
<label for="" class="checkbox inline"><input type="checkbox" name="" id="" value="">2</label>
<label for="" class="radio inline"><input type="radio" name="sex" id="">男</label>
<label for="" class="radio inline"><input type="radio" name="sex" id="">女</label>
<h3>选项列表</h3>
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
<br>
<p>下拉列表选择多项，只需加句multiple="multiple"即可</p>
<select name="" id="" multiple="multiple">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
<h3>扩展表单组件【前/后置组件】</h3>
<ol>
<li>讲表单组件用div包含，并添加一个input-prepend类或input-append类</li>
<li>然后在div里面添加一个.add-on类的span标签</li>
<li>后面紧跟表单文本框的控件</li>
<li>span的位置可以在前，也可以在后</li>
</ol>
<div class="input-prepend">
<span class="add-on">@</span>
<input type="text" name="" id="" placeholder="张三丰">
</div>
<div class="input-append">
<input type="text" name="" id="" placeholder="张三丰">
<span class="add-on">@</span>
</div>
<div class=" input-prepend input-append">
<span class="add-on">$</span>
<input type="text" name="" id="">
<span class="add-on">.00</span>
</div>
<div class=" input-prepend input-append">
<button class="btn">选项</button>
<input type="text" name="" id="">
<button class="btn">搜索1</button>
<button class="btn">搜索2</button>
</div>
<h3>圆弧搜索表单</h3>
<form class="form-search" action="">
<div class="input-prepend">
<button class="btn">搜索1</button>
<input class="search-query" type="text" name="" id="" placeholder="开始搜索">
</div>
<br><br>
<div class=" input-append">
<input class="search-query" type="text" name="" id="" placeholder="开始搜索">
<button class="btn">搜索2</button>
</div>
</form>
<h3>控件大小设置</h3>
<input class="input-block-level" type="text" name="" id="" placeholder="块级文本框">
<b>控制控件大小除了.span*，还可以用类名input-mini/small/medium/large/xlarge/xxlarge</b><br>
<input class="input-mini" type="text" name="" id=""><br>
<input class="input-small" type="text" name="" id=""><br>
<input class="input-medium" type="text" name="" id=""><br>
<input class="input-large" type="text" name="" id=""><br>
<input class="input-xlarge" type="text" name="" id=""><br>
<input class="input-xxlarge" type="text" name="" id=""><br>
<h3>相对大小的控件</h3>
<input class="span1" type="text" name="" id="">
<input class="span2" type="text" name="" id="">
<input class="span3" type="text" name="" id="">
<select class="span1" name="" id="">...</select>
<select class="span2" name="" id="">...</select>
<select class="span3" name="" id="">...</select>
<h3>不可编辑的控件</h3>
<input class="uneditable-input" type="text" name="" id="" placeholder="文本不可编辑"><br>
<textarea class="uneditable-textarea" name="" id="" cols="30" rows="5"></textarea>
<form class="form-horizontal">
<div class="control-group warning">
<label class="control-label">Input widht warning</label>
<div class="controls">
<input type="text" name="" id="">
<span class=" help-inline">something may have gone wrong!</span>
</div>
</div>
<div class="control-group error">
<label class="control-label">Input widht warning</label>
<div class="controls">
<input type="text" name="" id="">
<span class=" help-inline">something may have gone wrong!</span>
</div>
</div>
<div class="control-group info">
<label class="control-label">Input widht warning</label>
<div class="controls">
<input type="text" name="" id="">
<span class=" help-inline">something may have gone wrong!</span>
</div>
</div>
<div class="control-group success">
<label class="control-label">Input widht warning</label>
<div class="controls">
<input type="text" name="" id="">
<span class=" help-inline">something may have gone wrong!</span>
</div>
</div>
</form>
</body>
</html>
预览效果：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
