bootstrap学习总结

一.表单
.form-group:表单排版整齐,
.form-inline:内联表单使表单一行排列
.form-control:使input内容占据父元素的宽度的100%
.form-horizontal:水平排列的表单,结合栅格类一起使用
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
Email占1/6,后面跟文本框占5/6
.form-control-static:一般是纯文本,与lable占一行
<label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
mail占1/6,后面email@example.com5/6
disabled:无法被选中的,用法(input ... disabled).
也可以 <fieldset disabled>...<fieldset>,...里面的input均无法使用.
readonly:只读(懂就行了)
helptext:帮助文本,颜色较淡
类名:.has-warning、.has-error 或 .has-success:警告,错误,成功三种状态,对应的颜色不同,
还有很多地方用到了:active,info,success,warning,danger他们,都有不同的颜色,主要是帮助屏幕阅读器提示信息的传达
input-sm(xs,md,lg来改变这些控件的大小)
二.按钮
.btn .btn-default:让a标签转化为按钮的样子,按钮添加没多大意义
.btn-default;默认样式
.btn-primary:首选项
.btn-success;.btn-info;.btn-warning;.btn-danger;.btn-active上面有介绍了
.btn-link:链接样式
与上面一样,按钮的大小也是也已改变的:btn-lg...
同样也有禁用状态:disabled

三.图
通过为图片添加 .img-responsive 类可以让图片支持响应式布局。为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
.center-block:水平居中
.img-rounded;添加一个6px的四边圆角
.img-circle:添加一个500px的圆角使图片呈圆形
.img-thumbnail:添加一个阴影效果
四.辅助类:
情境文本颜色:
text-muted,text-primary,text-success.text-info.text-warning,text-danger(颜色类的上一篇文章有介绍);背景颜色将text改为bg
一些象征性图标:.close(×),.creat(下三角,下拉功能时会使用到)
快速浮动:pull-left,pull-right,bootstrap定义的时候添加了!important,所以不会受任何限制的浮动
.center-block:为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。
.clearfix:清除浮动
.show和.hidden来显示隐藏内容
五.图标:
这个在https://v3.bootcss.com/components/#dropdowns-example里面有小图标,加上他的类名可以使用,最好写在<span>标签里面,还要添加aria-hidden="true" 属性来增加可访问性:
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
下拉菜单:.dropdown同样的还有dropup
        <div class="container">
            <div class="dropdown"><!--下拉栏;dropup向上弹出-->
              <button class="btn btn-default dropdown-toggle" type="button"                 data-toggle="dropdown">
                Dropdown
                <span class="caret"></span><!--产生一个三角形的下拉图标,不用亦有                功能-->
              </button>
              <ul class="dropdown-menu"><!--右对齐dropdown-menu dropdown-menu-                right-->
                <li><a href="#">Action</a></li>
                 <li class="dropdown-header">Dropdown header</li><!--标题,不可选,disabled也是不可选中,有禁用按钮-->
                <li role="separator" class="divider"></li><!--分割线且有上下边距                -->
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
        </div>
六.按钮组:
.btn-group多个按钮无间距的并排
<div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Right</button>
</div>
.btn-group-xs():来改变按钮的大小
.btn-group-vertical:按钮垂直排列