您的位置：首页 > Web前端 > BootStrap

Bootstrap3学习笔记：表单

2015-02-04 00:00 645 查看

摘要: Bootstrap对基础表单未做太多的定制化效果设计，默认都会使用全局设置，只是对表单内的fielset、legend、label标签进行了设定，将这些元素的margin、padding、border等进行细化设置。如果在select、input、textarea元素上应用.form-control样式，显示的宽度会变成100%，并且placeholder的颜色都设置成#999999。

<!DOCTYPE html>
<html>
<head>
<meta charst="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- user-scalable=no 在移动设备浏览器上，禁止用户缩放（zooming） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
<title>Bootstrap基础练习</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的，如果不用可移除 -->
<!-- 注意：Respond.js不支持 file:// 方式的访问 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 基础表单 -->
<!-- 提示语句label和input元素放在一个样式为.form-group的div里，form-group提供了一个margin-button:15px的底部外边距，可以看清楚每一组控件。 -->
<form>
<fieldset>
<legend>用户登录</legend>
<div class="form-group">
<label>登录账户：</label>
<input type="email" class="form-control" placeholder="请输入你的邮箱"></input>
</div>
<div class="form-group">
<label>登录密码：</label>
<input type="text" class="form-control" placeholder="请输入你的密码"></input>
</div>
<div class="checkbox">
<label><input type="checkbox">记住密码</label>
</div>
<button type="submit" class="btn btn-default">登录</button>
</fieldset>
</form>
<br />
<!-- 在普通的form元素中使用.form-inline样式实现内联表单 -->
<!-- 注意，在这种情况下再设置一个label的话，input又会换行，所以如果非要加label，只能在input所在的div上边在加一个div元素用于包含label标签。 -->
<form class="form-inline">
<legend>内联表单样式</legend>
<div class="form-group">
<label>用户：</label>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入你的邮箱"></input>
</div>
<div class="form-group">
<label>密码：</label>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入你的密码"></input>
</div>
<div class="checkbox">
<label><input type="checkbox">记住密码</label>
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
<br />
<!-- 如果没有为每个输入控件设置label，屏幕阅读器将无法正确识别。对于这种内联表单，可以使用.sr-only样式将其隐藏。 -->
<form class="form-inline">
<div class="form-group">
<label class="sr-only">登录用户：</label>
<input type="text" class="form-control" id="account" placeholder="请输入你的邮箱"></input>
</div>
<div class="form-group">
<label class="sr-only">登录密码：</label>
<input type="text" class="form-control" id="passwords" placeholder="请输入你的密码"></input>
</div>
<div class="checkbox">
<label><input type="checkbox">记住密码</label>
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
<br />
<!-- 横向表单 -->
<!-- 横向表单与内联表单使用方式有些不一样，横向表单不能在form元素上简单应用一个.form-horizontal样式，这是因为.form-horizontal样式本身没有做什么特殊的设置，只是简单设置了一下相关的padding和margin值。在实现横向表单时还要使用Bootstrap的栅格类，以便将label和控件水平并排布局。 -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="account" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="account" palceholder="请输入你的用户名">
</div>
</div>
<div class="form-group">
<label for="account" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" palceholder="请输入你的密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox"><label><input type="checkbox">记住密码</label></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
<!-- 表单控件 -->
<form>
<select>
<option>这是一个下拉列表菜单</option>
<option>下拉列表菜单的第一项</option>
<option>下拉列表菜单的第二项</option>
<option>下拉列表菜单的第三项</option>
<option>下拉列表菜单的第四项</option>
<option>下拉列表菜单的第五项</option>
</select>
<select multiple="multiple">
<option>这是第一个选项</option>
<option>这是第二个选项</option>
<option>这是第三个选项</option>
<option>这是第四个选项</option>
<option>这是第五个选项</option>
</select>
<textarea class-"form-control" rows="5"></textarea>
</form>
<!-- checkbox和radio -->
<!-- checkbox和radio是input元素里两个非常特殊的type，通常在使用的过程中要和label文字搭配。每个input外部都要用label包住，并且在最外层用容器元素包住，并应用相应的.checkbox和.radio样式。 -->
<form>
<div class="checkbox">
<label><input type="checkbox" value="">是否已阅相关信息条款</label>
</div>
<div class="radio">
<label><input type="radio" name="optionsRadios" value="female" checked>女</label>
</div>
<div class="radio">
<label><input type="radio" name="optionsRadios" value="male">男</label>
</div>
</form>
<!-- 使用.checkbox-inline和.radio-inline样式，实现checkbox和radio的横向显示 -->
<form>
<label class="checkbox-inline"><input type="checkbox" value="sports" id="sports">体育</label>
<label class="checkbox-inline"><input type="checkbox" value="music" id="music">音乐</label>
<label class="checkbox-inline"><input type="checkbox" value="art" id="art">艺术</label>
<label class="radio-inline"><input type="radio" value="female" id="female">女</label>
<label class="radio-inline"><input type="radio" value="male" id="female">男</label>
<label class="radio-inline"><input type="radio" value="null" id="null">保密</label>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Bootstrap3 HTML CSS JavaScript

相关文章推荐

新的分享

章节导航