Bootstrap全局CSS样式之表单
.form-control——将单独的表单控件赋予一些全局样式,如默认宽度width:100%。
.form-group——包裹表单控件,获得最好的排列;
.form-inline——将表单设置为内联表单,仅仅适用于视口(viewport)至少在 768px 宽度时;
.sr-only——将label标签隐藏;
.help-block——用于设置提示文本;
.form-horizontal——能够将label标签和控件组水平并排布局;
.radio-inline、.checkbox-inline——将对应控件水平排列。
.form-control-static——将p元素设置为静态控件。
.has-error、.has-warning、has-success——分别相应校验状态。
.has-feedback——为控件加入辅助图标(与图标引用类联合使用);
.input-lg——创建大一些的表单控件。
.input-sm——创建小一些的表单控件;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>CSS全局样式_栅格系统</title><!--<link rel="stylesheet" href="bootstrap.min.css" type="text/css">--><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><style type="text/css"></style>
</head>
<body>
<div class="container"><form role="form" class="form-inline"><div class="form-group"><label class="sr-only">username</label><input type="text" class="form-control" placeholder="username/邮箱/手机号"/></div><div class="form-group"><label class="sr-only">password</label><input type="password" class="form-control" placeholder="输入6-14位英文和数字组合password"/></div><div class="form-group"><label class="sr-only">生日</label><input type="date" class="form-control" placeholder="出生年月"/></div><div class="form-group"><label class="sr-only">上传头像</label><input type="file" class="form-control input-lg"/><p class="help-block">选择您须要的头像文件</p></div></form><form role="form" class="form-horizontal"><div class="form-group"><label class="col-sm-4 control-label">username</label><div class="col-sm-8"><input type="text" class="form-control" placeholder="username/邮箱/手机号"/></div></div><div class="form-group"><label class="col-sm-4 control-label">password</label><div class="col-sm-8"><input type="password" class="form-control" placeholder="输入6-14位英文和数字组合password"/></div></div><div class="form-group"><label class="col-sm-4 control-label">生日</label><div class="col-sm-8"><input type="date" class="form-control" placeholder="出生年月"/></div></div><div class="form-group"><div class="col-sm-offset-4 col-sm-8"><div class="checkbox"><label><input type="checkbox"/>记住password</label></div></div></div><div class="form-group"><div class="col-sm-offset-4 col-sm-8"><button class="btn btn-default">登录</button></div></div></form><form role="form" class="form-horizontal"><div class="form-group"><label>喜欢的球队</label><div class="checkbox"><label><input type="checkbox"/>广州恒大</label><label><input type="checkbox"/>上海上港</label><label><input type="checkbox"/>北京国安</label></div></div><div class="form-group"><label>性别</label><div class="radio"><label><input type="radio" checked name="gender"/>男</label><label><input type="radio" name="gender"/>女</label></div></div><div class="form-group"><label>所属城市</label><select class="form-control" multiple><option>北京</option><option>上海</option><option>广州</option></select></div><div class="form-group"><label class="sr-only"></label><textarea class="form-control" rows="5" placeholder="请文明用语"></textarea></div><p class="form-control-static">请依照邮箱格式输入:hello@163.com</p><div class="form-group"><label>password</label><input class="form-control" type="password" disabled/></div><div class="form-group"><label>昵称</label><input class="form-control" type="text" placeholder="胖虎" readonly/></div><div class="form-group has-error has-feedback"><label>username</label><input class="form-control" type="text" /><span class="glyphicon glyphicon-remove form-control-feedback"></span></div><div class="form-group has-success has-feedback"><label>username</label><input class="form-control" type="text" /><span class="glyphicon glyphicon-ok form-control-feedback"></span></div><div class="form-group has-warning has-feedback"><label>username</label><input class="form-control" type="text" /><span class="glyphicon glyphicon-warning-sign form-control-feedback"></span></div></form>
</div></body>
</html>
转载于:https://www.cnblogs.com/yangykaifa/p/7001634.html
Bootstrap全局CSS样式之表单相关推荐
- Bootstrap全局css样式_表单
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 前端基础之《Bootstrap(6)—全局CSS样式_表单》
一.基本 1.基本表单(.form-group) 2.输入框的样式(.form-control) 3.表单浅灰色占位符(placeholder属性) 4.单选框(.checkbox) 5.多选框(.r ...
- bootstrap全局css样式
一.富文本编辑器 富文本编辑器,RichTextEditor,简称RTE,是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于比如谷歌.火狐效果都非常不错, 在功能的丰富性来说,还是IE强些(但 ...
- Bootstrap全局css样式的使用
教程目录 0x00 教程内容 0x01 准备环境 1. 新建HTML文件 2. 用浏览器打开 0x02 Bootstrap全局样式的使用 1. 引入Bootstrap样式资源 2. 修改css样式 3 ...
- Bootstrap全局css样式_按钮
链接被作为按钮使用时的注意事项 如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接 当前页面中的其他部分,那么,务必为其设置 role ...
- Bootstrap全局css样式_图片,响应式工具
响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.<!DOCTYPE html> <html lang=& ...
- Bootstrap全局CSS样式之表格
.table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...
- Bootstrap全局css样式_表格
条纹状表格 通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式.<!DOCTYPE html> <html lang=" ...
- Bootstrap全局css样式_代码
内联代码 通过 <code> 标签包裹内联样式的代码片段.<!DOCTYPE html> <html lang="en"> <head&g ...
最新文章
- 专访周志华、宋继强:高端AI人才要具备哪些素质?深度学习的局限性和未来?...
- numpy 数组 最大值、最小值、中位数、均值、标准差、方差、总和、排序、去重
- WPF的Timer控件的使用
- android自定义离线地图,MapBox GL Android:已下载但未使用的自定义磁贴源的离线地图...
- 浅谈JavaScript错误
- 你在京东购买的商品,是怎么出现在抖音里面的?
- 【计算机类】大学生计算机专业电子书汇总
- [剑指offer]面试题第[57]题[Leetcode][第167题][JAVA][和为s的两个数字][两数之和][HashSet][二分][双指针]
- 英语四级c语言,2017年大学英语四级精选试题练习
- 软件测试面试技术方法(一)
- 游戏测试永乐大典——服务端架构,游戏服务器架构,游戏数据库设计
- 网络安全--安全攻防概述
- 替换空格——python
- 10-25 查询选修张老师讲授所有课程的学生
- Hi3861网络通信——UDP收发
- 计算机更新一直在57转怎么办,win10系统更新到57%出现死机的原因和解决方法
- h5调起app的方法;app调起vue中的某个方法
- 烽火狼烟丨Fastjson反序列化漏洞风险提示
- 思维层次越高的人越爱看这几个公众号!
- java kdj macd_MACD、BOLL、KDJ 三大组合精准把握趋势与买卖!