BootStrap学习笔记-4

来源：互联网发布：muscletech淘宝真假编辑：程序博客网时间：2024/06/08 18:32
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>
0 0