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

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

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

一、表单

1.form-control类：含有此类的<input><select><textarea>标签宽度都将变为width:100%，且在表单中通常是将控件配合label标签一起包含在form-group中使用。 

<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>
<div class="form-group">
<label for="exampleInputEmail">Email name</label>
<textarea class="form-control">11111</textarea>
</div>
<div class="form-group">
<label for="select">select form</label>
<select class="form-control">
<option>111</option>
<option>222</option>
</select>
</div>
</form>

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

<!-- form-inline类使表单水平呈现-->
<form class="form-inline"> --其次还有check-inline,radio-inline等
<div class="form-group">
<label class="src-only" for="exampleInputAmount">Amount</label>
<div class="input-group"> --input-group：输入组
<div class="input-group-addon">@</div> --addon:指添加的文本或按钮
<input type="text" class="form-control " id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">@</div>
</div>
</div>
<button type="submit" class="btn btn-primary">search</button>
</form>

效果如下：

如果不加的话，button将被挤到下一行。这里不再贴图，可自行贴码测试。

<!--水平排列的表单 control-label：表示文本采用右对齐 -->
<form class="form-horizontal" >
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="password">
</div>
</div>
</form>

效果如下：

(注意：这里的input文本框应该是占5/6的，我把它的宽度自定义了下为20%)

这里关于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" id="hello"><br>
---产生蓝色光晕
<label for="1111">hello</label><input type="text" id="jiang"><br>
---id不对应，没反应，只有当鼠标放在控件上时，才有蓝色光晕

结合上面的代码看：label中的for属性，应该对应的是控件中的id。作用：保证当鼠标置于label上，相应的控件会产生蓝色光晕。

3.role的作用

   有没有觉得很奇怪，为什么在写表单或者一些控件的时候，要加上role？

   作用：保证读屏软件可以识别。读屏软件即一款帮助智障人士上网的软件，将图片，文字等以语音的形式传达给智障人士，因此为确保读屏软件可以识别，通常没有语义化的标签，或者功能特殊的标签都要写上它。比如：

<a class="btn btn-default" href="#" role="button">link</a>
<!-- 如果链接a作为按钮使用，并用于当前页面触发某些功能，
而不是连接到其它其它页面或当前页面的其余部分，务必设置role="button" -->
原本a标签是表示链接，但这里却当做按钮来使用，读屏软件无法识别，
因此需要加上role="button",让读屏软件知道这是个button按钮。

 4.label,aria-label,aria-labelled的区别？

<div class="form-group">
<input type="text" id="idCard" aria-label="身份证">
<p class="help-block">Example block-level </p> --help-block：用来提示解释说明的文本
</div>
<div class="form-group">
<label for="idCard">身份证</label>
<input type="text" id="idCard" >
<p class="help-block">Example block-level </p>
</div>

效果如下：

前者没有出现可视化的“身份证”字样，两者均是为了便于读屏软件识别出来。只是aria-label被隐藏起来了。

再来看下aria-labelled怎么用，通常是当标签文本已经存在于某一个元素时，使用aria-labelled，它的值为所有读取元素的id,来看下列子：

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
选择下列选项
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">1111</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">22222</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">33333</a>
</li>
</ul>
</div>

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

  <label  for="inputEmail"   class="col-sm-2  control-label  sr-only">Email:</label>
  <label  for="inputEmail"   class="col-sm-2  control-label ">Email:</label>
此时效果是：上面的文字被隐藏起来，仅仅这种区别，其它基本功能不变。

5.disabled类

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

<!-- 引入fieldset的表单，作用：将表单包含在一个块里面 -->
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">禁用的输入框</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
<div class="form-group">
<label for="disabledSelect">禁用的下拉框</label>
<select id="disabledSelect" class="form-control">
<option>禁用不可选择</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 禁用无法选择
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset>
</form>

如果给fileset增加disabled类的话，禁用的表单，只对button   select   input等禁用，而对于其它的项legend属性并不起作用。对比来看，添加legend属性

<!-- 加了lenged属性 -->
<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="颜色变灰，但没被禁用" ></legend>--这里鼠标可以放入输入框中
<div class="form-group">
<label for="disabledTextInput">禁用的输入框</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
<div class="form-group">
<label for="disabledSelect">禁用的下拉框</label>
<select id="disabledSelect" class="form-control">
<option>不可选择</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 无法选择
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset>
</form>
<!-- 禁用的表单，只对button select input等禁用，而对于其它的项legend并不起作用-->

 6.data-toggle data-target  data-spy属性

  html5允许开发者自由为其标签添加属性，这种自定义属性一般用“data-”开头。

  data-toggle:表示数据交互 ，上面列子中点击button,即可切换到下拉菜单。

  data-spy表示：监控

  data-traget：目标。

 这里涉及到js中的事件，不再详解，等到进入bootstrap中的js学习中再来看一下这些问题。表单涉及到的东西还是很多的，总结的差不多这么多，还有补充的，麻烦大家在下面给我留言。

二、按钮类

  这个没啥难点，记住属性类就行了，很好理解。

<a class="btn btn-default" href="#" role="button">link</a>
<button class="btn btn-default btn-lg" type="submit" disabled="disabled">default</button>
<button class="btn btn-primary" type="submit">primary</button>
<button class="btn btn-success" type="submit">success</button>
<button class="btn btn-info btn-block" type="submit">info</button> --btn-block：将其拉伸到父元素的100%
<button class="btn btn-warning" type="submit">warning</button>
<input class="btn btn-danger active" type="button" value="Input">
<input class="btn btn-link" type="button" value="submit">

 效果如下：

三、图片类

 <!--  使图片居中center-block：使内容居中显示 img-rounded ：带有圆角   img-circle：环形    img-thumbnail：给图片加了个外边框-->
<img  src="111.png"  class="img-responsive  center-block  img-rounded"  alt="responsive  image">
<img  src="111.png"  class="img-responsive  center-block  img-circle"  alt="responsive  image">
<img  src="111.png"  class="img-responsive  center-block  img-thumbnail"  alt="responsive  image">
效果如下：

总结一句，个人感觉，表单的作用还是很重要的，其它的一些基本类，这里不再讲解，都比较容易。下一篇将转入css组件的学习：Bootstrap学习笔记之css组件(3)

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• Bootstrap轮播加上css3动画，炫酷到底！
• BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
• Bootstrap中CSS的使用方法
• bootstrap和jQuery.Gantt的css冲突 如何解决
• Bootstrap学习笔记之css组件(3)
• Bootstrap学习笔记之css样式设计(1)
• Bootstrap每天必学之栅格系统（布局）
• bootstrap布局中input输入框右侧图标点击功能
• 谈一谈bootstrap响应式布局
• Bootstrap CSS布局之代码