1.控件
●.form-control(适中)
●.input-lg（较大）
●.input-sm（较小）
●输入框 text
演示代码如下
<div class="container"> <!-- 文本框 --> <div class="row"> <div class="col-sm-3"> <input type="text" name="" id="" /> <input type="text" name="" id="" class="form-control" /> <input type="text" name="" id="" class="form-control input-lg" /> <input type="text" name="" id="" class="form-control input-sm" /> </div> </div> </div>
关于复选框 checkbox
●垂直显示： .checkbox
●水平显示： .checkbox-inline
<div class="row"> <input type="checkbox" >游戏 <input type="checkbox" >学习 <br> <!-- 垂直显示 --> <div> <div class="checkbox"> <label><input type="checkbox" >游戏</label> </div> <div class="checkbox"> <label><input type="checkbox" >学习</label> </div> </div> <!-- 水平显示 --> <div> <label class="checkbox-inline"> <input type="checkbox" >游戏 </label> <label class="checkbox-inline"> <input type="checkbox" >学习 </label> </div> </div>
单选框 radio
●垂直显示： .radio
●水平显示： .radio-inline
关于按钮框
使用 button 实现
基础样式： btn
附加样式：btn-primary，btn-info ， btn-success， btn-warning ，btn-danger， btn-link，btn-default
按钮大小：使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
<div class="row"> <button>按钮</button> <hr> <button class="btn">按钮</button> <button class="btn btn-primary">按钮</button> <button class="btn btn-info">按钮</button> <button class="btn btn-danger">按钮</button> <button class="btn btn-warning">按钮</button> <button class="btn btn-success">按钮</button> <button class="btn btn-link">按钮</button> <hr> <button class="btn btn-primary btn-xs">按钮</button> <button class="btn btn-info btn-sm">按钮</button> <button class="btn btn-danger btn-lg">按钮</button> <hr> <a href="##" class="btn btn-info">a标签按钮</a> <span class="btn btn-success">span标签按钮</span> <div class="btn btn-warning">div标签按钮</div> <br> <!-- 按钮禁用--> <!-- 样式上禁用 --> <button class="btn btn-warning disabled" onclick="alert(1)">按钮</button> <!-- 禁用 --> <button class="btn btn-success" disabled="disabled" onclick="alert(1)">按钮</button> </div>
2.布局
html 里面的 role 本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。
role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button
比如，
<div role="checkbox" aria-checked="checked"></div>
辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。
role是无障碍阅读，是给有阅读障碍的人设置的属性，有阅读障碍的人可以用读屏软件来解析，跟正常人没多大关系。可以不设置，不设置的话读屏软件就无法解析，有阅读障碍的人也就"看"不了了。
既然是个良好的编程习惯,那么是不是所有标签都写role比较好呢?
比如
<div role = "div"></div>
正常的文本本来就可以读，但是表单中有时候输入密码框前面并没有密码的提示，提示在框内用Placeholder写的，正常人知道这里输入密码，可是读不出来，这时候这个东西就起作用了。
属性role的存在，是为了告诉Accessibility类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这是一个按钮。在html5元素内，标签本身就是有语义的，因此role是不必添加的，至少是不推荐的，但是bootstrap的案例内很多都是有类似的属性和声明的，目的是为了兼容老版本的浏览器（用户代理），如果你的代码使用了html5标签，并且不准备支持老版本的浏览器，不妨不使用role标签。
