前端之框架-bootstrap

1.媒体查询

超小屏幕（手机，小于 768px---------------------------xs    @media screen and (max-width: 767px) {        body {            background-color:lightblue;        }    }小屏幕（平板，大于等于 768px）----------------------sm  @media (min-width:768px;) and (max-width: 991px) {    body {        background-color:lightblue;    }}中等屏幕（计算机小型显示器，大于等于 992px）----------md@media (min-width:992px) and (max-width: 1199px) {    body {        background-color:lightblue;    }}大屏幕（计算机大型显示器，大于等于 1200px）-----------lg@media screen and (min-width: 1200px) {    body {        background-color:lightblue;    }}

2.常用class

container 容器row行col-lg-12  col-md-12  col-sm-12  col-xs-12   满行col-lg-6   col-md-6   col-sm-6   col-xs-6    半行col-lg-4   col-md-4   col-sm-4   col-xs-4    四分之一行col-lg-2   col-md-2   col-sm-2   col-xs-2    六分之一行大屏计算机   普通计算机   平板       智能手机文本对齐:    .text-center;    .text-left;    .text-right;块标签对齐:    .center-block;    .pull-left;    .pull-right;排版样式：    h1 .page-header    small    p .lead文字颜色(带有样式滑动效果)    .text-muted 灰色    .text-primary 浅蓝色    .text-success 绿色    .text-info 深蓝色    .text-warning 棕色    .text-danger 红色列表    .list-style 无样式列表    .list-inline 列表浮动到一行排版表格样式    .table    .table-hover    .table-bordered    .table-striped表格的颜色    tr.active 灰色    tr.danger 红色    tr.warning 浅黄色    tr.success 绿色表单样式    div.from-grop表单元素    input.form-control    input.input-lg表单颜色    div.has-success    div.has-error    div.has-warning    radio    checkbox    checkbox-inline水平多选框 显示和隐藏    .show    .hidden    .sr-only表单尺寸    .inuut-lg    .input-sm按钮    button    input type="submit"    input type=button    input type=reset七种样式    .btn btn-default    .btn btn-primary    .btn btn-success    .btn btn-info    .btn btn-warning    .btn btn-danger    .btn btn-link按钮尺寸    .btn-lg    .btn-sm    .btn-xs按钮变成块元素    .btn-block按钮的活动状态    .active按钮的禁用状态    .disabled图片  img图片    .img-rounded    .img-circle    .img-thumbnailimg响应式图片    .img-responsive关闭叉号    .close (&times)向下的小箭头    .caret

3.常用组件

下拉菜单    div.dropdown    button[data-toggle=dropdown]    ul.dropdown-menu    li.dropdown-header    li.disabled    li.divider按钮组    div.btn-group按钮工具栏    div.btn-toolbar按钮尺寸    div.btn-group-lg垂直排列    div.btn-group-vertical按钮组中的下拉菜单    div.btn-group    button    button    div.btn-group