Bootstrap学习笔记之css样式设计(2)

首先，很感谢各位朋友对我的支持，关于bootstrap的学习总结，我会持续更新，如果有写的不对的地方，麻烦各位给我指正出来哈。关于上篇文章，固定布局和流式布局很关键，如果还不太清楚的可以再看看我写的：

这次我们来看看bootstrap中关于样式的一些具体关键的类以及如何使用这些类，类与类之间的区别，另外涉及到的一些相关类，举列子的时候解释。

一、表单

1.form-control类：含有此类的标签宽度都将变为width:100%，且在表单中通常是将控件配合label标签一起包含在form-group中使用。</p> <div class="jb51code"> <pre class="brush:xhtml;"> <form role="form"> <!-- 所有设置了form-control类的input,textarea,select,元素都将被默认为width:100% --> <div class="form-group"> --form-group:一般讲标签和空间包裹在form-group中使用 <label for="exampleInputEmail">Email address</label> <input type="email" class="form-control" id="exampleInputEmail" placeholder="input"> </div> <p><div class="form-group"><br /> <label for="exampleInputEmail">Email name</label><br /> <textarea class="form-control">22222

<div class="form-group">
<label for="select">select form
<select class="form-control">

111 222

根据上面代码引申出不同的类，我们一行行的来看。给form添加form-inline类（将控件放在一行） | form-horizontal类(标签在左，控件在右)，后者借助标签。

此时ul中包含的有li，且是在button中控制的，所以此时用aria-labelledby比较合适。简单来说，三者之间，只是使用的范围不一样，基本功能是相同的，都是为了便于读屏软件的识别。说到隐藏的类，就要提到sr-only类了。我们来看下。

此时效果是：上面的文字被隐藏起来，仅仅这种区别，其它基本功能不变。

5.disabled类

在表单中，这个类要注意，这里我们对比来看。