bootstrap中各类表单的应用
来源:互联网 发布:风行电视 软件下载 编辑:程序博客网 时间:2024/06/14 07:26
一.bs中常用表单样式
.form-control——将单独的表单控件赋予一些全局样式,如默认宽度width:100%;
.form-group——包裹表单控件,获得最好的排列;
.form-inline——将表单设置为内联表单,只适用于视口(viewport)至少在 768px 宽度时;
.form-horizontal——可以将label标签和控件组水平并排布局;
<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button></form>
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button></form>
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div></form>
.sr-only——将label标签隐藏;
.help-block——用于设置提示文本;
.radio-inline、.checkbox-inline——将相应控件水平排列;
.form-control-static——将p元素设置为静态控件;
.has-error、.has-warning、has-success——分别对应校验状态;
.has-feedback——为控件添加辅助图标(与图标引用类联合使用);
.input-lg——创建大一些的表单控件;
.input-sm——创建小一些的表单控件;
.input-lg/.input-sm的应用
<div class="widget-body"><div class="widget-main"><input type="text" id="spinner1" /><div class="space-6"></div>
<input type="text" class="input-sm" id="spinner2" /><div class="space-6"></div><input type="text" id="spinner3" /><div class="space-6"></div><input type="text" class="input-lg" id="spinner4" /></div></div>
阅读全文
0 0
- bootstrap中各类表单的应用
- html中bootstrap表单内元素的各类属性简析
- Bash编程中各类括号的应用
- iOS 中各类设计模式的应用
- Rails 中应用bootstrap datatables的应用
- bootstrap导航栏、下拉菜单、表单的简单应用
- bootstrap的表单标签
- Bootstrap的表单
- Bootstrap的表单控件
- bootstrap-不同的表单
- shell/bash编程中各类括号的应用
- shell/bash编程中各类括号的应用
- Bootstrap中水平排列的表单form-inline
- bootstrap中form表单属性role="form"的作用
- 各类session监听器的应用
- bootstrap表单的其他组件
- bootstrap表单的其他组件
- 关于bootstrap的表单元素
- 查找数组里是否包含元素,如果包含,则返回TRUE
- Sicily 会议安排 | 算法期末机考模拟题
- 在读取Excel时,出现外部表不是预期的格式
- 位运算之求整数二进制表示中1的个数
- 198 House Robber
- bootstrap中各类表单的应用
- Java语言高编——面向对象-继承
- artQuickGenericJniTrampoline
- MySQL启动关闭方式总结(Linux系统)
- java组合模式
- iOS NSUserDefaults数据保存报错:Attempt to set a non-property-list object...
- elasticsearch底层引擎替换之索引创建+文档添加
- 成员属性的值要初始化否则有可能程序崩溃
- 订单