bootstrap_css命名

bootstrap 命名

清空默认样式

布局

.container 设置为容器：水平方向居中，宽度部位100% 左右内边距为15px 高度没有
.container-fluid 宽度为100%的容器 没有外边距 内边距为左右15px 上下0px 没有高度

.from-group 表单组建；默认宽度100%
.from-inline 横向的表单； display ：inline-block
.form-control 表示表单控件
.examInputEmail 邮箱
.examInputPassword 密码
.examInputUsername 用户名
.select 选择框
.selectFile 选择文件
.inputSubmit 按钮提交
.help-block 文件路径提示信息
.input-group 输入框组件

• input-group-addcon
• input-group-add 加
• input-group-decaline 减
• input-gropu-addIcon 添加图标

水平排列表单
.form-horizontal 可以是Lable 水平排列

内敛单选多选款 .checkbox-inline
多选：
.inlineCheckbox
单选 .inlineRadioOption

不带文本的选择框 .chexkbox
正方形 .blankCheckbox
原型： .blankRadio

静态控件
control-label-static

禁止输入 #disableInput

校验样式
has-success 成功 字体 边框 绿色
has-warning 警告 黄色
has-error 失败 红色

尺寸
。input-lg 大输入框
.input-sm 小输入框

图片命名方式

img-rounded 圆角
img-circle 圆形图片
img-thumbnail 有边框样式

辅助类：

text-muted 默认
text-suceess
text-primary
text-info
text-danger
text-warning

 /* 样式 */
 p{
     margin: 0 0 10px;
 }
 .text-muted{
  color:#777}
  .text-success{
      color:green;
  }

###情景背景色
.bg-info
.bg-success
.bg-primary
.bg-warning
.bg-danger

.bg-xxx{
   /* yellow 是被改变的值 */
   background-color:yellow;
}

~~~
### 关闭按钮
.close  浮动到右侧 
button.close

###  caret  倒三角
 
### 让容器块居中
.center-block
~~~CSS


.center-block{
    display:block;
    margin: 0 auto;
}
~~~

### 清除浮动
.clearfix  使用伪类方式清除浮动————————————>自己封装


###  强制显示隐藏
.show  显示   ! important   display:block
.hidden  隐藏  ! important   display:none
.invisible  visibility: hidden;



### 文字隐藏
~~~CSS
.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}
~~~

### 排版
.text-left 文字左对齐
.text-center 文字居中对齐
.text-right  文字右对齐
.text-justify 两端对齐
.text-nowrap   不换行

.text-lowercase 英文小写
.text-uppercase 英文大写
.text-capitalize 英文首字母大写


### 缩写
~~~css
abbr[title], abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted #777;
~~~
.list-inline
~~~css
.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}
.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}
~~~

### 用户输入
~~~CSS
kbd {
    padding: 2px 4px;
    font-size: 90%;
    color: #fff;
    background-color: #333;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
~~~


## 表格

基础类

.table  必须放在 table标签
1.清空表格默认样式
~~~css
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
table {
    background-color: transparent;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
/* 让表格有上边框线  选中所有的th td */
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

~~~
### 条状表格
/* odd 奇数  even  偶数   选中表体中奇数行加背景颜色 */
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

### 边框表格  
.table-bordered
 ~~~css
 .table-bordered{
      border:1px soild red;
 }

 ### 表格悬停样式
 .table-hover
 .table-hover> tr:hover{
    background-color:#ccc;
 }
 ###紧缩表格
 .table-conensed 缩小表格的内边距






 状态
 仅支持表格
 ~~~~css
table > thead > tr > td.warning,
.table > tbody > tr > td.warning, 
.table > tfoot > tr > td.warning, 
.table > thead > tr > th.warning, 
.table > tbody > tr > th.warning, 
.table > tfoot > tr > th.warning, 
.table > thead > tr.warning > td, 
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td, 
.table > thead > tr.warning > th, 
.table > tbody > tr.warning > th, 
.table > tfoot > tr.warning > th {
    background-color: #fcf8e3;
}

响应式表格

.table-responsive

/实现横向滚动表格/
@media screen and (max-width: 767px){
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap;
}
}

栅格系统

1.栅格应用的是，媒体查询技术
2.将一个容器等分为12小份
3.应用在布局上
原理： 主要是通过设置元素的宽度完成 单位为百分比；
–当一个元素只有一个col-xxx时，不看屏幕尺寸，只看元素宽度
col-xxx-12 宽度为100%
–当一个元素有多个col-xx时候，先看屏幕尺寸，再看元素宽度
col-xx-6 宽度为50%

栅格大类：col-
尺寸划分
xs 小于768
sm 大于等于768
md 大于等于992
lg 大于1200
元素宽度划分
1 =8.33333333%

2 =16.66666667%

3 = 25%

4 =33.33333333%

5 = 41.66666667%

6 =50%

7 =58.33333333%

8 = 66.66666667%

9 =75%

10 = 83.33333333%;

11 = 91.66666667%;

12 100%

相对定位

因为.col-xx-num 都有Position:relative；

.col-xxx-push-num: 设置 left 相对自身位置往右移动

.col-xx-pull-num 设置 right 相对自身其实位置 往左移动

所有：想要.col-xx-push-num col-xx-pull-num 起效；必须填 col-xx-num

列偏移

原理，通过设置元素左边边距，移动元素
margin-left:
col-xx-offset-1 =8.33333333%

offset-2 =16.66666667%

offset-3 = 25%

offset-4 =33.33333333%

offset-5 = 41.66666667%

offset-6 =50%

offset-7 =58.33333333%

offset-8 = 66.66666667%

offset-9 =75%

offset-10 = 83.33333333%;

offset-11 = 91.66666667%;

基础类.container

row 行
column 列
可以嵌套
将每个容器进行份数等分
.col-xs-12 小于768px
.col-sm-12 768px
.col-md-12
.col-lg-12 大于1200px

总结
表格：中独有的类名，是通过关系选择器选择的画面聚到才可以使用
同理可证 表单 辅助等一样