bootstrap课程6 bootstrap的表单注意事项有哪些
bootstrap课程6 bootstrap的表单注意事项有哪些
一、总结
一句话总结:
1、bootstrap中的表单中的每一项是什么样的形式?
div.form-group>label +input的形式
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
2、form里面的.form-control 类的 input、textarea 和 select 元素都将被默认设置宽度属性为 width: 100%;这样在手机端字太小的时候需要加什么?
meta viewpoint 这个,这样字就变大了
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
3、上传文件框怎么做到好看?
用一个图片来代替,把真正的上传文件框隐藏即可
其实可以去网上找好看的上传样式,直接把样式或者图片弄过来即可
4、给一个div设置col-sm-2和col-md-2的区别是什么?
col-sm-2样式在更小的时候才堆叠,换成xs是始终不发生堆叠,也就是总是水平排列
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None (自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
槽(gutter)宽 | 30px (每列左右均有 15px) | |||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 |
5、如何给表单里面的所有input,包括button都添加disabled或者readonly属性?
别一个个来,那样太麻烦了,直接用<fieldset disabled></fieldset>把需要disabled的属性的包起来
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
6、什么是fieldset?
就是一块区域,上面有字,
fieldset+legend的形式,legend就是上面提示的字,这个框框上面提示的字
7、表单用户填写之后的feedback效果是什么?
就是用户填写对了之后表单后面出现一个对勾,填写错了之后表单后面出现一个叉叉
在form-group上面添加 has-feedback 实现
8、表单如何动态显示用户输入正确还是输入错误(比如注册里面的用户名是否已经被注册)?
ajax+表单的feedback效果+校验色,也就是输入不对之后后面出现比如小叉叉
可以去参照云之梦的官网
二、bootstrap的表单注意事项有哪些
1、相关知识
.form-group
.form-control
.checkbox
.radio
.form-inline
.input-group
.input-group-addon
.form-horizontal
.control-label
.form-control-static
[readonly]
[disabled]
fieldset
legend
bootstrap课程6 bootstrap的表单注意事项有哪些的更多相关文章
- Bootstrap入门(五)表单
Bootstrap入门(五)表单 先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="stylesheet ...
- bootstrap课程5 bootstrap中的组件使用的注意事项是什么
bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...
- bootstrap课程1 bootstrap为什么这么火
bootstrap课程1 bootstrap为什么这么火 一.总结 一句话总结:响应式,样式多,功能多. 1.bootstrap通过什么药实现响应式? 响应式web布局是让用户通过不同尺寸的浏览器都可 ...
- bootstrap课程13 bootstrap的官方文档中有一些控件的使用有bug,如何解决这个问题
bootstrap课程13 bootstrap的官方文档中有一些控件的使用有bug,如何解决这个问题 一.总结 一句话总结:因为演示是正常的,所以检查演示效果的代码,把那一段相关的都弄过来就可以了 ...
- bootstrap课程9 bootstrap如何实现动画加载进度条的效果
bootstrap课程9 bootstrap如何实现动画加载进度条的效果 一.总结 一句话总结:在bootstrap进度条的基础上添加js(定时器),动态的改变进度条即可.很简单的. 1.路径导航是什 ...
- bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何
bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结 一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...
- bootstrap课程4 bootstrap的css样式有哪些内容需要注意
bootstrap课程4 bootstrap的css样式有哪些内容需要注意 一.总结 一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...
- bootstrap课程3 bootstrap中常用的排版样式有哪些
bootstrap课程3 bootstrap中常用的排版样式有哪些 一.总结 一句话总结:bootstrap里面对常用表情比如p.h1.code等html中的常用表情都修改了样式,照着手册用就好,样式 ...
- bootstrap课程2 bootstrap的栅格系统的主要作用是什么
bootstrap课程2 bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row ...
随机推荐
- 基于r-Kernel的LiteOS操作系统
LiteOS是应用于资源受限的传感网络的一种基于线程的类UNIX操作系统.也就是说它跑在存储空间和RAM有限的超低电压微控制器上,这也是吸引我关注它的原因(在超低电压下系统更易出错).它採用r-ker ...
- 基于二叉树和双向链表实现限制长度的最优Huffman编码
该代码採用二叉树结合双向链表实现了限制长度的最优Huffman编码,本文代码中的权重所有採用整数值表示.http://pan.baidu.com/s/1mgHn8lq 算法原理详见:A fast al ...
- RvmTranslator6.0
RvmTranslator6.0 eryar@163.com 1. Introduction RvmTranslator can translate the RVM file exported by ...
- 10.axis实现webservices分布式通信
转自:https://www.aliyun.com/jiaocheng/310112.html 分布式通信原理 基本原理:stub和skeleton作为客户端和服务端传输的中介,stub和skelet ...
- Spark Tachyon的命令行使用
Tachyon命令行使用 Tachyon接口说明 接口操作示例 copyFromLocal copyToLocal ls和lsr count cat mkdir.rm.rmr和touch pin和un ...
- js闭包注意事项
/关于闭包使用应该注意的 // 1 闭包在父函数每次调用都会产生不同的闭包 // 2 闭包中子函数使用父函数变量的变量不是复制 是引用 // 3 闭包在循环中使用
- DG archive gap
什么是archive gap Archive Gap就是standby端日志应用的过程中丢失的一段范围的redo.典型的发生在standby端不能接收primary的redo信息或者接收后不能应用这些 ...
- useradd---创建的新的系统用户
useradd命令 useradd命令用于Linux中创建的新的系统用户.useradd可用来建立用户帐号.帐号建好之后,再用passwd设定帐号的密码.而可用userdel删除帐号.使用user ...
- 【2017 Multi-University Training Contest - Team 3】RXD and math
[Link]: [Description] [Solution] 发现1010mod(109+7)=999999937; 猜测答案是nk 写个快速幂; 注意对底数先取模; [NumberOf WA] ...
- new不抛出异常nothrow与new_handler
可以看这里: http://blog.csdn.net/huyiyang2010/article/details/5984987 现在的new是会抛出异常的,bad::alloc 如果不想抛出异常两种 ...