fourLesson - bootstrap BootStrap CSS-文本框，表单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>BootStrap-CSS</title>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<!-- from表单 role属性 内部可使用input输入框，label文本，button按钮等标签-->
<!-- class="form-inline" 内联表单,输入框的宽度将会变成自适应 在一行。-->
<form role="form" class="form-inline">
<!-- input type="date" 输入框控件-->
<!-- input type="email" 输入框控件-->
<!-- input type="password" 密码框控件-->
<!-- input type="file" 选择控件-->
<div class="form-group">
<!-- <label>标签必须使用，否则无法正常识别input标签。如果不想要label，可以通过设置label的class="sr-only" -->
<label>用户名</label>
<input type="date" class="form-control" placeholder="User">
</div>
<div class="form-group">
<label class="sr-only">email</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<label>选取文件</label>
<input type="file">
<p class="help-block">选择您所需要的文件</p>
</div>
</form>
<hr>
<!-- 水平表单 -->
<form role="form" class="form-horizontal">
<div class="form-group">
<!-- 设置长度col-xs-11 同一行-->
<label class="col-xs-1 control-label">用户名</label>
<div class="col-xs-11">
<input type="date" class="form-control" placeholder="User">
</div>
</div>
<div class="form-group">
<label class="col-xs-1 control-label">密码</label>
<div class="col-xs-11">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-xs-2">
<div class="checkbox">
<label>
<input type="checkbox">记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-1 col-xs-11">
<div class="checkbox">
<button type="submit" class="btn btn-default">
登录
</button>
</div>
</div>
</div>
</form>
<hr>
<!-- 文本域 textarea row为文本域行数 placeholder文本域内容为空字符时显示的字符串 -->
<form role="form">
<!-- <input type="text" class="from-control"> -->
<textarea class="form-control" row="5" placeholder="Hello textarea">Hello</textarea>
<!-- 复选框 使用label包起来可以使选择框更加对齐,自己可尝试一下-->
<div class="checkbox">
<label>
<input type="checkbox" value="">吃苹果
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">吃橘子
</label>
</div>
<!-- 单选框 checked可以设置选中的值-->
<div class="radio">
<label>
<input name="sexRadio" type="radio" checked>男
</label>
</div>
<div class="radio">
<label>
<input name="sexRadio" type="radio" >女
</label>
</div>
<!-- 下拉列表 添加multiple 将下拉选项全部显示出来-->
<select class="form-control" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><br>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!-- 静态控件 class="form-control-static-->
<p class="form-control-static">请按照我的格式输入:hello@163.com</p>
<!-- 禁用 fieldset disabled区间内的所有标签都为不可用，不需要一个个去设置-->
<fieldset disabled>
<select class="form-control" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><br>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</fieldset>
<!-- 校验状态 通过不同状态设置不同颜色-->
<form role="form">
<div class="form-group has-warning">
<label>用户ing</label>
<input class="form-control" type="text">
<!-- span承载图片元素 -->
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-success">
<label>用户ing</label>
<input class="form-control" type="text">
</div>
<div class="form-group has-error">
<label>用户ing</label>
<input class="form-control" type="text">
</div>
</form>
</form>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
