首先，很感谢各位园友对我的支持，关于bootstrap的学习总结，我会持续更新，如果有写的不对的地方，麻烦各位给我指正出来哈。关于上篇文章，固定布局和流式布局很关键，如果还不太清楚的可以再看看我写的
这次我们来看看bootstrap中关于样式的一些具体关键的类以及如何使用这些类，类与类之间的区别，另外涉及到的一些相关类，举列子的时候解释。
一：表单
1:form-control类：含有此类的<input><select><textarea>标签宽度都将变为width:100%，且在表单中通常是将控件配合label标签一起包含在form-group中使用。
Email addressEmail name11111select form111222
根据上面代码引申出不同的类，我们一行行的来看。给form添加form-inline类（将控件放在一行） | form-horizontal类(标签在左，控件在右)，后者借助标签。
Amount@@search
效果如下：
如果不加的话，button将被挤到下一行。这里不再贴图，可自行贴码测试。
Email:Password:
效果如下：
这里关于form-horizontal，要配合bootstrap的栅格系统进行。
在<form>元素上使用类名“form-horizontal”主要有以下几个作用：
1：设置表单控件padding和margin值。上面的代码可在调试控制台里面看到，为padding-left:50px。
2：改变“form-group”的表现形式，类似于网格系统的“row”。
2：label的作用
<label for="hello1">hello</label><input type="text" ><br> ---产生蓝色光晕
<label for="1111">hello</label><input type="text" ><br> ---id不对应，没反应，只有当鼠标放在控件上时，才有蓝色光晕
结合上面的代码看：label中的for属性，应该对应的是控件中的id。作用：保证当鼠标置于label上，相应的控件会产生蓝色光晕。
3：role的作用
有没有觉得很奇怪，为什么在写表单或者一些控件的时候，要加上role？
作用：保证读屏软件可以识别。读屏软件即一款帮助智障人士上网的软件，将图片，文字等以语音的形式传达给智障人士，因此为确保读屏软件可以识别，通常没有语义化的标签，或者功能特殊的标签都要写上它。比如：
link
原本a标签是表示链接，但这里却当做按钮来使用，读屏软件无法识别，因此需要加上role="button",让读屏软件知道这是个button按钮。
4：label,aria-label,aria-labelled的区别？
Example block-level 身份证Example block-level
效果如下：
再来看下aria-labelled怎么用，通常是当标签文本已经存在于某一个元素时，使用aria-labelled，它的值为所有读取元素的id,来看下列子：
选择下列选项 11112222233333
此时ul中包含的有li，且是在button中控制的，所以此时用aria-labelledby比较合适。简单来说，三者之间，只是使用的范围不一样，基本功能是相同的，都是为了便于读屏软件的识别。说到隐藏的类，就要提到sr-only类了。我们来看下。
Email: <label for="inputEmail" class="col-sm-2 control-label ">Email:</label>
此时效果是：上面的文字被隐藏起来，仅仅这种区别，其它基本功能不变。
5：disabled类
在表单中，这个类要注意，这里我们对比来看。
禁用的输入框禁用的下拉框不可选择 禁用无法选择 提交
如果给fileset增加disabled类的话，禁用的表单，只对button select input等禁用，而对于其它的项legend属性并不起作用。对比来看，添加legend属性
禁用的输入框禁用的下拉框不可选择 无法选择 提交
6： data-toggle data-target data-spy属性
html5允许开发者自由为其标签添加属性，这种自定义属性一般用“data-”开头。
data-toggle:表示数据交互 ，上面列子中点击button,即可切换到下拉菜单。
data-spy表示：监控
data-traget：目标。
这里涉及到js中的事件，不再详解，等到进入bootstrap中的js学习中再来看一下这些问题。表单涉及到的东西还是很多的，总结的差不多这么多，还有补充的，麻烦大家在下面给我留言。
二：按钮类
这个没啥难点，记住属性类就行了，很好理解。
linkdefaultprimarysuccessinfowarning
效果如下：
三：图片类
效果如下：
总结一句，个人感觉，表单的作用还是很重要的，其它的一些基本类，这里不再讲解，都比较容易。下一篇将转入css组件的学习。
作者：向婷风
出处：
如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者
本人同意 转载文章之后必须在 文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。
相关文章
精彩导读
热门资讯
关注我们
