bootstrap_css命名

谁借莪１个温暖的怀抱￠ 2023-05-29 05:23 11阅读 0赞

# 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%